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"'