Isomorphic Full Stack ES2015 Hot Flux Generators on io.js

gistfile1.txt

                  Isomorphic Full Stack
               ES2015 Hot Flux Generators
                       on io.js





Tasveer Singh
@tazsingh
CTO of HoodQ - We're hiring!
Organizer of TorontoJS














  App Requirements

- Search Engine Optimized
- Fast on Desktop and Mobile
- Re-use tools and paradigms from other projects
  - Acquaint developers with new tools
  - Developers are more portable across projects












  It has to be

- Server side rendered
  - Good for SEO
  - Fast on Desktop and Mobile
    - Just make 1 or 2 requests
    - App is loaded on-demand
- JavaScript based
  - React Components




















                    JavaScript!!!














  ES2015 (a.k.a. ES6)

- Lots of new language features
  - Classes
  - Arrow Functions
  - Destructuring
  - Let + Const
  - Iterators
  - Generators
  - Modules
  - Unicode support
  - Much more!

- "Doesn't look like JavaScript"














  How do I use ES2015?

- How do I use it in the browser?
- How do I use it on the server?

- Traceur?

- https://kangax.github.io/compat-table/es6/












  Babel

- The one library you'll need to develop modern JavaScript™

- Has the best support for next generation JavaScript
- Most importantly, it's very easy to use
- Server side executable via babel-node
- Client side transformations
  - Shared runtime
- Shared configuration via .babelrc
- Source map support
- JSX Support & Optimizations
- Plugins

- http://babeljs.io/blog/2015/03/31/5.0.0/











  Modules

import React from "react";
// var React = require("react");

import {serverPort} from "./appConfig";
// var serverPort = require("./appConfig").serverPort;


export default {};
// module.exports = {};

export default class {};
export default class extends React.Component {};

export default new class {};









  Classes

class BaseAction {
  dispatch() {
    // do stuff
  }
}

class SomeAction extends BaseAction {
  constructor() {
    super();
    this.dispatch();
  }
}












  Generators

- "Generators are functions which can be exited
   and later re-entered. Their context
   (variable bindings) will be saved across
   re-entrances."
    ~ MDN

- A way to control flow of a function.
  Pause, resume, return, and throw.
- Can aide in the use of async operations
  without resorting to callbacks
  - async/await
- Iterators
  - for ... of

- https://github.com/getify/You-Dont-Know-JS/blob/master/async%20&%20performance/ch4.md













  Koa.js

- "next generation web framework for node.js"

- "Koa is a new web framework designed by the team
   behind Express, which aims to be a smaller, more
   expressive, and more robust foundation for web
   applications and APIs. Through leveraging generators
   Koa allows you to ditch callbacks and greatly
   increase error-handling. Koa does not bundle
   any middleware within its core, and provides an
   elegant suite of methods that make writing servers
   fast and enjoyable."
    ~ koajs.com

- Uses Generators to define Koa middleware
- Overall, a very pleasant API

- koajs.com























  io.js

- "Bringing ES6 to the Node Community!"

- Natively runs ES2015 code without any additional flags
  - (With limited support. See above compatibility table)
- Can natively run Koa.js generators and promises

- Node 0.12 can run generators and promises natively too
  - Requires the --harmony flag


























  React

- Describe your HTML in JavaScript
- React will figure out what to render from that

- Can render your HTML to a Static Markup
  - React.renderToStaticMarkup(<Component />);

- We're able to use React Components as server side
  templates
  - Reuse developer skillsets on server and client











  Ok, so our server is figured out.

  We're using ES2015 JavaScript to power Koa.js
  in order to render React templates.

  What about our front end assets such as CSS
  and JavaScript?













  WebPack

- Transform and inline modules into static assets
  - JavaScript
  - CSS
  - Images

- Define the transformations on modules using loaders
  - babel-loader
  - jsx-loader
  - less-loader

- Can optimize for number of web requests,
  payload size, etc.

- Define code split points and WebPack will form
  async loaded chunks depending on your
  optimization strategy

- Hot Module Reloading
  - Will replace your module inline
  - No page refresh

- Extensible via Plugins

- My talk on WebPack from TorontoJS
  https://www.youtube.com/watch?v=_sDUAtaRy3s






















  Developing with WebPack

- Depending on your WebPack configuration, you likely
  have a hash of each chunk included in the filename
  - Something like main.09234919823fe8ac.js
  - Good for long term caching purposes

- On a module change, WebPack will recompile the
  chunks which will then have a different hash and
  therefore a different filename

- This new filename needs to be communicated to our
  React templates in order to serve the appropriate asset

- How could we accomplish this?




















  Flux

- Unidirectional data flow pattern

- Actions -> Dispatcher -> Stores -> Components -> Actions

- My talk at FITC Spotlight: Front-End
  on different Front-End Paradigms
  https://www.youtube.com/watch?v=mdHErrj2iV0

- Maybe we can use Flux to update our WebPack
  entrypoint URL?















  OK, enough talk.

  Time for d̷e̷a̷t̷h̷ ̷b̷y̷ ̷l̷i̷v̷e̷ ̷c̷o̷d̷i̷n̷g̷ code.