SlideShare une entreprise Scribd logo
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
La démarche UXLa démarche UX
● 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
La démarche UXLa démarche UX
● 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
La démarche UXLa démarche UX
● Build
Minimum Viable Product (MVP)
10 / 61
La démarche UXLa démarche UX
● 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
Organisation des équipesOrganisation des équipes
● Comment délivrer l'innovation rapidement ?
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
Organisation des équipesOrganisation des équipes
● Comment délivrer l'innovation rapidement ?
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
Organisation des équipesOrganisation des équipes
● Comment délivrer l'innovation rapidement ?
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
Organisation des équipesOrganisation des équipes
● Comment délivrer l'innovation rapidement ?
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
● Outillage pour une innovation rapide
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
● Outillage pour une innovation rapide
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
Date de naissance Licence Pilotage Librairies
complémentaires
Difficulté
2009 MIT Communautaire.
Open Source.
Google
underscore
jQuery
intermédiaire
Date de naissance Licence Pilotage Librairies
complémentaires
Difficulté
2013 BSD Communautaire.
Open Source.
Facebook
Facile
React n'est pas un
Framework MVVM
mais correspond à
la vue
30 / 61
Présentation des principaux framework frontPrésentation des principaux framework front
● 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
Présentation des principaux framework frontPrésentation des principaux framework front
● 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
● Error monitoring
● Track;js, New relic browser, Raygun, Bugsnag, JS Monitor, Qbaka
32 / 61
Présentation des principaux framework frontPrésentation des principaux framework front
● 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
● Error monitoring
● Track;js, New relic browser, Raygun, Bugsnag, JS Monitor, Qbaka
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
Angular & Ionic for Mobile environmentsAngular & Ionic for Mobile environments
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
Angular & Ionic for Mobile environmentsAngular & Ionic for Mobile environments
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

Contenu connexe

Tendances

Gdd07 Gwt Dig
Gdd07 Gwt DigGdd07 Gwt Dig
Gdd07 Gwt Dig
Didier Girard
 
DevOps - Retour d'expérience - MarsJug du 29 Juin 2011
DevOps - Retour d'expérience - MarsJug du 29 Juin 2011DevOps - Retour d'expérience - MarsJug du 29 Juin 2011
DevOps - Retour d'expérience - MarsJug du 29 Juin 2011
Henri Gomez
 
Introduction au DevOps @SfPot 2014
Introduction au DevOps @SfPot 2014Introduction au DevOps @SfPot 2014
Introduction au DevOps @SfPot 2014
Jonathan Martin
 
Agilité et SharePoint: Incompatible? On gage que non!
Agilité et SharePoint: Incompatible? On gage que non!Agilité et SharePoint: Incompatible? On gage que non!
Agilité et SharePoint: Incompatible? On gage que non!
Franck Cornu
 
DevOps - Retour d’expérience - AlpesJug du 20 Septembre 2011
DevOps - Retour d’expérience - AlpesJug du 20 Septembre 2011DevOps - Retour d’expérience - AlpesJug du 20 Septembre 2011
DevOps - Retour d’expérience - AlpesJug du 20 Septembre 2011
Henri Gomez
 
NightClazz Build Tools & Continuous Delivery Avancé
NightClazz Build Tools & Continuous Delivery AvancéNightClazz Build Tools & Continuous Delivery Avancé
NightClazz Build Tools & Continuous Delivery Avancé
Zenika
 
A chaque besoin sa distribution
A chaque besoin sa distributionA chaque besoin sa distribution
A chaque besoin sa distribution
Core-Techs
 
Meetup DevOps / WebOps Nîmes 20161020
Meetup DevOps / WebOps Nîmes 20161020Meetup DevOps / WebOps Nîmes 20161020
Meetup DevOps / WebOps Nîmes 20161020
NimeOps
 
Solutions Web « prêtes à porter » avec WordPress
Solutions Web « prêtes à porter » avec WordPressSolutions Web « prêtes à porter » avec WordPress
Solutions Web « prêtes à porter » avec WordPress
Stéphane Plante
 
