TP 1 : Outils de programmation en JS

M1IF13 - 2016-2017

Introduction

Ce TP durera 5 séances. Vous serez notés sur l'avancement semaine après semaine. Créez un projet M1IF13-TP1 sur la forge et ajoutez-y votre binôme et vos encadrants.

Objectifs pédagogiques du TP

Comprendre les notions sous-jacentes aux premiers cours :

Outils

Les logiciels nécessaires sur ce TP sont ceux présentés dans le CM stack JS. Ils sont pré-installés sur des VMs que nous pouvons instancier à la demande. Ces machines ne sont accessibles que depuis l'intérieur de l'université.
Pour utiliser ces VMs, le plus simple est :

Présentation de l'application

Vous partirez de l'application située ici (sur la forge). Vous pouvez tester cette application pour voir ce qu'elle doit donner. Cette application est un gestionnaire d'annuaires de sites Web très basique, que vous développerez tout au long de ce TP.

Références

...Plus tout ce que vous trouverez par vous-mêmes.

Prise en main des outils JS

Dans cette partie, vous allez vous approprier les outils présentés en cours.

Outils de gestion de projet

Commencez par cloner le projet sur la forge et importez-le dans WebStorm. Lancez-le avec Grunt build. Logiquement, vous devriez être bloqués dès cette première étape. Vous allez utiliser la commande npm install avec différentes options pour résoudre ce problème.

Intallation de Grunt : La procédure est indiquée ici et l'explication :

  1. Installez la ligne de commande (grunt-cli) globalement
  2. Installez la version de grunt souhaitée en tant que dépendances de développement dans votre projet

Installez ensuite les packages NPM manquants en les sauvegardant dans le fichier package.json.

L'étape d'après est de passer la validation JSHint. Pour cela, corrigez le code JavaScript pour qu'il soit valide et relancez Grunt. Procédez ainsi jusqu'à ce que l'application se lance.

Avant de pusher sur la forge, rappelez-vous d'ignorer dans votre repo le répertoire node_modules et les autres répertoires inutiles (.idea ?).

JavaScript côté serveur

Actuellement, votre serveur Express ne sert que des fichiers statiques et tout le métier s'exécute côté client. Vous allez créer une gestion des tags côté serveur, partagée entre les différents utilisateurs. Pour cela :

  1. Créez une arborescence de fichiers, avec :
    • un répertoire pour les fichiers statiques (HTML, CSS, images, scripts à exécuter côté client)
    • un répertoire pour les fichiers JS à exécuter côté serveur (contrôleur, modèle)
    Vous pourrez ensuite affiner cette arborescence.
  2. "Rangez" les différents fichiers applicatifs (la page web et les deux scripts) dans les répertoires appropriés. Testez : le comportement de l'application doit rester exactement le même que dans la version initiale (gestion des bookmarks côté client).
  3. Faites en sorte de réaliser également les traitements applicatifs (ajout, suppression, liste de bookmarks) côté serveur :
    • Modifiez votre contrôleur (server.js) pour qu'il réponde à plusieurs types de requêtes et qu'il accepte plusieurs méthodes HTTP, ainsi que les paramètres dans ces requêtes
    • Recopiez le code métier (annuaire.js) dans le contrôleur du serveur et ajoutez les fonctions JS permettant de l'appeler depuis ce contrôleur
    • Rajoutez un script JS côté client capable de l'interroger en AJAX et d'afficher les résultats sur la page HTML
    • Dupliquez également les éléments de l'UI et modifiez ceux à lier au serveur en conséquence.
    Attention : ne supprimez pas le fichier annuaire.js qui réalise les traitements côté client.

À la fin de cette étape, vous devez avoir une application qui gère deux types de bookmarks, côté client et côté serveur.

Modularisation

Modules côté serveur

  1. Dupliquez le fichier annuaire.js dans le répertoire du code côté serveur et transformez-le en module, en utilisant la syntaxe CommonJS.
  2. Supprimez le code du modèle dans le contrôleur et faites de ce contrôleur un autre module, dépendant du modèle.
  3. Testez.

Bonus : modules partagés

