méthodes agiles, frameworks javascript: optimisez votre time to market

Frameworks JavaScriptFrameworks JavaScript

Michael BaillyOpenPaaS Product Owner

[email protected]+33 (0)6 60 30 21 16

Optimisez votre Time to Market

7 avril 2016

2 / 61

Frameworks JavaScript : Frameworks JavaScript : optimisez votre time to marketoptimisez votre time to market

3 / 61

Frameworks JavaScript : Frameworks JavaScript : optimisez votre time to marketoptimisez votre time to market

9h00 Accueil

09h30 Comment produire du logiciel rapidement ?● La démarche UX : User eXperience● Des équipes de petites tailles pour raccourcir le time-to-market● Des outillages concrets pour une innovation rapide

Pause

10h30 Panorama des frameworks Javascript● Frameworks structurants● Frameworks backend● Frameworks mobile● Frameworks d'affichage

11h30 Retour d'expérience OpenPaaS● Construire une plateforme sociale orientée « micro-services » au moyen de

framework javascript● Construire rapidement un module OpenPaas pour intégrer un souveau service :

mise en place d'un coffre fort numérique

4 / 61

Quelques références LINAGORA

Services

Assurance Logicielle

Présentation de LINAGORAPrésentation de LINAGORA 150 salariés

Bureaux en France, Canada, Belgique, États Unis, Vietnam

Partenaires et clients en Tunisie, Colombie et au Nigéria

Édition Logicielle

Comment produire du logiciel Comment produire du logiciel rapidement ?rapidement ?

6 / 61

La démarche UXLa démarche UX

● Recentrer le modèle de développement :

● Avant : focus sur les produits

● Maintenant : focus sur les utilisateurs

7 / 61


● Le symptôme des gros projets informatiques

● Les projets informatiques classiques peuvent aboutir à un résultat final décevant, voire catastrophique, en terme d'expérience utilisateur

8 / 61


● Build

Une idée, un nouveau produit à lancer ? Développer les fonctionnalités minimum pour le mettre à disposition d'une partie des utilisateurs.

● Measure

Mettre en place l'ensemble des sondes logicielles permettant de comprendre comment les utilisateurs se servent de l'application, comment ils réagissent à une nouvelle fonctionnalité...

● Learn

Analyser les données et prendre les bonnes décisions, en connaissance de cause.

9 / 61


● Build

Minimum Viable Product (MVP)

10 / 61


● Build

Feature flipping

● Permettre aux équipes de proposer une fonctionnalité sur un panel maitrisé d'utilisateurs.

● Permettre aux équipes de mettre du code encore perfectible dans la base de code du produit.

11 / 61

Organisation des équipesOrganisation des équipes

● Comment délivrer l'innovation rapidement ?

Organiser les équipes par fonctionnalité

on parle alors de « feature teams ».

Taille d'une feature team : le nombre de personnes qui peuvent être nourris par une pizza de grande taille (pizza team).

12 / 61



Organiser les développements en Agile

Les méthodes Agiles ont pour vocation à raccourcir le plus possible le cycle

Spécification → Développement → Mise en Production

13 / 61



Déploiement continu

Mettre en place au plus tôt la pile logicielle permettant d'assurer le déploiement continu de l'application.

→ réduire le temps et l'effort d'une mise en production

→ réduire le temps de livraison d'une nouvelle fonctionnalité ou d'un bugfix

GitHub : une centaine de déploiements par jour https://github.com/blog/1241-deploying-at-github

Facebook : à chaque jour son périmètre de déploiement http://www.infoq.com/presentations/Facebook-Release-Process

https://github.com/blog/1241-deploying-at-github

http://www.infoq.com/presentations/Facebook-Release-Process

14 / 61



Un workflow classique de déploiement continu

Développement du ticket sur une branche dédiée

Pull-request et revue de code

Merge de la branche de

développement sur la branche de

référence

Intégration continue:

Tests unitaires et d'intégration


Mise à jour des métriques


Déploiement sur plateforme de

tests

Découpage de la fonctionnalité

en tickets techniques

15 / 61



Utiliser des logiciels libres

Utiliser les briques Open Source pour ne pas toujours tout re développer en interne.

Cela permet en outre une publicité positive de votre organisation, et pourquoi pas, de recruter des talents !

16 / 61

OutillageOutillage

● Outillage pour une innovation rapide

