Développement web avec des composants

Mickaël BARON - Version 12-2020

baron.mickael@gmail.com ou baron@ensma.fr

mickaelbaron mickael-baron.fr

Licence d'utilisation

Creative Commons

Contrat Paternité

Partage des Conditions Initiales à l'Identique

2.0 France

creativecommons.org/licenses/by-sa/4.0
Buy Me A Coffee

Qui suis-je ?

mickael-baron.fr

mickaelbaron

Ingénieur de Recherche ☀️

  • Recherche dans l'équipe Ingénierie des Données et des moDèles (IDD)
  • Valorisation des plateformes logicielles
  • « Coach technique » auprès des usagers

lias-laboratory

www.lias-lab.fr

Ancien Responsable 🌑 (2011-2021)

@Developpez

java.developpez.com

  • Rubriques : Java, Java Web, Android, Eclipse, Spring et Netbeans
  • Rédacteurs de tutoriels
  • Chiffres
    • 4 M de visiteurs
    • 12 M pages vues/mois
    • 7500 membres
    • 2000 forums

Objectif de ce cours (45 min)

  • Rappel des bases du développement web
    • HTML, CSS, JavaScript
  • Historique du développement web
    • Du web statique au web des composants
  • Mécanismes d'un framework web JS par composant
    • Binding, Templating, Routage, Composant
  • Framworks JavaScript web du marché
  • Outils du développeur web

Objectif du cours Vue.js (45 min)

  • Modèle et vue
  • Templating (interpolation et directives)
  • Composants (créer et instancier)
  • Communiquer entre les composants
  • Structure d'un projet Vue.js
  • Routage
  • Outils pour Vue.js

Mise en œuvre : travaux pratiques

Disponibles sur Github : github.com/mickaelbaron

Intégration dans un existant

Single Page Application (SPA)

Disclaimer 🧎🏻‍♂️

Je ne vous garantis pas d'être un expert en ...

  • conception graphique web
  • développement web

Pas le temps ⏳ de tout traiter

Prérequis minimums

  • Langages à balises (XML, HTML)
  • Principe Client/Serveur

Les bases du développement web

Le langage à balises HTML

Permet de définir la structure et le contenu

Les feuilles de style CSS

Permet de définir le style

Sans feuille de style CSS

Avec feuille de style CSS

Les feuilles de style CSS

Anatomie d'une règle CSS

Les feuilles de style CSS

Différents types de sélecteurs CSS

Les feuilles de style CSS

Cibler les contenus HTML

Les feuilles de style CSS

Référencer feuille de style CSS dans page HTML

Dans un fichier séparé 👍

Dans le fichier HTML

Les feuilles de style CSS

Disposer d'un talent ou laisser faire les experts

Les feuilles de style CSS

Possibilité d'utiliser un framework CSS clé en main

Skeleton
Bootstrap
Materialize
Une liste non exhaustive awesome-css-frameworks
  • 👍 : prototypage rapide
  • 👎 : impression d'interfaces web uniformes

Le langage JavaScript (JS)

Permet de définir le comportement

Le langage JavaScript (JS)

Implémentation de la spécification ECMAScript (ES)

Détail des versions majeures

  • ES5 (2009) supportée par tous les navigateurs
  • ES6 (2015) enrichie de nouvelles fonctionnalités, mais supportée que par les navigateurs récents
  • ES2015+ désigne [ 2015 ; 2020 ]

Un navigateur supporte-il ECMAScript ? caniuse.com

Le langage JavaScript (JS)

Trois fonctionnalités ES6 à connaître

let : variable avec scope block

const : constante

arrow : fonction anonyme

Récapitulatif des améliorations de ES6 : devhints.io/es6

Le langage JavaScript (JS)

Référencer un code JavaScript dans une page HMTL

Dans un fichier séparé 👍

<body>
  ...
  <script 
    src="myscript.js">
  </script>
</body>

Dans le fichier HTML 

<body>
  ...
  <script> 
    const NEW_VALUE = ...;
    ...
  </script>
</body>

Codes JavaScript à la fin du document HTML ?

  • Ne pas bloquer le chargement de la page HTML

