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 , choisissez npm comme outil d'installation des modules lorsque vous aurez le choix yarn/npm
   
   
2. Essayez de modifier ce tutorial pour faire la création et la modification non pas "d'expenses" mais d'une liste de hobbies, on pourra rajouter une description aux propriétés des hobbies, et le prix moyen consacré à ce hobby. Je vous conseille de travailler sur une nouvelle collection "hobbies" dans FireStore.