faire une app en js moderne
TRANSCRIPT
![Page 1: Faire une app en JS moderne](https://reader034.vdocuments.pub/reader034/viewer/2022042706/587d90e61a28abcd648b78f5/html5/thumbnails/1.jpg)
Créer une app en JavaScript moderne
3 octobre 2016
![Page 2: Faire une app en JS moderne](https://reader034.vdocuments.pub/reader034/viewer/2022042706/587d90e61a28abcd648b78f5/html5/thumbnails/2.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022042706/587d90e61a28abcd648b78f5/html5/thumbnails/3.jpg)
3
La toolchain
![Page 4: Faire une app en JS moderne](https://reader034.vdocuments.pub/reader034/viewer/2022042706/587d90e61a28abcd648b78f5/html5/thumbnails/4.jpg)
La toolchain : packager un projet avec webpack
4
![Page 5: Faire une app en JS moderne](https://reader034.vdocuments.pub/reader034/viewer/2022042706/587d90e61a28abcd648b78f5/html5/thumbnails/5.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022042706/587d90e61a28abcd648b78f5/html5/thumbnails/6.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022042706/587d90e61a28abcd648b78f5/html5/thumbnails/7.jpg)
7
Réaliser mon projet
![Page 8: Faire une app en JS moderne](https://reader034.vdocuments.pub/reader034/viewer/2022042706/587d90e61a28abcd648b78f5/html5/thumbnails/8.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022042706/587d90e61a28abcd648b78f5/html5/thumbnails/9.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022042706/587d90e61a28abcd648b78f5/html5/thumbnails/10.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022042706/587d90e61a28abcd648b78f5/html5/thumbnails/11.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022042706/587d90e61a28abcd648b78f5/html5/thumbnails/12.jpg)
Merci!
XX mois XXXX Titre mission - Titre présentation 12
A vos questions!