SPA ANGULARjs, SignalR
3 way binding
Rui Carvalho
Artisan Logiciel
ArtOfNet
rui@rui.fr, codedistillers.com, @rhwy

Secteur...
About

ArtOfNet
#mstechdays

• Artisan logiciel depuis 15 ans,
expérimenté sur le web, les
technos Microsoft et l’open
sou...
Communauté

www.altnetfr.org

• Orga ALT.NET fr
• Code : github.com/rhwy
• Blog:
– www.rui.fr
– www.codedistillers.com
www...
Ce soir

A partir de 18h!

Grande soirée des COMMUNAUTES
THE JAMES JOYCE PUB
71 bd Gouvion St Cyr

http://bit.ly/1fO8NuQ

...
#mstechdays

Secteur Public
Single Page Application

+
#mstechdays

Secteur Public
SPA
Single page applications
for a changing world

#mstechdays

Secteur Public
Web 1.0

APPLICATION
LOGIC

#mstechdays

HTML

Secteur Public
Web 2.0
APPLICATION
LOGIC

Web
Services

#mstechdays

HTML

JSON || XML

Secteur Public
HTML5

STATIC
FILES

APPLICATION
LOGIC

HTML

JSON
REST
API

#mstechdays

Secteur Public
Avantages
• Meilleure séparation logique entre les
parties clientes et serveur
• Développements plus spécialisées et
respo...
Inconvénients
• Faire confiance au client…
– Mais : Avec les navigateurs modernes auto-évolutifs ce
n’est plus un problème...
Faut-il s’adapter?
• Au lieu de suivre le plan
• Au lieu de faire confiance à une plateforme
connue
• Non mais sérieux, du...
Agile Manifesto …
We are uncovering better ways of developing software by doing it and
helping others do it. Through this ...
…et cela changera encore demain!

#mstechdays

Secteur Public
Single Page Application

+
#mstechdays

Secteur Public
Single Page Application

#mstechdays

Secteur Public
Single Page Application

#mstechdays

Secteur Public
#mstechdays

Secteur Public
SignalR
“Fournir simplement des fonctionnalités
temps réel pour les applications web”
Le serveur est capable de pousser de...
Install
Install-Package Microsoft.AspNet.SignalR

#mstechdays

Secteur Public
Code
var hub = $.connection.Notifier;

1

