Toutes les étapes pour construire son projet, de la toolchain à l'architecture de l'app.

1. Créer une app en JavaScript moderne
3 octobre 2016

2. 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. 3
La toolchain

4. La toolchain : packager un projet avec webpack
4

5. 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

6. 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/1miOCBqnYpFoydrwCeygD9jhXtk1sIgE3iRgD2uLOy30
Repo github: https://github.com/Polyconseil/systematic

7. 7
Réaliser mon projet

8. 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

9. Structure de l’app
9
Architecture unidirectionnelle pour centraliser la gestion des états et ne pas avoir d’effets de bord.
Exemple avec Redux :

10. 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

11. 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

12. Merci!
XX mois XXXX Titre mission - Titre présentation 12
A vos questions!