CodeWinds - Leading edge web developer news and training | javascript / React.js / Node.js / HTML5 / web development - Jeff Barczewski

Spike explains the different categories of Isomorphic apps and how this is accomplished. He mentions various tools for facilitating sharing across browser, server, and devices. He shares how Airbnb, Yahoo, Flickr, Facebook, Instagram are using some of these technologies today. Finally, he provides resources to help others learn and get started.

1. Episode Info
2. Episode Notes
   1. Links
   2. Video / Slides

Episode Info

• Episode: CW 009
• Published: July 16th, 2014
• Tags: nodejs, js,jsconf
• Duration: 13:48

Episode Notes

• 01:50 - Isomorphic definition
• 03:15 - Tools for sharing code across browser and server
• 04:00 - Browserify for using Node.js packages in browser
• 05:20 - Categories of Isomorphic code
• 06:20 - Superagent - HTTP client
• 07:08 - Airbnb’s Rendr - render Backbone apps on client and server
• 07:30 - Compelling reasons for building isomorphic apps
• 08:00 - Flickr main page isomorphic, modown project
• 08:39 - Meteor framework
• 09:25 - Getting started with Isomorphic JavaScript
• 10:10 - ReactJS - client and server rendering, can attach event handlers to server rendered page
• 10:40 - Facebook and Instagram using ReactJS for Isomorphic apps
• 11:30 - Following Spike Brehm and Isomorphic JavaScript

Links

• Spike Brehm’s Isomorphic Resources
• Airbnb blog - Isomorphic JavaScript: The Future of Web Apps
• Isomorphic Tutorial
• Isomorphic JavaScript website
• Nodejitsu - Scaling Isomorphic Javascript Code
• Browserify - packaging NPM modules for the browser
• Superagent - HTTP client for browser and Node.js
• Airbnb’s Rendr - Rendering Backbone apps on the client and server
• Yahoo’s Modown project
• Meteor framework
• ReactJS framework for building user interfaces
• Spike Brehm Twitter
• Jeff Barczewski, Founder, CodeWinds twitter
• CodeWinds twitter

Video / Slides

Watch Spike Brehm’s JSConf talk on YouTube

Slides from Spike Brehm JSConf 2014: Building Isomorphic Apps - Slideshare

In this episode, Jeff interviews Pete Hunt, a software engineer with Facebook about Facebook’s hot new open source js UI framework, React. React is a fresh look at how to build UI’s, attempting to improve on the limitations of the past. React gets some of its inspiration from how game engines acehieve awesome performance in their rendering pipeline.

React can be used in the browser and on the server with node.js so you can have single page apps that are fully indexable by the search engines and have instant load characteristics. React has pluggable backends so it can be used to target the DOM, HTML, canvas, SVG, and other formats.

The ideas and concepts behind React are very compelling, I encourage you to give it a look.

1. Episode Info
2. Episode Notes
   1. Interview timeline
3. Notable users of React
4. Resources
   1. Links from Show
   2. Online Training Courses
   3. Tutorials
   4. Other

Episode Info

• Episode: CW 004
• Published: March 17th, 2014
• Tags: js, nodejs,UI,framework
• Duration: 42:17
• Updated: 2014-05-01 Added links to great articles by Reto Schläpfer

Episode Notes

Interview timeline

• 2:08 - What is React and why might people want to use it?
• 3:08 - The symbiotic relationship of ClojureScript and React
• 4:54 - The history of React and why it was created
• 9:43 - Updating web page with React without using data binding, a better approach inspired by game engines
• 13:11 - Using the virtual DOM to change the browser DOM
• 13:57 - Programming with React, render target HTML, canvas, other. Javascript is reference implementation of React. Node.js, ClojureScript, other environments.
• 16:45 - Working with designers. Contrasted with Ember and AngularJS. React encourages building a component architecture.
• 21:45 - JSX Compiler bridging HTML and React javascript
• 23:50 - Autobuilding JSX and in browser tools for React
• 24:50 - Tips and tricks to working with React, suggestions for getting started with React
• 27:17 - Rendering HTML on the server with Node.js. Pluggable React rendering backends (DOM, HTML, canvas, mixed mode static HTML + background JS binding). Better single page app performance
• 29:20 - React evolved through survival of the fittest at Facebook
• 30:15 - Ideas for having state on server and client, possibilities for using React over web sockets.
• 32:05 - React-multiuser - distributed shared mutable state using Firebase
• 33:03 - Better debugging with React using the state transitions, rewinding the state to replay the events
• 34:08 - Differences from Web Components
• 34:25 - Notable companies using React - Khan Academy, Oscars (Neartime.com), Largest bank in Russia, Facebook, Instagram
• 35:16 - Could a React backend plugin be created to target PDF?
• 36:30 - Future of React, what’s next?
• 39:38 - Contributing and getting help

