Il documento tratta del passaggio dai framework JavaScript precedenti a AngularJS, un framework sviluppato da Google per semplificare la creazione di applicazioni web interattive. Viene discusso il concetto di data-binding, le differenze tra i pattern MVC e MVVM, e i principali vantaggi e svantaggi di AngularJS. Infine, si confronta AngularJS con altri framework, come Backbone, senza dare una risposta definitiva su quale sia migliore.

1. Data-binding libera tutti!
(alla scoperta di AngularJS)
un talk di Salvatore Laisa per

2. Tutto comincia da una storia (o due)...
foto di: Hash Milhan (Flickr)

3. Un inizio al contrario
Intorno al 2006/2007 lo sviluppo di RIA (le antenate dell App e WebApp)
crossbrowser era una cosa fattibile solamente attraverso la Flash
Platform, sopratutto con l’allora poco compreso e utilizzato framework
Flex. Infatti iniziai con Flash e dopo con Html/Css/Js...

4. Il declino di Flash e il vuoto da colmare
Si arriva al 2010 e comincia il declino della Flash Platform, tutti
entuasiasti di HTML5 per le prime (semplici) cose. Poi i nodi vengono al
pettine: scarsa compatibilità, no data-binding, in Javascript niente classi,
no MVC (o pattern in generale)...

5. E ora che si fa ?!?!
foto di: ed_needs_a_bicycle (Flickr)

6. Arrivano i framework Javascript!
http://addyosmani.github.com/todomvc/

7. I “wanna-be” framework
jQuery e soci si stavano confermando come tools fondamenteli nel web
development in quel periodo, tuttavia definirli framework era una un bel
fraintendimento, in questo caso si parlava di librerie. Comode sì, ma
librerie. Per chi sviluppava applicazioni mancava ancora qualcosa...

8. Un vero framework Javascript?
• Simulazione delle classi e OOP (JS è linguaggio a prototipi)
• Templating lato client
• Pochi Kb ma buoni!
• Combinabile con librerie come jQuery & co.
• No componenti (ci sono Bootstrap, jQuery UI o Kendo UI per questo!)

9. Welcome to the jungle!
Nel giro di poco tempo ci troviamo sommersi di framework Javascript
seri che sperano di replicare il successo di jQuery nell’ambito dei design
pattern. Il più comune fra tutti il pattern MVC.
“Journey Through The
JavaScript MVC Jungle”
- Smashing Magazine

10. Ne rimarrà soltanto uno?
Attualmente la community dei web-developers si sta interessando molto
a Backbone, anche se molti altri framework rimangono delle validissime
opzioni, specie visto il fatto che ognuna interpreta il pattern MVC a modo
suo.

11. Finalmente Angular!

12. Cos’è AngularJS
E’ un framework Javascript sviluppato da Google con l’obiettivo di
rendere le pagine web più simili ad applicazioni. Tra le feature più notevoli
ci sono l’architettura del codice (MV*), il data-binding, il routing delle viste,
i moduli e altro ancora.

13. MVC o MVVM
AngularJS viene definita da Google come una libreria MVC avendo i
classici Model, View e Controller ma il suo modus operandi è molto più
simile al pattern MVVM (Model View View-Model) utilizzato nello sviluppo
di interfacce interattive e dai runtime Silverlight e Flex.
VIEW VIEW-MODEL MODEL
User Interface Logiche, Eventi Dati
(Html, CSS) (Javascript) (JSON)

14. Inizializzazione (aka: post inclusione)
Per inizializzare tutta una pagina o solo una parte per lavorare con
AngularJS dovremo inserire in Html l’attributo speciale ng-app .

15. Definire una vista e un controller
Le viste sono normali elementi Html che vengono collegati ad una
funzione Javascript che farà da controller con l’attributo ng-controller.
Ogni controller dovrà avere un argomento $scope che sarà responsabile
di collegare queste due entità.

16. BAM! Data-binding!
L’argomento $scope permette di “muovere” i valori tra pagina Html e
codice Javascript con uno sforzo minimo, ogni variabile o funzione
(puramente JS) creata al suo interno sarà accessibile in Html con
un’espressione di abbinamento {{oggetto}} .

17. Il lato oscuro di AngularJS

18. Che cosa c’è che non va?
• La documentazione puzza
• Al primo impatto molte task semplici non lo sono
• Si sporca l’HTML!
• I cambi di viste non sono facilmente animabili
• Ho già detto che la documentazione puzza?

19. Quindi è meglio o peggio di Backbone?
Solo un folle risponderebbe “si” o “no” a questa domanda.
e a questo punto....

20. GRAZIE! Domande? Risposte?
@moebiusmania | www.salvatorelaisa.net
font utilizzato: Roboto Sans