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