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. Nous vous proposons aujourd'hui 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.
Speakers : Rui Carvalho (ArtOfNet)
2. SPA ANGULARjs, SignalR
3 way binding
Rui Carvalho
Artisan Logiciel
ArtOfNet
rui@rui.fr, codedistillers.com, @rhwy
Secteur Public
3. About
ArtOfNet
#mstechdays
• Artisan logiciel depuis 15 ans,
expérimenté sur le web, les
technos Microsoft et l’open
source.
• Services:
– Conseil,
– accompagnement,
– Développement
– Formation
• Contact:
– rui@rui.fr
– @rhwy
Secteur Public
12. Avantages
• 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!
#mstechdays
Secteur Public
13. Inconvénients
• 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?
#mstechdays
Secteur Public
14. Faut-il s’adapter?
• Au lieu de suivre le plan
• Au lieu de faire confiance à une plateforme
connue
• Non mais sérieux, du javascript?!...
#mstechdays
Secteur Public
15. Agile Manifesto …
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.
#mstechdays
Secteur Public
21. 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
#mstechdays
Secteur Public
23. Code
var hub = $.connection.Notifier;
1
$.connection.hub.start().done(function () {
$('#btn').on('click',function(){
2
hub.server.notify(
$('#messageInput').val());
})
3
});
hub.client.notified = function (message) { 3
alert(message.Content);
};
hub.client.notifyDone = function(){
alert(„message sent‟);}
[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();
}
Server
Client
#mstechdays
Secteur Public
24. SignalR 2.0, What’s new?
• 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”)
#mstechdays
Secteur Public
25. SignalR 2.0, What’s new?
• 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)
#mstechdays
Secteur Public
32. 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.
#mstechdays
Secteur Public
37. Déclaratif
• Angular change le HTML courant par le
biais de Directives
– Elements Html, tags (E)
– Attributs (A)
– Classes Css (C)
#mstechdays
Secteur Public
38. Les éléments de base
• Tous les éléments de base sont déja des
directives!
–
–
–
–
–
#mstechdays
ng-app
ng-model
ng-repeat
ng-controller
…
Secteur Public
39. 2-way binding
• 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
#mstechdays
Secteur Public
40. Roles
• Tout est clairement découplé par role
fonctionnel:
–
–
–
–
–
–
#mstechdays
Modules (le plus haut niveau, package)
Directives
Configuration (ex: routage)
Controllers
Services
Constantes
Secteur Public
41. IoC/DI
• 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
#mstechdays
Secteur Public
43. Petit mot du SEO
• 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)
#mstechdays
Secteur Public