Notable users of React

• Instagram.com is 100% built on React, both public site and internal tools.
• Facebook.com’s commenting interface, business management tools, Lookback video editor, page insights, and most, if not all, new JS development.
• Khan Academy uses React for most new JS development.
• Shirtstarter is 100% built on React.
• Sberbank, Russia’s number one bank, is built with React.
• The New York Times’s 2014 Red Carpet Project is built with React.

Resources

Links from Show

• Main Reactjs.org site
• Github Repo for Reactjs Source
• Pete Hunt’s Twitter
• Khan Academy question editor GitHub repo written in React
• irc: #reactjs on freenode

Online Training Courses

• CodeWinds React.js Fundamentals - The premier online course and community where you learn React.js by pragmatically building a real web app while applying TDD/BDD principles

“Highly recommended!”
- Kevin Old, Senior Software Engineer “Look no further, the React.js Fundamenta...

Nico Bevacqua, the author of JavaScript Application Design which is in early access at Manning, explains more about JS continuous development, integration, and deployment. We discuss build tools, module systems, component architectures, MVC, and finally the experience of writing a traditionally published book.

1. Episode Info
2. Episode Notes
   1. JavaScript Application Design - Manning
   2. Links
   3. Video / Slides

Episode Info

• Episode: CW 010
• Published: August 8th, 2014
• Tags: nodejs, js,jsconf
• Duration: 29:10

Episode Notes

• 01:35 - Why build first?
• 03:25 - Continuous development
• 05:00 - Continuous Integration - Travis-CI
• 05:20 - Continuous Deployment - Heroku, Amazon EC2
• 06:20 - Build tools - grunt, gulp, npm - determining the best choice
• 11:35 - JS Modules - AMD, CommonJS (CJS), ES6 Modules, RequireJS, Browserify, AngularJS DI
• 15:00 - HTTP/2 efficient parallel streaming potentially reducing need for bundling
• 16:30 - Browserify limitations and CommonJS
• 18:30 - App design, modularity, package managers (component, bower, npm)
• 20:20 - Current state of building components - Bower, Component, Polymer, Web Components, AngularJS, ReactJS
• 22:24 - MVC Frameworks - AngularJS, ReactJS and the Virtual DOM
• 23:35 - Experience writing JavaScript Application Design published by Manning
• 27:35 - Following Nico

JavaScript Application Design - Manning

Published by Manning, currently available as early access edition - Purchase at Manning

Links

• Browserify - packaging NPM modules for the browser
• Nico Bevacqua’s Pony Foo blog
• Code samples from JavaScript Application Design
• Build first resources
• Build first site
• Nico Bevacqua twitter
• Jeff Barczewski, Founder, CodeWinds twitter
• CodeWinds twitter

Video / Slides

Watch Nico Bevacqua’s JSConf talk on YouTube

Slides from Nico Bevacqua JSConf 2014: Front End Ops Tooling - Slideshare

JavaScript module loading has traditionally been difficult due to diverse module formats and difficult configuration. With so many competing standards it is hard to get everything to work well together.

Guy has come forward with a solution which simplifies loading and management of JS packages. This is a full workflow solution including both dynamic loading and capability to build bundles for production.

1. Episode Info
2. Episode Notes
   1. Simple example of SystemJS in browser
   2. Links
   3. Videos
   4. Other podcasts

Episode Info

• Episode: CW 008
• Published: July 2nd, 2014
• Tags: nodejs, js,es6,commonjs,amd,es6,packages,modules,jsconf
• Duration: 22:12

Episode Notes

• 03:00 - es6-module-loader
• 04:25 - CommonJS, AMD, ES6 modules. Browserify
• 05:10 - SystemJS - loads ES6 modules, AMD, CommonJS and global scripts. Designed in spec itself, IE8+, suitable for production, runs in browser and Node.js, promises API
• 08:00 - SystemJS workflow - dynamic loading and build capability
• 10:00 - Using SystemJS with build tools
• 10:30 - SystemJS community
• 11:30 - Auto file type detection (CJS, AMD, UMD, ...) or can specify
• 12:45 - Optional configuration. Made to be as easy as possible to get going
• 14:30 - jspm - JavaScript Package Manager - CDN for SystemJS, require by name.
• 15:30 - Core ideas - making requiring really simple and making package management really simple
• 16:00 - Design of loader and manager
• 17:28 - Ready for review and full workflow. An invitation to the community
• 18:26 - GitHub locations for projects, examples
• 20:34 - How to follow up, closing remarks

Simple example of SystemJS in browser

