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

I had the pleasure of interviewing Daniel Shaw (@dshaw), managing partner and CEO of The Node Firm to discuss their upcoming public Node.js training courses at Joyent and beyond.

Episode Info

• Episode: CW 001
• Published: September 17th, 2013
• Tags: nodejs
• Duration: 23:59

Episode Notes

The Node Firm has been doing corporate training since 2011, but now is offering some public courses starting in October 2013.

The Node Firm public training courses at Joyent in San Francisco, CA:

• Oct 8-10, 2013 (Tue-Thur) - Node.js Core Foundations $3,225
• Oct 22-24, 2013 (Tue-Thur) - Advanced Node.js Development $3,225 (early registration price $2,985 until Sep 24)
• More coming to cities near you

Discussed in the 24 minute interview:

• Background on The Node Firm
• Description of the two courses
  • Topics covered
  • Intended audience
  • Prerequisites
  • Instructors, maximum class size
  • Course style

More information

• http://thenodefirm.com/training - direct link to The Node Firm’s training information
• Contact The Node Firm for additional questions

“It’s so rare that something actually comes along that really changes how we think about building stuff” - Michael Jackson

1. Episode Info
2. Show Notes and Timeline
3. Michael Jackson and Ryan Florence React.js training
4. Links and Resources
   1. Online Training Courses
   2. Training
   3. Mentioned in the episode
   4. Follow
5. Related content
6. Video

Episode Info

• Episode: CW 015
• Published: April 8th, 2015
• Tags: javascript, reactjs,nodejs,isomorphic
• Duration: 1:16:34
• Updated: 2015-04-11

Show Notes and Timeline

• 2:40 - What’s special about React.js?

“For me personally, it changed the way that I code as much as jQuery did back in 2008.” - Michael Jackson

“OMG, This is really going to change the way that I work and how much I enjoy my job on a day to day basis.” - Michael Jackson

• 5:00 - React.js doesn’t care about how you represent your data, models can be simple objects and arrays

“What excites me about React.js is... it doesn’t care about your data model, you just use plain JavaScript objects... For my models I use: array, Object, Number, ...” - Ryan Florence

“The new paradigm with React.js is we aren’t observing, we aren’t having a bunch of events, we are just throwing data at functions and then they return descriptions of UI” - Ryan Florence

• 6:40 - Javascript becomes our templating language

“It’s hard to explain until you start doing it how big of a shift this makes in your user interface development, to not worry about your app over time; you’re not mutating the state of objects over time in your UI components” - Ryan Florence

“We get to use the solutions that JavaScript already provides like modules and scope... we don’t have to wait for the framework’s template language to implement a solution for that” - Ryan Florence

• 8:25 - React.js, Angular, and Ember are pushing the language forward (ES6)
• 10:56 - Is React.js differnet from other SPA frameworks?
• 11:30 - React.js could be a good rendering tool for many frameworks
• 12:10 - Integrating React.js into existing code is easy without a full rewrite
• 13:30 - React.js be added to mature apps, not just greenfield apps
• 14:50 - Angular 2.0 and Ember 2.0 look a lot like and sound a lot like React.js. It is influencing so many other frameworks.
• 15:30 - Who can use React.js? What types of projects?
• 19:00 - Server side rendering - Isomorphic javascript
• 22:30 - React.js doesn’t care where you render - client, server, canvas, etc.
• 24:00 - Is React.js hard to learn?
• 25:00 - React.js allows you to code yourself out of problems
• 26:00 - Smaller API’s are easier to learn
• 28:10 - What brought Michael and Ryan to using React.js?

For me, one of the most awkward parts about #Emberjs is switching back and forth between Handlebars templates and component code. Any ideas?

• 28:45 - Instructure had invested in Ember but were having struggles shipping and learning

“At Instructure, we bet on Ember... we were messing with it for almost a year and kind of weren’t shipping anything...” - Ryan Florence

• 30:00 - After an hour of using React.js, Ryan wanted to use it everywhere

“After an hour of using React.js, I had my face in my hands and said... I want to use this everywhere” - Ryan Florence

• 30:45 - A few hours later, Ryan had a router proof of concept up and running

“After two hours I actually had something working, and that probably impressed me the most about React.js” - Ryan Florence

“I was never able to just pick up something as quickly as I was able to pick up React.js and build a router” - Michael Jackson

“Two guys who had no idea what they were doing (with React.js) were able to make something (ReactRouter) that worked and was useful for other people” - Michael Jackson

• 32:30 - Ryan started throwing his toughest problems at React.js and it handled them great

“Then I just threw all of my toughest problems that I had ever run into as a frontend developer at React.js” - Ryan Florence

• 33...

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 ...

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

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