Your SlideShare is downloading. ×
0
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

"Don't call us, we'll call you" - AngularJS meets Event-Driven Architecture

324

Published on

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 …

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/

Published in: Technology
2 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
324
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
2
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Secondo me questaèl’approcciosu cui poggianoAngularJS e le Applicazioni Web Moderne. In entrambiicasisitratta di far collaborare I moduli dell’applicazionetralorosenzaintrodurreaccoppiamentiforti.
  • Transcript

    • 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”
    • 28. 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
    • 29. Simulazione del moto GP di Ancona http://angularjsday.azurewebsites.net

    ×