Système de contrôle de versions

Au niveau logiciel, le centre de gravité est le code source de vos applicatifs : utilisez un gestionnaire de code source

vraiment puissant !

Si vous ne l'utilisez pas encore, nous vous recommandons chaudement de passer sur GIT : il devient le standard de-

facto de la gestion de code source.

→ travail en équipe extrêmement simplifié

→ mode offline total

→ systèmes puissants de résolution de conflits

→ compatible avec l'ensemble des IDE du marché

17 / 61

OutillageOutillage


Gestion des dépots et du workflow

L'utilisation d'outils adaptés permet de fluidifier les processus au sein d'une équipe, et entre les équipes.

● SaaS ? Github https://github.com/

● On Premise : Gitlabhttps://gitlab.com/

● La rolls : suite Atlassian JIRA/Bit Buckethttps://atlassian.com/

https://github.com/

https://gitlab.com/

https://atlassian.com/

18 / 61

OutillageOutillage


Automatisation des taches

Un outil central, qui automatise les taches et permet de les lancer manuellement, ou selon des règles pré-définies, permet de compléter la stack de déploiement continu.

● Jenkins est un des logiciels classiques utilisé pour automatiser les taches de développement.

Détection de changements dans la base

de code

Lancement des tests (unitaires

puis intégration)

Calcul et récupération

des métriques (code

coverage...)

Mise à jour des issues

dans le bugtracker

Mise à jour de la

plateforme

Panorama des frameworks JavaScriptPanorama des frameworks JavaScript

20 / 61

Pourquoi développer une application en Javascript ?Pourquoi développer une application en Javascript ?

Constat devenu flagrant au fil du temps

● De plus en plus d'interactions entre les données.

● De plus en plus de données hébergées en distant.

● De plus en plus de variété d'équipements et d'usages.

Mouvement fort de développement de services distants depuis des années.

L'utilisateur veut une expérience “desktop”, difficilement compatible avec la conception classique d'applications “web” :

● 1. L'utilisateur envoie une requête...

● 2. Le serveur génère toute la page HTML en résultant.

21 / 61

Pourquoi développer une application en Javascript ?Pourquoi développer une application en Javascript ?

Javascript à la rescousse

● Nouvelle approche : redéfinir les responsabilités entre client et serveur.

● Avantages : meilleure fluidité ressentie, pas d'état sur le serveur, possibilité de traitement “full-offline”.

● Inconvénients : moins de maîtrise de l'environnement impliquant des contraintes supplémentaires.

22 / 61

GenèseGenèse

● Javascript est un « vieux » langage

● Créé en 1995 par Netscape

● Langage de script à héritage prototypal, typé dynamiquement et offrant des « first class functions ».

● Javascript est inclus dans tous les navigateurs du marché

● On le désigne par conséquent comme la lingua franca de la programmation web.

● La non évolution des navigateurs entre 1999 et 2006 a aussi impacté Javascript

● Le langage est considéré jusqu'en 2006 comme un langage jouet permettant d'animer une image où d'assurer le tracking des utilisateurs à des fins commerciales.

23 / 61

GenèseGenèse

● Les précurseurs

● Gmail : 2004 (Google)

● jQuery : 2006 (John Resig)

● L'arrivée de Google Chrome

● Apparu fin 2008

● Lance une compétition sur la rapidité d’exécution de Javascript, qui aboutit à un meilleur support et de bonnes performances sur l'ensemble des navigateurs

● De nouveaux défis

Comment développer des applications larges et complexesen ayant le navigateur comme environnement d’exécution ?

24 / 61

Applications web riches (SPA)Applications web riches (SPA)

● Idée majeure : “une seule page” chargée pour l'utilisateur.

● Des morceaux de page sont modifiés à la volée en fonction des actions de l'utilisateur.

● Le JS traite les requêtes, reconstruit le html correspondant et recharge le morceau de page.

● Le client devient le principal et le serveur l'accessoire...

● Répartition des rôles : AVANT (cas extrême)

● Serveur : gestion de la session utilisateur (état), traitement des requêtes, mise à jour du jeu de données, renvoi des données désirées, construction de la page de présentation des données.

● Client : validation de saisie, interprétation des pages envoyées par le HTML, envoi des requêtes.

● Répartition des rôles : APRÈS (cas extrême)

● Serveur : opérations sur les données.

