Patterns de développement
pour une application Web
réactive et concurrente
25/10/2013
Qui sommes-nous ?
@fXzo

@antoined
De quoi allons nous vous parler ?

•  Un concours : Typesafe Developer Contest
•  Une application : Car Race Dashboard
•  ...
Des patterns pour...

•  Effectuer des traitements asynchrones
•  Gérer des états dans notre application
•  Travailler ave...
L’application
Environ 20 heures de travail sur une semaine

scala	
  
coffee	
  
html	
  

Nb	
  file	
   Nb	
  lines	
  Avg...
Le résultat
« Fabrice and Antoine have designed an app
that is simply awesome, and a very, very close
runner up to the win...
Démo
Architecture globale
Navigateur

Navigateur

Flux SSE

Track = List [TrackPoint]
RTevListener

RTevListener

Race
Akka.sys...
Architecture globale
Navigateur

Navigateur

Flux SSE

Track = List [TrackPoint]
RTevListener

RTevListener

Race
Akka.sys...
La course

case class Position(latitude: Double, longitude: Double)
case class TrackPoint(id: Int, position: Position)
typ...
Déplacement des voitures

//return new CheckPoint on the track at distance d from point
private def next(point: TrackPoint...
La Simulation - CarActor

•  Un Acteur Akka par coureur
o 
o 

Gère l’état courant du coureur : sa position actuelle,
sa v...
La Simulation - RaceActor

•  Un Acteur Akka pour gérer tous les coureurs
o 

Envoie le message “start” à tous les coureur...
Architecture globale
Navigateur

Navigateur

Flux SSE

Track = List [TrackPoint]
RTevListener

RTevListener

Race
Akka.sys...
La Simulation - RaceActor
o 

Produit le flux d’événements à partir des CarActor et
le lie au Moteur

// Connect the event...
Architecture globale
Navigateur

Navigateur

Flux SSE

Track = List [TrackPoint]
RTevListener

RTevListener

Race
Akka.sys...
Le moteur
•  Le moteur est un acteur Akka recevant tous les

• 

événements émis par tous les véhicules
Pour chaque événem...
Le moteur

•  Un autre acteur (StatsActor) est planifié pour calculer
• 
• 

régulièrement des statistiques (vitesse moyen...
Architecture globale
Navigateur

Navigateur

Flux SSE

Track = List [TrackPoint]
RTevListener

RTevListener

Race
Akka.sys...
Flux SSE

•  Pour chaque navigateur accédant à l’application, un
• 
• 

acteur « RTEventListener » est créé
Cet acteur est...
Interface

•  Au niveau de l’interface HTML5, le flux SSE est
• 

connecté avec l’objet JavaScript « EventSource »
Pour ch...
Merci !
Questions ?
Prochain SlideShare
Chargement dans…5
×

Patterns de développement pour une application Web réactive et concurrente

2 110 vues

Publié le

Nous avons remporté le deuxième prix du concours Typesafe grâce à l’application Carracedashboard dont l’objectif était de démontrer les possibilités du stack Typesafe. Carracedashboard est une simulation et un suivi en temps réel d’une course automobile. Nous utiliserons cet exemple pour illustrer plusieurs cas d’utilisation d’acteurs Akka pour le développement d’une application web et en quoi la programmation fonctionnelle et l’API Iteratee de Play! rend intuitif le développement d’applications de simulation. Nous montrerons également comment utiliser HTML5 pour améliorer la fluidité des déplacements sur les cartes.

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 110
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 137
Actions
Partages
0
Téléchargements
157
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Patterns de développement pour une application Web réactive et concurrente

  1. 1. Patterns de développement pour une application Web réactive et concurrente 25/10/2013
  2. 2. Qui sommes-nous ? @fXzo @antoined
  3. 3. 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
  4. 4. Des patterns pour... •  Effectuer des traitements asynchrones •  Gérer des états dans notre application •  Travailler avec un stream d’événements
  5. 5. L’application Environ 20 heures de travail sur une semaine scala   coffee   html   Nb  file   Nb  lines  Avg  lines   9   770   86   7   343   49   4   275   68  
  6. 6. 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
  7. 7. Démo
  8. 8. Architecture globale Navigateur Navigateur Flux SSE Track = List [TrackPoint] RTevListener RTevListener Race Akka.system.eventStream Car Car Car Car Car Stats Stream.events: Enumerator Simulation Storage Moteur MongoDB
  9. 9. Architecture globale Navigateur Navigateur Flux SSE Track = List [TrackPoint] RTevListener RTevListener Race Akka.system.eventStream Car Car Car Car Car Stats Stream.events: Enumerator Simulation Storage Moteur MongoDB
  10. 10. La course case class Position(latitude: Double, longitude: Double) case class TrackPoint(id: Int, position: Position) type Track = List[TrackPoint]
  11. 11. Déplacement des voitures //return new CheckPoint on the track at distance d from point private def next(point: TrackPoint, d: Double): TrackPoint
  12. 12. La Simulation - CarActor •  Un Acteur Akka par coureur o  o  Gère l’état courant du coureur : sa position actuelle, sa vitesse instantanée, la distance parcourue 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
  13. 13. 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"
  14. 14. Architecture globale Navigateur Navigateur Flux SSE Track = List [TrackPoint] RTevListener RTevListener Race Akka.system.eventStream Car Car Car Car Car Stats Stream.events: Enumerator Simulation Storage Moteur MongoDB
  15. 15. La Simulation - RaceActor o  Produit le flux d’événements à partir des CarActor et le lie au Moteur // Connect the event stream to the storage actor new Streams(currentRace.get).events(Iteratee.foreach[models.Events.Event] { event => models.StorageActor.actor ! event }) → pour chaque événement produit par Streams, transmet l’événement au Moteur (“StorageActor”)
  16. 16. Architecture globale Navigateur Navigateur Flux SSE Track = List [TrackPoint] RTevListener RTevListener Race Akka.system.eventStream Car Car Car Car Car Stats Stream.events: Enumerator Simulation Storage Moteur MongoDB
  17. 17. Le moteur •  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
  18. 18. 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
  19. 19. Architecture globale Navigateur Navigateur Flux SSE Track = List [TrackPoint] RTevListener RTevListener Race Akka.system.eventStream Car Car Car Car Car Stats Stream.events: Enumerator Simulation Storage Moteur MongoDB
  20. 20. 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
  21. 21. 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
  22. 22. Merci ! Questions ?

×