Actuellement, pour pouvoir être téléchargés, les scripts doivent être accessibles depuis le répertoire statique de votre serveur. Pourtant, votre module métier "annuaire.js" est le même côté serveur et côté client.

  1. Créez un répertoire "shared" où vous mettrez les modules partagés entre serveur et client.
  2. Modifiez vos systèmes de gestion des dépendances pour qu'ils aillent chercher les sources dans ce répertoire
  3. Ajoutez un module partagé de tags, qui permet de rajouter des catégories aux sites bookmarkés. Définissez-en vous-mêmes les dépendances.

framework côté client

Mise en route

Laisser la dépendance vers jQuery et rajouter des dépendances sur les scripts suivants :

Prise en main de Backbone.JS

Création d’un routeur

Dans la version précédente, votre interface comporte une partie qui concerne les bookmarks locaux et une autre pour ceux partagés sur le serveur. Vous allez transformer votre application en une SPA et créer deux vues séparées pour ces deux parties.

Pour cela, commencez par créer un menu permettant de passer de l'une à l'autre. Faites en sorte que la différence d'URL entre les deux ne soit située que dans le "hash" (partie de l'URL après le caractère '#'). Utilisez le routeur Backbone pour gérer les routes associées et afficher la vue correspondant à chaque route.

Création d’un modèle et d'une vue

Séparez maintenant le module de code initial en un modèle et une vue. Pour chacun d'eux, étendez les objets Backbone prévus à cet effet. Testez.

Rajoutez une route, un modèle et une vue pour la visualisation des sites (locaux et côté serveur) par tag.

Création des événements

Implémentez le mécanisme de two-way data binding qui manque pour pouvoir mettre à jour le modèle automatiquement. Testez.

Normalement, à la fin de cette séance, votre application devrait comprendre :

Templating avec Underscore.js

L'objectif de cette partie est d'utiliser un mécanisme de rendu déclaratif permettant de synchroniser la vue avec le modèle. Pour cela, vous allez notamment utiliser l'outil de templating d'Underscore.js.

L'utilisation du templating nécessite de :

  1. Définir une structure JSON pour les objets représentant vos données de modèle (pattern DTO) et vous y tenir
  2. Créer un template qui permettra le rendu HTML de chacune de cas structures
  3. Écrire le script qui permettra de mettre à jour la vue correspondant à vos différents types de données
  4. Déclencher ces mises à jour au chargement et à la modification du modèle

Concrètement :

API de stockage

Dans cette partie, vous allez mettre en place une méthode de stockage côté client des données entrées par l'utilisateur à chaque modification.

Si vous ne l'avez pas déjà fait, rajoutez une route vers la page d'accueil de l'application, qui servira de "tableau de bord". Faites en sorte que l'utilisateur puisse entrer un nom pour personnaliser l'application.

Sauvegarde locale des bookmarks

Sauvegarde des métadonnées

À l'aide de l'objet sessionStorage, enregistrez les métadonnées de l'application : nom de l'utilisateur, derniers bookmarks ajoutés (en local et sur le serveur) et date de dernière actualisation.

Mise en forme avancée

Dans cette séance, vous allez utiliser des bibliothèques de mise en forme et un préprocesseur CSS.

Responsive design

Préprocesseurs CSS

Utilisez l'outil de préprocessing intégré à celui que vous avez utilisé pour rendre l'application responsive (Less pour bootstrap et SASS pour Foundation) pour :

Media queries

Mettez en place une feuille de style destinée à l'impression d'une liste de sites, et le bouton associé.

Précisions sur la partie serveur

Côté client, vous devez donc avoir un autre Model (et au besoin une Collection) Backbone qui requête ce module côté serveur et la View correspondante (qui ne sera pas très différente de celle des bookmarks stockés localement).

Pour ce qui est de la synchronisation du client avec les bookmarks côté serveur, laissez faire les mécanismes de caching HTTP (cf. TP chat)...

Rendu du TP

Le rendu du TP s'effectue sur la forge. Le dernier commit devra avoir été fait au plus tard le mercredi 12 avril 2017 à 23h59.

Chaque étudiant d'un binôme doit indiquer l'identifiant du projet (la fin de l'URL) dans la case Tomuss "Id_projet_forge_TP1".

Valid XHTML 1.0 Transitional