● Client : tout le reste.

25 / 61

Frameworks frameworks...Frameworks frameworks...

serveur

Application web riche (dans le navigateur)

Services / business code

Views / UI / user interaction

Advanced graphics

Frameworks structurants

Frameworks graphiques

Frameworks backend

Frameworks mobile

Frameworks desktop

26 / 61

Frameworks structurantsFrameworks structurants

27 / 61

Frameworks structurants : compositionFrameworks structurants : composition

● Composants indispensables

● Architecture MVC ou MVVM

● Routing

● Composants

● Loose coupling

● Two way data binding

● Injection de dépendances

● Cadre de tests

28 / 61

Frameworks JavaScript : compositionFrameworks JavaScript : composition

● Routing

● Capacité d'un framework d'indexer une vue à une URL spécifique et de permettre à cette URL d'évoluer avec e changement de l'état de l'application

● Injection de dépendances

● Capacité du framework de charger automatiquement des modules utilisés par l'application

● Loose coupling (couplage « lache »)

● Dépendance des composants applicatifs « minimale » les uns envers les autres

29 / 61

Présentation des principaux framework frontPrésentation des principaux framework front

Date de naissance Licence Pilotage Librairies complémentaires

Difficulté

2011 MIT Communautaire. Open Source

HandlebarsjQuery

complexe


Difficulté

2009 MIT Communautaire. Open Source.Google

underscorejQuery

intermédiaire


Difficulté

2013 BSD Communautaire. Open Source.Facebook

FacileReact n'est pas un Framework MVVM mais correspond à la vue

30 / 61


● Les principales caractéristiques du Framework :

● fonctionnement Two way binding

● Orienté « performance »

● Moteur de Templating (handlebars)

● Dispose d'un moteur de Routing

● Debug

● LOG_, Handelbar helpers, Ember inspector

● Tests

● Qunit

● Testem

● Acceptance test

● Sécurité

● CSRF : non ok

● XSS, CSP, Auth, Advisories : ok

● Build

● Ember CLI, Broccoli, Addon system, Bower & NPM

● Error monitoring

● Track;js, New relic browser, Raygun, Bugsnag, JS Monitor, Qbaka

31 / 61


● Les principales caractéristiques du Framework :

● Création possible de custom DOM elements: e.g.<slider start=-5 end=5 />

● Two way binding

● Directives qui permettent la création de composants réutilisables

● Debug

● Angular Batarang, Chrome debuger, $log service

● Tests

● Karma

● Jasmine

● Angular-mocks

● Protractor

● Sécurité

● CSRF, XSS, Auth : ok

● CSP, Advisories : non ok

● Building

● Grunt / Gulp, Browserify, Webpack, Bower & NPM



32 / 61


● Principales caractéristiques

● Ne prend en charge que la partie «vue» d'un framework : il est possible de l'utiliser avec AngularJS qui aura pour rôle ici la mise en oeuvre ses compsants Model et viewmodel.

● Pas de système de routing

● Uni-directional data flow (pas de 2 way binding)

● Virtual DOM: qui permet les modifications plus rapides.

● Language JSX qui permet de gérer du templating

● Tests

● R.addons.TestUtils

● Jest

● Shallow rendering

● Mocha + Chai + JSDOM

● React-testing

● Debug

● React dev tools, Pretty diff, react-debug

● Sécurité :

● Auth : ok

● CSRF, XSS, CSP, Advisories : non ok

● Building

● React starter kit, react-tools, Browserify, Webpack



33 / 61

Frameworks BackendFrameworks Backend

34 / 61

Frameworks JavaScript serverFrameworks JavaScript server

● NodeJS

En 2009, Ryan Dahl prend le moteur JavaScript v8, lui adjoint les API permettant d'accéder au système de fichiers et au réseau : la révolution node.js commence.

● SingleThread

● Gestion de la concurrence basée autour des événements : utilisation d'une boucle d'événement FIFO (first in, first out) – les callback sont traités dans une file d'attente.

● Pas de « blocage » de threads au niveau du serveur, très bonne performances

35 / 61

Frameworks JavaScript serverFrameworks JavaScript server

● NodeJS

NodeJS, c'est maintenant une fondation, 882 contributeurs, 13 500 commits, 21 000 + stargazers.

Son système de packages « NPM » est le dépôt de packages le plus gros (plus que Debian ,maven, CPAN...)

