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

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

Watch video on YouTube

1. Episode Info
2. Episode Notes
   1. Links
   2. Videos

Episode Info

• Episode: CW 007
• Published: June 24th, 2014
• Tags: nodejs, js,es6,jsconf
• Duration: 38:33

Episode Notes

• 01:36 - Forrest explains his new position at npm Inc.
• 02:20 - Discussion of Forrest’s JSConf 2014 talk
• 03:30 - Rise of community standards, Douglas Crockford’s the Good Parts, John Resig jQuery, Promises A+ standard
• 05:50 - Standards committees, an inside look
• 08:00 - ES4, ES5, Harmony, ES7 (champion for each feature)
• 10:00 - test262 - conformance test suite
• 11:58 - Our community has the power to figure out what features in ES6 are useful. Sort out the parts that are genuinely useful. Figure out the good parts now.
• 14:48 - Module proposal benefited from critical discussions from the community
• 16:00 - Tools for using ES6 features now
• 17:26 - Development community needs to get on top of things and teach how we use the features with emphasis on the compelling parts.
• 18:50 - Forrest no longer recommends Crockford’s Good Parts to new developers because half is scar tissue and dogma, instead Dave Herman’s Effective JavaScript which gives them a mental toolkit to determine their own style
• 20:55 - Don’t concentrate on what’s cool, but concentrate on what’s stable and effective. As an educator be conservative.
• 21:29 - Warnings from Java, Perl history
• 24:00 - Typescript and Coffeescript bring things to the table but they could fragment the community
• 24:40 - ES timeline
• 26:30 - Features need enough examination to ensure they are finished
• 28:00 - Keeping some things in user land to see what community comes up with. Developers as leaders in this transition.
• 29:00 - npm growth, npm Inc dev ops, addressing pain points in npm CLI
• 34:30 - All software languages have something that is terrible. Community is something that makes Node.js special.
• 35:45 - Node.js in the enterprise is happening very rapidly. A very interesting time to be in the middle of this evolution.

Links

• Forrest Norvell, npm product maker at npm Inc. twitter
• npm Inc. - npm, Inc. supports the JavaScript community by providing the registry where developers publish and share packaged open-source modules.
• traceur - Traceur is a JavaScript.next-to-JavaScript-of-today compiler. Compile ES6 code into JS which can be used by today’s browsers.
• es6-shim - Provides compatibility shims so that legacy JavaScript engines behave as closely as possible to ECMAScript 6 (Harmony).
• es6-module-transpiler - ES6 Module Transpiler is a JavaScript library for converting JavaScript files written using the ES6 draft specification module syntax to existing library-based module systems such as AMD, CommonJS, or simply globals.
• sweet.js - Macros for javascript which can be used to add in ES6 features.
• es6ify - browserify v2 transform to compile JavaScript.next (ES6) to JavaScript.current (ES5) on the fly.
• ES6 compatibility table - ES6 compatibility table, comparing browser versions, Node.js. Links to ES6 feature descriptions.
• Spider Monkey - Firefox JS engine written in C++. Currently Spider Monkey is leading in the number of ES6 features that are implemented. (56/66 according to Kangax)
• Effective JavaScript - David Herman’s book
• Jeff Barczewski, Founder, CodeWinds twitter
• CodeWinds twitter

Videos

• JSConf 2014 Talk

Saul Maddox, a software engineer for PROS, joins me in this episode of CodeWinds to discuss his Hapi-Ninja boilerplate which helps developers get up and running with the Hapi Node.js web framework.

We discuss in detail the stack he has chosen and the reasons for selecting each:

• Hapijs Node.js web framework
• Swig templates
• Gulp javascript streaming task runner
• Plugins he has included for assets and routes

Saul explains the file structure of Hapi-Ninja mentioning how to configure and get up and running with Hapi quickly and easily.

1. Episode Info
2. Episode Notes
   1. Episode timeline
3. Getting started with Hapi-Ninja
4. Links from Show
   1. Following Saul Maddox

