SPA ANGULARjs + SignalR3 way binding

Rui Carvalhorui@rui.fr, codedistillers.com, @rhwy

About

ArtOfNet

www.altnetfr.org

Single Page Application

+

SPA

Single page applications for a changing world

Web 1.0

APPLICATIONLOGIC

HTML

Web 2.0

APPLICATIONLOGIC

HTML

WebServices JSON || XML

HTML5

HTML

RESTAPI

JSON

STATICFILES

APPLICATIONLOGIC

• 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

• 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

• Au lieu de suivre le plan• Au lieu de faire confiance à une plateforme connue• Non mais sérieux, du javascript?!...

Faut-il s’adapter?

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 …

…et cela changera encore demain!

Single Page Application

+

Single Page Application

Single Page Application

SERVER

CLIENT

TOOLS

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

Install

Install-Package Microsoft.AspNet.SignalR

[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

• 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?

• 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?

• http://www.asp.net/signalr/overview/signalr-20• signalR.net• Github.com/signalR/signalR

Resources:

• 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

Note: OWIN matters!

• SPA, step 1 : Server Side• Initialisation serveur OWIN, SignalR, Nancy

Codes sur:

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

Let’s code

ANGULAR

WHY ???

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.

• Angular est • SOLIDe, DRY, KISS• Déclaratif • Comportemental et contextuel• Faiblement couplé• Testable

Structure

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

Benefices

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

Benefices

AWESOME, ya?

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

Déclaratif

• Tous les éléments de base sont déja des directives!• ng-app• ng-model• ng-repeat• ng-controller• …

Les éléments de base

• 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

• Tout est clairement découplé par role fonctionnel:• Modules (le plus haut niveau, package)• Directives• Configuration (ex: routage)• Controllers• Services• Constantes

Roles

• 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

• SPA, step 2 : Client Side• Initialisation outils client, Angular

Codes sur:

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

Let’s code

• 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

Embrace the change!

@rhwyrui@rui.fr

#rui

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