Introducing AngularJS - Frontenders Verona

Breve presentazione di AngularJS. Introduzione al workshop per la realizzazione di una todo list (sorgenti: https://github.com/dwightjack/angular-todolist-fevr)

Transcript

1. INTRODUCING Marco Solazzi @dwightjack
2. ABOUT ME Senior Front-End Developer @ Intesys Autore canale JavaScript @ HTML.it
3. COS'È ANGULARJS? “AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly.”
4. Sviluppato a partire dal 2009 by Miško Hevery and Adam Abrons Rilasciato da Google con licenza open-source nel 2010 Attualmente alla versione 1.2.18
5. YET ANOTHER MV* FRAMEWORK?!
6. PERCHÉ? ☠ i test... questi sconosciuti ☠ troppo codice boilerplate per configurare e inizializzare ☠ string templating sucks ☠ le view imperative non hanno controllo su cosa è cambiato (http://bit.ly/1oYjPmL)
7. SOLUZIONI ✌ TEST-FIRST Unit test con + E2E test con ✌ MVVM, DATA BINDING E DEPENDENCY INJECTION Models talk to Views talk to Models Addio agli event listeners Semplificazione contro sovra-ingegnerizzazione Karma Jasmine Protractor
8. ✌ TEMPLATING BASATO SUL DOM Si aggiorna solo ciò che serve quando serve ✌ VIEW DICHIARATIVE Estensione dell'HTML Si utilizzano classi e attributi per definire nuove interazioni
9. ma soprattutto... ✌ NO NEED FOR MAGIC
10. EXTENDABLE DOM (HTTP://BIT.LY/1CRPMPV) OBSERVE OBJECTS (HTTP://BIT.LY/TS1PRR) INHERITANCE (HTTP://BIT.LY/1QHW2ZP)
11. WELCOME TO THE FUTURE!
12. THE DARK SIDE MODEL RIDOTTO ALL'OSSO UTILITY LIMITATE SEO ??? CRAPPY-CODE PRONE
13. LEARNING CURVE?
14. TODAY DEMO
15. STACK AngularJS Bootstrap jQuery Grunt + Bower
16. LET'S CODE! g i t c l o n e h t t p s : / / g i t h u b . c o m / d w i g h t j a c k / a n g u l a r - t o d o l i s t - f e v r . g i t c d a n g u l a r - t o d o l i s t - f e v r n p m i n s t a l l b o w e r i n s t a l l g r u n t