Vous n'êtes pas connecté. Connexion
|
|
Programmable Web, client side, 2017-2018De $1Table des matièresIntroductionDans 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é. |
Powered by MindTouch Deki Open Source Edition v.8.08 |