Faire une app en JS moderne

12
Créer une app en JavaScript moderne 3 octobre 2016

Transcript of Faire une app en JS moderne

Page 1: Faire une app en JS moderne

Créer une app en JavaScript moderne

3 octobre 2016

Page 2: Faire une app en JS moderne

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

Page 3: Faire une app en JS moderne

3

La toolchain

Page 4: Faire une app en JS moderne

La toolchain : packager un projet avec webpack

4

Page 5: Faire une app en JS moderne

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

Page 6: Faire une app en JS moderne

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

Page 7: Faire une app en JS moderne

7

Réaliser mon projet

Page 8: Faire une app en JS moderne

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

Page 9: Faire une app en JS moderne

Structure de l’app

9

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

Exemple avec Redux :

Page 10: Faire une app en JS moderne

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

Page 11: Faire une app en JS moderne

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

Page 12: Faire une app en JS moderne

Merci!

XX mois XXXX Titre mission - Titre présentation 12

A vos questions!