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

Frameworks JavaScriptFrameworks JavaScript
Michael Bailly
OpenPaaS Product Owner
mbailly@linagora.com
+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 logicielComment 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

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
Intégration
continue:
Mise à jour des
métriques
Intégration
continue:
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 : Gitlab
https://gitlab.com/
● La rolls : suite Atlassian JIRA/Bit Bucket
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 complexes
en 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
Handlebars
jQuery
complexe
complémentaires
Difficulté
2009 MIT Communautaire.
Open Source.
Google
underscore
jQuery
intermédiaire
complémentaires
Difficulté
2013 BSD Communautaire.
Open Source.
Facebook
Facile
React 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
traitements
génériques
« métier »
traitements
spécifiques
«web»
systèmestierces
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émentaires
ex : 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 des
structures de données
● I18n
● ...
formatage
des 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, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var 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 white
circle.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éseau
social
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ère
gé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 social
80, rue Roque de Fillol
92800 PUTEAUX
FRANCE
Tél. : +33 (0)1 46 96 63 63
Fax : +33 (0)1 46 96 63 64
Info : LINAGORA
Web : LINAGORA

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (15)

Similaire à Méthodes agiles, frameworks javascript: optimisez votre time to market

Similaire à Méthodes agiles, frameworks javascript: optimisez votre time to market (20)

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