<script src="system.js"></script> <script> System.import('app/app') .catch(function(e) { // we add this since promises suppress all errors setTimeout(function() { throw e; }); }); </script>

Links

• es6-module-loader - ES6 module loader polyfill
• SystemJS - Spec-compliant universal module loader - loads ES6 modules, AMD, CommonJS and global scripts.
• SystemJS-Build-Tool - Build tool for SystemJS which can bundle for production
• jspm - Package manager for the SystemJS universal module loader, built on top of the dynamic ES6 module loader. Load any module format (ES6, AMD, CommonJS and globals) directly from endpoints such as npm and github with flat versioned dependency management. For production, use the jspm CLI tool to download packages locally, lock down versions and build into a bundle. In development, load modules directly from CDN for frictionless experimentation, switching into production on the same code with a single configuration change. Supports SPDY with server push.
• jspm-es6-demo - jspm ES6 module loading workflow demo - write ES6 modules, load external from CDN, install locally using CDN versions, bundle into single file for production
• jspm Google Group - Discussion forum for JSPM
• Guy Bedford’s Twitter
• Guy Bedford’s GitHub repositories
• Jeff Barczewski, Founder, CodeWinds twitter
• CodeWinds twitter

Videos

• Fluent Conf 2014 - Guy Bedf...

SQLBits, a lightweight SQL builder for Node.js built by William Wicks, is a great compromise between using native SQL and going to a full ORM (object relational mapping tool). It is small and focused on doing one job, to help you create parameterized queries. One of its unique and killer features is that it can help you create any combination of filter queries from a single complex query based on the parameters used.

My goal with this podcast is to introduce you to SQLBits and provide some insight as to why it could be a valuable tool in your Node.js toolbox.

1. Episode Info
2. Episode Notes
   1. Background - SQL Builder vs ORM
   2. SQLBits - Node.js SQL builder
   3. SQLBits Install
   4. Simple example
   5. Additional criteria
   6. Joins
   7. Filters driven by defined parameters
   8. Inserts
   9. Updates
   10. Deletes
3. Quick Reference
4. Resources
5. Summary

Episode Info

• Episode: CW 003
• Published: February 17th, 2014
• Tags: nodejs, database
• Duration: 17:17

Episode Notes

Background - SQL Builder vs ORM

What is a SQL builder and how does that compare to an ORM (Object Relational Mapper)?

A SQL builder like SQLBits is designed to help you to build safe parameterized SQL with a minimal abstraction layer that still allows you to write optimized SQL queries. Using parameters is important in create SQL to prevent SQL injection attacks where users enter malicious data into forms to gain access to your database. SQL builders help you to use parameters and avoid these attacks.

Having used Hibernate for Java and Active Record with Rails (a couple of popular Object Relational Mappers, I’ve seen what a ORM’s can do and they are nice when they do what you want, but all to often once you get into more advanced uses, they tend to get in your way and you are fighting with the tool to try to get it to generate the SQL you want.

So a SQL builder which allows you to create just the right queries but helps you deal with parameterization and tokens, provides a great balance. It stays out of your way and just helps with the bookkeeping. The sql it generates and the parameter array can be used directly with your database module like the pg Postgres client.

SQLBits - Node.js SQL builder

I reviewed a bunch of Node.js SQL builders listed in NPM and I was not happy with any of them until I found SQLBits.

Too many of them seemed complicated or too integrated bordering on ORM capabilities. I wanted something that was simple and just server a single purpose to help me build good parameterized queries. I didn’t want it to run my queries or perform schema manipulation. I don’t want a complete new DSL (domain specific language) or API that I need to learn. SQL is already a DSL that does that just fine, but it can get tricky to manage as queries get complex.

SQLBits is a simple tool which helps you generate SQL but stays out of your way. You can create custom tuned SQL which pulls back only what is needed over the wire and have it manage the parameters and tokens.

SQLBits Install

npm install sqlbits --save # install and add to package.json

Simple example

var bits = require('sqlbits'); var SQL = bits.SQL; var $ = bits.$; var AND = bits.AND; var params = { max_price: 10.00, clearance: true }; var query = SQL('select name, desc from widgets') .WHERE('price < ', $(params.max_price), AND, 'clearance = ', $(params.clearance)) .ORDERBY('name asc'); // sql: select name, desc from widgets WHERE(price < $1 AND clearance = $2) ORDER BY name asc console.log('sql: ', query.sql); console.log('params: ', query.params); // params: [ 10, true ]

Additional criteria

You can add in additional filter criteria with:

• AND - bits.AND
• OR - bits.OR
• BETWEEN - bits.BETWEEN (discussed in depth later)
• .IN(array)
• $ - bit...