Secteur Public

SPA ANGULARjs, SignalR

3 way bindingRui CarvalhoArtisan Logiciel

ArtOfNet

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

#mstechdaysSecteur Public

About

ArtOfNet

• 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

#mstechdaysSecteur Public

Communauté • 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

www.altnetfr.org

#mstechdaysSecteur Public

Ce soir

Grande soirée des COMMUNAUTESTHE JAMES JOYCE PUB71 bd Gouvion St Cyr

http://bit.ly/1fO8NuQ

A partir de 18h!

#mstechdaysSecteur Public

#mstechdaysSecteur Public

Single Page Application

+

Secteur Public#mstechdays

SPA

Single page applications for a changing world

#mstechdaysSecteur Public

Web 1.0

APPLICATIONLOGIC

HTML

#mstechdaysSecteur Public

Web 2.0

APPLICATIONLOGIC HTML

WebServices JSON ||

XML

#mstechdaysSecteur Public

HTML5

HTML

RESTAPI

JSON

STATICFILES

APPLICATIONLOGIC

#mstechdaysSecteur Public

• 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

#mstechdaysSecteur Public

• 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

#mstechdaysSecteur Public

• Au lieu de suivre le plan• Au lieu de faire confiance à une

plateforme connue• Non mais sérieux, du javascript?!...

Faut-il s’adapter?

#mstechdaysSecteur Public

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 …

#mstechdaysSecteur Public

…et cela changera encore demain!

#mstechdaysSecteur Public

Single Page Application

+

#mstechdaysSecteur Public

Single Page Application

#mstechdaysSecteur Public

Single Page ApplicationSERVER

CLIENT

TOOLS

#mstechdaysSecteur Public

#mstechdaysSecteur Public

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

#mstechdaysSecteur Public

Install

Install-Package Microsoft.AspNet.SignalR

#mstechdaysSecteur Public

[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

#mstechdaysSecteur Public

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

#mstechdaysSecteur Public

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

#mstechdaysSecteur Public

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

• signalR.net• Github.com/signalR/signalR

Resources:

#mstechdaysSecteur Public

• 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

#mstechdaysSecteur Public

Note: OWIN matters!

#mstechdaysSecteur Public

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

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

Let’s code

Secteur Public#mstechdays

ANGULAR

Secteur Public#mstechdays

WHY ???

#mstechdaysSecteur Public

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.

#mstechdaysSecteur Public

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

Structure

#mstechdaysSecteur Public

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

Benefices

#mstechdaysSecteur Public

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

Benefices

#mstechdaysSecteur Public

AWESOME, ya?

#mstechdaysSecteur Public

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

Déclaratif

#mstechdaysSecteur Public

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

Les éléments de base

#mstechdaysSecteur Public

• 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

#mstechdaysSecteur Public

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

Roles

#mstechdaysSecteur Public

• 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

#mstechdaysSecteur Public

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

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

Let’s code

#mstechdaysSecteur Public

• 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

#mstechdaysSecteur Public

Embrace the change!

#mstechdaysSecteur Public

@rhwyrui@rui.fr

#rui

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

© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Digital is business

#mstechdaysSecteur Public