Programmable Web, client side, 2017-2018

2.1 Les WebComponents : un standard du W3C

On va dans un premier temps étudier la notion de WebComponents, un standard du W3C basé sur 4 APIs qui sont (ou vont) être implémentées par votre navigateur.

• Voir la Week 4, section 4.2, du MOOC HTML5 Apps and Games. Inscrivez-vous (gartuitement) au MOOC et allez voir ce chapitre, que nous allons commenter en classe.

Exercice 1 (utilisation de WebComponents récupérés sur le Web): récuperez l'archive suivante : VideoUsingWebComponentsNew.zip, dezippez-la et testez la page Web à l'aide d'un serveut HTTP (par ex WAMP, MAMP ou encore plus pratique, l'extension de navigateur Web browser for Chrome)

Exercice 2 (idem), récuperez l'achive suivante testCircleProgress.zip et testez à l'aide d'un serveur HTTP. Regardez le code source.

A etudier à la maison (cours à venir): le framework Polymer 2 (Google), qui est basé sur les WebComponents, et qui est utilisé par YouTube Gaming par exemple.

2.2 Suite de l'étude de VueJS

J'ai rajouté eux exemples vus la semaine dernière, un exemple qui charge des données par fetch/ajax.

<template>
  <div id="app">
    Hello {{msg}}

    <div>
      <router-link to="/">Home</router-link>
      <router-link to="/blog">Blog</router-link>
      <router-link to="/compte">compte</router-link>
    </div>

    <router-view></router-view>

    <app-user></app-user>
      <p>Ceci est un test</p>
  </div>
</template>

Exercices d'introduction, dans une IDE en ligne

On peut faire du react dans JsBin/JsFiddle/CodePen, mais croyez-moi, juste pour de petits exemples !

• Exemple 1: comprendre le mécanisme de rendu de React
   
• Exemple 2: évenements et immutable DOM
   
• Exemple 3: premier composant
   
• Exemple 4 : on passe des "propriétés" au composant
  
• Exemple 5 : le composant en classe ES6
   
• Exemple 6: état d'un composant, on refait marcher le bouton
   
• Exemple 7: rendu conditionnel 
   
• Exemple 8: rendu de listes dynamiques  Là, si vous avez essayé de faire taper le code en même temps que moi, vous devez vous dire que c'est la merde à debugger, que les messages d'erreur ne sont pas clairs etc...
   
• Exemples 9 et 10 : styles CSS conditionnels et classes CSS conditionelles 
   
• Exemple 11: two way binding
  
• Exemple 12: deux composants (dont un "stateless") 
   
• Exemple 13: passer des infos d'un composant à son composant père 

Exercice à faire en vous aidant des exercices précédents:

Pour vous donner une idée du résultat attendu,voici l'équivalent en VueJS: http://jsbin.com/guwetoy/1/edit?html,output

Je conseille de partir de cet exemple React: le composant en classe ES6

En vous aidant de l'exemple fait en classe en live coding, voud devrez faire incrémentalement, en testant après chaque étape :

