MBDS Madagascar 2019-2020

Supports de cours

• Etat des lieux des technologies front-end, de l'écosystème JavaScript. Transparents vus en cours.
   
• Vidéos Vue JS: présentation générale (bouton vert sur site officiel https://vuejs.org/), cours vidéo pour débuter sur https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/
  • Avancé : tutorial sur VueX  (https://www.youtube.com/watch?v=5lVQgZzLMHc)
     
• Support vivant : les exemples faits en direct pendant le cours (voir plus loin)
   
• Transparents pour une introduction rapide et incomplète: https://posva.net/slides/vue/ et https://slides.com/akryum/vue-mixit-2018/fullscreen#/ et https://slides.maxpou.fr/vuejs-training
  
  
• Livre très complet : le livre ci-dessous est optionnel, il contient de nombreuses informations sur VueJS que nous n'allons pas avoir le temps de voir pendant le cours.
•  

Partie 1 Live coding: de JavaScript aux librairies aux frameworks

Exemples fait en cours (liste de restaurants, avec ajout et suppression):

1. En pur JavaScript avec utilisation des APIs du DOM (append, createElement, removeChild, innerHTML) et de la selector API (document.querySelector...) : https://jsbin.com/wocesuqaho/edit?js,output
   • Voir le chapitre 2 de mon Mooc "JavaScript Introduction" (gratuit) : https://www.edx.org/course/javascript-introduction
      
2. Le même exemple mais en utilisant des librairies pour simplifier certaines parties (ici utilisation de lodash pour la génération d'ids, de jQuery pour simplifier l'utilisation du DOM): https://jsbin.com/newepid/edit?js,output
   • Site web de lodash : https://lodash.com/
   • Site web de jQuery : http://jquery.com/
      
3. Enfin, encore le même exemple mais avec l'utilisation du framework VueJS en mode déclaratif : https://jsbin.com/powofij/edit?js,output
   • Site web officiel de VueJS: https://vuejs.org/
     
      
4. Un autre exemple mais qui utilise cette fois-ci des "components" : https://jsbin.com/powofij/edit?html,css,output
5. Autre exemple mais on va chercher des données distantes via une requête Ajax basée sur l'API fetch : https://jsbin.com/popuwut/edit?html,js,output

Partie 2 : découverte de VueJS en mode CLI (command line interface)

ETAPE 1 : installation de NodeJS (nécessaire pour développement CLI)

Allez sur le site https://nodejs.org et installez la version "recommended for most users".

Si tout se passe bien, après l'installation, ouvrez une fenêtre de terminal et tapez la commande "node -v". Ca doit afficher la version de nodeJS que vous venez d'installer.

Vérifiez que vous avez bien:

1. Une version de node >= 10.16 (commande à taper : "node -v)
2. Une version de npm >= 6.11   (commande à taper : "npm -v")

Etape 2 : Création d'une application simple en mode CLI, utilisant la base de données synchronisée Google Firestore

Travail à faire :

1. Suivre ce tutorial 

2. En vous aidant de ce petit exemple jsbin qui consomme des données depuis une API REST à propos de groupes de musique rock, modifiez votre programme VueJS pour qu'il affiche les membres de Metallica. Avez-vous pensé à faire un Composant GroupeRock ?

   • CORRECTION avec GroupeRock.vue : télécharger cette archive, dezipper, aller dans le répertoire et faites "npm install",  puis "npm run dev"

Partie 1 : utilisation de Vue-Material avec VueJS

On va suivre le "Getting started" du site officiel de Vue-Material (https://vuematerial.io/) et on va utiliser quelques composants, notamment les "datatables"...

Ici exemple fait en classe dans cette archive: dezipper, faire "npm install" et "npm run dev"'

Partie 2 : premiers pas avec React 

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 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 fils à 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 un <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 CORRRECTION "classique" : https://codepen.io/w3devcampus/pen/xxGOPXO?editors=0010

ICI UNE CORRECTION AVANCEE (qui utilise la "destructuration" et les arrow functions en masse): https://codepen.io/w3devcampus/pen/xxKeJZW

Partie 3 : on continue avec React (intro au mode CLI)

Partie 4 : utilisation du router et de la bilbiothèque graphique Material UI

N'oubliez pas : vous avez un livre dans les supports de cours, sur Material UI !

Support de cours :

• Slides du cours sur le routeur React le router démarre au slide 28 mais il y a plein de choses intéressantes dans ce cours (bootstrap, scss etc.)
   
• Pour Material UI, voir le site officiel : https://material-ui.com/

A faire:

• Installer le package react-router dans le dernier projet (Photos) : voir le site officiel pour l'installation : https://reacttraining.com/react-router/web/guides/quick-start 
   
• Il faut faire "npm install --save react-router-dom"

Le reste s'est passé en Live Coding. Ici une correction utilisant le router, et une table MaterialUI pour afficher les Hobbies: dans cette archive. Faites "npm install" puis "npm run start".