Upload
michaelbailly
View
579
Download
0
Embed Size (px)
Citation preview
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
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 : Gitlabhttps://gitlab.com/
● La rolls : suite Atlassian JIRA/Bit Buckethttps://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 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
Date de naissance Licence Pilotage Librairies complémentaires
Difficulté
2009 MIT Communautaire. Open Source.Google
underscorejQuery
intermédiaire
Date de naissance Licence Pilotage Librairies complémentaires
Difficulté
2013 BSD Communautaire. Open Source.Facebook
FacileReact 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
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
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è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