Devops Introduction au mouvement
Devops Introduction au mouvementDevops Introduction au mouvement
Devops Introduction au mouvement
Ulrich VACHON
 
Agile - Que le choc commence !
Agile - Que le choc commence !Agile - Que le choc commence !
Agile - Que le choc commence !
Martin Lapointe, M.T.I.
 
NightClazz Build Tools & Continuous Delivery
NightClazz Build Tools & Continuous DeliveryNightClazz Build Tools & Continuous Delivery
NightClazz Build Tools & Continuous Delivery
Zenika
 
Au secours, mon chef m'a demandé de passer au DevOps
Au secours, mon chef m'a demandé de passer au DevOpsAu secours, mon chef m'a demandé de passer au DevOps
Au secours, mon chef m'a demandé de passer au DevOps
antony_guilloteau
 
Développer et déployer dans le cloud
Développer et déployer dans le cloudDévelopper et déployer dans le cloud
Développer et déployer dans le cloud
Julien Dubois
 
Introduction à GWT - GTI780 & MTI780 - ETS - A08
Introduction à GWT - GTI780 & MTI780 - ETS - A08Introduction à GWT - GTI780 & MTI780 - ETS - A08
Introduction à GWT - GTI780 & MTI780 - ETS - A08
Claude Coulombe
 
Présentation Rex GWT 2.0
Présentation Rex GWT 2.0Présentation Rex GWT 2.0
Présentation Rex GWT 2.0
Ippon
 
Recueil des mauvaises pratiques constatées lors de l'audit de sites Drupal 7
Recueil des mauvaises pratiques constatées lors de l'audit de sites Drupal 7Recueil des mauvaises pratiques constatées lors de l'audit de sites Drupal 7
Recueil des mauvaises pratiques constatées lors de l'audit de sites Drupal 7
OSInet
 
The DevOps Wonder @ PHPTour Lyon 2014
The DevOps Wonder @ PHPTour Lyon 2014The DevOps Wonder @ PHPTour Lyon 2014
The DevOps Wonder @ PHPTour Lyon 2014
Matthieu de Canteloube
 
Saas Libre
Saas LibreSaas Libre
Saas Libre
grolland
 

Tendances (20)

Solutions Linux 2010
Solutions Linux 2010Solutions Linux 2010
Solutions Linux 2010
 
Gdd07 Gwt Dig
Gdd07 Gwt DigGdd07 Gwt Dig
Gdd07 Gwt Dig
 
DevOps - Retour d'expérience - MarsJug du 29 Juin 2011
DevOps - Retour d'expérience - MarsJug du 29 Juin 2011DevOps - Retour d'expérience - MarsJug du 29 Juin 2011
DevOps - Retour d'expérience - MarsJug du 29 Juin 2011
 
Introduction au DevOps @SfPot 2014
Introduction au DevOps @SfPot 2014Introduction au DevOps @SfPot 2014
Introduction au DevOps @SfPot 2014
 
Agilité et SharePoint: Incompatible? On gage que non!
Agilité et SharePoint: Incompatible? On gage que non!Agilité et SharePoint: Incompatible? On gage que non!
Agilité et SharePoint: Incompatible? On gage que non!
 
DevOps - Retour d’expérience - AlpesJug du 20 Septembre 2011
DevOps - Retour d’expérience - AlpesJug du 20 Septembre 2011DevOps - Retour d’expérience - AlpesJug du 20 Septembre 2011
DevOps - Retour d’expérience - AlpesJug du 20 Septembre 2011
 
NightClazz Build Tools & Continuous Delivery Avancé
NightClazz Build Tools & Continuous Delivery AvancéNightClazz Build Tools & Continuous Delivery Avancé
NightClazz Build Tools & Continuous Delivery Avancé
 
A chaque besoin sa distribution
A chaque besoin sa distributionA chaque besoin sa distribution
A chaque besoin sa distribution
 
Meetup DevOps / WebOps Nîmes 20161020
Meetup DevOps / WebOps Nîmes 20161020Meetup DevOps / WebOps Nîmes 20161020
Meetup DevOps / WebOps Nîmes 20161020
 
