SPA avec Angular et SignalR (FR)

1 192 vues

Publié le

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.

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

Aucun téléchargement
Vues
Nombre de vues
1 192
Sur SlideShare
0
Issues des intégrations
0
Intégrations
10
Actions
Partages
0
Téléchargements
33
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

SPA avec Angular et SignalR (FR)

  1. 1. SPA ANGULARjs + SignalR 3 way binding Rui Carvalho rui@rui.fr, codedistillers.com, @rhwy
  2. 2. About www.altnetfr.org ArtOfNet
  3. 3. Single Page Application +
  4. 4. SPA Single page applications for a changing world
  5. 5. Web 1.0 APPLICATION LOGIC HTML
  6. 6. Web 2.0 APPLICATION LOGIC Web Services HTML JSON || XML
  7. 7. HTML5 STATIC FILES APPLICATION LOGIC HTML JSON REST API
  8. 8. 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!
  9. 9. 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?
  10. 10. Faut-il s’adapter? • Au lieu de suivre le plan • Au lieu de faire confiance à une plateforme connue • Non mais sérieux, du javascript?!...
  11. 11. 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.
  12. 12. …et cela changera encore demain!
  13. 13. Single Page Application +
  14. 14. Single Page Application
  15. 15. Single Page Application
  16. 16. 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
  17. 17. Install Install-Package Microsoft.AspNet.SignalR
  18. 18. Code 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 [HubName(“Notifier”)] public class MyHub : Hub { public void Notify(string message) { Clients.Others.notified(message); Clients.Caller.notifyDone(); } } 1 2 3 3 public void Configuration(IAppBuilder app) { app.MapSignalR(); } Server
  19. 19. 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”)
  20. 20. 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)
  21. 21. Resources: • http://www.asp.net/signalr/overview/signalr-20 • signalR.net • Github.com/signalR/signalR
  22. 22. CDN • http://www.asp.net/ajaxlibrary/cdn.ashx#ASPNET_SignalR _Releases_on_the_CDN_17 • http://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr2.0.2.min.js
  23. 23. Note: OWIN matters!
  24. 24. Let’s code • SPA, step 1 : Server Side • Initialisation serveur OWIN, SignalR, Nancy Codes sur: https://github.com/rhwy/Demos-Angular-SignalR
  25. 25. ANGULAR
  26. 26. WHY ???
  27. 27. 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.
  28. 28. Structure • Angular est • SOLIDe, DRY, KISS • Déclaratif • Comportemental et contextuel • Faiblement couplé • Testable
  29. 29. Benefices • Low ceremony • Pojo models !!! • Tdd in mind • Injection de dépendances!
  30. 30. Benefices • Moins de Code • Plus de manipulation du DOM! • Code plus simple • Résultats immédiats!
  31. 31. AWESOME, ya?
  32. 32. Déclaratif • Angular change le HTML courant par le biais de Directives • Elements Html, tags (E) • Attributs (A) • Classes Css (C)
  33. 33. Les éléments de base • Tous les éléments de base sont déja des directives! • ng-app • ng-model • ng-repeat • ng-controller •…
  34. 34. 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
  35. 35. Roles • Tout est clairement découplé par role fonctionnel: • Modules (le plus haut niveau, package) • Directives • Configuration (ex: routage) • Controllers • Services • Constantes
  36. 36. 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
  37. 37. Let’s code • SPA, step 2 : Client Side • Initialisation outils client, Angular Codes sur: https://github.com/rhwy/Demos-Angular-SignalR
  38. 38. 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)
  39. 39. Embrace the change!
  40. 40. https://github.com/rhwy/Demos-Angular-SignalR @rhwy rui@rui.fr #rui

×