Patterns de développement pour une application Web réactive et concurrente
-
Upload
fabrice-croiseaux -
Category
Technology
-
view
1.497 -
download
3
description
Transcript of Patterns de développement pour une application Web réactive et concurrente
![Page 1: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/1.jpg)
Patterns de développement pour une application Web réactive et concurrente
25/10/2013
![Page 2: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/2.jpg)
Qui sommes-nous ? @fXzo @antoined
![Page 3: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/3.jpg)
De quoi allons nous vous parler ? • Un concours : Typesafe Developer Contest • Une application : Car Race Dashboard • Quelques cas d’utilisation des Actors Akka
et des Iteratees
![Page 4: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/4.jpg)
Des patterns pour... • Effectuer des traitements asynchrones • Gérer des états dans notre application • Travailler avec un stream d’événements
![Page 5: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/5.jpg)
L’application
Nb file Nb lines Avg lines scala 9 770 86 coffee 7 343 49 html 4 275 68
Environ 20 heures de travail sur une semaine
![Page 6: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/6.jpg)
Le résultat « Fabrice and Antoine have designed an app that is simply awesome, and a very, very close runner up to the winner. It’s far more than just a sample… and the judge were truly wowed»
https://github.com/intechgrp/CarRaceDashboard
![Page 7: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/7.jpg)
Démo
![Page 8: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/8.jpg)
Architecture globale
Simulation
Race
Car Car Car Car Car
Track = List [TrackPoint]
Navigateur
Moteur
Flux SSE
Navigateur
RTevListener RTevListener
Akka.system.eventStream
Stream.events: Enumerator Storage MongoDB
Stats
![Page 9: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/9.jpg)
Architecture globale
Simulation
Race
Car Car Car Car Car
Track = List [TrackPoint]
Navigateur
Moteur
Flux SSE
Navigateur
RTevListener RTevListener
Akka.system.eventStream
Stream.events: Enumerator Storage MongoDB
Stats
![Page 10: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/10.jpg)
La course
case class Position(latitude: Double, longitude: Double)
case class TrackPoint(id: Int, position: Position)
type Track = List[TrackPoint]
![Page 11: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/11.jpg)
Déplacement des voitures
//return new CheckPoint on the track at distance d from point
private def next(point: TrackPoint, d: Double): TrackPoint
![Page 12: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/12.jpg)
La Simulation - CarActor • Un Acteur Akka par coureur
o Gère l’état courant du coureur : sa position actuelle, sa vitesse instantanée, la distance parcourue
o Réagit à différents messages : § “move” : se déplace à la position suivante § “start” : début de la course, c.a.d. schedule
l’envoi de messages “move” § “getState” : retourne l’état courant
![Page 13: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/13.jpg)
La Simulation - RaceActor • Un Acteur Akka pour gérer tous les coureurs
o Envoie le message “start” à tous les coureurs au démarrage de la course : utilisation d’un BroadcastRouter
router = context.actorOf(Props[CarActor].withRouter(akka.routing.BroadcastRouter(currentRace.get.carActors)))
/ Fire start event : broadcast the event to all CarActors
router ! "start"
![Page 14: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/14.jpg)
Architecture globale
Simulation
Race
Car Car Car Car Car
Track = List [TrackPoint]
Navigateur
Moteur
Flux SSE
Navigateur
RTevListener RTevListener
Akka.system.eventStream
Stream.events: Enumerator Storage MongoDB
Stats
![Page 15: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/15.jpg)
La Simulation - RaceActor o Produit le flux d’événements à partir des CarActor et
le lie au Moteur
→ pour chaque événement produit par Streams, transmet l’événement au Moteur (“StorageActor”)
// Connect the event stream to the storage actor
new Streams(currentRace.get).events(Iteratee.foreach[models.Events.Event] {
event => models.StorageActor.actor ! event
})
![Page 16: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/16.jpg)
Architecture globale
Simulation
Race
Car Car Car Car Car
Track = List [TrackPoint]
Navigateur
Moteur
Flux SSE
Navigateur
RTevListener RTevListener
Akka.system.eventStream
Stream.events: Enumerator Storage MongoDB
Stats
![Page 17: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/17.jpg)
• Le moteur est un acteur Akka recevant tous les événements émis par tous les véhicules
• Pour chaque événement reçu, l’acteur : o Publie l’événement sur le stream d’événements
Akka o Stocke l’événement dans une collection MongoDB
Le moteur
![Page 18: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/18.jpg)
Le moteur • Un autre acteur (StatsActor) est planifié pour calculer
régulièrement des statistiques (vitesse moyenne, min, max, …) par voiture
• Cet acteur se base sur les données insérées dans MongoDB
• Pour chaque statistique calculée, l’actor publie un message dans l’eventStream Akka
![Page 19: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/19.jpg)
Architecture globale
Simulation
Race
Car Car Car Car Car
Track = List [TrackPoint]
Navigateur
Moteur
Flux SSE
Navigateur
RTevListener RTevListener
Akka.system.eventStream
Stream.events: Enumerator Storage MongoDB
Stats
![Page 20: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/20.jpg)
Flux SSE • Pour chaque navigateur accédant à l’application, un
acteur « RTEventListener » est créé • Cet acteur est à l’écoute de l’eventStream Akka • Pour chaque message sur ce stream, l’acteur envoie
dans le flux Server Sent Event une représentation JSON du message
![Page 21: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/21.jpg)
Interface • Au niveau de l’interface HTML5, le flux SSE est
connecté avec l’objet JavaScript « EventSource » • Pour chaque message reçu sur ce flux, l’interface est
mise à jour en fonction du type d’événement : • Nouvelle position : déplace la voiture concernée • Statistiques : met à jour le récapitulatif • Vitesse instantée / distance parcourue : met à jour le compteur
![Page 22: Patterns de développement pour une application Web réactive et concurrente](https://reader036.fdocuments.in/reader036/viewer/2022081401/5595ad8a1a28abcb248b4617/html5/thumbnails/22.jpg)
Merci !
Questions ?