Formation Backbone.js Réf : bbjs1

Par Stéphane Bachelier

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

Durée :
3 jours
Lieux :
Paris

1 685 € HT (prix conseillé)

Partage :

  • Twitter
  • Facebook
  • E-mail
  • Linkedin
  • Viadeo

Soyez alertés par e-mail des nouvelles sessions : Poser une alerte,

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

A l’issue de cette formation, les participants seront en mesure de :
  • 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

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

Pré-requis

Connaissance de HTML, CSS et très bon niveau JavaScript (les notions fondamentales seront abordées en rappels le Jour 1)

Type

Stage pratique

Méthode pédagogique

Alternance de cours magistraux (35%) et de travaux pratiques (65%) afin de permettre de garantir une bonne appropriation des notions abordées par les stagiaires.

Plan de cours

PROGRAMME DE LA 1ERE JOURNEE DE 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

PROGRAMME DE LA 2NDE JOURNEE DE FORMATION
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

PROGRAMME DE LA 3EME JOURNEE DE FORMATION
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.

Prochaines sessions

picto Du lundi 11/09 au mercredi 13/09 2017 Paris 1 685 € fleche S’inscrire à la session du lundi 11/09 au mardi 13/09
picto Du lundi 04/12 au mercredi 06/12 2017 Paris 1 685 € fleche S’inscrire à la session du lundi 04/12 au mardi 06/12
Proposer une session.

Témoignages

Très bonne formation, orientée travaux pratiques, à suivre pour vraiment prendre en main le framework backbone et ses composants.
David LERICHE

Cette formation m'a permis de comprendre comment sont réalisées les applications les plus innovantes du Web !
Franck GRENIER

Compétences techniques acquises, retour d'expérience des formateurs, une formation personnalisée en accord avec nos attentes!
Laurent C.

Cher(e) visiteur(euse),
Nous vous remercions pour l'intérêt porté à nos formations. La pré-inscription à une session de formation se fait via le formulaire d'inscription de la page formation.

La Convention de Formation Professionnelle Continue simplifiée vous sera envoyée par mail dans les 72H max. Votre inscription est considérée comme définitive, une fois cette convention signée par votre entreprise ou OPCA. La facture sera émise à l'issue de la formation, comme mentionnée dans nos conditions générales de vente.

A noter que les demandeurs d'emploi peuvent bénéficier d'une remise de 20% sur le prix public.

Pour toute information complémentaire ou demande de devis, n'hésitez pas à nous contacter au 01 53 34 66 10 ou à nous solliciter par mail.

A très bientôt dans l'un de nos centres de formation.
L'équipe Clever-Institut.

Les autres formations « Technologies front-end »  – Voir toutes les formations