1. Créez <div> et affichez dedans un composant Root avec React (l'App des exemples)
    
2. Affichez un tableau de hobbies dans ce <div> (foot, tennis, jeux video, etc.) sous la forme d'une liste. Chaque hobby sera un <li>. Vous fournirez des hobbies par défaut.
    
3. Ajoutez un bouton 'Nouveau Hobby' et un champ input pour saisir le nom du hobbie à rajouter. La liste doit se mettre à jour.
    
4. Rendez les hobbies clickables pour qu'on puisse les supprimer
    
5. Un message <p>Hobby supprimé !</p> devra apparaitre lorsqu'un hobby est supprimé
    
6. Ajoutez un compteur de hobbies (<p>Hobbies: 4</p>) au-dessus de la liste des hobbies, qui indiquera le nombre de hobbies dans la liste.
    
7. Vous changerez les styles CSS des éléments de la liste pour qu'ils s'affichent en rouge et vert à chaque ligne, en alternance. Vous utiliserez aussi des classes CSS dynamiques pour afficher le compteur en rouge si le nombre de hobbies est supérieur à trois, en vert sinon. 
    
8. Chaque <li>, chaque hobby, sera maintenant dans un composant <Hobby/> 

ICI UNE CORRECTION: https://codepen.io/w3devcampus/pen/b...m?editors=1010

Exercices avec un environnement "CLI"

Si on va voir la page de facebook sur "how to start with React", il y a un chapitre qui concerne le mode "CLI": https://reactjs.org/docs/add-react-to-a-new-app.html

1. Vous devez avoir nodeJS correctement installé (node, npm, etc, tout ceci doit fonctionner...)
    
2. Installez l'extension Google Chrome "React Developer Tools" (https://chrome.google.com/webstore/d...jfkapdkoienihi), elle existe aussi pour Firefox.
    
3. Installez une bonne fenêtre terminal pour Windows -si vous êtes sous windows comme http://cmder.net/ ou autre (github bash, etc.) si je vous vois avec une fenêtre DOS basique vous allez m'entendre !
    
4. Installer les packages "babel" et "emmet" si vous êtres sous Sublime Text 3 ou Atom. Ca doit etre ok pour Visual Studio Code, WebStorm etc.
    
5. Ouvrir la ligne de commande et exécuter la commande "npm install -g create-react-app",
   • Pour vérifier que ça fonctionne, créez un autre répertoire nommé "react_cli" et cd dedans,
   • Executez "create-react-app hello-world" (ça prend du temps, quelques minutes)...
   • Allez dans le répertoire créé (cd hello-world), et faites "npm install" (là aussi, quelques minutes)
   • Exécutez le progralle en tapant "npm start", ça doit ouvrir automatiquement le browser sur le port 3000 et afficher une page avec le logo React qui tourne.
   • Editez le code du fichier src/App.js, changez le texte et sauvez -> la page Web de l'application doit se rafraichir automatiquement.
      
6. Maintenant on va étudier le code, regardez les fichiers html, js, les configs etc.
    
7. Essayez de modifier la partie "render" de App.js... hmmm ok. Bon, on va faire un simple composant <Username name="toto"/> qu'on va mettre dans un sous répertoire "components" dans les sources, il va simplement afficher un nom passé en attribut/props dans un paragraphe en couleur. Vous ajouterez dans <App/> Plusieurs instances de ce composant.

Exercice: refaire dans le projet les hobbies en mode CLI !

UTILISATION DE FIREBASE:

1. Voir demo du prof :-)
   
    
2. Vous allez le faire vous-même:

ETAPE 1 : Il faut commencer par modifier l'exemple des hobbies pour qu'il fonctionne non pas avec un tableau mais avec un objet. Firebase ne sais synchroniser que des objets, pas des tableaux:

   this.state = {
      hobbies : {
        hobby0: 'tennis',
        hobby1: 'golf'
      }
      // ...
    };

 Il faudra modifier plusieurs parties du code en conséquence...

• addHobbies, removeHobbies...
   
