Notes de TD

Sont collectées ici les notes des enseignants sur les TDs du cours : on y trouve les passages délicats, les points de blocage fréquents, etc.

HTML, CSS et formulaires

Il faut insister pour que les élèves séparent bien le style du contenu : pas de mise en page avec <table>, et pas d'attributs de mise en page dans les balises (pas de align="center", pas de border="1", pas de style="...", etc.). Tout le style dans une feuille css séparée et liée par la balise <link>, ou à la limite une balise <style> dans l'entête du document, s'ils sont vraiment trop perdus.

En cas de doute sur l'utilisation d'une balise ou d'un attribut, toujours se référer à MDN :

ou w3schools pour un regard plus rapide (mais toujours vérifier sur MDN en cas de doute). C'est aux élèves de chercher tous seuls les solutions en lisant les docs fournies, les enseignants ne sont là que pour leur expliquer lorsqu'ils n'ont pas compris ce qu'ils ont lu. On insistera pour qu'ils passent leur code au validateur, et on s'entraînera à reconnaître les messages d'erreur.

Ceci n'est pas un cours de développement front-end : la mise en page doit rester simple, on se moque de l'esthétique ; si les élèves s'efforcent d'imiter un modèle de CV préparé en cours de communication, il faut leur expliquer que le CV est juste une excuse, et que le but du TD est de réviser les concepts plus subtils de HTML/CSS. S'ils veulent se lancer dans des mises en page compliquées (menu à gauche, plusieurs colonnes, etc.) libre à eux s'ils savent faire, mais s'ils sont en retard il faut les encourager à avancer dans le TD plutôt qu'à essayer toutes les couleurs et polices du navigateur.

Pour les élèves qui auraient besoin d'un refresher sur HTML/CSS, MDN est une bonne référence, et le cours de Openclassrooms est un grand classique très bien fait.

