Data binding libera tutti!

Data-binding libera tutti!Data-binding libera tutti!(alla scoperta di AngularJS)

un talk di Salvatore Laisa per

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

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

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

E ora che si fa ?!?!

foto di: ed_needs_a_bicycle (Flickr)

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

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

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

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

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.

Finalmente Angular!

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.

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.

User Interface (Html, CSS)

Logiche, Eventi(Javascript)

Dati(JSON)

VIEW VIEW-MODEL MODEL

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 .

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

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

Il lato oscuro di AngularJS

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?

Quindi è meglio o peggio di Backbone?

Solo un folle risponderebbe “si” o “no” a questa domanda.

e a questo punto....

GRAZIE!Domande? Risposte?

font utilizzato: Roboto Sans

@moebiusmania | www.salvatorelaisa.net