Logo Industrialisation Front-End

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.

le 18 octobre 2023

Saifeddin D.

le 18 octobre 2023

Jingyi L.

le 18 octobre 2023

Nicolas D.

le 18 octobre 2023

Laurent L.

le 18 octobre 2023

Ludovic R.

le 18 octobre 2023

Philippe G.

le 18 octobre 2023

Laurent L.

le 19 avril 2023

Jingyi L.

le 19 avril 2023

Sarra S.

le 19 avril 2023

Abdeljabar M.

le 19 avril 2023

Gerald H.

le 19 avril 2023

Florent V.

le 19 avril 2023

Frédéric G.

le 19 avril 2023

Thomas D.

le 19 avril 2023

Ines B.

le 19 avril 2023

Florent P.

le 30 novembre 2022

Thouraya A.

le 30 novembre 2022

Badreddine B.

le 30 novembre 2022

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.

le 30 novembre 2022

Thomas M.

le 30 novembre 2022

Asma Y.

le 30 novembre 2022

Nizar T.

le 30 novembre 2022

Wissem A.

le 15 juin 2022

Matthieu B.

le 15 juin 2022

Sébastien L.

le 15 juin 2022

Edin K.

le 15 juin 2022

Claire R.

le 15 juin 2022

Hervé C.

le 15 juin 2022

Intissar Z.

le 15 juin 2022

Enis K.

le 15 juin 2022

Stéphane F.

le 01 décembre 2021

Julien D.

le 01 décembre 2021

Pascal H.

le 01 décembre 2021

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.

le 01 décembre 2021

La formation
Encore un peu trop rapide à mon goût. ;-)

Fabrice C.

le 01 décembre 2021

La formation
Rythme souvent rapide par rapport au nombre de notions abordées...

Christophe M.

le 01 décembre 2021

Stéphane G.

le 01 décembre 2021

Vincent G.

le 01 décembre 2021

Quentin G.

le 01 décembre 2021

Michel Z.

le 01 décembre 2021

Aymen A.

le 25 janvier 2021

Yosra G.

le 25 janvier 2021

Pascale M.

le 25 janvier 2021

La formation
Je ne crois pas avoir trouve suffisamment de details sur cette partie de la formation dans les slides.

Nabil S.

le 25 janvier 2021

Frédéric C.

le 25 janvier 2021

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.

le 25 janvier 2021

La formation
formation dense et complete qui met en avant les concepts fondementaux;

Patrice M.

le 25 janvier 2021

Maxime D.

le 25 janvier 2021

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. :)

Eric A.

le 25 janvier 2021

Formations associées

Dernière modification le 26/12/2022