JS Attitude

« Je n’ai jamais rencontré un expert JavaScript au chômage »

Formation JS Total

Commentaires

Attention tuerie !

Née à l’automne 2012, la formation JS Total est une combinaison à très, très forte valeur ajoutée. Sur 4 jours consécutifs, elle permet de découvrir et pratiquer dans un contexte intégré cohérent une foule de compétences et technologies de pointe autour de JavaScript.

Mise au point à la base pour un besoin spécifique haut de gamme exprimé par une agence web de premier plan pour de l’intra-entreprise, elle nous a tellement emballés qu’on a immédiatement décidé de la proposer au catalogue général !

Laissez-vous tenter…

Objectifs

La formation JS Total est un packaging de nos 3 formations JS autonomes (JS Puissant, JS Guru et la future JS Blindé), à laquelle s’ajoutent des thématiques dédiées au Web mobile, le tout avec un peu plus de temps dédié aux exercices et à l’expérimentation personnelle, et appliqué dans un contexte unifié de développement applicatif.

À ce titre, ses objectifs recouvrent ceux des autres formations, à savoir permettre aux stagiaires de :

  • corriger, consolider et étendre leur compréhension du langage JavaScript ;
  • être capables d’architecturer au mieux des codes JavaScript de taille importante ;
  • améliorer la qualité, l’efficacité et la réutilisabilité de leurs codes JavaScript ;
  • être mieux à même de déboguer du code JavaScript existant ;
  • être capables de personnaliser ou d’étendre des bibliothèques JavaScript tierces pour répondre aux besoins de leurs projets ;
  • se familiariser avec plusieurs technologies et standards émergents du web, orientées applications ;
  • construire une Single Page Application dans le respect des meilleures pratiques et de l’état de l’art, en recourant au paradigme MVC au moyen de bibliothèques JavaScript établies telles que Backbone.js, tout en faisant un tour d’horizon des principales solutions dans ce domaine ;
  • découvrir et tirer parti des nombreuses possibilités à usage générique de Underscore.js ;
  • gérer le templating ;
  • communiquer avec le serveur en REST + JSON mais aussi WebSockets ;
  • tirer parti des capacités de géolocalisation du navigateur et/ou du périphérique ;
  • implémenter un cache de données applicatif et s’en servir pour résoudre les problématiques de réconciliation de lectures/écritures après une période hors-ligne ;
  • détecter le statut connecté / hors-ligne du navigateur ou du périphérique et agir en fonction ;
  • accélérer le chargement et permettre l’utilisation hors-ligne avec AppCache ;
  • exploiter des API tierce-parties populaires, type Google Maps et Google Places ;
  • exploiter un framework CSS populaire (en l’occurrence Bootstrap) ;
  • découvrir au passage quelques préprocesseurs type Stylus (pour les CSS) et CoffeeScript (pour le serveur JavaScript) ;
  • optimiser l’ensemble des aspects de chargement et d’exécution d’une appli web, tant sur la configuration serveur que sur les processus de build, le chargement de ressources, le rendering ou la parallélisation de tâches gourmandes ;
  • assurer la fiabilité de leur code JavaScript au moyen de tests unitaires et d’intégration ;
  • se familiariser avec les problématiques de facteur de forme et de types d’interactions utilisateurs du mobile et des tablettes ;
  • réaliser des intégrations s’adaptant aux différents facteurs de forme ;
  • unifier les modes d’interaction souris et tactiles ;
  • faciliter l’utilisation de leurs applis web comme des applis web mobiles ;
  • automatiser l’exécution de leurs tests, y compris en intégration continue headless (sans navigateur) ou distribuée sur des services externes ;
  • découvrir le développement guidé par les specs exécutables (BDD, Behavior-Driven Development), les avantages et les inconvénients de cette approche, et comment arbitrer avec pragmatisme le rôle et la place dans le workflow des différents types de tests.
  • documenter leur code de façon exploitable, produire la documentation résultante et la mettre à disposition.

On ne pourra pas dire que les objectifs ne sont pas ambitieux ! Il s’agit là d’une véritable montée en compétences, et pas seulement superficielle mais en fouillant bien les aspects phares.

Public visé

La formation JS Total 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 décente 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. Toutefois, il peut être utile de « préparer le terrain » en amont pour fluidifier l’acquisition de connaissances une fois en formation. Les futurs apprenants auront alors tout intérêt à puiser dans cette liste de contenus de qualité compilée par Christophe.

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

Le programme de la formation est le suivant :

Jour 1 — JavaScript, le langage pur