NodeJS est reconnu par l'ensemble de l'industrie :

36 / 61

NodeJS sert en général de dispatcheur de requêtes puis d’agrégateur de résultats

requête REST

middlewares :vérifications génériques sur la requête

controlleurs :vérifications spécifiques sur la requête

appel des traitements métier

core :traitement métier, appel des serveurs externes

core :agrégation des résultats

controlleurs :formatage des résultats

réponse

traitementsgénériques« métier »

traitementsspécifiques

«web»

sys

tèm

es

tierc

es

NodeJS : cas d'usage typiqueNodeJS : cas d'usage typique

37 / 61

Frameworks serverFrameworks server

● ExpressJS

ExpressJS est le serveur web le plus utilisé sur NodeJS.

● Router

● Moteur de templates (Jade, HAML, EJS, …)

● Gestion des sessions

● Très bonne documentation, communauté extrèmement forte

var express = require('express');var app = express();

app.get('/', function (req, res) { res.send('Hello World!');});

app.listen(3000, function () { console.log('Example app listening on port 3000!');});

38 / 61

Frameworks serverFrameworks server

● SocketIO

SocketIO permet de simplifier l'utilisation de websockets dans les applications web.

● Rooms

● Supporte les données binaires

● Middlewares (authentification, ...)

var app = require('express')();var http = require('http').Server(app);var io = require('socket.io')(http);

app.get('/', function(req, res){ res.sendfile('index.html');});

io.on('connection', function(socket){ console.log('a user connected'); socket.emit('Hi there !');});

http.listen(3000, function(){ console.log('listening on *:3000');});

39 / 61

Bibliotheques complémentairesBibliotheques complémentairesex : authentificationex : authentification

● Middleware d'authentification pour NodeJS● SSO avec OpenID ou Oauth● Permet de mettre en place différentes stratégies

d'authentification.● Compatible avec différents providers existants

http://passportjs.org/

40 / 61

Frameworks mobilesFrameworks mobiles

41 / 61

Applications hybrides avec Apache CordovaApplications hybrides avec Apache Cordova

Apache Cordova permet de programmer une application pour smartphone à partir des technologies HTML5 / CSS / JavaScript.

Un système de plugins permet d'accéder aux fonctions du téléphone (carnet d'adresses, accéléromètre, géo-localisation...)

42 / 61

Ionic FrameworkIonic Framework

Ionic est un framework au dessus de Apache Cordova. Il apporte :

● Une base AngularJS pour faire une application Cordova

● Le support des widgets et fonctionnements de type « smartphone »

● Un environnement facilitant le développement

http://ionicframework.com/

43 / 61

Angular & Ionic for Mobile environmentsAngular & Ionic for Mobile environments

Views

ControllersServices

FiltersViews

Controllers

Application Angular + Ionic Application Angular + browser

● Accès aux données(API REST)

● transformation desstructures de données

● I18n● ...

formatagedes données

pour affichage

44 / 61

Frameworks desktopFrameworks desktop

45 / 61

Framework desktopFramework desktop

De manière comparable à Apache Cordova, Electron permet de créer une application desktop compatible Windows, MacOS et Linux, avec une base de code HTML5 / CSS / JavaScript.

L'environnement est extrêmement confortable pour le développeur : la machine virtuelle JavaScript a accès en même temps à la WebView (navigateur) et à NodeJS !

Microsoft Visual Studio Code, ou encore l'application Slack desktop, sont codées avec Electron.

46 / 61

Frameworks d'affichageFrameworks d'affichage

47 / 61

Frameworks d'affichage : d3Frameworks d'affichage : d3

D3.js est certainement la plus utilsée des librairies d'affichage JavaScript. Elle a une approche très bas niveau, et donne accès aux documents SVG sous-jacents.

48 / 61

Frameworks d'affichage : raphaelFrameworks d'affichage : raphael

Raphael apporte des objets de plus haut niveau, que l'on peut assembler afin de créer les graphiques désirés.

// Creates canvas 320 × 200 at 10, 50var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10var circle = paper.circle(50, 40, 10);

// Sets the fill attribute of the circle to red (#f00)circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to whitecircle.attr("stroke", "#fff");

49 / 61

Frameworks d'affichage : chart.jsFrameworks d'affichage : chart.js

Chart.js est plus limité dans son approche, il propose des composants classiques prets à l'usage : line, bar, radar, polar area, pie & doughnut.

