FE Trends

Krzysztof Jung

Head of Front-end @

2016 Q2

JavaScript - the new stuff:

  • "better, faster, stronger"
  • modern module bundler
  • Angular 2 + ReactJS

New Syntax

And features

EcmaScript 6

2015

EcmaScript?

  • 1995: Brendan Eich creates Mocha 
  • Netstape Navigator - LiveScript
  • Sun Microsystems - JavaScript
  • Microsoft - JScript
  • 1997 - Ecma International - specification ECMAScript1
  • 1998 - ECMAScript 2,  1999 - ECMAScript 3

ECMAScript

implementations

  • JavaScript
  • JScript
  • ActionScript
  • Adobe ExtendScript
  • QtScript
  • many others...

Then...

  • ECMAScript 4 never came out 
  • 2009 - ECMAScript 5 (that's Your JS!)
  • 2015 - ECMAScript 6
  • 6 -> 2015, 7 -> 2016
  • let / const
  • multiline strings + string templates
  • arrow functions
  • destructuring
  • for of
  • default parameter values + named parameters
  • spread operator ...
  • classes
  • maps, sets
  • modules
  • iterators, generators
  • proxies
  • promises

ES2015 - superset (backward compatibility)

How to use it?

  • Browsers are implementing features
  • Node implements them too (6.0 - 93%)!
  • Transpile to ES5 With BabelJS

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

How about speed?

asm.js

What???

  • speed race since V8 by Google
  • JS:  dynamic, untyped, and interpreted  
  • JIT - Just In Time Compiler
    • compilation at execution
    • adaptive optimization
  • asm.js - strict subset of JS, generated by source to source compilers
  • ex. C / C++ -> Emscripten -> asm.js

Result?

Up to 66% of native speed

On a browser!!!

Who uses it?

  • as a proof of concept Mozilla ported simple
    Unreal Engine game (asm.js+WebGL interface)
  • some heavy-performance JS libs use it
  • game engines like Unity, Godot or Unreal allow to export game to HTML5

Is that all?

Nope

Web Assembly is on the way

= native browser sandbox to run bytecode

WeaklyTyped JS?

"Strongly" Typed Script!

TypeScript

TypeScript

  • Inspired by Java/C#/C++
  • Superset of JavaScript
  • Allows to define types (+base types)
  • Compiles to ES5 (compiler check types)
  • includes some of ES6 features (class etc.)
  • developed by Mircosoft (open source) 
  • merged with AtScript by Google

Webpack

For all the fun stuff

https://slides.com/krzysztofjung/webpack/

by Facebook

It's all about performance

  • Mature frameworks for big SPA apps
  • Angular digest cycle for data-binding
  • Complex interface is slow (DOM + watchers)

Virtual DOM

  • DOM operations are expensive
  • Minimize number of operations
  • Perform all calculations on "virtual" DOM
  • Apply minimal change of DOM tree
  • VirtualDOM is "proxy" to DOM interface

How to optimize it?

  • JS operates mostly on objects (references)
  • It's hard to detect change when state mutate
  • It's easier to compare two state object instances
  • Let's keep all data in one place (state tree)
  • Any state change returns whole new state object

Components everywhere

  • State is tree of data, app is tree of components
  • Component = cutom HTML tag + component class
  • Component class = logic + VirtualDOM renders
  • VirtualDOM syntax is not pleasant
var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
ReactDOM.render(root, document.getElementById('example'));
var App = (
  React.createElement(Form, null,
    React.createElement(Form.Row, null,
      React.createElement(Form.Label, null),
      React.createElement(Form.Input, null)
    )
  )
);
var Form = MyFormComponent;

var App = (
  <Form>
    <Form.Row>
      <Form.Label />
      <Form.Input />
    </Form.Row>
  </Form>
);

JSX

To sum up:

  • React is a library (not a framework)
  • React is only view layer

  • You DO NOT GET any of the following:

    • An event system (other than vanilla DOM events)
    • Any AJAX capabilities whatsoever
    • Any form of a data layer
    • Promises
    • Any application framework at all
    • Any idea how implement the above

So why React is so important?

  • VirtualDOM was THE BIG THING
  • After Angular2 rollout exploration started
  • React got a lot of interest so it's ecosystem grew
  • It put focus on Reactive approach to state change
  • Lot of new stuff was invented
    • Unidirectional state flow (Flux, Redux)
    • HotReload (hot code replacement)
    • TimeTravel (state change debugging)
    • Relay + GraphQL (super flexible API)
    • CSS Modules (scoped CSS)

AngularJS

2

EntirelyNewFrameworkWithSameName 2.0

So how it is now?

  • There are some similarities
  • There is a way to migrate
  • Angular 1.5 provides some of 2's concepts
  • Angular 1.x will be supported for about a year

"Main difference in architectural design is probably the unidirectional data flow and the focus on components.

 

Start using controllerAs with Typescript classes as your controllers if you want a more easy transition.

 

Start learning the basics of RxJS, Ng2 is built on it."

Yeah, but what's the difference?

#0 TypeScript

  • written entirely in TypeScript
  • uses ES6 classes and modules
  • + types and annotations
  • can be used with ES5 (TS recommended)
  • no module declaration
  • uses ES6 module syntax

#1 Components

  • custom directives
  • + templates
  • + dedicated controller(As)

 

  • template (HTML + magic)
  • class with logic
  • data interface
    • inputs, outputs
    • state change strategy

#2 template syntax

  • data interpolation (+binding)
  • filters -> pipes
  • some of old directives
  • new: properties (with bindings)
// One way from data source to view target
{{expression}}
[target] = "expression"
bind-target = "expression"

// One-way from view target to data source
(target) = "statement"
on-target = "statement"

// Two-way
[(target)] = "expression"
bindon-target = "expression"

#2 template syntax

// Property
<img [src] = "heroImageUrl">
<hero-detail [hero]="currentHero"></hero-detail>
<div [ngClass] = "{selected: isSelected}"></div>

// Event
<button (click) = "onSave()">Save</button>
<hero-detail (deleteRequest)="deleteHero()"></hero-detail>
<div (myClick)="clicked=$event">click me</div>

// Two way
<input [(ngModel)]="heroName">

// Attribute
<button [attr.aria-label]="help">help</button>

// Class
<div [class.special]="isSpecial">Special</div>

// Style
<button [style.color] = "isSpecial ? 'red' : 'green'">

#3 Data change detection

  • Observables (RxJS)
  • detects change in mutable structures
  • treat changes as events in streams
  • for immutable structures component can emit change event
  • state change applied in single pass of components tree

Example

<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<div *ngFor="#hero of heroes" (click)="selectHero(hero)">
  {{hero.name}}
</div>
<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

@Component({
  selector:    'hero-list',
  templateUrl: 'app/hero-list.component.html',
  directives:  [HeroDetailComponent],
  providers:   [HeroService]
})

export class HeroListComponent implements OnInit {
  constructor(private _service: HeroService){ }
  heroes:Hero[];
  selectedHero: Hero;
  ngOnInit(){
    this.heroes = this._service.getHeroes();
  }
  selectHero(hero: Hero) { this.selectedHero = hero; }
}

#4 Directives

  • logic injected to markup
  • @Directive
  • Component = directive + template
<div *ngFor="#hero of heroes"></div>
<hero-detail *ngIf="selectedHero"></hero-detail>
<input [(ngModel)]="hero.name">

#5 Other stuff

  • Services hold logic
  • Services are just classes
  • Services are injected to constructors
  • Yes, there is still Dependency Injection

BONUS CONTENT

Flux

  • Your Views "Dispatch" "Actions"
  • Your "Store" Responds to Dispatched Actions
  • A store is not a model. A store contains models
  • A store is the only thing in your application that knows how to update data. This is the most important part of Flux
  • Your Store Emits a "Change" Event

  • Your View Responds to the "Change" Event

Flux is a word made up to describe "one way" data flow with very specific events and listeners

Flux = data flow pattern

Flux

When you add a new item, the view dispatchesan action, the store responds to that action, the store mutates data, the store triggers a change event, and the view responds to the change event by re-rendering.

Hot Reloading

  • Make the change in your code
  • Refresh the page in your browser
  • Re-add the data and push all of the same buttons

Normally:

Hot Reload:

  • Make the change in code
  • Build system detects it
  • Hot Reload module prepare code-swap logic
  • Components logic is replaced "live"
  • App state remains the same

Time Travel

State + actions (transformations) = state travel

Made with Slides.com