1.
SPA ANGULARjs + SignalR
3 way binding
Rui Carvalho
rui@rui.fr,
codedistillers.com,
@rhwy

2.
About
www.altnetfr.org
ArtOfNet

3.
Single Page Application
+

4.
SPA
Single page applications
for a changing world

5.
Web 1.0
APPLICATION
LOGIC
HTML

6.
Web 2.0
APPLICATION
LOGIC
Web
Services
HTML
JSON || XML

7.
HTML5
STATIC
FILES
APPLICATION
LOGIC
HTML
JSON
REST
API

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.
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.
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.
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.
…et cela changera encore demain!

13.
Single Page Application
+

14.
Single Page Application

15.
Single Page Application

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.
Install
Install-Package Microsoft.AspNet.SignalR

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.
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.
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.
Resources:
• http://www.asp.net/signalr/overview/signalr-20
• signalR.net
• Github.com/signalR/signalR

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.
Note: OWIN matters!

24.
Let’s code
• SPA, step 1 : Server Side
• Initialisation serveur OWIN, SignalR, Nancy
Codes sur:
https://github.com/rhwy/Demos-Angular-SignalR

25.
ANGULAR

26.
WHY ???

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.
Structure
• Angular est
• SOLIDe, DRY, KISS
• Déclaratif
• Comportemental et contextuel
• Faiblement couplé
• Testable

29.
Benefices
• Low ceremony
• Pojo models !!!
• Tdd in mind
• Injection de dépendances!

30.
Benefices
• Moins de Code
• Plus de manipulation du DOM!
• Code plus simple
• Résultats immédiats!

31.
AWESOME, ya?

32.
Déclaratif
• Angular change le HTML courant par le biais de
Directives
• Elements Html, tags (E)
• Attributs (A)
• Classes Css (C)

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.
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.
Roles
• Tout est clairement découplé par role fonctionnel:
• Modules (le plus haut niveau, package)
• Directives
• Configuration (ex: routage)
• Controllers
• Services
• Constantes

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.
Let’s code
• SPA, step 2 : Client Side
• Initialisation outils client, Angular
Codes sur:
https://github.com/rhwy/Demos-Angular-SignalR

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.
Embrace the change!

40.
https://github.com/rhwy/Demos-Angular-SignalR
@rhwy
rui@rui.fr
#rui