Solutions Web « prêtes à porter » avec WordPress
Solutions Web « prêtes à porter » avec WordPressSolutions Web « prêtes à porter » avec WordPress
Solutions Web « prêtes à porter » avec WordPress
 
Devops Introduction au mouvement
Devops Introduction au mouvementDevops Introduction au mouvement
Devops Introduction au mouvement
 
Agile - Que le choc commence !
Agile - Que le choc commence !Agile - Que le choc commence !
Agile - Que le choc commence !
 
NightClazz Build Tools & Continuous Delivery
NightClazz Build Tools & Continuous DeliveryNightClazz Build Tools & Continuous Delivery
NightClazz Build Tools & Continuous Delivery
 
Au secours, mon chef m'a demandé de passer au DevOps
Au secours, mon chef m'a demandé de passer au DevOpsAu secours, mon chef m'a demandé de passer au DevOps
Au secours, mon chef m'a demandé de passer au DevOps
 
Développer et déployer dans le cloud
Développer et déployer dans le cloudDévelopper et déployer dans le cloud
Développer et déployer dans le cloud
 
Introduction à GWT - GTI780 & MTI780 - ETS - A08
Introduction à GWT - GTI780 & MTI780 - ETS - A08Introduction à GWT - GTI780 & MTI780 - ETS - A08
Introduction à GWT - GTI780 & MTI780 - ETS - A08
 
Présentation Rex GWT 2.0
Présentation Rex GWT 2.0Présentation Rex GWT 2.0
Présentation Rex GWT 2.0
 
Recueil des mauvaises pratiques constatées lors de l'audit de sites Drupal 7
Recueil des mauvaises pratiques constatées lors de l'audit de sites Drupal 7Recueil des mauvaises pratiques constatées lors de l'audit de sites Drupal 7
Recueil des mauvaises pratiques constatées lors de l'audit de sites Drupal 7
 
The DevOps Wonder @ PHPTour Lyon 2014
The DevOps Wonder @ PHPTour Lyon 2014The DevOps Wonder @ PHPTour Lyon 2014
The DevOps Wonder @ PHPTour Lyon 2014
 
Saas Libre
Saas LibreSaas Libre
Saas Libre
 

En vedette

Legislación de la comunicación
Legislación de la comunicaciónLegislación de la comunicación
Legislación de la comunicación
jaime silva jimenez
 
Scottish Public Opinion Monitor January 2015 - Holyrood Voting Intention
Scottish Public Opinion Monitor January 2015 - Holyrood Voting IntentionScottish Public Opinion Monitor January 2015 - Holyrood Voting Intention
Scottish Public Opinion Monitor January 2015 - Holyrood Voting Intention
Ipsos UK
 
Presentation for be briefing 17th june 2013
Presentation for be briefing  17th june 2013Presentation for be briefing  17th june 2013
Presentation for be briefing 17th june 2013
buildingenterprise
 
Comprension lectora 2000 euler r
Comprension lectora 2000 euler rComprension lectora 2000 euler r
Comprension lectora 2000 euler r
Euler Ruiz
 
Welcome to group 2 internet
Welcome to group 2 internetWelcome to group 2 internet
Welcome to group 2 internet
cutrikaafriana
 
Lisboa- Paintings By J. B. Durão
Lisboa- Paintings  By J. B. DurãoLisboa- Paintings  By J. B. Durão
Lisboa- Paintings By J. B. Durão
maditabalnco
 
Zaragoza Turismo 25
Zaragoza Turismo 25Zaragoza Turismo 25
Zaragoza Turismo 25
Saucepolis blog & Hotel Sauce
 
Xotelia - How to convert your visitors into bookers
Xotelia - How to convert your visitors into bookersXotelia - How to convert your visitors into bookers
Xotelia - How to convert your visitors into bookers
Jeffrey Messud
 
Newspapers online
Newspapers onlineNewspapers online
31460
3146031460
31460
qwasar1
 
JESS3 OpenAir Summer 2011 Logo Exploration
JESS3 OpenAir Summer 2011 Logo ExplorationJESS3 OpenAir Summer 2011 Logo Exploration
JESS3 OpenAir Summer 2011 Logo Exploration
JESS3
 