Episode Info

• Episode: CW 005
• Published: April 7th, 2014
• Tags: js, nodejs,web,framework,boilerplate
• Duration: 34:17

Episode Notes

Episode timeline

• 02:06 - Introduction to the Hapi-Ninja boilerplate
• 05:44 - Details of Hapi-Ninja stack
• 06:00 - Hapi Node.js web framework
• 08:34 - Swig javascript templates
• 11:17 - Gulp Node.js streaming task runner
• 13:52 - Getting started with Hapi-Ninja boilerplate
• 14:44 - Using a watcher like node-supervisor to auto reload
• 15:47 - Hapi-Ninja file structure
• 18:38 - Configuration
• 18:55 - Hapi-Assets plugin for minimizing and concatenating assets
• 21:42 - Hapi-Named-Routes plugin
• 23:31 - Hapi-Cache Buster plugin for easier browser reloading in development
• 25:26 - Easy switching from full frontend app (PhoneGap) to a frontend and server using same folder structure
• 27:02 - Hapi-Ninja code is commented heavily to help new users learn
• 27:41 - Upgrading from Hapi 2.x to 3.x
• 28:37 - Contributing
• 30:08 - Other projects
• 30:25 - Ever Stain project - legacy website for being remembered
• 32:16 - Following Saul

Getting started with Hapi-Ninja

• Install Nodejs
• Clone repo from GitHub
• Change working directory into the new path
• Install dependencies from npm

Links from Show

• Hapi-Ninja boilerplate GitHub Repo
• Hapijs Node.js web framework
• Swig templates
• Gulp javascript streaming task runner
• Hapi-Named-Routes plugin for using named routes
• Hapi-Assets plugin for automatically minimizing and concatenating assets
• Hapi-Cache-Buster plugin which helps with serving fresh content in development
• Ever Stain legacy website coming soon by Saul Maddox. How will you be remembered?

Following Saul Maddox

• Saul Maddox GitHub
• Saul Maddox Twitter

This is a review of the Hapi 2.0 functionality unveiled last Monday, Jan 27, 2014 at &yet. The event was live streamed so I was able to watch and take notes. Eran Hammer @eranhammer, a Walmart labs engineer and lead developer for Hapi shared a top to bottom feature discussion including the new changes for version 2. Eran’s Slides

My goal with this podcast is to mention some of the key changes with Hapi 2 and how you would leverage them in your code.

This review and Eran’s presentation are done such that you do not need have a familiarity with Hapi to get value, new users should come away with some understanding of Hapi and how it can be useful for building robust web applications.

1. Episode Info
2. Episode Notes
   1. Background
   2. Routes, Caching, State
   3. Plugins
   4. Authorization
   5. Ops
   6. Postmile example app
3. Major breaking changes
4. Resources
5. Summary

Episode Info

• Episode: CW 002
• Published: February 1st, 2014
• Tags: nodejs, hapijs
• Duration: 21:46

Episode Notes

Background

• show notes http://codewinds.com/podcast/002.html
• I have a link to the original live stream, the content starts at about 24 minutes in, so the URL in the show notes jumps directly to that spot.
• Hapi is the awesome open source web framework created by Walmart Labs.
• The Hapi framework grew out of years of development first at Yahoo as Sled, later renamed Postmile, then at Walmart Labs.
• Initially Eran tried to build on Express a popular web framework, but found issues with plugin order, undocumented dependencies, fragility with large team use.
• Hapi was developed by Walmart Labs for their mobile division
• Hapi is built as a scalable web framework that they could use to evolve their system over time.
• Initiallly used to reverse proxy or pass through requests to their existing backend written in java or other languages.
• Then decorate, batch, and begin to replace legacy code with new code in Node.js
• It ran 100% of their mobile traffic starting with Black Friday and proved its stability running at about 1-2% cpu on 50 servers throughout the highest load. Lasagna graphs flatlines for cpu and memory use
• Walmart starting to replace more of its legacy code with Hapi and even now part of walmart.com
• Hapi has great REST API support as well as infrastructure for building web apps or even serving static content
• Just configure the routes and you are ready, no extra plugins are necessary for the most common functionality
• Liked that Eran provides some quick commentary about features and how they evolved
• Hapi 2.0 isn’t a massive increase in new functionality, in fact it is more about taking out the cruft, eliminating the redundant ways to do things. Names that evolved over time, picking the best and cleaning up the others.
• This strategy shows the wisdom and experience of its architect, to resi the urge to add features by first solidifying the base.

