Master 2 MBDS Madagascar annee 2017-2018

Pages récentes

Introduction

Dans ce cours nous allons voir les tendances du développement d'applications Web côté client: évolutions du développement JavaScript, des différentes APIs standard comme les Web Components, les principaux frameworks JavaScript, les environnements de développement, les évolutions du Web Mobile.

Partie 1: état des lieux des technologies front-end, introduction a VueJS

DOM or not to DOM: todo list en pur JS, avec libs, avec VueJS et avec fetch API

Ecriture en live coding d'une todo list:

Pur JavaScript + DOM API http://jsbin.com/gaqugic/edit
Avec jQuery et Lodash : http://jsbin.com/posowem/edit?html,js
Avec vueJS 'simple' : http://jsbin.com/puduno/1/edit
Avec composants: http://jsbin.com/fadeco/1/edit
Idem mais avec des données obtenues par fetch: http://jsbin.com/bifozud/edit?html,js,console,output

Requêtes REST: fake APis avec https://jsonplaceholder.typicode.com/, faire des requêtes REST avec XhR2, fetch API, quelques mots sur GraphQL et Appolo

MOOCs utiles

JavaScript introduction par Michel Buffa, gratuit.
Nombreux tutoriaux sur les spécificités d'ES6 non vues dans le MOOC précédent, sur YouTube, etc. Les bons MOOCS sont payants pour la pluparts, mais nous verrons pas mal de choses en cours.
On va voir dans ce cours, les principaux frameworks JavaScript : VueJS, React et Angular 5. Il existe de nombreux MOOCs qui les présentent, la plupart payants. Le cours vous donnera une introduction assez complète mais il sera souvent nécessaires de vous référer aux sites Webs et documentations officiels.

Partie 2: Suite VueJS

1 - Creer des composants avec VueJS

Reprenez un des derniers exemples faits avec VueJS, ma gestion d'une todo list: http://jsbin.com/puduno/1/edit

Dans cet exemple, on ne peut pas instancier plusieurs "Vues". Mais on peut associer la VueJS à un "faux" élement custom HTML, comme ici: http://jsbin.com/fadeco/1/edit

Exercice à faire: inspirez-vous de cet exemple pour gérer une liste de hobbies, mais avec les contraintes indiquées dans les commentaires HTML de ce squelette d'application: http://jsbin.com/guwetoy/edit?html,js,output

Correction (ne regarder qu'après avoir vraiment essayé, ou vu la correction en live conding): http://jsbin.com/guwetoy/1/edit

2 - Développer en mode "CLI" avec un environnement de build/testy

Page de documentation de vue-cli: https://github.com/vuejs/vue-cli
Page générale sur VueJS: https://github.com/vuejs

Cette fois-ci, pour terminer l'introduction à VueJS, le plus élégant/simple des trois gros frameworks "industriels" modernes (React, VueJS, Angular), nous allons regarder comment on peut développer avec "un environnement de développement", qu'on appelle "CLI" pour "Command Line Environment".

Les trois frameworks cités, mais aussi Polymer dont on vient de parler, proposent un environnement "CLI".

3 - Travail à faire : travailler avec Vue-cli

Installer Vue-cli: exécuter "npm install -g vue-cli", si vous êtes sous Linux ou Mac OS, il se peut que vous deviez faire "sudo npm install -g vue-cli" (essayez d'abord sans le sudo).

Idem, sous windows il se peut que vous deviez avoir ouvert le terminal DOS en mode "administrateur".
Créez un répertoire pour le TP
Allez dans ce répertoire en mode ligne de commande, depuis votre terminal
On va maintenant créer une application VueJS avec le mode "webpack-simple" (cf la page de doc: https://github.com/vuejs/vue-cli), on peut en effet créer plusieurs types de projets avec vue-cli.

La commande à exécuter est "vue init webpack-simple nom_de_votre_app", je suggère quelques chose comme nom qui ressemble à "my-app-vue-cli1" par exemple. Vous exécuterez donc la commande : "vue init webpack-simple my-app-vue-cli1"

Vous devrez alors répondre à un petit questionnaire, en général vous faites "enter", répondez "non" si on vous demande d'utiliser "SAAS" (un pré-processeur CSS comme LESS).

Cela va créer un sous-répertoire my-app-vue-cli qui contiendra tout ce qu'il faut pour démarrer :
- Une application exemple,
- un environnement de développement,
- Des fichiers de configuration pour webpack etc.
Allez dans le répertoire de l'application et faites "npm install" pour installer les dépendances (de l'environnement de développement, et du framework)
Exécutez l'application de test avec "npm run dev". Si jamais vous avez une page qui affiche "ERR EMPTY RESPONSE", il se peut que vous deviez changer le port du serveur de dev. Allez dans le fichier webpack.config.js et ajoutez une ligne "port:3000" par exemple, dans la config du devserver.

Voici ce que j'ai dans ma config:

devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true,
port:3000
},
Etudier le code du fichier main.js, index.js et App.vue
Créer un composant User.vue qui affiche le nom d'un utilisateur
Ici un exemple de code: User.vue
Créer un composant Info.vue qui affiche juste des infos supplémentaires sous forme de <p>, et qui soit LOCAL à User.vue (voir Live Coding)
Ajouter dans App.vue un <p>Ceci est un test<p>. Que fait le CSS de User.vue ? Supprimer l'attribut "scoped" de la balise <style> de User.vue, que se passe-t-il ?
En étant sûr d'être dans le répertoire du projet faites "npm install -save vue-router" pour installer le module de routage de vueJS.
Creez un composant Blog.vue et Comptes.vue qui ne font qu'afficher "Je suis sur la page comptes" et "Je suis sur la page Blog"
Modifiez main.js pour qu'il ressemble a cela:

import Vue from 'vue';

import VueRouter from 'vue-router'

import App from './App.vue';

import User from './components/User.vue';

import Blog from './components/Blog.vue';

import Comptes from './components/Comptes.vue';

// Définition des routes

Vue.use(VueRouter);

const routes = [

    {path:'/blog', component: Blog},

    {path:'/compte', component: Comptes},

    {path:'/', component: User},

]

const router = new VueRouter({

    routes: routes,

    mode:'history'

})

// COMPOSANT GLOBAL, on pourra l'utiliser

// dans d'autres fichiers .vue

Vue.component('app-user', User);

new Vue({

el: '#app',

router:router,

render: h => h(App)

})
Remplacez le template de App.vue par le code suivant et testez:

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

4 - Correction de l'exercice

VueJSExoCli.zip, faire "npm install" et "npm run dev" une fois dezippé.

Master 2 MBDS Madagascar annee 2017-2018

De $1

Table des matières