Takeaways from

Kevin C Chen @ Product Development Group

What is takes to building a Modern Web App...

There is got to be a better way...

Why?

• Complement our existing UI/UX expertise with the fast evolving "front-end" technology stack
   
• Learn the best practices & experience of early adopters
   
• Become capable of building modern Web App products

2 Days

Sessions & Domains

• ECMA 2015: aka ES 6 
• Service
• Tooling / Workflow
• JavaScript
• React
• Websocket -  real-time app & IoT
• i18n
• Data Visualization
• Security
• CSS 

ECMAScript 2015

• a.k.a: ES 6
   
• Latest standard / spec of JavaScript
  • Finalized in June of 2015
  • The "Current" version of JavaScript

ECMAScript 2015

• Enables you to
   
  • Write maintanable/shorter code 
     
  • Avoid common JavaScript pitfalls
     
  • Leverage latest browser features

var a = 1; 
function foo() {
    var b = 0
    
    if (a) {
	var a = 2;
        var b = a + 2;      
        console.log(b);                        
    }    
    console.log(a);
       
    console.log(b);
}
console.log(a);  
foo();

Quiz: What is logged to the console?

let a = 1; 
function foo() {
    let b = 0
    
    if (a) {
	let a = 2;
        let b = a + 2;      
        console.log( b );                        
    }    
    console.log( a );    
   
    console.log( b );
}
console.log( a );  
foo();

ECMAScript 2015: Use Let

Back to the Future...

• New version of ECMAScript annually
  • ​ECMAScript 2016, 2017...etc
     
• Features would appear in modern browsers quickly 
   
• How to innovate continuously in front-end world by taking advantage of these new browser enhancement ... 
  
  But not worrying about the old browser?

Transpiler

• Generated code is small, fast, readable, and compatible
   
• Has hit maturity, transpilation trade-offs well-studied
   
• Have to follow some guideline
   

• Sound engineering decision to start using Babel + ECMAScript 2015

class Rectangle extends Shape {
    constructor (id, x, y, width, height) {
        super(id, x, y)
        this.width  = width
        this.height = height
    }
}
class Circle extends Shape {
    constructor (id, x, y, radius) {
        super(id, x, y)
        this.radius = radius
    }
}

WRITE ECMAScript 2015 CODE LIKE THIS

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _inherits(subClass, superClass) { 
    if (typeof superClass !== "function" && superClass !== null) {throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);} 

    subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); 

if (superClass) 
    Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 
}

var Rectangle = (function (_Shape) {
    _inherits(Rectangle, _Shape);

    function Rectangle(id, x, y, width, height) {
        _classCallCheck(this, Rectangle);

        _Shape.call(this, id, x, y);
        this.width = width;
        this.height = height;
    }

    return Rectangle;
})(Shape);

var Circle = (function (_Shape2) {
    _inherits(Circle, _Shape2);

    function Circle(id, x, y, radius) {
        _classCallCheck(this, Circle);

        _Shape2.call(this, id, x, y);
        this.radius = radius;
    }

    return Circle;
})(Shape);

BABEL TRANSPILES YOUR CODE INTO THIS:

Browser

Standard

Transpiler

Do amazing things with the right abstraction

Challenges

• Building UI
   
  • JSP/PHP are template abstraction for Server Side rendering
     
  • Templates abstraction may not make sense for the view on Client Side

<div ng-repeat="model in collection">
    {{model.name}}
</div>

<select name="month">
    <option>(01) January</option>
    <option>(02) February</option>
    ...
</select>

Challenges

• Managing State
   
  • How do you go and reflect changes on the view?
     
  • Communicate that change to your app?
     
  • KVO (Object.oberve) is hard

Person = Ember.Object.extend({
  // these will be supplied by `create`
  firstName: null,
  lastName: null,

  fullName: Ember.computed('firstName', 'lastName', function() {
    return `${this.get('firstName')} ${this.get('lastName')}`;
  }),

  fullNameChanged: Ember.observer('fullName', function() {
    // deal with the change
  })
});

var person = Person.create({
  firstName: 'Yehuda',
  lastName: 'Katz'
});

person.set('firstName', 'Brohuda'); // observer will fire

Challenges

• Updating UI
   
  • Manage the update manually?
     
  • Manipulate DOM
     
  • Performance?

React Vs. MVC

• Library Vs. Full Fledged Framework
   

• React does not help you with

  • Application routing

  • Communicating with a server

  • Validating models

  • Injecting dependencies
     

• Logic and markup are inextricably linked together VS. Template being the view in MVC

> cat ./app/components/hello.js

let React = require('react');

module.exports = React.createClass({
  render() {
    return (
      <div>hello world</div>
    )
  }
})

> cat ./app/components/hello.js

let React = require('react');
// i18n! is a plugin connect _t to translations
let _t = require('i18n!app/i10n/hello');

module.exports = React.createClass({
  render() {
    return (
      // wrap string with _t()
      <div>{_t('hello wrold')}</div>
    )
  }

> cat ./app/l10n/jp/hello.js

{
  "hello world": "こんにちは世界"
}