Slides del talk del 21 Marzo al 1° AngularJS Day ad Ancona. Come realizzare una dashboard per consultare in tempo reale l'andamento dei piloti in una gara del MotoGP. Tutte le variazioni saranno notificate al client evitando il polling continuo al server. L'architettura dell'applicazione seguirà il paradigma della Command-Query-Responsibility-Segregation (CQRS) in 'salsa' REST. Demo su: http://angularjsday.azurewebsites.net/

1. claudio.pattarello@dotdotnet.org
luca.milan@dotdotnet.org

2.  Cosa vedremo oggi ?
 Introduzione e concetti
 Event Driven Patterns
 Conversare tra “Componenti”
 Demo Moto GP di AngularJSDay

3. ”Le grandi cose non sono
fatte d'impulso, ma
attraverso una serie di
piccole cose messe
insieme”
Vincent Van Gogh

4. Un framework Javascript per sviluppare Applicazioni
Web (non Web Sites)

5. Vedremo come promuovere la modularità delle
applicazioni web tramite l’utilizzo patterns architetturali
guidati da eventi.
Il loro pregio è incentivare il dialogo tra i componenti
dell’applicazione senza introdurre ulteriori livelli di
accoppiamento (maggiore coesione).
Scopriremo inoltre che AngularJS “out of the box” ha
tutto quello che serve per realizzare architetture “event
o message driven”.

6. Imparare a pensare ad eventi per
sviluppare applicazioni SOLIDE

7. OBIETTIVO:
MODULARITA’

8. Infrastruttura / Architettura “CLASSICA”
 Pull System
Request / Response
Client Server

9. Infrastruttura / Architettura “CLASSICA”
 Pull System
Request / Response
Clients Server

10. Infrastruttura / Architettura “ad eventi”
 Push System
Message
Clients ServerServiceBus
Message
Message

11. Infrastruttura / Architettura “ad eventi”
 Pattern publisher / subscriber
Client Server
Subscribe

12. Infrastruttura / Architettura “ad eventi”
 Pattern publisher / subscriber
Client Server

13. Infrastruttura / Architettura “ad eventi”
 Pattern publisher / subscriber
Clients Server

14. Infrastruttura / Architettura “ad eventi”
 Pattern publisher / subscriber
Clients Server

15. Infrastruttura / Architettura “ad eventi”
 Pattern publisher / subscriber
Clients Server
Message

16.  Attori:
◦ Server
 Api & Commands: REST via WebApi
 Event Stream: SignalR
◦ Client
 Commands: REST AngularJS ($resource)
 Event Stream: JQuery Proxy for SignalR
 Channel: Service AngularJS ($scope, $emit/$on)

17. Imparare a pensare ad eventi per
sviluppare applicazioni SOLIDE

18. FACCIAMO
CONVERSAZIONE!

19. “Qual è il modo migliore per
condividere informazioni tra
componenti ?”
Ci sono più opzioni in “pista” …

20. Services
(Singleton)
$scope
(event
system)
$scope
(prototypal
inheritance)

21. Scope Tree

22. “Gli scopes sono organizzati in una struttura
gerarchica ed hanno una radice comune: il
$rootScope …”
Questo li rende idonei ad essere usati come un bus per
gli eventi…

23. Ogni controller ha il
suo scope che eredita
in modo prototipale
dallo scope padre.
Il livello di
annidamento tra gli
scope ricalca l’albero
del DOM …

24. Grazie alla gerarchia degli scopes possiamo spedire
eventi in qualsiasi e direzione.
$emit(name,args)
$on(name, listener)

25. Per sfruttare a fondo l’Event System di AngularJS
possiamo usare il pattern publish-subscribe. Grazie a
questo pattern possiamo:
1. Diminuire l’accoppiamento tra i componenti
2. Incapsulare i dettagli legati ai meccanismi di
comunicazione
3. Incrementare modularità, riuso e testabilità

26. E’ indicato:
 quando abbiamo più “subscribers” in ascolto su un
evento e questi “subscribers” fanno molto più che
portare informazioni sulla “view”;
E’ meno indicato:
 per replicare o sostituire logiche di databinding
all’interno delle direttive;
 per osservare servizi “state based” che vengono
utilizzati per aggiornare la “view”

27. “E’ un’API che incapsula le logiche dei messaggi
ed espone una coppia di metodi publish e
subscribe per ogni tipologia di messaggio da
inviare”

30. Ci sono 2 messaggi, uno per il settore e uno lo status del GP
E per ognuno di questi esiste una coppia di metodi pub/sub

35. Simulazione del moto GP di Ancona
http://angularjsday.azurewebsites.net