Formation Backbone.js Concevez des applications web solides et modulaires en utilisant une architecture MV* avec Backbone.js et Marionette

Le web devient de plus en plus une plateforme de développement complète qui n’a plus à rougir face aux environnements historiques. Les applications web (webapp) se multiplient, imposant aux développeurs de revoir en profondeur leurs méthodes de travail avec les langages que sont HTML, CSS et bien entendu JavaScript. Imaginé par Jeremy Ashkenas fin 2010, Backbone.js apporte une solution élégante et légère à l’architecture d’application, en implémentant un design pattern Modèle-Vue au sein du navigateur.

Cette formation Blackbone.js est une formation très orientée vers la pratique. Elle vous permettra de vous approprier Backbone.js, de comprendre ses mécanismes et d’être capable de travailler avec un top-framework comme Marionette. Vous découvrirez également comment adapter l’outil à vos propres solutions internes, et comment assurer un développement itératif de qualité en testant en continu vos sources Backbone.js.

Objectif opérationnel : 

Savoir maîtriser Backbone.js.

Objectifs pédagogiques :

Concrètement, à l'issue de cette formation Backbone.js, vous aurez acquis les connaissances et compétences nécessaires pour :

• Comprendre les mécanismes d’une application MV* en JavaScript,
• Comprendre le fonctionnement de Backbone.js et l’utiliser,
• Maîtriser les implications techniques et les choix d’architecture inhérents à ce type d’application,
• Développer des solutions mettant en œuvre la brique de base Backbone.js et utiliser un top-framework,
• Mettre en place une stratégie d’assurance qualité de développement d’applications web modulaires.

Public :

Cette formation Blackbone.js s'adresse aux chefs de projet web, aux architectes techniques ainsi qu'aux développeurs front-end.

Prérequis :

Pour suivre ce cours, il est demandé de connaître HTML, CSS et de posséder un très bon niveau en programmation avec JavaScript.

Introduction à Backbone.js

Rappels sur JavaScript, le langage, ses avantages et ses piègesLe binding et le vrai sens de thisPrototypage et ConstructeursBackbone.js : origine, objectifs et état de la solutionCas d’utilisation : quand et pourquoi mettre en œuvre Backbone.js ?Concevoir une application webStructure de base : modèles et vues

Installation Backbone.js

Gérer son environnementChoisir ses librairesGestion des dépendances front avec Bower

Architecture event-driven

Utiliser les évènements pour gérer les piles appelsAttacher et lever des évènements dans les composants Backbone.js

Modèles

Structuration des modèles de données Backbone.jsAPI Sync vers / depuis le WebServiceRécupérer et sauver les donnéesCréer des objets de donnée et appliquer des valeurs par défautRattacher des évènements

Vues

Composant de vue par défautGestion des attributsDépendances à jQueryRenderingTemplating simpleRattacher des évènements

Interactions Modèles / Vues

Gérer les évènements depuis la vueRemonter les changements d’état de donnée depuis les modèlesSynchroniser les actions utilisateur vers le WebServiceRe-rendering des vuesDestruction des vues couplées aux modèles

Collections

Structurer des groupes de modèlesAjouter / Supprimer des élémentsItérer sur les collectionsRattacher la synchronisation vers le WebServiceRattacher les évènementsGérer les cas d’évènements spécifiques aux collections

Interactions Collections / Vues

Utiliser des Collection ViewsRenderingUtiliser les custom events

Router

Mapper les URLsUtiliser les substitutionsNaviguer dans les ressources

History API

Tirer parti d’History API pour gérer la navigation

Gestion des WebServices non-standard avec Backbone.js

Parser les réponses non-standardRenvoyer les réponses au WebServiceGérer les ID non-conventionnelsRattacher des collections

Collections avancées

Gérer des paramètres supplémentairesGérer une paginationTrier les collections

Router : les cas concrets

Utiliser des URLs à sections optionnellesCapturer les URI encodéesUtiliser les regex pour capturer les URICréer des catch-allDéfinir des File-Paths

Vues sur-mesure

Réutiliser les éléments du DOMÉchapper et nettoyer les saisies utilisateurPasser des arguments optionnels aux évènementsOptimiser ses vues pour la gestion des interactions utilisateurNettoyer la vue

Concevoir les formulaires avec Backbone.js

Construire un formulaire depuis une vueAttacher les évènements aux actions utilisateursRéutiliser les formulaires pour construire les vues-modèleCréer un formulaire d’édition de modèleGérer les alertes utilisateur

Organisation et Structuration

Conseils de rédaction & chartes de hommageOrganiser ses sourcesUtiliser AMD pattern et Require.jsBoostrapping de l’application

Enrichir Backbone.js

Templating : utiliser des moteurs alternatifsAjouter la gestion du data binding à Backbone.jsGérer le cache applicatif

Les différents frameworks existants

Pourquoi un top-framework ?Présentation des solutions existantes

Concevoir une architecture modulaire

Pourquoi découper l’applicationIsoler les composants applicatifsGérer l’utilisation asynchrone

Marionette : top-framework

Marionette : origine et objectifsAttacher Vues et Modèles sur MarionetteDéfinir les initliazersBootstrapper l’application

Exploiter localStorage

Créer une persistance avec localStorageÉtendre le support du cache applicatif persistant avec LawnchairGérer la pile réseau et le mode offline

Tester unitairement Backbone.js

Pourquoi mettre en place des tests ?Assurer la cohérence des développements avec MochaMettre en place des MocksWebServiceAssurer ses stratégies de test

Les travaux pratiques représentent les deux tiers du temps de formation.
Les particiapants s'exerceront à réaliser une application web simple exploitant les briques proposées (Backbone.js, Marionette, localStorage). Une fois leur application terminée, les participants accèderont au caode source de laur application ainsi qu'à la documentation liée aux éléments mis en place.
Cette documentation fera office de support de cours.