SPA avec SignalR et Angular Js
-
Upload
microsoft-developpeurs -
Category
Technology
-
view
1.079 -
download
3
description
Transcript of SPA avec SignalR et Angular Js
Secteur Public
SPA ANGULARjs, SignalR
3 way bindingRui CarvalhoArtisan Logiciel
ArtOfNet
[email protected], codedistillers.com, @rhwy
#mstechdaysSecteur Public
About
ArtOfNet
• Artisan logiciel depuis 15 ans, expérimenté sur le web, les technos Microsoft et l’open source.
• Services:– Conseil, – accompagnement,– Développement– Formation
• Contact: – [email protected]– @rhwy
#mstechdaysSecteur Public
Communauté • Orga ALT.NET fr• Code : github.com/rhwy• Blog:
– www.rui.fr– www.codedistillers.com
www.meetup.com /ALTNETFR /DDD-Paris /paris-software-craftsmanship /AGILE-NET-FRANCE
www.altnetfr.org
#mstechdaysSecteur Public
Ce soir
Grande soirée des COMMUNAUTESTHE JAMES JOYCE PUB71 bd Gouvion St Cyr
http://bit.ly/1fO8NuQ
A partir de 18h!
#mstechdaysSecteur Public
#mstechdaysSecteur Public
Single Page Application
+
Secteur Public#mstechdays
SPA
Single page applications for a changing world
#mstechdaysSecteur Public
Web 1.0
APPLICATIONLOGIC
HTML
#mstechdaysSecteur Public
Web 2.0
APPLICATIONLOGIC HTML
WebServices JSON ||
XML
#mstechdaysSecteur Public
HTML5
HTML
RESTAPI
JSON
STATICFILES
APPLICATIONLOGIC
#mstechdaysSecteur Public
• 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
#mstechdaysSecteur Public
• 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
#mstechdaysSecteur Public
• Au lieu de suivre le plan• Au lieu de faire confiance à une
plateforme connue• Non mais sérieux, du javascript?!...
Faut-il s’adapter?
#mstechdaysSecteur Public
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 …
#mstechdaysSecteur Public
…et cela changera encore demain!
#mstechdaysSecteur Public
Single Page Application
+
#mstechdaysSecteur Public
Single Page Application
#mstechdaysSecteur Public
Single Page ApplicationSERVER
CLIENT
TOOLS
#mstechdaysSecteur Public
#mstechdaysSecteur Public
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
#mstechdaysSecteur Public
Install
Install-Package Microsoft.AspNet.SignalR
#mstechdaysSecteur Public
[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
#mstechdaysSecteur Public
• 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?
#mstechdaysSecteur Public
• 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?
#mstechdaysSecteur Public
• http://www.asp.net/signalr/overview/signalr-20
• signalR.net• Github.com/signalR/signalR
Resources:
#mstechdaysSecteur Public
• 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
#mstechdaysSecteur Public
Note: OWIN matters!
#mstechdaysSecteur Public
• SPA, step 1 : Server Side– Initialisation serveur OWIN, SignalR, Nancy
Codes sur:https://github.com/rhwy/Demos-Angular-SignalR
Let’s code
Secteur Public#mstechdays
ANGULAR
Secteur Public#mstechdays
WHY ???
#mstechdaysSecteur Public
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.
#mstechdaysSecteur Public
• Angular est – SOLIDe, DRY, KISS– Déclaratif – Comportemental et contextuel– Faiblement couplé– Testable
Structure
#mstechdaysSecteur Public
• Low ceremony• Pojo models !!!• Tdd in mind• Injection de dépendances!
Benefices
#mstechdaysSecteur Public
• Moins de Code• Plus de manipulation du DOM!• Code plus simple• Résultats immédiats!
Benefices
#mstechdaysSecteur Public
AWESOME, ya?
#mstechdaysSecteur Public
• Angular change le HTML courant par le biais de Directives– Elements Html, tags (E)– Attributs (A)– Classes Css (C)
Déclaratif
#mstechdaysSecteur Public
• Tous les éléments de base sont déja des directives!– ng-app– ng-model– ng-repeat– ng-controller– …
Les éléments de base
#mstechdaysSecteur Public
• 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
#mstechdaysSecteur Public
• Tout est clairement découplé par role fonctionnel:– Modules (le plus haut niveau, package)– Directives– Configuration (ex: routage)– Controllers– Services– Constantes
Roles
#mstechdaysSecteur Public
• 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
#mstechdaysSecteur Public
• SPA, step 2 : Client Side– Initialisation outils client, Angular
Codes sur:https://github.com/rhwy/Demos-Angular-SignalR
Let’s code
#mstechdaysSecteur Public
• 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
#mstechdaysSecteur Public
Embrace the change!
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
Digital is business
#mstechdaysSecteur Public