Web Apps Modernes

Faire du web front moderne avec une productivité au top : Webpack, ES2015+, React, Redux, TDD, Hot reloading, offline-first… vers les PWA !

Objectifs

La formation Web Apps Modernes (anciennement JS Total) vise à permettre aux apprenant·e·s de :

  • Apprivoiser le JS moderne avec ES2015 (même sur IE9)
  • Internaliser ce qui constitue aujourd’hui une webapp moderne et ce qu’elle peut faire
  • Appréhender un cycle de développement test-first
  • Développer de façon modulaire, découplée, facile à tester
  • Préparer la montée à l’échelle en complexité de leurs projets
  • Mettre en place un cycle de feedback instantané pendant le développement
  • Mettre l’accent sur la mobilité, ainsi que sur le bon fonctionnement hors-connexion
  • Rendre leurs webapps installables et sans cesse plus proches d’un comportement natif

Public visé

La formation Web Apps Modernes s’adresse principalement aux développeurs web front amenés à développer des applications web complexes et optimisées, capables éventuellement de fonctionner intelligemment sur tous types de périphériques (desktop, smartphones, tablettes, bornes interactives…).

Une connaissance minimale de JavaScript est nécessaire, même si les aspects avancés seront revus en profondeur le 1er jour ; tout développeur web front utilisant déjà quotidiennement JavaScript, même si c’est essentiellement au travers de jQuery, a normalement les connaissances nécessaires.

C’est particulièrement vrai depuis février 2016, puisque la version 2016 de Web Apps Modernes utilise exclusivement ES2015+, et que très peu d’apprenant·e·s auront déjà une connaissance de cette dernière version du langage : le premier jour explore donc celui-ci en détails, et nivelle l’auditoire par le haut.

Toutefois, il peut être utile de « préparer le terrain » en amont pour fluidifier l’acquisition de connaissances une fois en formation. Les futur·e·s apprenant·e·s auront alors tout intérêt à puiser dans cette liste de contenus de qualité compilée par Christophe ; pour ES2015, une liste spécifique existe.

Pour le reste, une connaissance « standard » de la couche client est évidemment attendue : HTML et CSS, donc. Pas besoin d’être super calé(e) en HTML5 ou CSS3 : même si on s’en servira, ce n’est pas le cœur du sujet et la formation n’a donc pas de prérequis particuliers dans ces domaines.

Il n’est par ailleurs pas nécessaire d’être déjà l’aise avec les systèmes de tests unitaires et d’intégration, ou de documentation intégrée. Si vous avez déjà travaillé avec de tels systèmes (JUnit, Test::Unit, RSpec, Cucumber, Capybara, Selenium, etc.) tant mieux, aborder ces problématiques dans l’univers JavaScript n’en sera que plus facile. Mais les concepts correspondants seront tous détaillés au fur et à mesure de leur mise en œuvre.

Programme

Jour 1 — ES2015+

  • Rappels sur l’historique ES3, ES5, ES2015, ES2016…
  • Compatibilité native back et front
  • Transpiling avec Babel
  • Expérimentation interactive et ressources d’approfondissement
  • Litéraux objets et nouvelle syntaxe de classes
  • Déstructuration
  • Rest et Spread
  • Valeurs par défaut
  • Template strings et Tagged template strings
  • let et const
  • Fonctions fléchées et préservation de portée lexicale
  • Modules ES6
  • Promesses natives
  • ES2017 : async / await
  • ES.NEXT : décorateurs

Jours 2–4 — Réalisation d’une appli web moderne

  • Outillage : écriture, linting, transpiling et build, tests, débogage
  • Présentation de l’appli qui va être développée
  • Présentation du socle technique fourni
  • Approche test-first et outillage utilisé
  • Redux
  • React
  • Boucle de feedback instantané et hot reloading de modules
  • Time-travel debugging
  • React-Router
  • Persistence déléguée
  • JS isomorphe / universel, pré-rendu serveur et hydratation client
  • TLS, HTTPS Everywhere et moyens modernes d’acquisition de certificats signés DV / EV
  • Offline-first : ServiceWorker et fallback sur AppCache
  • Web Apps Manifest ; outillage connexe (ManifoldJS, RealFaviconGenerator…)
  • Déploiement No Backend

Moyens pédagogiques et techniques, suivi et appréciation

Les apprenant·e·s reçoivent, en début de session, l’ensemble des diapositives du support de cours au format web, afin de pouvoir faciliter leur suivi du plan de cours.

Après la session, ils reçoivent par ailleurs, avec un e-mail de debrief très fourni et riche en ressources, une archive de référence, contenant les codebases finalisées, entièrement documentées et testées, les slides de toute la formation et diverses ressources complémentaires.

Tarifs indicatifs

Apprenant·e·s de la conventionTarif unitaire
1 à 2 personnes1 700 € HT
3 à 5 personnes1 530 € HT
À partir de 6 personnes1 360 € HT