$.connection.hub.start().done(function () {
$('#btn').on('click',function(){
2
h...
SignalR 2.0, What’s new?
• Stabilisation, bugfix
• Suppression des dépendances ASP.NET
– Support direct sur OWIN

• Suppor...
SignalR 2.0, What’s new?
• Groupes Multiples(un client vers +s groupes)
• User Method (appeler un client par son nom au li...
Resources:
• http://www.asp.net/signalr/overview/signalr20
• signalR.net
• Github.com/signalR/signalR

#mstechdays

Secteu...
CDN
• http://www.asp.net/ajaxlibrary/cdn.ashx#AS
PNET_SignalR_Releases_on_the_CDN_1
7
• http://ajax.aspnetcdn.com/ajax/sig...
Note: OWIN matters!

#mstechdays

Secteur Public
Let’s code
• SPA, step 1 : Server Side
– Initialisation serveur OWIN, SignalR, Nancy

Codes sur:
https://github.com/rhwy/D...
ANGULAR

#mstechdays

Secteur Public
WHY ???

#mstechdays

Secteur Public
Angular better browser
Angular ressemble peut être à ce que
seraient les navigateurs si ils avaient été
crées pour execute...
Structure
• Angular est
–
–
–
–
–

#mstechdays

SOLIDe, DRY, KISS
Déclaratif
Comportemental et contextuel
Faiblement coupl...
Benefices
•
•
•
•

Low ceremony
Pojo models !!!
Tdd in mind
Injection de dépendances!

#mstechdays

Secteur Public
Benefices
•
•
•
•

Moins de Code
Plus de manipulation du DOM!
Code plus simple
Résultats immédiats!

#mstechdays

Secteur ...
AWESOME, ya?

#mstechdays

Secteur Public
Déclaratif
• Angular change le HTML courant par le
biais de Directives
– Elements Html, tags (E)
– Attributs (A)
– Classes...
Les éléments de base
• Tous les éléments de base sont déja des
directives!
–
–
–
–
–

#mstechdays

ng-app
ng-model
ng-repe...
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 m...
Roles
• Tout est clairement découplé par role
fonctionnel:
–
–
–
–
–
–
#mstechdays

Modules (le plus haut niveau, package)...
IoC/DI
• Tout element est injectable
• Par convention : le nom
– app.value(‘truc’, 42);
– app.controller(‘monCtrl’, functi...
Let’s code
• SPA, step 2 : Client Side
– Initialisation outils client, Angular

Codes sur:
https://github.com/rhwy/Demos-A...
Petit mot du SEO
• Nativement les bots google et autres ne
savent pas interpréter le javascript
• Utiliser google’s Ajax p...
Embrace the change!

#mstechdays

Secteur Public
https://github.com/rhwy/Demos-Angular-SignalR

@rhwy
rui@rui.fr

#rui
#mstechdays

Secteur Public
Digital is
business
#mstechdays

Secteur Public
SPA avec SignalR et Angular Js
Upcoming SlideShare
Loading in …5
×

SPA avec SignalR et Angular Js

1,300 views
1,121 views

Published on

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)

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,300
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • http://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.0.2.min.js
  • SPA avec SignalR et Angular Js

    1. 1. SPA ANGULARjs, SignalR 3 way binding Rui Carvalho Artisan Logiciel ArtOfNet rui@rui.fr, codedistillers.com, @rhwy Secteur Public
    2. 2. 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
    3. 3. Communauté www.altnetfr.org • 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 #mstechdays Secteur Public
    4. 4. Ce soir A partir de 18h! Grande soirée des COMMUNAUTES THE JAMES JOYCE PUB 71 bd Gouvion St Cyr http://bit.ly/1fO8NuQ #mstechdays Secteur Public
    5. 5. #mstechdays Secteur Public
    6. 6. Single Page Application + #mstechdays Secteur Public
    7. 7. SPA Single page applications for a changing world #mstechdays Secteur Public
    8. 8. Web 1.0 APPLICATION LOGIC #mstechdays HTML Secteur Public
    9. 9. Web 2.0 APPLICATION LOGIC Web Services #mstechdays HTML JSON || XML Secteur Public
    10. 10. HTML5 STATIC FILES APPLICATION LOGIC HTML JSON REST API #mstechdays Secteur Public
    11. 11. 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
    12. 12. 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
    13. 13. 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
    14. 14. 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
    15. 15. …et cela changera encore demain! #mstechdays Secteur Public
    16. 16. Single Page Application + #mstechdays Secteur Public
    17. 17. Single Page Application #mstechdays Secteur Public
    18. 18. Single Page Application #mstechdays Secteur Public
    19. 19. #mstechdays Secteur Public
    20. 20. 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
    21. 21. Install Install-Package Microsoft.AspNet.SignalR #mstechdays Secteur Public
    22. 22. 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
    23. 23. 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
    24. 24. 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
    25. 25. Resources: • http://www.asp.net/signalr/overview/signalr20 • signalR.net • Github.com/signalR/signalR #mstechdays Secteur Public
    26. 26. CDN • http://www.asp.net/ajaxlibrary/cdn.ashx#AS PNET_SignalR_Releases_on_the_CDN_1 7 • http://ajax.aspnetcdn.com/ajax/signalr/jquer y.signalr-2.0.2.min.js #mstechdays Secteur Public
    27. 27. Note: OWIN matters! #mstechdays Secteur Public
    28. 28. Let’s code • SPA, step 1 : Server Side – Initialisation serveur OWIN, SignalR, Nancy Codes sur: https://github.com/rhwy/Demos-Angular-SignalR #mstechdays Secteur Public
    29. 29. ANGULAR #mstechdays Secteur Public
    30. 30. WHY ??? #mstechdays Secteur Public
    31. 31. 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
    32. 32. Structure • Angular est – – – – – #mstechdays SOLIDe, DRY, KISS Déclaratif Comportemental et contextuel Faiblement couplé Testable Secteur Public
    33. 33. Benefices • • • • Low ceremony Pojo models !!! Tdd in mind Injection de dépendances! #mstechdays Secteur Public
    34. 34. Benefices • • • • Moins de Code Plus de manipulation du DOM! Code plus simple Résultats immédiats! #mstechdays Secteur Public
    35. 35. AWESOME, ya? #mstechdays Secteur Public
    36. 36. Déclaratif • Angular change le HTML courant par le biais de Directives – Elements Html, tags (E) – Attributs (A) – Classes Css (C) #mstechdays Secteur Public
    37. 37. 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
    38. 38. 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
    39. 39. 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
    40. 40. 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
    41. 41. Let’s code • SPA, step 2 : Client Side – Initialisation outils client, Angular Codes sur: https://github.com/rhwy/Demos-Angular-SignalR #mstechdays Secteur Public
    42. 42. 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
    43. 43. Embrace the change! #mstechdays Secteur Public
    44. 44. https://github.com/rhwy/Demos-Angular-SignalR @rhwy rui@rui.fr #rui #mstechdays Secteur Public
    45. 45. Digital is business
    46. 46. #mstechdays Secteur Public

    ×