Our first Next Tech Big Thing at Coffee Circle. Today's topic is "client-side" JavaScript...

1. Next “Tech” Big Thing
#1: Client-Side JavaScript

2. Is today‘s topic made of „Buzz“ words?
2
• React
• Angular 2
• jQuery 3
• Or is it the “JavaScript Fatigue”?
• article: How it feels to learn JavaScript in 2016

3. Before React...
3
• jQuery => Vanilla JS
• Tedious, error prone development (honestly)
• Hardly linked to DOM (slow & not portable)
• Story: jQuery Deferred !== ES6 Promise
• Backbone.JS
• MV-* architecture (is * == “missing”?)
• No rendering, empty View::render()
• Managing the “Events Hell”
• Angular 1.x
• I passed on this one... sorry!
• Rumor 1: doesn‘t scale (bi-dir. data binding)
• Rumor 2: unstable API (deprecated $scope)

4. About JavaScript
4
• For JS skepticals… JS is today everywhere (browser,
server, OS, IoT, …)
• Largely misunderstood language
• Functional + prototypal inheritance !== OO
• ES 5 is complex (function binding, scoping, …)
• ES.Next should make it easier and stronger
• Better functional programming (arrow func)
• Less variables... less bugs! (const)
• Ecma TC39 & language iterations
• Quizz: what‘s added in EcmaScript 2016?

5. About Functional Programming
5
• Functional vs OO programming
• Higher-order functions (map/reduce/…)
• Pure functions
• Immutable data structures
• Is it better for Async & Concurreny?
• OO = Threads & Atomics (and race conditons!)
• FP = map/reduce/... can be parallelized
• Rich Hickey‘s videos (Clojure)
• BUT Frontend Devs still need a Component Model
• Story: React ES6 Classes vs react-stamp

6. Then came React...
6
• Virtual DOM + diffing algorithm = faster rendering
• FP benefits = pure functions, composition, immutable
(shallow comparison)
• Component Model with ES6 Classes, props & state
• Flux/Redux solves the “Events Hell” (unidirectional flow)
• Strong ecosystem with side-projects like:
• React Native (mobile), Immutable, GraphQL (data),
Flow (static type analysis), …

7. Still some problems...
7
• React isn‘t a full-featured framework
• Needs time to assimile + assemble React libraries
• Criticized Facebook‘s Open Source license
• Redux adds some boilerplate
• Advanced FP is hard without Static Typing (Flow?)
• Exercise: let‘s play with map & categories

8. What‘s with Angular 2?
8
• Full-featured framework (faster project start?)
• demo: Angular-CLI
• Not much to do with Angular 1.x (thankfully)
• TypeScript 2 = „hate it or love it“
• Right balance of OO + FP (with ES7 Decorators)
• FP + Typing = you may not look backwards
• Ships with the Next Big Thing aka Observables (RxJS)
• Promises on „steroids“ (for event concurrency)
• TC39 stage 1 since Aug 2016

9. Does it match my wish list?
9
• In 2016, as Frontend Dev, I wish:
• a correct HTML5 Router => @angular/router
• to work with forms => @angular/forms
• A Flux/Redux approach => @ngrx/store
• Hot Reload & Time Travel: Angular-CLI (demo)
• Linting & Type analysis => TS + VS Code* (demo)
• Sourcemaps in browser => Angular-CLI (demo)
* or WebStorm!

10. What I get additionally (for free)
10
• Dependency Injection Engine (Spring-like)
• Might be better than with pure FP (exercice)
• CSS scoping (emulated or with Shadow DOM)
• Ahead-Of-Time compilation & Lazy routes loading
• RxJS, RxJS, RxJS, RxJS, RxJS
• Lots of good online resources:
• Official documentation: angular.io
• Youtube: Angular University, Angular Air

11. Thank you!
11
• Contact: frederic@coffeecircle.com
• Q&A
• ... more demos?