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

Introducing AngularJS - Frontenders Verona

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)

Marco Solazzi

June 26, 2014
Tweet

More Decks by Marco Solazzi

Other Decks in Programming

Transcript

  1. INTRODUCING
    Marco Solazzi @dwightjack

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

  5. YET ANOTHER MV*
    FRAMEWORK?!

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  11. WELCOME TO THE
    FUTURE!

    View full-size slide

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

    View full-size slide

  13. LEARNING CURVE?

    View full-size slide

  14. STACK
    AngularJS
    Bootstrap
    jQuery
    Grunt + Bower

    View full-size slide

  15. 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 full-size slide