La vita dopo Angular 1.X

eact e Polymer sono i nuovi gioielli splendenti dello sviluppo frontend, ma aspettate... fino all'anno scorso non era Angular? Cos'è successo nel frattempo, Angular non va più bene? React è davvero così superiore? E Polymer? E cosa cambierà da Angular 1 ad Angular 2? E' solo un'altro giro di trend o siamo di fronte ad un cambiamento molto più profondo?

Transcript

1. La vita dopo Angular 1.x (AKA: cosa c’è dietro l’Angular) Salvatore Laisa FEVR - 16/02/2016
2. ABOUT ME • Lead Frontend Engineer @ Contactlab • Fat cat owner • Kung-fu (viet vo dao) • Doctor Who fan • @moebiusmania • www.salvatorelaisa.me
3. Mohole 2009 IBS 2007 4ward 2013 21-11 1982 ContactLab 2015
4. da Angular a React
5. da Backbone a Polymer
6. da Angular a Angular 2
7. da MVC a Componenti
8. 1. Background
9. 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
10. 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
11. “ho preso questo nuovo framework JS… … nel progetto!”
12. 2. Cosa è successo
15. Photo by: https://www.facebook.com/ClaudineStrummerPhotography/ WTF?
16. Non c’è il routing Non c’è un equivalente di $http Non c’è data-binding a 2 vie E anche io non mi sento bene
18. LOST IS THE NEW FOUND
19. 3. Cosa ho imparato
20. PENSARE IN COMPONENTI
21. PENSARE IN COMPONENTI
22. 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
23. 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)
24. 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
25. 4. Tips
26. REACT TEMPLATES http://wix.github.io/react-templates/ (servito con integrazioni per Webpack, Gulp e altri)
27. ES6 + BABEL + Webpack || Gulp || whatever for “live compiling”
28. DA HTML A JSX https://facebook.github.io/react/html-jsx.html Sfortunatamente non sempre JSX è “plain” HTML
29. WEBPACK / VULCANIZE ! ! ! exports {} exports {} require()
30. 5. Filosofia
32. Concentrati sul mediator pattern e i web components non su React o Polymer o Angular2
33. FLUX Non è stato creato per te
34. Polyfills FTW! ( caniuse.com )
35. Controlla il data-binding… …prima che il data-binding controlli te!
36. Qualunque framework o libreria JS sarà obsoleto entro 3-5 anni
37. Insistere su vanilla Javascript e librerie agnostiche
38. Sii interessato al progresso. non a chi lo fa
39. GRAZIE