• render (il faudra itérer sur les propriétés d'un objet maintenant, excellent exercice !)
  
  Hint: Object.keys(this.state.hobbies).map((key, index) => {... }

ETAPE 2 : on va devoir, comme pour les exemples faits avec vueJS, utiliser le "cycle de vie" du composant (https://reactjs.org/docs/react-component.html#the-component-lifecycle), et charger des données distantes depuis FireBase quand le composant est "monté", et aussi fermer la conenxion quand il est "démonté". On va pour cela définir les méthodes 

  componentWillMount() {
    console.log("Will mount")
    // this runs right before the <App> is rendered
  }


  componentWillUnmount() {
  console.log("Will unmount")
    base.removeBinding(this.ref);
  }

  Implémentez ces méthodes et vérifiez bien qu'elles sont appelées...

ETAPE 3 : on va créer une base sur FireBase

• Allez sur https://firebase.google.com/
   
• Cliquez sur "accèder à la console"
   
• Cliquez sur "+" pour ajouter un projet, appelez-le "React-EPU-Firebase" par exemple.
   
• Cliquez à gauche sur "database" et créer une "realtime database".
   
• Cliquez ensuite sur "règles" et mettez comme valeur pour les deux champs "true" (aucune authentification), on verra plus tard pour l'authentification.
   
• Cliquez sur "Publier", ignorer le warning.
   
• Cliquez à gauche sur "Project Overview", et au milieu de la page sur "Ajouter Firebase à votre application Web", une fenêtre s'ouvre avec des bouts de JS.
   
• Gardez cet onglet ouvert

ETAPE 4 : on ajoute au projet le code pour se connecter à la base:

Dans votre projet, créez un fichier base.js, et mettez ceci dedans:

import Rebase from 're-base';

const base = Rebase.createClass({
// copier les 3 premières lignes de VOTRE config de votre base !!!
 // NE PRENEZ PAS LES VALEURS QUI SONT ICI !!!
    apiKey: "AIzaSyCW_WJJb16YVDlsdsd9c0YNNGnfdssorzWGFRU2ScU",
    authDomain: "react-epu-firebase.firebaseapp.com",
    databaseURL: "https://react-epu-firebase.firebaseio.com" // pas de , à la fin
});


export default base;

ETAPE 5 : on ajoute le module npm re-base pour "parler à firebase"

On ajoute une ligne à package.json pour installer la lib npm qui va bien:

  "dependencies": {
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "react-scripts": "1.0.17",
    "re-base": "2.2.0"// -> ajouter cette ligne, mettez bien 2.2.0 !
  },

 Faites "npm install", ça va installer re-base dans node_modules

ETAPE 6 : on va utiliser re-base pour syncrhoniser l'état du composant, c'est-à dire les hobbies:

Dans App.js:

....
import base from './base';
....

componentWillMount() {
    //alert("toto")
    // this runs right before the <App> is rendered
    this.ref = base.syncState("hobbies", {
      context: this,
      state: 'hobbies'
    });
  }

  componentWillUnmount() {
    base.removeBinding(this.ref);
  }

Etape 7 : testez !

Sauvez, testez. Ouvrez dans un onglet votre base et regardez les données en sync. Ouvrez deux onglets avec l'appli React, regardez...

Fetch / REST / Mongo / Node : quelques recommandations, exemples

On va maintenant faire un petit passage en AJAX via fetch/REST sur un serveur node/mongoDB qui travaille sur la base de données des restaurants.

Je suppose que vous avez sur vos machine les logiciels suivants:

• Node à jour, npm, ça va de soi...
• MongoDB récent
• Un outil d'administration qui tient la route (par exemple: https://studio3t.com/)
• Que vous avez chargé la base de données test avec la collection "restaurants" (si ce n'est pas le cas: uivre les instructions situées sur cette page. Vous allez devoir récupérer le fichier primer-dataset.json (assez gros, attention, ne pas faire copier/coller, faire click droit/sauver), et exécuter la commande suivante, qui créer une bd "test" et ajoute dedans la collection "restaurants" : mongoimport--dbtest--collectionrestaurants--drop--fileprimer-dataset.json

Peter vous a montré du jQuery je crois (!) pour faire des requêtes Ajax, mais depuis 2012 on a fetch qui fonctionne très bien et qui est standard dans les browsers.

Donc, je vous propose de revenir sur le back end un instant avant d'étudier un front-end qui fait du CRUD via fetch, en respectant les bonnes pratiques:

• GET, PUT, POST, DELETE pour le CRUD
   
• Utilisation correcte du driver mongoDB via le module npm mongo
   
• Envoi de formulaires AJAX pour le PUT, POST, DELETE via FormData (formulaires multipart).

ETUDE DE CODE A L'ECRAN / Live coding. Comment debugguer via la console. Comment tester son code serveur REST/ son code client. Comment coder du fetch et générer un tableau avec l'API du DOM, avec VueJS, etc.

Archive à récupérer pour faire pareil sur votre machine: TPRoutageExpressWithMongoPlainJSFetchAndVueJS.zip 

ETAPE 8 avec React : on va voir un peu node / mongo / fetch puis on essaiera d'afficher la liste des restaurants à la place des hobbies... Ah oui, les restaurants de la base de test de mongoDB !