 |
Vous n'êtes pas connecté. Connexion |
 |
Page modifiée à 18:28, 27 Mar 2018 par MichelBuffa
Master 2 MBDS Madagascar annee 2017-2018De $1IntroductionDans 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 APIEcriture en live coding d'une todo list:
MOOCs utiles
Partie 2: Suite VueJS1 - Creer des composants avec VueJSReprenez 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
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
<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
Partie 3: premiers pas avec ReactExercices d'introduction, dans une IDE en ligneOn peut faire du react dans JsBin/JsFiddle/CodePen, mais croyez-moi, juste pour de petits exemples !
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 :
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
Exercice: refaire dans le projet les hobbies en mode CLI !
Partie 4 - UTILISATION DE FIREBASE avec React
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: Dans App.js : this.state = {
hobbies : {
hobby0: 'tennis',
hobby1: 'golf'
}
// ...
};
Il faudra modifier plusieurs parties du code en conséquence...
Ex de code: addHobby() {
//alert("addHobby: " + this.state.input);
/* OLD VERSION WITH ARRAY
const oldHobbies = this.state.hobbies;
this.setState({
hobbies: oldHobbies.concat(this.state.input),
input : ""
});
*/
const hobbies = {...this.state.hobbies};
// add in our new hobby
const timestamp = Date.now();
hobbies[`hobby-${timestamp}`] = this.state.input;
this.setState({hobbies});
console.log(this.state.hobbies)
}
removeHobby(key) {
/* OLD VERSION WITH ARRAYS
const oldHobbies = this.state.hobbies;
const position = oldHobbies.indexOf(hobby);
this.setState({
hobbies: oldHobbies.filter(
(el, index) => {
return (index !== position)
}
),
hobbyWasDeleted : true
} );
*/
// Take a copy of our fishes
const hobbies = {...this.state.hobbies};
// Remove the fish that has the key passed as parameter
//delete fishes[key]; // does not work because of firebase ?
hobbies[key] = null;
// set state
//this.setState({fishes: fishes});
// in ES6 you can use only 'fishes'
this.setState({hobbies});
}
Et pour render, exemple d'iterateur sur un objet, comparer par rapport au code qui itere sur un tableau, dans les exemples vus precedemment: let list = Object.keys(this.state.hobbies).map((key, index) => {
const hobby = this.state.hobbies[key];
const liStyle = {
backgroundColor: index % 2 === 0 ? 'lightpink' : 'red'
};
return <li key={key} style={liStyle} onClick={() => this.removeHobby(key)}>{hobby}</li>
})
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 connexion quand il est "démonté". On va pour cela définir les méthodes App.js : componentWillMount() {
console.log("Will mount")
// this runs right before the <App> is rendered
}
componentWillUnmount() {
console.log("Will unmount")
}
Implémentez ces méthodes et vérifiez bien qu'elles sont appelées... ETAPE 3 : on va créer une base sur FireBase
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 (attention a copier/coller depuis le site) 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-mbds-firebase.firebaseapp.com",
databaseURL: "https://react-mbds-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...
|
Powered by MindTouch Deki Open Source Edition v.8.08 |