Routes, Caching, State

• Route handler(request, reply) signature changed
• server.route({}), can keep routes in one place while config and handler in separate module. validation is configurable, state (cookies)
• server.table() gives you the active routing table
• Hapi is a configuration centric framework, set js properties, then it tries to stay out of your way.
• Hapi is written so the meat of your web application can stay pure, you don’t have to deal with the HTTP mechanisms unless you need to for a special case. This leads to clean code which is more focused on your business logic and less on how to deliver via HTTP.
• Helpers can abstract out functionality used in many places like looking up a user profile or users shopping cart
• Caching is changed in 2.0, dropping support for full page caching. You can still configure the client cache headers and expiry but the team removed the ...

1. Episode Info
2. Episode Notes
   1. Links
   2. Videos

Episode Info

• Episode: CW 013
• Published: September 22nd, 2014
• Tags: nodejs, js,jsconf
• Duration: 42:54

Episode Notes

• 01:42 - Nodevember Node.js and JavaScript Conference coming November 15-16, Nashville, TN
• 04:40 - Day of Activities at JSConf 2014
• 05:07 - NodeBots, NodeCopters, NodeRockets, NodeBoats
• 11:43 - Golf Tournament sponsored by NodeSource
• 13:04 - Kayaking, Scavenger Hunt, Segway tour of Amelia Island
• 13:46 - Guy Bedford - Package Management for ES6 Modules (SystemJS, jspm.io)
• 19:43 - Jordan Matthiesen - Modern mobile app tool-chains
• 23:08 - Ryan Florence - Embularactymerbone
• 27:30 - Forrest Norvell - Learning ES6 as a Community
• 30:35 - Spike Brehm - Building Isomorphic Apps
• 33:00 - Bodil Stokke - Reactive Game Development for the Discerning Hipster
• 34:00 - Kassandra Perch - Modular Application Architecture in Javascript
• 34:40 - Kawandeep Virdee - Open Web Art: JavaScript for Interactive, Collaborative, and Hackable Art
• 36:24 - Brian Brennan - Being Human
• 38:30 - JS Family pic via drone
• 38:50 - Final thoughts about JSConf 2014

Links

• Nodevember Node.js/JavaScript Conference - Nov 15-16, 2014 - Nashville TN
• JSConf 2014
• JSConf 2014 Schedule - List of all talks
• Kevin Old - website, twitter, linkedin
• Jeff Barczewski, Founder, CodeWinds - website, twitter, linkedin
• CodeWinds - website, twitter

Videos

• JSConf 2014 videos on YouTube
• Guy Bedford - Package Management for ES6 Modules video
• CodeWinds Episode# 8 w/Guy Bedford - Audio Interview discussing SystemJS and jspm.io
• Jordan Matthiesen - Modern mobile app tool-chains video
• Ryan Florence - Embularactymerbone video
• CodeWinds Episode #7 w/Forrest Norvell - Video and Audio Interview
• Forrest Norvell - Learning ES6 as a Community video
• Spike Brehm - Building Isomorphic Apps video
• CodeWinds Episode# 9 w/Spike Brehm - Audio Interview
• Bodil Stokke - Reactive Game Development for the Discerning Hipster video
• Kassandra Perch - Modular Application Architecture in Javascript video
• CodeWinds Episode# 11 w/Kassandra Perch
• Kawandeep Virdee - Open Web Art: JavaScript for Interactive, Collaborative, and Hackable Art video
• Brian Brennan - Being Human video