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
   

   View Slide

2. ABOUT ME
   Senior Front-End Developer @ Intesys
   Autore canale JavaScript @ HTML.it
   

   View Slide

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.”
   

   View Slide

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
   

   View Slide

5. YET ANOTHER MV*
   FRAMEWORK?!
   

   View Slide

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)
   

   View Slide

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
   

   View Slide

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
   

   View Slide

9. ma soprattutto...
   ✌ NO NEED FOR MAGIC
   

   View Slide

10. EXTENDABLE DOM
    (HTTP://BIT.LY/1CRPMPV)
    OBSERVE OBJECTS
    (HTTP://BIT.LY/TS1PRR)
    INHERITANCE
    (HTTP://BIT.LY/1QHW2ZP)
    

    View Slide

11. WELCOME TO THE
    FUTURE!
    

    View Slide

12. THE DARK SIDE
    MODEL RIDOTTO ALL'OSSO
    UTILITY LIMITATE
    SEO ???
    CRAPPY-CODE PRONE
    

    View Slide

13. LEARNING CURVE?
    

    View Slide

14. TODAY DEMO
    

    View Slide

15. STACK
    AngularJS
    Bootstrap
    jQuery
    Grunt + Bower
    

    View Slide

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
    

    View Slide