Jayway Web Tech Radar 2015
3 likes974 views
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.
Jayway Web Tech Radar 2015
- 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
- 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)
- 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
- 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
- 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
- 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
- 36. Thank you for listening! @gustaf_nk