Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Jayway Web Tech Radar 2015
Gustaf Nilsson Kotte (@gustaf_nk)
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 Reacti...
Adopt
ECMAScript 6
Babel (transpiler)
Arrows
Template Strings
Let and Const
Enhanced object literals
Default + rest + spread
Des...
Trial
Static Site Generators
● For content that doesn’t update very frequently
● Build and deploy an entire new site each time
●...
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
● Optimi...
Assess
(Techniques, Reduce layers, and Frameworks)
Assess
Techniques
Universal (Isomorphic) Web Applications
● “Same code on client and server”
● Easy concept, hard in practice
○ Routing
○ Sy...
Unidirectional data flow on the client
● Flux
● Redux
● ...
● Elm (language)
http://staltz.com/unidirectional-user-interfa...
Client-side Reactive Programming
● RxJS
● Bacon
● …
● Having good FP skills is a requirement
● Angular 2 will use RxJS → a...
Assess
Reduce layers
Background
Need
Deliver increments of end-to-end solutions faster.
How to do this with both backend (API) and frontend?
Id...
Microservices with HTML interface
● “Back to basics”
● Reduces complexity, if feasible
● Independent
○ ...or backed by RES...
Parse (Backend-as-a-Service)
● JavaScript (including node.js), iOS, Android, etc etc
○ Backbone
○ Recently launched React ...
Meteor
● “Full-stack”
● mini-Mongo on the client
● Reactive (server-push via websockets)
○ Templates are reactive too
● Fo...
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 Embe...
Angular / Angular 2
● ...it’s complicated
● Very high adoption of Angular ←→ Very high supply of Angular devs
● Angular 2 ...
Analysis
Overview
● ECMAScript 6 Adopt (new)
● Static Site Generators Trial (new)
● React Trial (Assess)
● Webpack Trial (new)
● Un...
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.html
https://github.com/bd...
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 toke...
Innovation tokens
http://mcfunley.com/choose-boring-technology
Thank you for listening!
@gustaf_nk
Jayway Web Tech Radar 2015
Jayway Web Tech Radar 2015
Próxima SlideShare
Cargando en…5
×

Jayway Web Tech Radar 2015

855 visualizaciones

Publicado el

Are you having trouble with all the things happening in web technology lately? Frustrated with the rate of change? Hard to keep up? Then we have good news for you: a little while ago, we at Jayway did a tech radar on web technology and we would like to share it with you.

Some of the technologies we will cover are: ECMAScript 6, React, Angular, Ember, Isomorphic/Universal web applications, Unidirectional client data flow, Backend-as-a-Service, Meteor, and Static site generators.

We will also do a small comparison of the web tech radar we did 18 months ago, and draw conclusions from the differences and the current rate of change.

Finally, we'll give some advices for navigating in the ever changing landscape of new web technology.

Publicado en: Tecnología
  • Sé el primero en comentar

Jayway Web Tech Radar 2015

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

×