Upgrade to Pro — share decks privately, control downloads, hide ads and more …

La vita dopo Angular 1.X

210a2116d2266c84d155f1d8a14f31ef?s=47 FEVR
February 16, 2016

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?

210a2116d2266c84d155f1d8a14f31ef?s=128

FEVR

February 16, 2016
Tweet

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

  13. None
  14. None
  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
  17. None
  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

  31. None
  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