SPA + ANGULARJS

CHI SIAMODI GIORNO

APULIASOFT

CHI SIAMODI NOTTE

CLUB DEGLI SVILUPPATORI

SPA

NO!

NO!

SINGLE PAGEAPPLICATION

DEFINIZIONEWeb application che gira all'interno di una singola pagina HTML

allo scopo di fornire una UX più fluida, comparabile a quella diuna applicazione desktop.

ME TOO

CARATTERISTICHEArchitetturaChunkingTemplatingRoutingReal-time communicationStorageTesting

ARCHITETTURANo SPA

Scripting per la manipolazione del DOM e piccoleelaborazioni

SPA

Applicazione strutturata grazie a design pattern

CHUNKINGNo SPA

Ad ogni richiesta il web server combina HTML e dati e liinvia al client

SPA

La pagina web è costruita nel browser caricando piccoliframmenti di HTML e dati

TEMPLATINGNo SPA

Manipolazione del DOM tramite scriptingSPA

Binding dichiarativo tra dati e template

ROUTINGNo SPA

Pagine caricate ad ogni richiestaSPA

Pagine selezionate preservando lo stato

REAL-TIME COMUNICATIONNo SPA

Ogni richiesta è monodirezionale dal browser al web serverSPA

Tra l'applicazione client ed il server sono possibilicomunicazioni bidirezionali

STORAGENo SPA

Carichi intensivi di dati dal server + CookieSPA

Capacità di memorizzare dati nel browser

TESTINGNo SPA

Test trial and error nel browserSPA

Framework di test che permettono TDD, BDD e test E2E

PROS & CONSPros

User ExperienceAlleggerimento del serverJavaScript

Cons

SEOAppesantimento del clientJavaScript

ANGULAR JSSuperheroic JavaScript MVW Framework

ANGULAR JSHTML enhanced for web apps!

ANGULAR JSWhat HTML would have been

had it been designed for building web-apps

ONCE UPON A TIME2009 @ Google Inc.

GOOGLE FEEDBACK6 mesi di progetto17.000 righe di codicesviluppo era lentocodice poco testabile

FRUSTRAZIONE

MISKO HEVERY

MISKO HEVERYSi propone di riscrivere l'intero progetto

da solo

in 2 settimane

con una libreria open-source che ha creato lui per hobby

MISKO HEVERYFallisce

ci metti 3 settimane

porta le linee di codice da 17.000 a 1.500

ANGULAR JSProgetto patrocinato da Google

1.237 contributors in tutto il mondo

su GitHub sotto MIT Licence

CONCETTIModel-View-ViewModelData bindingClient-side templateDependency injection

MODEL VIEW VIEWMODELDesign pattern che implementa la Separation of concerns

tramite Object Oriented Programming

MODEL VIEW VIEWMODEL

MODEL VIEW VIEWMODELPros

EstendibilitàManutenibilitàTestabilità

Cons

Curva di apprendimento

DATA BINDING

DATA BINDINGMappando una componente della UI con una proprietà JS

AngularJS provvederà a mantenerle sincronizzate

DATA BINDINGPros

Velocità di sviluppoSeparation of concerns

Cons

Peso computazionale del rendering

TEMPLATINGServer-side templating

Il server assembla dati e markupIl browser riceve l'HTML e lo mostra

Client-side templating

Il server invia dati e markupIl browser assembla l'HTML e lo mostra

TEMPLATINGServer-side templating

<table> <tr> <td>Totale:</td> <td>1000 €</td> </tr></table>

Client-side templating<table> <tr> <td>Totale:</td> <td>{{total}} €</td> </tr></table>

{total: 1000}

CLIENT-SIDE TEMPLATINGPros

Alleggerimento del serverAlleggerimento della trasmissioneRiuso

Cons

SicurezzaI18nSEO

DEPENDENCY INJECTIONLe classi non creano dipendenze

ma chiedono ciò di cui hanno bisogno

DEPENDENCY INJECTIONPros

Basso accoppiamentoRiusoTestabilità

Cons

Curva di apprendimento

DEMO TIMEgithub.com/Abba90/ricettario

CONCLUSIONISviluppare una SPA è più complesso rispetto allo sviluppo diuna classica applicazione WebLa complessità aumenta di molto sul client e si riduce di pocosul serverLe tecnologie non sono adatte ma si stanno affinando

CONCLUSIONIAngularJS semplifica lo sviluppo delle SPASi può utilizzare per lo sviluppo mobile con Ionic Framework2016 - AngularJS 2 basato su ES6 e Web Components

DOMANDE?

GRAZIE PER L'ATTENZIONE

RIFERIMENTIangularjs.organgular.ioegghead.ioaddyosmani.com/blog/understanding-mvvm-a-guide-for-javascript-developersmartinfowler.com/articles/injection.htmlw3.org/TR/html5w3.org/TR/css3-*developer.mozilla.orgjquery.combackbonejs.orgknockoutjs.comfacebook.github.io/react/dojotoolkit.org

RIFERIMENTIunderscorejs.orgmomentjs.comd3js.orgdocumentup.com/kriskowal/qdurandaljs.comhandlebarsjs.compolymer-project.orgemberjs.comyeoman.iobower.iogruntjs.comgulpjs.comkarma-runner.github.iomochajs.org

RIFERIMENTIjasmine.github.ioqunitjs.comangular.github.io/protractortypescriptlang.orgcoffeescript.orgdartlang.orggetbootstrap.comfoundation.zurb.comlesscss.orgsass-lang.com