NTBT #1 "Client-Side JavaScript"

NTBT #1 "Client-Side JavaScript"

• 1.
  Next “Tech” BigThing #1: Client-Side JavaScript
• 2.
  Is today‘s topicmade 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 • ForJS 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 Angular2? 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 matchmy 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 getadditionally (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:[email protected] • Q&A • ... more demos?