new Chart(ctx).Radar(data, {pointDot: false

});

Retour d’expérienceRetour d’expérience

51 / 61

Présentation OpenPaaSPrésentation OpenPaaS

Quels outils peut-on fournir aux entreprises et

organisations pour collaborer ces trente prochaines

années ?

52 / 61

Présentation OpenPaaSPrésentation OpenPaaS

OpenPaaS, c'est :

La création d'une plate-forme de collaboration incluant des services de réseaux sociaux d'entreprise sous licence libre

Les aspects liés au multi tenant ou multi locataire en particulier dans la construction de services de collaboration dans une plate-forme de type PaaS

Le passage d'outils BPM (Business Process Modeling) classique vers un mode distribué et collaboratif de type Cloud

La sécurité et confiance numérique des données de collaboration dans le Cloud

En coopération avec :

Le projet est labellisé dans le

cadre des « investissements

d'Avenir »

53 / 61

AperçuAperçu

App 1

App 2

App 3

App 4

Private Hybrid clouds National Clouds Publics

Vidéo conférence

Réseausocial

Coffre-fort

Agenda Mail IMContacts

OpenPaaS platformOpenPaaS platform

Open API

SaaS

PaaS

IaaS

54 / 61

TechnologiesTechnologies

OpenPaaS: Mobile First

Use mobile first frameworks

Javascript Framework: AngularJS

HTML/CSS Framework: Bootstrap

POC of hybrid mobile applications

Apache Cordova

Ionic mobile framework

55 / 61

TechnologiesTechnologies

Open & Standards

Use of totally Open Source standards

Use standards whenever possible

Social standards (activitystrea.ms , Oembed...)

Web standards (WebSockets, WebRTC, GeoLocation,CalDAV, ...)

Open Source code

Available on the Internet most famous code sharing platform (GitHub)

Open and documented API

56 / 61

Open PaaS technologiesOpen PaaS technologies

Technologies

Javascript full stack, horizontally scalable components

NodeJS MongoDB ElasticSearch Redis Angular Bootstrap Ionic Cordova

Open Standards Open Development

57 / 61


AngularJS est conçu pour séparer complètement le code métier et le code d’interaction utilisateur.

Cela permet :

● de forcer les développeurs à séparer correctement les problématiques ( application du SRP )

● de tester correctement l'ensemble de l'application Web

● de réutiliser les services métier avec d'autres interfaces

58 / 61


Résultats extrêmement satisfaisants:

●la quasi-totalité des services AngularJS développé dans le cadre « Web » ont été réutilisé tels quels dans l'application Cordova

●ce qui veut aussi dire que les services développés dans le cadre de l'application Cordova sont des contributions à l'application WEB

●les développeurs gardent les mêmes outils de développement, les mêmes piles de test et d'intégration

Par contre, cela demande une gymnastique supplémentaire en architecture logicielle: en plus de bien séparer le code métier du

code de présentation, il faut implémenter le code métier de manièregénérique, en pensant qu'il sera utilisé aussi bien dans la web application

que dans l'application mobile.

59 / 61

NodeJS stackNodeJS stack

Nous utilisons NodeJS avec les frameworks les plus courants:

● Express : framework web/REST

● Socket.io : websockets

● Passport : authentification

60 / 61

NodeJS / RIA integrationNodeJS / RIA integration

Langage de programmation commun : JavaScript

➔ mêmes paradigmes de programmation (événementiel, streams, fonctionnel)

➔ permet aux développeurs de réaliser des fonctionnalités de bout en bout

➔ permet de mutualiser des traitements métier entre le serveur et la RIA

Pile de développement commune

➔ mêmes IDE pour le front et le back

➔ mêmes frameworks de test

Grunt: ordonnanceur de traitements

Mocha: framework de tests

Chai: librairie d'assertions

karma: lanceur de navigateurs& injecteur de données

supertest: requètes REST

phantomJS: headless browsermockery: injecteur de mocks

Merci pour votre attention !

LINAGORA – Siège social80, rue Roque de Fillol

92800 PUTEAUXFRANCE

Tél. : +33 (0)1 46 96 63 63Fax : +33 (0)1 46 96 63 64

Info : LINAGORAWeb : LINAGORA

méthodes agiles, frameworks javascript: optimisez votre time to market

Software