On remet bien à niveau tout le monde sur l’élément fondamental : JS le langage. On évoque les différences entre la baseline (JS 1.5 / ES3) et les versions sur navigateurs plus modernes (principalement ES5). On passe en revue tous les pièges, les astuces, certains aspects performances.

  • Présentation du programme ; tour de table des niveaux, rôles et contextes des stagiaires
  • Méthodes utiles mais méconnues des types natifs. Pièges, astuces et meilleures pratiques autour des dates et heures
  • Opérateurs connus et méconnus, protocoles de conversion implicite et pièges
    • Égalité stricte ou laxiste
    • Types, undefined et null
    • Propriétés, opérateurs [], in et delete, conséquences inattendues
    • Équivalence booléenne large (falsy values, truthy values)
    • La conversion numérique, ses pièges et les meilleures pratiques
  • Constructeurs
  • Prototypes
  • Binding : le vrai sens de this et comment l’ajuster, le contrôler, le garantir.
  • Fonctions : déclarations, expressions, expressions nommées. Hoisting.
  • Arguments dynamiques et flexibles
  • Portée et fermeture lexicale (closure)
  • Le module pattern : encapsuler son code et favoriser la modularité et la collaboration.
  • Programmation fonctionnelle : itérateurs, AOP, toProc, throttling, etc.
  • Héritage prototypal

Jour 2 — Outillage, méthodologies et écosystème

  • À la base, pondre le code : éditeur, plugins JSLint / JSHint, beautifiers, etc.
  • Déboguer sur desktop : consoles modernes (Chrome Dev Tools en tête). Panneaux avancés (Sources, Profiling, Timeline, Memory, etc.). Débogage interactif. Console helper.
  • Déboguer à distance / sur mobile : Weinre, Safari, Chrome, Firefox, etc.
  • Préprocesseurs (Stylus, CoffeeScript…), watchers et reloaders
  • À quoi on a droit ?
    • Les bons outils de reporting/test de compatibilité ; caniuse + GA = awesome !
    • Modernizr
    • Shims
  • Organiser la codebase en modules
    • CommonJS
    • AMD
    • ES6
    • Utilisation dans le navigateur (Brunch, Browserify, etc.)
  • Templating
    • Le HTML : côté client (Handlebars, Jade…) ou serveur ? Avantages et inconvénients.
    • Où poser les templates ? Sous quelle forme ? Qui est à même de les créer/maintenir dans l’équipe ?
    • Data binding (ex. AngularJS, Ember, KnockoutJS…)
  • Frameworks
    • Pourquoi un framework ? De nombreux intérêts.
    • Backbone.js (et plugins)
    • Full-client : Ember, Angular, surcouches Backbone.js (Chaplin, Thorax…)
    • Full stack : CompoundJS, Tower.js, etc.
  • Brunch
  • Début de la Single-Page App
    • Mise en place de Brunch et du socle de la SPA
    • Architecture de l’application
    • Étapes de développement
    • Construire la vue principale
      • Templating côté client
      • Exploiter sessionStorage pour maintenir l’identité
      • Exploiter Moment.js pour une jolie horloge

Jour 3 — Finir l’appli

  • La première vue imbriquée : les check-ins
    • Géolocalisation W3C
    • Exploitation de Google Maps > Places pour obtenir des POI
    • Exploitation de Underscore.js pour traiter efficacement le dataset obtenu
    • Data binding sur un modèle d’état de l’UX
    • Stockage mémoire en collection Backbone.js
    • Réviser l’architecture REST+JSON
    • Persistence serveur de la collection ; jouer avec l’API modèles de Backbone.js
  • La seconde vue imbriquée : l’historique
    • Pub/sub applicatif pour réagir aux check-ins et contrer une race condition asynchrone
    • Persistence locale pour tolérance à l’offline en enrobant localStorage
    • Problématiques de réconciliation post-offfline
    • Réagir aux check-ins des copains avec Web Sockets grâce à Socket.IO
  • Devenir utilisable hors-ligne (et donc une vraie mobile web app)
    • Réagir aux statuts online/offline
    • Présentation d’App Cache
    • Les pièges et astuces
    • Propager les mises à jour
    • Détecter la mise à jour et notifier l’utilisateur
    • Dev vs. Prod ; quand activer l’App Cache ? Et les tests ?

Jour 4 — Industrialisation et version mobile

  • Tester !
    • Rappels conceptuels sur les tests automatisés
    • Mocha comme harnais ; interface BDD.
    • Assertions avec Chai et Chai-as-Promised ; syntaxes classique, expect et should.
    • Isolation et mocking avec SinonJS.
    • Exercices autour de notre collection de check-ins et de l’horloge.
    • Automatiser les browsers avec Selenium, PhantomJS, CasperJS…
    • Exemples de tests headless faciles avec mocha-phantomjs
    • Exemples d’automatisation multi-navigateur avec wd ou karma-runner
    • Les VM en PaaS : Browserstack et SauceLabs.
  • Documenter
    • Classiquement, à la JSDoc
    • Agréablement, à la Groc
    • readthedocs.org et consorts
  • Optimiser les performances
    • Optimiser le chargement et le critical path
      • Desktop vs. Mobile
      • Concaténation
      • Minification et packing. Quels outils ?
      • Config serveur : gzipping dynamique/statique, Expiry, E-Tags, 304, etc.
      • CDN, Google Ajax Libs et n°s de version, web fonts…
      • Loaders ou pas loaders ?
      • Chargements synchrones et asynchrones
      • JS tierce-partie
      • Réduction de poids des images ; spriting ; fontes icôniques.
    • Optimiser le parsing / l’exécution
      • Optimisation des sélecteurs CSS
      • Optimisations JS pures et optimisations d’exploitation du DOM
      • setTimeout/setInterval vs. requestAnimationFrame
      • Web Workers
  • Et sur mobile ?
    • Contraintes de cache / de chargement / de dimensions
    • UX homogène : click vs. Tap, etc. Multitouch. pointer.js.
    • Exercice d’exploitation de pointer.js pour une SPA plus « tactile »
    • Media queries, Adaptive design, Responsive design… : bien mais pas forcément la panacée.
    • Fondamentaux d’UX tactile et mobile
    • Exemple et exercice d’adaptation mobile du layout de notre SPA
    • Mobile Web Apps. « Native Web Apps ».
    • Conclusion

