Jayway Web Tech Radar 2015
-
Upload
gustaf-nilsson-kotte -
Category
Technology
-
view
798 -
download
0
Transcript of Jayway Web Tech Radar 2015
![Page 2: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/2.jpg)
![Page 3: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/3.jpg)
Rate of change: High
![Page 4: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/4.jpg)
Inspiration: ThoughtWorks Tech Radar
● Adopt● Trial● Assess● Hold
https://www.thoughtworks.com/radar
![Page 5: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/5.jpg)
Adopt
ECMAScript 6 (new)
![Page 6: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/6.jpg)
Trial
● Static Site Generators (new)● React (Assess)● Webpack (new)
![Page 7: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/7.jpg)
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
![Page 8: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/8.jpg)
Adopt
![Page 9: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/9.jpg)
ECMAScript 6
Babel (transpiler)
ArrowsTemplate StringsLet and ConstEnhanced object literalsDefault + rest + spreadDestructingClassesModulesPromises
https://github.com/lukehoban/es6features
![Page 10: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/10.jpg)
Trial
![Page 11: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/11.jpg)
Static Site Generators
● For content that doesn’t update very frequently● Build and deploy an entire new site each time● Can rely on CDNs
![Page 12: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/12.jpg)
React
● Facebook● Virtual DOM● JSX● Favors small modules
https://facebook.github.io/react/
![Page 13: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/13.jpg)
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/
![Page 14: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/14.jpg)
Assess
(Techniques, Reduce layers, and Frameworks)
![Page 15: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/15.jpg)
Assess
Techniques
![Page 16: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/16.jpg)
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/
![Page 17: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/17.jpg)
Unidirectional data flow on the client
● Flux● Redux● ...● Elm (language)
http://staltz.com/unidirectional-user-interface-architectures.html
![Page 18: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/18.jpg)
![Page 19: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/19.jpg)
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
![Page 20: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/20.jpg)
Assess
Reduce layers
![Page 21: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/21.jpg)
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!
![Page 22: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/22.jpg)
Microservices with HTML interface
● “Back to basics”● Reduces complexity, if feasible● Independent
○ ...or backed by REST API (Gateway web server)
![Page 23: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/23.jpg)
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
![Page 24: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/24.jpg)
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
![Page 25: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/25.jpg)
Reduce layers
Dashed lines are for elements not developed. E.g. when using Parse, the API is a service you configure
![Page 26: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/26.jpg)
Assess
Client-side frameworks
![Page 27: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/27.jpg)
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
![Page 28: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/28.jpg)
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
![Page 29: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/29.jpg)
Analysis
![Page 30: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/30.jpg)
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
![Page 31: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/31.jpg)
Advices to manage the high rate of change
![Page 32: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/32.jpg)
Do your own Tech Radar
http://nealford.com/memeagora/2013/05/28/build_your_own_technology_radar.htmlhttps://github.com/bdargan/techradar
![Page 33: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/33.jpg)
Diversity and prediction
http://www.amazon.com/The-Difference-Diversity-Creates-Societies/dp/0691138540
![Page 34: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/34.jpg)
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
![Page 35: Jayway Web Tech Radar 2015](https://reader031.fdocuments.net/reader031/viewer/2022030211/58a3153c1a28ab1d068b5739/html5/thumbnails/35.jpg)
Innovation tokens
http://mcfunley.com/choose-boring-technology