Slide 1
Slide 1 text
La vita dopo Angular 1.x
(AKA: cosa c’è dietro l’Angular)
Salvatore Laisa
FEVR - 16/02/2016
Slide 2
Slide 2 text
ABOUT ME
• Lead Frontend Engineer @ Contactlab
• Fat cat owner
• Kung-fu (viet vo dao)
• Doctor Who fan
• @moebiusmania
• www.salvatorelaisa.me
Slide 3
Slide 3 text
Mohole
2009
IBS
2007
4ward
2013
21-11
1982
ContactLab
2015
Slide 4
Slide 4 text
da Angular a React
Slide 5
Slide 5 text
da Backbone a Polymer
Slide 6
Slide 6 text
da Angular a Angular 2
Slide 7
Slide 7 text
da MVC a Componenti
Slide 8
Slide 8 text
1. Background
Slide 9
Slide 9 text
MYSELF
• 10 anni di esperienza nel settore
• Appassionato di tech & dintorni
• Co-organizzatore e frequentatore di user groups e community
(Appsterdam Milan, MilanoJS, M&M Mean Milan)
• Ho utilizzato Angular JS 1.x pesantemente dal 2012
• Up to date in the JS world
Slide 10
Slide 10 text
CONTACTLAB
• in attività dal 1998
• Nuovo team di R&D
• Richieste:
• Prototipizzare e realizzare una suite di prodotti
• Look & feel, pattern di UI e logica condivisa
• Costruire tutto da zero
Slide 11
Slide 11 text
“ho preso questo nuovo framework JS…
… nel progetto!”
Slide 12
Slide 12 text
2. Cosa è successo
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Photo by: https://www.facebook.com/ClaudineStrummerPhotography/
WTF?
Slide 16
Slide 16 text
Non c’è il routing
Non c’è un equivalente di $http
Non c’è data-binding a 2 vie
E anche io non mi sento bene
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
LOST IS THE NEW FOUND
Slide 19
Slide 19 text
3. Cosa ho imparato
Slide 20
Slide 20 text
PENSARE IN COMPONENTI
Slide 21
Slide 21 text
PENSARE IN COMPONENTI
Slide 22
Slide 22 text
RE-IMPARARE IL DATA-BINDING
• I dati scorrono dall’alto verso il basso
• Mantenere i dati i più immutabili possibile
• Modificare oggetti e array usando i notifiers
• Ridurre il data-binding a 2 vie solo per i casi
davvero necessari
Slide 23
Slide 23 text
ASSEMBLA IL TUO STACK FRONTEND!
https://github.com/facebook/react/wiki/Complementary-Tools
• Fetch API polyfill
• Flatiron Director
• Lodash
• …
Angular2 è già uno stack completo, e React si sta muovendo
nella stessa direzione ma più modulare (React + Flux + Relay +
GraphQL)
Slide 24
Slide 24 text
Flux + Relay + ecc Fullstack solo Componenti
1-way (2-way module) 2 way 1 or 2 way
Proprietario Web Components Web Components
JSX + ES5/6 + Babel HTML + TypeScript HTML + ES5 (6 + Babel)
Facebook Google (+ Microsoft) Google
Slide 25
Slide 25 text
4. Tips
Slide 26
Slide 26 text
REACT TEMPLATES
http://wix.github.io/react-templates/
(servito con integrazioni per Webpack, Gulp e altri)
Slide 27
Slide 27 text
ES6 + BABEL
+ Webpack || Gulp || whatever for “live compiling”
Slide 28
Slide 28 text
DA HTML A JSX
https://facebook.github.io/react/html-jsx.html
Sfortunatamente non sempre JSX è “plain” HTML
Slide 29
Slide 29 text
WEBPACK / VULCANIZE
!
! !
exports {} exports {}
require()
Slide 30
Slide 30 text
5. Filosofia
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
Concentrati sul mediator pattern e
i web components
non su React o Polymer o Angular2
Slide 33
Slide 33 text
FLUX
Non è stato creato per te
Slide 34
Slide 34 text
Polyfills FTW!
( caniuse.com )
Slide 35
Slide 35 text
Controlla il data-binding…
…prima che il data-binding controlli te!
Slide 36
Slide 36 text
Qualunque framework o libreria JS
sarà obsoleto entro 3-5 anni
Slide 37
Slide 37 text
Insistere su vanilla Javascript
e librerie agnostiche
Slide 38
Slide 38 text
Sii interessato al progresso.
non a chi lo fa
Slide 39
Slide 39 text
GRAZIE