![Page 1: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/1.jpg)
Programma�on WebAvancée et MobileCM 2 : Bibliothèques et frameworkscôté clientAurélien Tabard ‑ Lionel Médini
1
![Page 2: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/2.jpg)
Plan du coursRappels JavaScript
Introduc�on aux principes partagés par lesframeworks JavaScripts modernes
Introduc�on à Vue
2
![Page 3: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/3.jpg)
RessourcesPage à compléter :
Liens u�les : h�ps://aurelient.github.io/mif13/2018/hack
Livres
Eloquent Javascript (3rd edi�on EN)
Eloquent Javascript (1e edi�on FR)
3
![Page 4: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/4.jpg)
Rappels JavaScriptFaiblement typéConversions de types implicites, opérateur ===
Fonc�onnelBasé sur le scope des variables
Orienté évènementTrick : une callback peut être une alterna�ve aux threads
Orienté prototypeLes objets peuvent partager un prototype, mais pasd'héritage entre classes
→ Langage très permissif ("assembleur du Web")4
![Page 5: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/5.jpg)
Rappels JavaScriptÀ quoi sert la nota�on suivante ?
(function() { var toto = 12; console.log(toto);})();
5
![Page 6: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/6.jpg)
Rappels JavaScriptÀ quoi sert la nota�on suivante ?
(function() { var toto = 12; console.log(toto);})();
Comprendre la portée
6
![Page 7: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/7.jpg)
Closures (fermetures)Permet de capturer l'environnement d'unefonc�on.C'est‑à‑dire les variables des scopes externes àcelui de la fonc�on.
function makeFunc() { var name = "Mozilla"; function displayName() { alert(name); } return displayName; }
var myFunc = makeFunc(); myFunc();
7
![Page 8: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/8.jpg)
Func�on factoryPermet de passer des paramètres au moment dela créa�on d'une fonc�on
function creerAdditionneur(a) { return function(b) { return a + b; }}var add5 = creerAdditionneur(5);var add20 = creerAdditionneur(20);
8
![Page 9: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/9.jpg)
À quoi servent les Closures ?Gérer la nature asynchrone de JavaScript
Ajouter des données locales à un callback
Gérer des "objets"
Émuler des méthodes privées
En savoir plus : Closures (MDN)
9
![Page 10: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/10.jpg)
Web apps
10
![Page 11: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/11.jpg)
Années 2005‑2010 : bibliothèques JSMilieu des années 2000 : bascule d'un Web centrédocuments et formulaires vers un Web centréapplica�on
Essor des applica�ons Web riches (RIA)
Toujours beaucoup de logique côté serveur
Développement d'AJAX et de REST
Bibliothèques très permissives
11
![Page 12: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/12.jpg)
Années 2005‑2010 : bibliothèques JSLa plus embléma�que : JQuery
Implémenta�ons incomplètes des standardsexistants
Standards eux‑mêmes incomplets
→ Besoin de "workarounds" pour homogénéiser lescomportements des navigateurs
12
![Page 13: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/13.jpg)
Années 2010 : frameworks JSÉmergence des Single Page Applica�ons
Déplacement de la logique sur le client
Structura�on du code
Développement du "tooling" : Paquets, CSS,Javascript.
13
![Page 14: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/14.jpg)
Les frameworks JS aujourd'huiAngular
React
Vue
Emberjs
Meteor
Backbone
...
The ul�mate guide to javascript frameworksListe sur wikipedia 14
![Page 15: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/15.jpg)
Frameworks côté clientObjec�f
Faciliter le développement d'applica�ons "single‑page" (SPA) côté client
Propriétés
un pa�ern MV*
une sorte de pa�ern IoC
réac�ves
15
![Page 16: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/16.jpg)
Frameworks côté clientCaractéris�ques :
Interceptent le changement d'URL (hash)
S'appuient sur une structure modulaire
S'appuient sur d'autres bibliothèques
Ges�on des objets JS
Ges�on des événements
Templa�ng
16
![Page 17: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/17.jpg)
Principe 1 : Routage
Objec�f : Simuler des pages web différentes
Intercepter le changement de hash dans l'URL
Récupérer les ‑ éventuels ‑ paramètres
Déclencher un callback
Moyens :
événement hashchange
hash window.location.hash
17
![Page 18: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/18.jpg)
Principe 2 : Liens entre modèle et vueVoir cours reac�ve programming pour plus de détails
One‑way data binding
Une ac�on sur la vue provoque la mise à jour dumodèle
Two‑way data binding
1. Une ac�on sur la vue provoque la mise à jour dumodèle
2. Toute modifica�on d'une propriété du modèleprovoque une mise à jour de la vue
18
![Page 19: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/19.jpg)
Principe 3 : Templa�ng
Vu au dernier semestre avec Mustache
Interpola�ons (texte, variables, expressions JS)
{{ ok ? 'YES' : 'NO' }}
Direc�ves (if, for, on)
<p v-if="seen">Now you see me</p>
19
![Page 20: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/20.jpg)
Principe 4 : Composants
Un des principes les plus u�les.
Permet de créer des composants réu�lisables àtravers toute l'applica�on (et même partageableentre projets).
Une applica�on Vue est dotée d'un arbre decomposants : un parent et plusieurs enfants.
Voir aussi :
Polymer
Web components
20
![Page 21: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/21.jpg)
Introduc�on à Vue.js
21
![Page 22: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/22.jpg)
Tooling
npm
vue‑cli
Webpack
ESlint
22
![Page 23: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/23.jpg)
Retour sur le TP de la semaine dernière
23
![Page 24: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/24.jpg)
Exposés
24
![Page 25: Programmaon Web Avancée et Mobile - GitHub Pages...Polymer Web components 20 Introducon à Vue.js 21 Tooling npm vue‑cli Webpack ESlint 22 Retour sur le TP de la semaine dernière](https://reader035.vdocuments.pub/reader035/viewer/2022070715/5ed7933b67b53e06555d29a3/html5/thumbnails/25.jpg)
Exposés
Tout le monde inscrit ce soir.
La prochaine séance :
Django
TypeScript
‑> ordre de passage en ligne demain ma�n.
25