Formation Industrialisation Front-End
L'industrialisation front-end est l'ensemble des pratiques et des outils utilisés pour automatiser et améliorer le processus de développement de logiciels côté client (c'est-à-dire côté navigateur). Elle vise à rendre le développement de logiciels côté client plus efficace, plus rapide et plus fiable en utilisant des outils et des workflows automatisés. L'industrialisation front-end peut inclure des activités telles que la mise en place de tâches automatisées pour compiler le code source, l'intégration continue, le déploiement continu, les tests automatisés et la génération de documentation. Elle peut également inclure l'utilisation de frameworks et de bibliothèques comme React, Angular ou Vue.js pour structurer le code source et améliorer les performances. L'industrialisation front-end est un domaine en constante évolution et de nouvelles pratiques et outils sont constamment mis au point pour améliorer le développement de logiciels côté client. En utilisant ces pratiques et outils, les développeurs peuvent créer des logiciels de qualité supérieure de manière plus efficace et plus rapide.
Objectifs pédagogiques
- Trouver et installer des bibliothèques avec un gestionnaire de dépendances
- Utiliser les sur-ensembles CSS et de JavaScript
- Vérifier statiquement les conventions de code
- Ecrire son code JavaScript en module et le builder avec webpack
- Automatiser les tests de son application
Pré-requis
- HTML / CSS
- JavaScript
Public
- Développeurs
- Chefs de projets
Programme
Jour 1
Les IDEs Front-End
- Visual Studio Code
- WebStorm
- EditorConfig
Gestionnaires de dépendance
- Les modernes : npm / Yarn / pnpm
- Les anciens : Bower / jspm
- Processus de mise à jour et de migration
- Publier un paquet
- Paquets privés : npmjs.com, Verdaccio, Nexus
Frameworks HTML/CSS
- Bootstrap 3 et 4
- Semantic UI
- Bulma
- Materialize
Frameworks JavaScript
- AngularJS
- Angular
- React
- Vue.js
- Stencil
Jour 2
Préprocesseurs CSS
- Less
- SASS et SCSS
- Stylus
- PostCSS, PostCSS Preset Env, Autoprefixer
Méthodologies CSS
- BEM
- SMACSS
- OOCSS
- ITCSS
Modules / Loaders / Bundlers JavaScript
- Modules : IIFE, CommonJS, AMD, ECMAScript (ESM), Dynamic Imports
- Loaders : Require.js / SystemJS
- Bundlers : webpack / browserify / Rollup
Jour 3
Documentation et conventions de codes
- Générer une documentation d’API : JSDoc
- Les guides : Google / Airbnb / Standard
- Les linters JavaScript : JSLint, JSHint, ESLint
- Les linters HTML / CSS : htmllint, CSSLint, stylelint
- Les formateurs automatiques : Prettier, XO
Task Runners
- Configurer l'automatisation : Grunt
- Des builds plus rapides : gulp
- Les scripts npm
Les compilateurs JavaScript
- Compatibilité des moteurs JS : Babel, @babel/preset-env
- Typage Statique : TypeScript et Flow
- Performance : WebAssembly / ASM.js
Automatiser les tests
- Les différents types de tests : Unitaire, Intégration, Fonctionnel, End-to-End
- Tests unitaires / d’intégration : QUnit, Jasmine, Mocha / chai, Ava, Jest
- Tests runners : Karma
- Test Doubles : Sinon.js
- Code Coverage : Istanbul, nyc
- Tests End-to-End (E2E) : Selenium, Webdriver, Cucumber, CodeceptJS
Méthodes mobilisées
- Un formateur validé par nos équipes techniques et pédagogiques sera présent pendant toute la durée de la formation
- Pour les formations en présentiel, une salle de formation sera mise à disposition et équipée d'ordinateurs portables, d'un accès Wi-Fi, d'un projecteur et d'un tableau blanc. En distanciel la session sera suivie sur Zoom ou autre outil de visioconférence sur demande (Teams, Webex, Google Meet...).
- Un support de cours en version numérique sera remis à chaque participant
Modalités d’évaluation
- Questions orales ou écrites (QCM)
- Exercices pratiques
- Auto-positionnement en amont et aval de la formation
Accessibilité aux personnes handicapées
Nous nous engageons à rendre notre formation Industrialisation Front-End accessible aux personnes en situation de handicap. Merci de nous contacter afin que nous puissions réaliser les adaptations nécessaires en amont de la formation.Avis
Chayma B.
Saifeddin D.
Jingyi L.
Nicolas D.
Laurent L.
Ludovic R.
Philippe G.
Laurent L.
Jingyi L.
Sarra S.
Abdeljabar M.
Gerald H.
Florent V.
Frédéric G.
Thomas D.
Ines B.
Florent P.
Thouraya A.
Badreddine B.
La formation
- Formation riche et variée.
- Proposition d'amélioration:
- ça sera super de faire une sélection des candidats pour partager leurs code ou voir leurs avancement (partage d'écran, questions aléatoire pour voir le taux d'assimiltaion), ça va les aider à mieux assimiler les choses, les impliqués de plus dans la formation, avoir plus de dynamise. (Surtout dans le cas des formations à distance).
Amel T.
Thomas M.
Asma Y.
Nizar T.
Wissem A.
Matthieu B.
Sébastien L.
Edin K.
Claire R.
Hervé C.
Intissar Z.
Enis K.
Stéphane F.
Julien D.
Pascal H.
Commentaire général
La somme des sujets abordés et leur complexité nécessitera beaucoup de pratique derrière pour être capable de travailler sur un vrai projet.
Gilles C.
La formation
Encore un peu trop rapide à mon goût. ;-)
Fabrice C.
La formation
Rythme souvent rapide par rapport au nombre de notions abordées...
Christophe M.
Stéphane G.
Vincent G.
Quentin G.
Michel Z.
Aymen A.
Yosra G.
Pascale M.
La formation
Je ne crois pas avoir trouve suffisamment de details sur cette partie de la formation dans les slides.
Nabil S.
Frédéric C.
La formation
Rien à dire de special
Le formateur
Tres bien.
Les +
RAS
Commentaire général
Tout dependra des affectations sur le nouveau projet (cube2) et donc des besoins.
Cédric C.
La formation
formation dense et complete qui met en avant les concepts fondementaux;
Patrice M.
Maxime D.
La formation
Tout est dans le petit détail qui fait qu'on saisit un peu mieux la notions. Il y a toujours beaucoup de support disponibles sur le net mais l'explication en live a quand même beaucoup de valeur ajoutée.
Le formateur
Toujours au niveau de mes précédentes appréciations. :)
