Créer une app en JavaScript moderne

3 octobre 2016

Un environnement hostile

2

Conflits de libs

Packaging des assets

Difficultés à tester

Les imports/exports ES6

Des frameworks à l’infini

Qualité des modules npm variable

3

La toolchain

La toolchain : packager un projet avec webpack

4

Les types de projets

5

• Vit dans son docker• Pas de risque de conflit avec

des parties externes

App standalone

• Intégrée à une autre interface• Si une lib est globale, il ne faut

pas l’inclure dans le bundle mais utiliser la version du SI

• Attention aux conflits sur le CSS, utiliser du CSS local ou préfixé

App intégrée

• Importé par des applications• Ne doit pas inclure ses propres

dépendances dans le bundle• Attention au CSS/SASS:

@import ‘bootstrap’ ajoute tout bootstrap au bundle, c’est à éviter

Bibliothèque

Systematic

6

Webpack s’est imposé comme outil de build, mais :• La configuration est complexe• D’autres problèmes se présentent :

• Traductions• Settings• Linting

Systematic contient une config de webpack et des solutions pour ces problèmes tout en permettant d’ajouter des options de builds spécifiques au framework utilisé.

Avantages :• Possibilité de démarrer un projet sans maîtriser Webpack• Beaucoup de choix sont déjà faits• Pas de boilerplate, mais configurable

Présentation sur systematic : https://docs.google.com/presentation/d/1miOCBqnYpFoydrwCeygD9jhXtk1sIgE3iRgD2uLOy30Repo github: https://github.com/Polyconseil/systematic

7

Réaliser mon projet

Quel framework/lib?

8

• Véritable framework complet• Grosse communauté• Complexe, difficultés pour faire des composants• Non recommandé pour des nouveaux projets

• Sorti en septembre 2016• Composant faisables simplement• Injection de dépendance• Utilise Typescript (outillage vs overhead)• Complexité assez élevée : composants, directives,

services, provider

Angular Angular 2

• Juste une lib, nécessite vite des plugins• Composants• Templates avec attributs spéciaux, comme Angular• Bonne communauté• Simple et facile

• Juste une lib, nécessite vite des plugins• Composants• Templates en JSX, directement dans le JS• Orientation programmation fonctionnelle• Grosse communauté• Relativement facile à apprendre

Vue React

Structure de l’app

9

Architecture unidirectionnelle pour centraliser la gestion des états et ne pas avoir d’effets de bord.

Exemple avec Redux :

Comment tester mon app?

10

Aujourd’hui avec Angular 1 : beaucoup de tests sont trop complexes, en particulier à cause d’un usage trop intensif des contrôleurs.

Recommandations :• Utiliser des composants testés unitairement• Tester l’app complète avec des tests d’intégration

Derniers gotchas

11

• Attention avant d’utiliser une lib• La qualité des libs sur npm est très variable, bien vérifier le code source et les tests• En es6, beaucoup de choses ne nécessitent plus de libs comme lodash ou jQuery

• imports/exports es6, connaître les deux versions, nommé et par défaut : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/export

Merci!

XX mois XXXX Titre mission - Titre présentation 12

A vos questions!