The 2015 Jayway Web Tech Radar by Gustaf Nilsson Kotte emphasizes the high rate of change in web technologies, recommending the adoption of ECMAScript 6 and trialing static site generators, React, and Webpack. It assesses techniques like universal web applications, unidirectional data flow, and client-side reactive programming while discussing various frameworks such as Ember and Angular. The document also introduces the concept of 'innovation tokens' to manage the risk of adopting new technologies.

1. Jayway Web Tech Radar 2015
Gustaf Nilsson Kotte (@gustaf_nk)

3. Rate of change: High

4. Inspiration:
ThoughtWorks Tech Radar
● Adopt
● Trial
● Assess
● Hold
https://www.thoughtworks.com/radar

5. Adopt
ECMAScript 6 (new)

6. Trial
● Static Site Generators (new)
● React (Assess)
● Webpack (new)

7. Assess
● Universal (Isomorphic) Web Applications (new)
● Unidirectional data flow on the client (new)
● Client-side Reactive Programming (new)
● HTML Microservices (new)
● Parse (Backend-as-a-Service) (new)
● Meteor (Assess)
● Ember (Assess)
● Angular (Trial) *
* It’s complicated

8. Adopt

9. ECMAScript 6
Babel (transpiler)
Arrows
Template Strings
Let and Const
Enhanced object literals
Default + rest + spread
Destructing
Classes
Modules
Promises
https://github.com/lukehoban/es6features

10. Trial

11. Static Site Generators
● For content that doesn’t update very frequently
● Build and deploy an entire new site each time
● Can rely on CDNs

12. React
● Facebook
● Virtual DOM
● JSX
● Favors small modules
https://facebook.github.io/react/

13. WebPack
● node modules in the browser
● Multiple output bundles (more powerful that Browserify)
● Lots of plugins
● Optimize build (deduping, etc)
● Quite steep learning curve
https://webpack.github.io/

14. Assess
(Techniques, Reduce layers, and Frameworks)

15. Assess
Techniques

16. Universal (Isomorphic) Web Applications
● “Same code on client and server”
● Easy concept, hard in practice
○ Routing
○ Sync HTTP requests on server, async on the client
○ Send state twice: HTML and serialized store
● Rendr (Backbone)
● (Ember)
● (Angular 2)
http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/

17. Unidirectional data flow on the client
● Flux
● Redux
● ...
● Elm (language)
http://staltz.com/unidirectional-user-interface-architectures.html

19. Client-side Reactive Programming
● RxJS
● Bacon
● …
● Having good FP skills is a requirement
● Angular 2 will use RxJS → adoption
http://reactivex.io
https://baconjs.github.io

20. Assess
Reduce layers

21. Background
Need
Deliver increments of end-to-end solutions faster.
How to do this with both backend (API) and frontend?
Idea
Sometimes you don’t need to develop an API or a SPA!

22. Microservices with HTML interface
● “Back to basics”
● Reduces complexity, if feasible
● Independent
○ ...or backed by REST API (Gateway web server)

23. Parse (Backend-as-a-Service)
● JavaScript (including node.js), iOS, Android, etc etc
○ Backbone
○ Recently launched React support
● Native notifications
● Authentication out-of-the-box
● Pay for requests/sec and unique users to notify
https://parse.com

24. Meteor
● “Full-stack”
● mini-Mongo on the client
● Reactive (server-push via websockets)
○ Templates are reactive too
● Folder structure dictates where JavaScript is run
● Insecure by default (insecure package)
● User account module: sign-up, reset password, Twitter, Facebook, Google
https://www.meteor.com

25. Reduce layers
Dashed lines are for elements not developed.
E.g. when using Parse, the API is a service you configure

26. Assess
Client-side frameworks

27. Ember
● Assess (2013) → Assess (2015)
● Quite heavy framework
● Universal JS support very soon™
● Supply of devs with Ember relatively low (compared to Angular)
● ...still nice ideas in the framework
● Very good with backward compatible releases (compared to Angular)
○ 6 weeks iterations
http://emberjs.com

28. Angular / Angular 2
● ...it’s complicated
● Very high adoption of Angular ←→ Very high supply of Angular devs
● Angular 2 not compatible with Angular 1
● TypeScript!
● One-way data binding
● Performance
● Server-side rendering
● Better programming concepts (service, et al)
● Angular 2 will probably dominate, when released
https://angularjs.org
https://angular.io

29. Analysis

30. Overview
● ECMAScript 6 Adopt (new)
● Static Site Generators Trial (new)
● React Trial (Assess)
● Webpack Trial (new)
● Universal (Isomorphic) Web Applications Assess (new)
● Unidirectional data flow on the client Assess (new)
● Client-side Reactive Programming Assess (new)
● HTML Microservices Assess (new)
● Parse (Backend-as-a-Service) Assess (new)
● Meteor Assess (Assess)
● Ember Assess (Assess)
● Angular Assess (Trial) *
* It’s complicated

31. Advices to manage the high rate of change

32. Do your own Tech Radar
http://nealford.com/memeagora/2013/05/28/build_your_own_technology_radar.html
https://github.com/bdargan/techradar

33. Diversity and prediction
http://www.amazon.com/The-Difference-Diversity-Creates-Societies/dp/0691138540

34. Innovation tokens
● Idea: you have 2-3 “innovation tokens” to spend on “new tech”
● Over time, you might earn another token
● Because: New tech → risk
● What’s the competence in the company?
http://mcfunley.com/choose-boring-technology

35. Innovation tokens
http://mcfunley.com/choose-boring-technology

36. Thank you for listening!
@gustaf_nk