spa avec angular et signalr (fr)
DESCRIPTION
Angular n'est pas un simple framework mvc, il va plus loin et change fondamentalement notre manière de concevoir des applications web. De l'avis de ses auteurs Angular est la plateforme qu'aurait été le couple html et JavaScript si ils avaient été créés aujourd'hui. SignalR quand a lui change aussi radicalement la manière de voir l'interaction avec les utilisateurs grace a sa communication bi-directionnelle simplifiée. Il est intéressant de réunir les deux pour profiter du meilleur des deux mondes, de voir comment des bindings et des évènements se propagent de bout en bout et ainsi avoir un aperçu des applications de demain.TRANSCRIPT
![Page 2: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/2.jpg)
About
ArtOfNet
www.altnetfr.org
![Page 3: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/3.jpg)
Single Page Application
+
![Page 4: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/4.jpg)
SPA
Single page applications for a changing world
![Page 5: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/5.jpg)
Web 1.0
APPLICATIONLOGIC
HTML
![Page 6: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/6.jpg)
Web 2.0
APPLICATIONLOGIC
HTML
WebServices JSON || XML
![Page 7: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/7.jpg)
HTML5
HTML
RESTAPI
JSON
STATICFILES
APPLICATIONLOGIC
![Page 8: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/8.jpg)
• Meilleure séparation logique entre les parties clientes et serveur
• Développements plus spécialisées et responsables• Plus de réactivité de l’application• Plus de réactivité dans le développement!
Avantages
![Page 9: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/9.jpg)
• Faire confiance au client…• Mais : Avec les navigateurs modernes auto-évolutifs ce
n’est plus un problème• Qualités et connaissances différentes du monde
serveur/.net• Mais: dans tous les cas vous finissez par produire du
html/js/css, autant que ce soit par des pros non?
Inconvénients
![Page 10: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/10.jpg)
• Au lieu de suivre le plan• Au lieu de faire confiance à une plateforme connue• Non mais sérieux, du javascript?!...
Faut-il s’adapter?
![Page 11: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/11.jpg)
We are uncovering better ways of developing software by doing it and helping others do it. Through this work we have come to value:
• Individuals and interactions over processes and tools• Working software over comprehensive documentation• Customer collaboration over contract negotiation
•Responding to change over following a plan
That is, while there is value in the items on the right, we value the items on the left more.
Agile Manifesto …
![Page 12: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/12.jpg)
…et cela changera encore demain!
![Page 13: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/13.jpg)
Single Page Application
+
![Page 14: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/14.jpg)
Single Page Application
![Page 15: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/15.jpg)
Single Page Application
SERVER
CLIENT
TOOLS
![Page 16: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/16.jpg)
![Page 17: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/17.jpg)
SignalR
“Fournir simplement des fonctionnalités temps réel pour les applications web”
Le serveur est capable de pousser des informations vers le client dès que les
évènements arrivent
![Page 18: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/18.jpg)
Install
Install-Package Microsoft.AspNet.SignalR
![Page 19: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/19.jpg)
[HubName(“Notifier”)]public class MyHub : Hub{ public void Notify(string message) { Clients.Others.notified(message); Clients.Caller.notifyDone(); } }
public void Configuration(IAppBuilder app){ app.MapSignalR();}
var hub = $.connection.Notifier;
$.connection.hub.start().done(function () { $('#btn').on('click',function(){ hub.server.notify(
$('#messageInput').val()); })});
hub.client.notified = function (message) { alert(message.Content);};hub.client.notifyDone = function(){ alert(‘message sent’);}
Client Server
1
2
3
Code
3
![Page 20: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/20.jpg)
• Stabilisation, bugfix• Suppression des dépendances ASP.NET
• Support direct sur OWIN• Support CORS• Amélioration du support des backplanes
• Ex: • Nuget install Microsoft.AspNet.SignalR.ServiceBus• GlobalHost.DependencyResolver.UseServiceBus(cs,”name”)
SignalR 2.0, What’s new?
![Page 21: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/21.jpg)
• Groupes Multiples(un client vers +s groupes)
• User Method (appeler un client par son nom au lieu de son id)
• Error handling • throw new HubException back to client -> then call .fail(callback)• Generic error on client hubs : hub.error(callback)
SignalR 2.0, What’s new?
![Page 22: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/22.jpg)
• http://www.asp.net/signalr/overview/signalr-20• signalR.net• Github.com/signalR/signalR
Resources:
![Page 23: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/23.jpg)
• http://www.asp.net/ajaxlibrary/cdn.ashx#ASPNET_SignalR_Releases_on_the_CDN_17
• http://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.0.2.min.js
CDN
![Page 24: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/24.jpg)
Note: OWIN matters!
![Page 25: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/25.jpg)
• SPA, step 1 : Server Side• Initialisation serveur OWIN, SignalR, Nancy
Codes sur:
https://github.com/rhwy/Demos-Angular-SignalR
Let’s code
![Page 26: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/26.jpg)
ANGULAR
![Page 27: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/27.jpg)
WHY ???
![Page 28: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/28.jpg)
Angular better browser
Angular ressemble peut être à ce que seraient les navigateurs si ils avaient été crées pour executer des applications et non lire des documents.
![Page 29: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/29.jpg)
• Angular est • SOLIDe, DRY, KISS• Déclaratif • Comportemental et contextuel• Faiblement couplé• Testable
Structure
![Page 30: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/30.jpg)
• Low ceremony• Pojo models !!!• Tdd in mind• Injection de dépendances!
Benefices
![Page 31: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/31.jpg)
• Moins de Code• Plus de manipulation du DOM!• Code plus simple• Résultats immédiats!
Benefices
![Page 32: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/32.jpg)
AWESOME, ya?
![Page 33: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/33.jpg)
• Angular change le HTML courant par le biais de Directives• Elements Html, tags (E)• Attributs (A)• Classes Css (C)
Déclaratif
![Page 34: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/34.jpg)
• Tous les éléments de base sont déja des directives!• ng-app• ng-model• ng-repeat• ng-controller• …
Les éléments de base
![Page 35: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/35.jpg)
• Angular gère l’état et la synchronisation de données pour vous au sein d’un contexte
• Il vous offre les moyens de les connecter à l’extérieur • $watch• $apply
2-way binding
![Page 36: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/36.jpg)
• Tout est clairement découplé par role fonctionnel:• Modules (le plus haut niveau, package)• Directives• Configuration (ex: routage)• Controllers• Services• Constantes
Roles
![Page 37: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/37.jpg)
• Tout element est injectable• Par convention : le nom
• app.value(‘truc’, 42);• app.controller(‘monCtrl’, function(truc){});
• Ou la position+tableau de noms• app.controller(‘monController’,[‘truc’,function(truc){}]);• WARNING: toujours utiliser la 2e pour cause de minification de votre code
IoC/DI
![Page 38: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/38.jpg)
• SPA, step 2 : Client Side• Initialisation outils client, Angular
Codes sur:
https://github.com/rhwy/Demos-Angular-SignalR
Let’s code
![Page 39: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/39.jpg)
• Nativement les bots google et autres ne savent pas interpréter le javascript
• Utiliser google’s Ajax protocol (ou pushstate):• ‘#!’ -> ‘_escaped_fragment’
• Générer les pages coté serveur• en re-codant des version simplifiées full html• En utilisant des moteurs de rendu html (ex:
prerender.io)
Petit mot du SEO
![Page 40: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/40.jpg)
Embrace the change!
![Page 42: SPA avec Angular et SignalR (FR)](https://reader035.vdocuments.net/reader035/viewer/2022081504/554f8cb3b4c9052a518b51b3/html5/thumbnails/42.jpg)