Vous n'êtes pas connecté. Connexion
|
|
Programmable Web, client side, 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. Séance 1: état des lieux des technologies front-end
DOM or not to DOM ?Ecriture en live coding d'une todo list:
MOOCs utiles
Séance 2: WebComponents standard et suite VueJS2.1 Les WebComponents : un standard du W3COn va dans un premier temps étudier la notion de WebComponents, un standard du W3C basé sur 4 APIs qui sont (ou vont) être implémentées par votre navigateur.
Exercice 1 (utilisation de WebComponents récupérés sur le Web): récuperez l'archive suivante : VideoUsingWebComponentsNew.zip, dezippez-la et testez la page Web à l'aide d'un serveut HTTP (par ex WAMP, MAMP ou encore plus pratique, l'extension de navigateur Web browser for Chrome) Exercice 2 (idem), récuperez l'achive suivante testCircleProgress.zip et testez à l'aide d'un serveur HTTP. Regardez le code source. A etudier à la maison (cours à venir): le framework Polymer 2 (Google), qui est basé sur les WebComponents, et qui est utilisé par YouTube Gaming par exemple. 2.2 Suite de l'étude de VueJSJ'ai rajouté eux exemples vus la semaine dernière, un exemple qui charge des données par fetch/ajax. 2.2.1 créer des composants avec VueJSReprenez un des derniers exemples faits avec VueJS, ma gestion d'une todo list: http://jsbin.com/haguven/edit?html,console,output 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/haguven/edit?html,js,console,output 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.2.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". Travail à faire :
<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> Correction de l'exercice: VueJSExoCli.zip, faire "npm install" et "npm run dev" une fois dezippé. Séance 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 ! Séance 4: React suite / FireBase / Fetch + Node + MongoPour ceux qui veulent approfondir React: le cours de Wes Bos (React for Beginners). Dans les vidéos de son cours il construit un magasin de poissons de A jusqu'à Z et montre pas mal de petits trucs: le router React, comment utiliser FireFase, comment héberger dans le cloud etc. Les fichiers pour démarrer le projet, et les corrections sont sur : https://github.com/wesbos/React-For-Beginners-Starter-Files La suite logique est d'étudier le "gestionnaire d'états" de React, qui s'appelle Redux, là vous trouverez aussi le cours complet gratuit sur le site de Wes Bos (https://learnredux.com/) En attendant, on va avancer un peu les exemples vus la semaine dernière (hobbies). UTILISATION DE FIREBASE:
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:
this.state = { hobbies : { hobby0: 'tennis', hobby1: 'golf' } // ... }; Il faudra modifier plusieurs parties du code en conséquence...
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 conenxion quand il est "démonté". On va pour cela définir les méthodes componentWillMount() { console.log("Will mount") // this runs right before the <App> is rendered } componentWillUnmount() { console.log("Will unmount") base.removeBinding(this.ref); } 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:
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-epu-firebase.firebaseapp.com", databaseURL: "https://react-epu-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... Fetch / REST / Mongo / Node : quelques recommandations, exemplesOn va maintenant faire un petit passage en AJAX via fetch/REST sur un serveur node/mongoDB qui travaille sur la base de données des restaurants Peter vous a montré du jQuery je crois (!), mais depuis 2012 on a fetch qui fonctionne très bien et qui est standard dans les browsers. Donc, je vous propose de revenir sur le back end un instant avant d'étudier un front-end qui fait du CRUD via fetch, en respectant les bonnes pratiques:
ETUDE DE CODE A L'ECRAN / Live coding. Comment debugguer via la console. Comment tester son code serveur REST/ son code client. ETAPE 8 avec React : on va voir un peu node / mongo / fetch puis on essaiera d'afficher la liste des restaurants à la place des hobbies... Ah oui, les restaurants de la base de test de mongoDB !
|
Powered by MindTouch Deki Open Source Edition v.8.08 |