TypeScript, c'est quoi 🧐

Open source et développé par Microsoft depuis 2012 : www.typescriptlang.org

  • Multiparadigme : fonctionnel et objet
  • Fortement typé
  • Surensemble syntaxique strict de JavaScript (un code JavaScript et un code TypeScript valide)
  • Outils de traduction vers JavaScript (transpilateur)

Adoption qui explose depuis 2016

  • Support des principaux framework web
  • Facile à apprendre pour un dév. Java

Historique des bibliothèques web

Développement d'applications web a connu trois évolutions majeures

Evolution Dev. web : jusqu'à 2005

Éléments de cette période à retenir

  • Interfaces web statiques et orientées formulaires
  • Traitements exclusivement serveur (PHP, Servlet...)
  • Faible débit Internet : modem RTC 56K ☎️

Le principal fait marquant : les navigateurs web

Evolution Dev. web : jusqu'à 2005

Le site du lemonde.fr en 1996

Evolution Dev. web : 2005 - 2010

Éléments de cette période à retenir

  • Interfaces web plus dynamiques (AJAX)
  • Plus de vérifications côté « client »
  • Nouveaux navigateurs web respectueux du W3C
  • Augmentation débit Internet : ADSL

Le principal fait marquant : JQuery

Evolution Dev. web : 2005 - 2010

Le site du lemonde.fr en 2006

Evolution Dev. web : depuis 2010

Éléments de cette période à retenir

  • Prise en compte des spécificités des mobiles 📱 via le Responsible Design
  • Sites web deviennent des Applications : Single Page Application (SPA)
  • Approche de développement par composants

Le principal fait marquant : HTML5

Single Page Application (SPA) 🧐

Multi Page Application

Single Page Application

Evolution Dev. web : depuis 2010

Le site du lemonde.fr en 2020

Vers une approche du développement web par composants

Les quatre fonctionnalités qu'un framework web JavaScript moderne doit proposer

Bibliothèque et Framework ?

Bibliothèque (Library 🇬🇧) est différent de Framework

Bibliothèque

  • Une API est exposée
  • Votre code intègre les bibliothèques

Framework

  • Cadre d'utilisation imposé (cycle de vie)
  • Le framework intégre votre code

Modèle Architecture MVVM

Model-View-ViewModel pour les frameworks web

  • Model contient les données à afficher
  • View représente l'affichage (❷ templates)
  • ViewModel contrôle l'affichage

La liaison View/ViewModel se fait par ❶ Data Binding

Chaque ❸ composant respecte MVVM

La visibilité d'un composant se fait par ❹ routage

❶ Data Binding

Mécanisme de notification entre le modèle et la vue

Liaison unidirectionnelle (one-way data binding 🇬🇧)

  • Si le modèle est modifié, la vue est mise à jour

Liaison bidirectionnelle (two-way data binding 🇬🇧)

  • Si le modèle est modifié, la vue est mise à jour
  • Si la vue est modifiée, le modèle est mis à jour

ViewModel consomme les éléments du modèle et les affiche dans la vue et inversement

❷ Templating

Enrichir la vue pour le support du Data Binding

Interpolation (notation Moustache)

  • Pour les liaisons unidirectionnelles

Directives

  • Pour les liaisons bidirectionnelles
  • Attributs spécifiques au framework : if, for, on...

Peut gérer du texte, des variables, du code JavaScript

❸ Composant

Pouvoir créer des composants réutilisables

Comprendre le cycle de vie d'un composant

  • Etat Created
  • Etat Mounted (rendu HTML effectué)
  • Etat Destroyed

Arbre de relations père-fils (communication)

  • Savoir communiquer du parent vers les enfants
  • Savoir communiquer d'un enfant vers le parent
  • Savoir communiquer entre composants

Web Component, futur standard ?

Initiative proposée par Google : webcomponents.org

Standards pour créer et réutiliser des composants

Peu implémentée par les navigateurs, extensions

❹ Routage

Simuler plusieurs pages web différentes dans une SPA

Quand un utilisateur visite une page, un code détermine ce qui doit se passer