서울시 소셜방송 라이브서울
서울시 소셜방송 라이브서울서울시 소셜방송 라이브서울
서울시 소셜방송 라이브서울
simrc
 
Add your PD Publications on Linkedin
Add your PD Publications on LinkedinAdd your PD Publications on Linkedin
Add your PD Publications on Linkedin
Angel Berniz
 
Energize testimonial-1-1
Energize testimonial-1-1Energize testimonial-1-1
Energize testimonial-1-1Steve Harris
 
Zaragoza Turismo 37
Zaragoza Turismo 37Zaragoza Turismo 37
Zaragoza Turismo 37
Saucepolis blog & Hotel Sauce
 

En vedette (15)

Legislación de la comunicación
Legislación de la comunicaciónLegislación de la comunicación
Legislación de la comunicación
 
Scottish Public Opinion Monitor January 2015 - Holyrood Voting Intention
Scottish Public Opinion Monitor January 2015 - Holyrood Voting IntentionScottish Public Opinion Monitor January 2015 - Holyrood Voting Intention
Scottish Public Opinion Monitor January 2015 - Holyrood Voting Intention
 
Presentation for be briefing 17th june 2013
Presentation for be briefing  17th june 2013Presentation for be briefing  17th june 2013
Presentation for be briefing 17th june 2013
 
Comprension lectora 2000 euler r
Comprension lectora 2000 euler rComprension lectora 2000 euler r
Comprension lectora 2000 euler r
 
Welcome to group 2 internet
Welcome to group 2 internetWelcome to group 2 internet
Welcome to group 2 internet
 
Lisboa- Paintings By J. B. Durão
Lisboa- Paintings  By J. B. DurãoLisboa- Paintings  By J. B. Durão
Lisboa- Paintings By J. B. Durão
 
Zaragoza Turismo 25
Zaragoza Turismo 25Zaragoza Turismo 25
Zaragoza Turismo 25
 
Xotelia - How to convert your visitors into bookers
Xotelia - How to convert your visitors into bookersXotelia - How to convert your visitors into bookers
Xotelia - How to convert your visitors into bookers
 
Newspapers online
Newspapers onlineNewspapers online
Newspapers online
 
31460
3146031460
31460
 
JESS3 OpenAir Summer 2011 Logo Exploration
JESS3 OpenAir Summer 2011 Logo ExplorationJESS3 OpenAir Summer 2011 Logo Exploration
JESS3 OpenAir Summer 2011 Logo Exploration
 
서울시 소셜방송 라이브서울
서울시 소셜방송 라이브서울서울시 소셜방송 라이브서울
서울시 소셜방송 라이브서울
 
Add your PD Publications on Linkedin
Add your PD Publications on LinkedinAdd your PD Publications on Linkedin
Add your PD Publications on Linkedin
 
Energize testimonial-1-1
Energize testimonial-1-1Energize testimonial-1-1
Energize testimonial-1-1
 
Zaragoza Turismo 37
Zaragoza Turismo 37Zaragoza Turismo 37
Zaragoza Turismo 37
 

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

Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libre
Stéphane Traumat
 
L’informatique efficience
L’informatique efficienceL’informatique efficience
L’informatique efficience
Michel Bruchet
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
ENSIBS
 
Panel de solutions javascript
Panel de solutions javascriptPanel de solutions javascript
Panel de solutions javascript
jp_mouton
 
Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App
RESONEO
 
Cours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdfCours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdf
boulonvert
 
Virtua : Performances Magento : Solutions efficaces et accessibles
Virtua : Performances Magento : Solutions efficaces et accessiblesVirtua : Performances Magento : Solutions efficaces et accessibles
Virtua : Performances Magento : Solutions efficaces et accessibles
Swissgento eCom Genève
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Fasterize
 
Enib cours c.a.i. web - séance #6 : autour de la webapp
Enib   cours c.a.i. web - séance #6 : autour de la webappEnib   cours c.a.i. web - séance #6 : autour de la webapp
Enib cours c.a.i. web - séance #6 : autour de la webappHoracio Gonzalez
 