Livrables

Les stagiaires reçoivent, chaque début de journée, 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.

Aspects logistiques

La formation se déroule dans une salle privative climatisée, lumineuse, fonctionnelle et très confortable. L’ensemble des locaux sont facilement accessibles en transports en commun et classés ERP, notamment accessibles aux Personnes à Mobilité Réduite.

Espace La Rochefoucauld
11 rue de La Rochefoucauld
75009 Paris

Situé en plein cœur de Paris, tout près de la Gare Saint-Lazare et d’Opera, il est accessible via pas moins de 6 lignes de métro, 2 lignes de RER et 7 lignes de bus :

  • Métro : Saint-Georges, Trinité (ligne 12), St-Lazare (lignes 3, 9, 12, 13 et 14), Chaussée d’Antin (lignes 7 et 9)
  • RER : Haussman Saint-Lazare (ligne E), Auber (ligne A)
  • Bus : Saint-Georges (67, 74), La Bruyere (74), Trinité (26, 32, 43, 68, 81)

On trouve également nombre de parkings alentour.


Afficher Espace la Rochefoucauld sur une carte plus grande

Chaque stagiaire amène son propre poste de travail ou ordinateur portable.

L’accès internet est assuré par une connexion fibre très haut débit. La salle fournit un accès Wi-Fi ainsi que des connexions RJ45 pour les postes qui le nécessiteraient.

Vous n’êtes pas en région parisienne et cherchez un hébergement ? Nous vous proposons de consulter les hôtels Accor à proximité (Ibis, Mercure, Novotel, etc.) ou pourquoi pas de passer par airbnb ?

Les formations vont de 4 à 10 stagiaires.

Les horaires indicatifs de la formation, pour un total de 7 heures d’atelier par jour soit 28h de formation, sont :

  • 9h15 – Accueil, petit déjeuner (boissons chaudes et fraîches, viennoiseries)
  • 9h30 – Début de la journée
  • 12h30 – Déjeuner (inclus dans le prix)
  • 13h45 – Reprise
  • 16h15 – Pause café
  • 16h30 – Reprise
  • 18h – Fin de la journée

Prix indicatifs

Hors dates exceptionnelles, JS Total est normalement proposée pour 4 jours aux tarifs suivants :

  • 1 ou 2 personnes : 1 599€ HT par personne.
  • 3 à 5 personnes : 1 439€ HT par personne.
  • À partir de 6 personnes : 1 279€ HT par personne.
  • Tarif fidélité : 1 359€ HT par personne.

Prochaines sessions

  • mardi 16 décembre 2014 → vendredi 19 décembre 2014 Complet !
  • mardi 20 janvier 2015 → vendredi 23 janvier 2015
  • mardi 10 février 2015 → vendredi 13 février 2015
  • mardi 17 mars 2015 → vendredi 20 mars 2015

Demander une convention de formation

S’inscrire

Il vous suffit de remplir une demande de convention.

Nous vous invitons à vérifier les prochaines dates en encart sur ce site (et juste ci-dessus). Nous proposons une session JS Total environ une fois par mois à depuis novembre 2013.

En savoir plus

Vous pourrez retrouver toutes les informations sur le formateur, les modalités d’inscription et de paiement, l’annulation et le remboursement, et enfin le règlement intérieur, dans la page des Informations Générales.

Liquid error: undefined method `sort!' for nil:NilClass

Commentaires

Ils nous font confiance : Kelkoo, MisterGoodDeal, PriceMinister, Blablacar / Comuto, Sarenza, Voyages-SNCF, LeMonde.fr, Fnac DIRECT, 20minutes, Orange, l’OCDE, Cisco, Alcatel-Lucent, Dassault Systèmes, EADS, Atos, Lagardère Interactive, Lesieur, L’Occitane en Provence, Météo France, 4D, Securitas, Digitas, Vivaki, Fullsix, Ekino, TBWA \ Paris, Valtech, Is Cool Entertainment, Open Wide…