jayway web tech radar 2015
TRANSCRIPT
Rate of change: High
Inspiration: ThoughtWorks Tech Radar
● Adopt● Trial● Assess● Hold
https://www.thoughtworks.com/radar
Adopt
ECMAScript 6 (new)
Trial
● Static Site Generators (new)● React (Assess)● Webpack (new)
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
Adopt
ECMAScript 6
Babel (transpiler)
ArrowsTemplate StringsLet and ConstEnhanced object literalsDefault + rest + spreadDestructingClassesModulesPromises
https://github.com/lukehoban/es6features
Trial
Static Site Generators
● For content that doesn’t update very frequently● Build and deploy an entire new site each time● Can rely on CDNs
React
● Facebook● Virtual DOM● JSX● Favors small modules
https://facebook.github.io/react/
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/
Assess
(Techniques, Reduce layers, and Frameworks)
Assess
Techniques
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/
Unidirectional data flow on the client
● Flux● Redux● ...● Elm (language)
http://staltz.com/unidirectional-user-interface-architectures.html
Client-side Reactive Programming
● RxJS● Bacon● …● Having good FP skills is a requirement● Angular 2 will use RxJS → adoption
http://reactivex.iohttps://baconjs.github.io
Assess
Reduce layers
Background
NeedDeliver increments of end-to-end solutions faster.How to do this with both backend (API) and frontend?
IdeaSometimes you don’t need to develop an API or a SPA!
Microservices with HTML interface
● “Back to basics”● Reduces complexity, if feasible● Independent
○ ...or backed by REST API (Gateway web server)
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
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
Reduce layers
Dashed lines are for elements not developed. E.g. when using Parse, the API is a service you configure
Assess
Client-side frameworks
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
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.orghttps://angular.io
Analysis
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
Advices to manage the high rate of change
Do your own Tech Radar
http://nealford.com/memeagora/2013/05/28/build_your_own_technology_radar.htmlhttps://github.com/bdargan/techradar
Diversity and prediction
http://www.amazon.com/The-Difference-Diversity-Creates-Societies/dp/0691138540
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
Innovation tokens
http://mcfunley.com/choose-boring-technology