Programmation Web developpement dynamique
Programmation Web developpement dynamiqueProgrammation Web developpement dynamique
Programmation Web developpement dynamique
YounesOuladSayad1
 
Methodologies de Developpement Agiles : Scrum et XP
Methodologies de Developpement Agiles : Scrum et XPMethodologies de Developpement Agiles : Scrum et XP
Methodologies de Developpement Agiles : Scrum et XP
Nicolas Perriault
 
developpement web framework cms developpement brute
developpement web framework cms developpement brutedeveloppement web framework cms developpement brute
developpement web framework cms developpement brute
YounesOuladSayad1
 
Découvrez les nouvelles fonctionnalités de Talend 6
Découvrez les nouvelles fonctionnalités de Talend 6Découvrez les nouvelles fonctionnalités de Talend 6
Découvrez les nouvelles fonctionnalités de Talend 6
Jean-Michel Franco
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
Microsoft
 
Présentation pfe feki 2015.pptm
Présentation pfe feki 2015.pptmPrésentation pfe feki 2015.pptm
Présentation pfe feki 2015.pptm
Ahmed Feki
 
conception et réalisation plateforme collaboratif basant sur la methode agile...
conception et réalisation plateforme collaboratif basant sur la methode agile...conception et réalisation plateforme collaboratif basant sur la methode agile...
conception et réalisation plateforme collaboratif basant sur la methode agile...
Sid Ahmed Benkraoua
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14
FullSIX Group
 
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
[Scrum Day 2011] Outillage Agile dans un environnement MicrosoftChristophe HERAL
 
Solution Linux 2012 : Utilisateurs du Libre ne restez pas dans votre coin
Solution Linux 2012 : Utilisateurs du Libre ne restez pas dans votre coinSolution Linux 2012 : Utilisateurs du Libre ne restez pas dans votre coin
Solution Linux 2012 : Utilisateurs du Libre ne restez pas dans votre coin
Anne Nicolas
 
Web perf Silicon Comte
Web perf Silicon ComteWeb perf Silicon Comte
Web perf Silicon Comte
Silicon Comté
 

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

Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libre
 
L’informatique efficience
L’informatique efficienceL’informatique efficience
L’informatique efficience
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
 
Panel de solutions javascript
Panel de solutions javascriptPanel de solutions javascript
Panel de solutions javascript
 
Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App
 
Cours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdfCours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdf
 
Virtua : Performances Magento : Solutions efficaces et accessibles
Virtua : Performances Magento : Solutions efficaces et accessiblesVirtua : Performances Magento : Solutions efficaces et accessibles
Virtua : Performances Magento : Solutions efficaces et accessibles
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
 
Enib cours c.a.i. web - séance #6 : autour de la webapp
Enib   cours c.a.i. web - séance #6 : autour de la webappEnib   cours c.a.i. web - séance #6 : autour de la webapp
Enib cours c.a.i. web - séance #6 : autour de la webapp
 
Programmation Web developpement dynamique
Programmation Web developpement dynamiqueProgrammation Web developpement dynamique
Programmation Web developpement dynamique
 
Methodologies de Developpement Agiles : Scrum et XP
Methodologies de Developpement Agiles : Scrum et XPMethodologies de Developpement Agiles : Scrum et XP
Methodologies de Developpement Agiles : Scrum et XP
 
developpement web framework cms developpement brute
developpement web framework cms developpement brutedeveloppement web framework cms developpement brute
developpement web framework cms developpement brute
 
Découvrez les nouvelles fonctionnalités de Talend 6
Découvrez les nouvelles fonctionnalités de Talend 6Découvrez les nouvelles fonctionnalités de Talend 6
Découvrez les nouvelles fonctionnalités de Talend 6
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
 
Présentation pfe feki 2015.pptm
Présentation pfe feki 2015.pptmPrésentation pfe feki 2015.pptm
Présentation pfe feki 2015.pptm
 
conception et réalisation plateforme collaboratif basant sur la methode agile...
conception et réalisation plateforme collaboratif basant sur la methode agile...conception et réalisation plateforme collaboratif basant sur la methode agile...
conception et réalisation plateforme collaboratif basant sur la methode agile...
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14
 
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
 