Puisqu'il s'agit du premier TD, toujours penser à essayer la plateforme de développement en avance (Cloud 9, à l'heure actuelle). En plus de vérifier la faisabilité technique, cela permet de repérer les blocages classiques. Notamment, pour ce TD les élèves n'ont pas à appuyer sur le bouton "Run", car ils ne développent pas de serveur : c'est le bouton "Preview" qu'ils cherchent.

**Solution:

Un simple jeu en JavaScript

Plusieurs élèves bloquent devant les règles de priorité de CSS. Par exemple, dans http://codepen.io/defeo/pen/bgargg, ils ne comprennent pas pourquoi le deuxième <li> n'a pas le fond vert, alors que le troisième a le fond rouge.
Une erreur classique c'est de faire les document.createElement('td') une seule fois hors de la double boucle, et plein de .appendChild() du même nœud dans la boucle.
Beaucoup font confusion entre "tableaux" HTML (<table>) et tableaux JavaScript (arrays). Il est souvent préférable d'utiliser le mot "listes" à la place de "tableaux" pour JavaScript, et expliquer en quoi c'est différent d'un tableaux C. Cette difficulté se manifeste surtout à la question 2.4.
Les élèves sont souvent surpris par
```
var $ = document.querySelector.bind(document)
```
À ce stade, il faut expliquer qu'il s'agit uniquement d'un alias pour querySelector, rien de bien mystérieux. S'ils veulent en savoir plus, les encourager à poser la question en amphi.
Décourager l'utilisation de innerHTML. Sa seule utilisation raisonnable, c'est pour vider une balise.

Solution : http://codepen.io/defeo/pen/emPevV

Le réflecteur

C'est un des TDs les plus délicats de la série : les élèves ne sont pas habitués à réfléchir en termes de client et de serveur, et beaucoup ont du mal à suivre le flux des données entre navigateur et serveur. Il faut bien les prendre par la main et leur expliquer les concepts avec des exemples en dirigeant leur regard sur les détails significatifs (regarder comment une action change l'adresse dans la barre de l'URL, observer avec les outils du développeur, faire des affichages dans la console du serveur ...).

D'un autre côté, c'est un TD plutôt court : les meilleurs finissent en moins de 2h. Pour occuper le temps restant, les encourager à reprendre le TD (au moins le début) dans l'autre langage. Si même cela ne suffit pas, ils peuvent regarder les leçons/TDs suivants.

Voici trois points de blocage quasiment universels :

Certains élèves regardent exemple.js ou exemple.php et essayent de reproduire le deuxième gestionnaire (celui qui utilise les templates twig) plutôt que le premier. Les Remettre sur le bon chemin, et leur expliquer qu'ils vont faire les templates au TD suivant.
En Node, il faut penser à redémarrer le serveur lorsqu'on fait des modifications au source.
Il n'est pas possible d'avoir deux serveurs (Node et/ou Apache) qui tournent en même temps (ceci n'est pas tout à fait vrai, voir https://docs.c9.io/docs/multiple-ports).
L'analyse de l'url encoding dans le query string nécessite souvent d'un commentaire.
Beaucoup de confusion au moment de créer formulaire.html. Erreurs classiques:
- Faire Run plutôt que Preview,
- Ne pas remarquer que les preview ne sont pas servis sur le même domaine que les applications qui tournent,
- Ne pas comprendre le rôle de express.static,
- Ne pas comprendre comment les routes sont associées aux URLs, surtout en PHP, où les vieilles habitudes se font sentir.
Sur cette question, il faut quasiment voir tout le monde, en expliquant bien ce qui se passe. Le TD suivant mettra mieux en place la façon de servir des fichiers statiques.
Selon les comptes, Cloud9 installe ou pas des cookies pour *.c9users.io. Dans la majorité des cas, il n'installe aucun cookie, du coup les élèves n'en verront pas à l'affichage, c'est normal. Pour les plus avancés, on peut leur dire de regarder l'exemple dans les transparents, et installer un cookie.

Solution : https://gist.github.com/defeo/5df5fe5365a947150a7d

Templates, données, état

Le grand blocage de ce TD est sur le flux des données : comment les données du querystring sont récoltées par l'application, comment sont-elles passées aux templates, quels noms sont passés implicitement, quels noms explicitement? On mesure ici à plein la pensée magique d'un grand nombre d'élèves, qui s'attendent à voir des passages de noms implicites, des variables aux valeurs multiples (en général la valeur qu'ils aimeraient bien avoir dans chaque contexte), ...

Autre source d'erreurs sont les petites différences de syntaxe entre PHP, JavaScript et Twig. Ensuite :

Beaucoup d'élèves vont imaginer un passage de noms implicite entre le code PHP/JavaScript et le template. Bien insister sur le fait que tout nom doit être passé explicitement au contexte du template, et que les noms des variables n'ont aucun rapport avec les noms du contexte du template.
Certains élèves sont perturbé par l'inconsistance des exemples du cours: on voit parfois des fichiers de template avec extension .html, parfois avec extension .twig. De préférence les encourager à utiliser .twig (configuration par défaut). Si blocage, leur faire remarquer la configuration additionnelle nécessaire à faire marcher .html.
Encourager les élèves à bien organiser leur code, notamment à mettre les directives de configuration avant les gestionnaires, et à ne pas écrire des directives redondantes.
Beaucoup d'élèves n'ont encore pas pris l'habitude de créer des pages HTML complètes. Certains se font même l'illusion que Twig insère automatiquement les snippets dans des squelettes. Les encourager à toujours produire des pages complètes.
Éviter à tout prix la tentation de créer des variables globales pour passer des valeurs entre gestionnaires. Cela pourrait marcher en Node.js, mais jamais en PHP, et c'est contraire à l'esprit du TD.
Le module twig de Node.js est particulièrement fragile, et a tendance à avaler des erreurs de parsing sans donner aucune notification.
Le PHP vieux jeux fait encore des dégâts ici, avec des élèves qui veulent créer un script PHP par "page".
En Silex $req->request['toto'] ne marche pas. Toujours accéder aux champs de ces tableaux (des ParameterBag) par $req->request->get('toto').
Jamais deux render() dans un gestionnaire, jamais deux return.
Dans la partie optionnelle de Silex, pour passer la sortie d'un template à l'objet Response, il faut évidemment faire :
```
$res->setContent($app['twig']->render(...));
```

Ce TD, plutôt long, est conçu pour être fait en 4-5h. On pourra étaler sur plus d'une séance, en poussant les plus lents à ne pas s'arrêter sur la partie optionnelle.

Solution : https://gist.github.com/defeo/843efb1d741411a133bd

Comptes utilisateurs, AJAX, Server Push

Ce TD, extrêmement long, est conçu pour être développé en plusieurs séances. Réalistiquement, on veut que tous les élèves puissent arriver à compléter la partie 4 : c'est le minimum indispensable pour réussir un projet. Les parties 5-6 sont désirables, car introduisent AJAX : un étudiant qui maîtrise ces parties, peut aspirer à une bonne note au projet. Tout le reste, surtout dans le TD pour Node, est plutôt avancé, et destiné aux étudiants qui veulent programmer des jeux.

Voici quelques blocages classiques :

Ne pas oublier de cloner à partir de https://github.com/defeo/aws-project.
Pour la version Node, beaucoup de blocages au début du TD à cause de la configuration de PHPMyAdmin / Node. Voir les instructions pour Cloud 9.

En Node, attention aux callbacks. L'erreur la plus courante est

app.get('/list', function(req, res) {
  db.query('SELECT * FROM users', function(err, rows) {
    if (!err) {
      // do something
    }
  });
  res.render('template.twig', { ... });
});

Évidemment, le render va dans la callback.

Aussi bien en Node qu'en Silex, on voit souvent du code similaire à celui-ci :

$users = $app['db']->execute('SELECT * FROM users');
$tmp = array();
foreach ($users as $col => $val) {
  $tmp[$col] = $val;
}
$app['twig']->render('template.twig', $tmp);

Même si ce code marche, et la naïveté n'est pas très grave, la copie dans $tmp est évidemment inutile.

Solution (partielle) : https://gist.github.com/defeo/f5cedb1e06e20234bc2d

Navigation Menu