Votre partenaire formation 100% digital

Backbone.js

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

Prochaines sessions

Prochaines sessions - Backbone.js
Date de début Ville Prix unitaire HT
13 mars 2019 Paris 1650 € Réserver
3 juin 2019 Paris 1650 € Réserver
9 octobre 2019 Paris 1650 € Réserver
4 décembre 2019 Paris 1650 € Réserver

Description

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 pratique vous permettra d’aller à la rencontre de ce framework Backbone.js de plus en plus utilisé, 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.

Objectifs pédagogiques

  • 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 oeuvre 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 cible

Chefs de projet web, Architectes techniques, Développeurs front-end

Pré-requis

Connaissance de HTML, CSS et très bon niveau JavaScript

Modalités d’évaluation

L’évaluation des acquis se fait tout au long de la session au travers d’ateliers de mise en pratique des notions et concepts abordés pendant la formation.

Méthodes pédagogiques

35% théorie / 65% pratique

Programme de la formation

Introduction

  • Rappels sur JavaScript, le langage, ses avantages et ses pièges
  • Le binding et le vrai sens de this
  • Prototypage et Constructeurs
  • Backbone.js : origine, objectifs et état de la solution
  • Cas d’utilisation : quand et pourquoi mettre en oeuvre Backbone.js ?
  • Concevoir une application web
  • Structure de base : modèles et vues

Installation

  • Gérer son environnement
  • Choisir ses libraires
  • Gestion des dépendances front avec Bower

Architecture Event-driven

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

Modèles

  • Structuration des modèles de données Backbone.js
  • API Sync vers / depuis le WebService
  • Récupérer et sauver les données
  • Créer des objets de donnée et appliquer des valeurs par défaut
  • Rattacher des évènements

Vues

  • Composant de vue par défaut
  • Gestion des attributs
  • Dépendances à jQuery
  • Rendering
  • Templating simple
  • Rattacher des évènements

Interactions Modèles / Vues

  • Gérer les évènements depuis la vue
  • Remonter les changements d’état de donnée depuis les modèles
  • Synchroniser les actions utilisateur vers le WebService
  • Re-rendering des vues
  • Destruction des vues couplées aux modèles

Collections

  • Structurer des groupes de modèles
  • Ajouter / Supprimer des éléments
  • Itérer sur les collections
  • Rattacher la synchronisation vers le WebService
  • Rattacher les évènements
  • Gérer les cas d’évènements spécifiques aux collections

Interactions Collections / Vues

  • Utiliser des Collection Views
  • Rendering
  • Utiliser les custom events

Router

  • Mapper les URLs
  • Utiliser les substitutions
  • Naviguer dans les ressources

History API

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

WebServices non-standard

  • Parser les réponses non-standard
  • Renvoyer les réponses au WebService
  • Gérer les ID non-conventionnels
  • Rattacher des collections

Collections avancées

  • Gérer des paramètres supplémentaires
  • Gérer une pagination
  • Trier les collections

Router : les cas concrets

  • Utiliser des URLs à sections optionnelles
  • Capturer les URI encodées
  • Utiliser les regex pour capturer les URI
  • Créer des catch-all
  • Définir des File-Paths

Vues sur-mesure

  • Réutiliser les éléments du DOM
  • Echapper et nettoyer les saisies utilisateur
  • Passer des arguments optionnels aux évènements
  • Optimiser ses vues pour la gestion des interactions utilisateur
  • Nettoyer la vue

Concevoir les formulaires

  • Construire un formulaire depuis une vue
  • Attacher les évènements aux actions utilisateurs
  • Réutiliser les formulaires pour construire les vues-modèle
  • Créer un formulaire d’édition de modèle
  • Gérer les alertes utilisateur

Organisation et Structuration

  • Conseils de rédaction & chartes de hommage
  • Organiser ses sources
  • Utiliser AMD pattern et Require.js
  • Boostrapping de l’application

Enrichir Backbone.js

  • Templating : utiliser des moteurs alternatifs
  • Ajouter la gestion du data binding à Backbone.js
  • Gé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’application
  • Isoler les composants applicatifs
  • Gérer l’utilisation asynchrone

Marionette : top-framework

  • Marionette : origine et objectifs
  • Attacher Vues et Modèles sur Marionette
  • Définir les initliazers
  • Bootstrapper l’application

Exploiter localStorage

  • Créer une persistance avec localStorage
  • Etendre le support du cache applicatif persistant avec Lawnchair
  • Gé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 Mocha
  • Mettre en place des Mocks WebService
  • Assurer ses stratégies de test

TRAVAUX PRATIQUES
Fortement orientée mise en pratique, l’objectif de ces TP sera la réalisation d’une application web simple, capable d’exploiter les briques mises en oeuvre (Backbone.js, Marionette, LocalStorage…).
A l’issue de la formation, les participants auront accès au code source complet de l’application développée, ainsi qu’à la documentation relative aux éléments mis en place, qui fera office de support de formation.