Solution Linux 2012 : Utilisateurs du Libre ne restez pas dans votre coin
Solution Linux 2012 : Utilisateurs du Libre ne restez pas dans votre coinSolution Linux 2012 : Utilisateurs du Libre ne restez pas dans votre coin
Solution Linux 2012 : Utilisateurs du Libre ne restez pas dans votre coin
 
Web perf Silicon Comte
Web perf Silicon ComteWeb perf Silicon Comte
Web perf Silicon Comte
 

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

  • 1. 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. 2 / 61 Frameworks JavaScript :Frameworks JavaScript : optimisez votre time to marketoptimisez votre time to market
  • 3. 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. 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
  • 5. Comment produire du logicielComment produire du logiciel rapidement ?rapidement ?
  • 6. 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. 7 / 61 La démarche UXLa démarche UX ● 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. 8 / 61 La démarche UXLa démarche UX ● 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. 9 / 61 La démarche UXLa démarche UX ● Build Minimum Viable Product (MVP)
  • 10. 10 / 61 La démarche UXLa démarche UX ● 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. 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. 12 / 61 Organisation des équipesOrganisation des équipes ● Comment délivrer l'innovation rapidement ? 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. 13 / 61 Organisation des équipesOrganisation des équipes ● Comment délivrer l'innovation rapidement ? 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. 14 / 61 Organisation des équipesOrganisation des équipes ● Comment délivrer l'innovation rapidement ? 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. 15 / 61 Organisation des équipesOrganisation des équipes ● Comment délivrer l'innovation rapidement ? 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. 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. 17 / 61 OutillageOutillage ● Outillage pour une innovation rapide 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. 18 / 61 OutillageOutillage ● Outillage pour une innovation rapide 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
  • 19. Panorama des frameworks JavaScriptPanorama des frameworks JavaScript
  • 20. 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. 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. 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. 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. 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. 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. 26 / 61 Frameworks structurantsFrameworks structurants
  • 27. 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. 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. 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 Date de naissance Licence Pilotage Librairies complémentaires Difficulté 2009 MIT Communautaire. Open Source. Google underscore jQuery intermédiaire Date de naissance Licence Pilotage Librairies complémentaires Difficulté 2013 BSD Communautaire. Open Source. Facebook Facile React n'est pas un Framework MVVM mais correspond à la vue
  • 30. 30 / 61 Présentation des principaux framework frontPrésentation des principaux framework front ● 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. 31 / 61 Présentation des principaux framework frontPrésentation des principaux framework front ● 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 ● Error monitoring ● Track;js, New relic browser, Raygun, Bugsnag, JS Monitor, Qbaka
  • 32. 32 / 61 Présentation des principaux framework frontPrésentation des principaux framework front ● 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 ● Error monitoring ● Track;js, New relic browser, Raygun, Bugsnag, JS Monitor, Qbaka
  • 33. 33 / 61 Frameworks BackendFrameworks Backend
  • 34. 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. 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. 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. 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. 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. 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. 40 / 61 Frameworks mobilesFrameworks mobiles
  • 41. 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. 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. 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. 44 / 61 Frameworks desktopFrameworks desktop
  • 45. 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. 46 / 61 Frameworks d'affichageFrameworks d'affichage
  • 47. 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. 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. 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 });
  • 51. 51 / 61 Présentation OpenPaaSPrésentation OpenPaaS Quels outils peut-on fournir aux entreprises et organisations pour collaborer ces trente prochaines années ?
  • 52. 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. 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. 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. 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. 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. 57 / 61 Angular & Ionic for Mobile environmentsAngular & Ionic for Mobile environments 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. 58 / 61 Angular & Ionic for Mobile environmentsAngular & Ionic for Mobile environments 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. 59 / 61 NodeJS stackNodeJS stack Nous utilisons NodeJS avec les frameworks les plus courants: ● Express : framework web/REST ● Socket.io : websockets ● Passport : authentification
  • 60. 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
  • 61. 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