Data binding libera tutti!

565 views
475 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
565
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Data binding libera tutti!

  1. 1. Data-binding libera tutti! (alla scoperta di AngularJS) un talk di Salvatore Laisa per
  2. 2. Tutto comincia da una storia (o due)... foto di: Hash Milhan (Flickr)
  3. 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. 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. 5. E ora che si fa ?!?! foto di: ed_needs_a_bicycle (Flickr)
  6. 6. Arrivano i framework Javascript! http://addyosmani.github.com/todomvc/
  7. 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. 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. 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. 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. 11. Finalmente Angular!
  12. 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. 13. MVC o MVVMAngularJS viene definita da Google come una libreria MVC avendo iclassici Model, View e Controller ma il suo modus operandi è molto piùsimile al pattern MVVM (Model View View-Model) utilizzato nello sviluppodi interfacce interattive e dai runtime Silverlight e Flex. VIEW VIEW-MODEL MODEL User Interface Logiche, Eventi Dati (Html, CSS) (Javascript) (JSON)
  14. 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. 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. 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. 17. Il lato oscuro di AngularJS
  18. 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. 19. Quindi è meglio o peggio di Backbone? Solo un folle risponderebbe “si” o “no” a questa domanda. e a questo punto....
  20. 20. GRAZIE! Domande? Risposte? @moebiusmania | www.salvatorelaisa.net font utilizzato: Roboto Sans

×