Mise en œuvre

  1. Intercepter les changements dans l'URL (chemins /export et paramètres ?param=value)
  2. Exploiter l'historique de navigation

Frameworks JS pour le développement web par composants

Les trois frameworks JavaScript les plus utilisés

Quels frameworks JS choisir ?

Angular 👀

Backbone

Ember

Knockout

Meteor

Mithril

React 👀

Vue 👀

Angular : le tout-en-un

Origine (2016)

Points marquants

  • ✌️ versions Angular.js (2009) et Angular (2016)
  • Solution « tout-en-un »
  • TypeScript exclusivement

Utilisé par : Microsoft (Office), Youtube, GMail...

À choisir pour créer une nouvelle application

React : le performant

Origine (2013)

Points marquants

  • Pionier
  • Plus une bibliothèque qu'un framework
  • Bibliothèques externes obligatoires : routage...

Utilisé par : Facebook, Uber, Airbnb, Netflix...

À choisir pour créer des composants individuels

Vue.js 🖖 : l'outsider libre

Origine (2014)

  • Evan You ancien Google a travaillé sur Angular
  • /vuejs/vue

Points marquants

  • Pas lié à une grosse société
  • Plus une bibliothèque qu'un framework (React)
  • Intégration progressive

Utilisé par : Gitlab, Alibaba...

À choisir pour transformer un site web existant

Pourquoi j'ai choisi Vue.js 🖖

  1. Libre : pas dépendant d'une société
  2. Contrainte professionnelle : utilisation au LIAS
  3. Facilité : le meilleur de Angular et React
  4. Documentation : vuejs.org
  5. Progressif : du site web à l'application

Liens pour se faire une idée 🧐

Métaphore de l'auto-école

Le marché de l'emploi cible Angular ou React 😱

Code = Concepts Web

  • Standards W3C
  • Liaison dynamique
  • Templating
  • Routage
  • Composant

Conduite = Développement

  • Coder un composant
  • Communiquer
  • Manipuler les outils
  • Tester
  • Déployer

Outils du développeur web

Comment s'y retrouver 🧐

Un transpilateur, c'est quoi 🧐

Génèrateur de code source depuis un autre code source dont les langages ont le même niveau d'abstraction

Ne pas confondre avec compilateur (langage haut niveau vers bas niveau)

Outil : Babel.js

  • JavaScript ES5 depuis ES6+

Un Linter, c'est quoi 🧐

Analyseur statique de code qui permet de relever

  • Erreurs de syntaxe
  • Bugs
  • Problèmes de forme ...

Amélioration de votre code pour le rendre présentable

Outil : ESLint

  • Intégration transparente dans les éditeurs de code

Minifier, c'est quoi 🧐

Réducteur de taille de code pour limiter le volume à télécharger depuis le serveur

  • Supprime les espaces
  • Renomme les variables
  • Efface les commentaires

Non minifié

Minifié

Outils : UglifyJS, Minify

Éditeur de code, c'est quoi 🧐

Éditeur de texte fournissant des outils pour améliorer la productivité du développeur

  • Gestionnaire de fichier (onglet, écran séparé)
  • Racourcis clavier
  • Extensible via des plugins

Outils : VSCode, WebStorm, Sublime Text ...

Gestionnaire de paquet 🧐

Outil pour automatiser l'installation, la mise à jour et la suppression de bibliothèques tierces

  • Fichier de description (ex : package.json)
  • Dépôts distants

Outils : npm, yarn, bower...

Construction automatique 🧐

Outil pour réaliser des tâches automatiques

  • Exécuter des scripts personnalisés
  • Exécuter des tests
  • Générer le code final : transpilateur, linter, minifier...

Outils : Webpack, Grunt, Gulp, Parcel, Rollup.js...

CLI, c'est quoi 🧐

Outils de type Command Line Interface proposés par les frameworks JavaScript

  • Générer un nouveau projet
  • Tester son développement
  • Configurer son projet
  • Générer la version finale

S'appuie sur les outils de construction automatique (génère fichiers config.)

Outils : Vite, Create-React-App, Angular CLI