Data binding libera tutti!

Data binding libera tutti!

• 1.
  Data-binding libera tutti! (alla scoperta di AngularJS) un talk di Salvatore Laisa per
• 2.
  Tutto comincia dauna storia (o due)... foto di: Hash Milhan (Flickr)
• 3.
  Un inizio alcontrario 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 diFlash 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 chesi fa ?!?! foto di: ed_needs_a_bicycle (Flickr)
• 6.
  Arrivano i frameworkJavascript! 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 frameworkJavascript? • 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 thejungle! 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à soltantouno? 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 AngularJSviene 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: postinclusione) 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 vistae 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 oscurodi 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 è meglioo 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