Introduction

Chapitre 1

Contenu du cours (provisoire)
04:17

  1. Motivations, introduction et rappels
    • Pourquoi les technologies web sont-elles si importantes?
    • HTML, CSS et Javascript
  2. Front-end
    • Architecture de composants
    • Asynchronie
    • SPA (avantages et inconvénients)
  3. Back-end:
    • ORM
    • Authentification
    • REST et GraphQL
  4. Applications mobiles et desktop
  5. UX, DX
  6. State of the art

Informations pratiques
04:17

Question

Où trouver les slides?

Remark

Ne pas confondre avec le cours d'architecture web pour les ingénieurs en informatique

Question

Des questions?

N'hésitez pas à me contacter par email: NGY@ecam.be

Attentes
04:17

  • Les cours théoriques ne sont pas des cours de programmation. Je vous montrerai du code, mais l'objectif reste les concepts sous-jacents et non la syntaxe.
  • Vous aurez l'occasion de "programmer" en labo. Vous pouvez utiliser l'intelligence artificielle, le but est de travailler votre compréhension des concepts.
  • J'essayerai de communiquer clairement les attentes de l'examen durant le cours, mais également vers la fin du cours.

Motivations
04:17

Le déroulement du cours et des labos sera planifié pour aborder et détailler les points suivants:

Thèmes centraux

  • Le web est une plateforme universelle
  • Le web a une architecture centralisée
  • Créer une application web est extrêmement complexe
  • Demandes contradictoires (rapidité, SEO, UX, DX), etc.)

Que s'est-il passé?
04:17

Screenshots of Kim Kardashian's instagram

Captures d'écran de la page d'Instagram de Kim Kardashian au fil des années.

Wayback Machine permet de voir un snapshot d'une page web au fil du temps.

Question

Que s'est-il passé en 2016 et en 2019?

Pourquoi une application web?
04:17

Question

Pourquoi développe-t-on des applications web?

  • Accessibilité depuis n'importe quel type d'appareil, possibilité de partage et de coopération.
  • Aisance de développement: relativement simple, multi-plateforme
  • Simplicité pour l'utilisateur: pas d'installation, mises à jour automatiques, pas de maintenance côté utilisateur
  • Architecture serveur/client

The State of Developer Ecosystem 2023
04:17

Use of technologies over time

Graphe montrant l'utilisation des langages de programmation les plus populaires au fil des ans.

Question

Quelles sont les tendances principales au niveau du développement? Le développement web est-il en hausse ou en baisse?

Backend? Frontend?
04:17

Front-end vs. Back-end

Les protagonistes principaux de ce cours
04:17

HTML-CSS-JS
HTML
Métadonnées, contenu et structure de la page
CSS
Apparence
JavaScript
  • Comportement interactif (front-end)
  • Communication frontend/backend après le rendu initial
  • Communication avec les fichiers et base de données (back-end)

Rappels: HTML et CSS
04:17

Pour créer une page web, il suffit de créer un fichier texte .html

Liens utiles

Exemple

Vocabulaire: balise, attribut, valeur, sélecteur

DOM
04:17

Definition (DOM)

Le DOM est la représentation en mémoire d'une page HTML.

DOM representation of an HTML code

Remark

Vous pouvez voir le DOM d'une page avec les outils de développement (F12)

Vocabulaire: noeud, enfant, parent

DOM Live Viewer
04:17

Modification du DOM post-chargement
04:17

Il est possible de modifier le DOM manuellement. Je ne devrais probablement vous montrer cette astuce-là mais il est possible de lire les mots de passe sur les ordinateurs de vos amis...

Généralement, les modifications du DOM se font en JavaScript. Dans l'exemple ci-dessous, cliquer sur le bouton "Play" introduit des changements du DOM.

Loading

Liens et MPA
04:17

Remark

Lorsque l'on clique sur un lien, le DOM est détruit et la nouvelle page est reconstruite de zéro.

JavaScript
04:17

Le JavaScript permet de partiellement changer la page (plus précisément le DOM), ce qui permet une meilleure expérience pour l'utilisateur.

Exemple: publicité
04:17

Manipuler le DOM
04:17

  1. Sélectionner le noeud
    aussi: getElementById, getElementsByClassNames, querySelectorAll, etc.
  2. Modification du noeud
  3. Enlever un noeud
  4. Ajouter un noeud:

Remark

Il y a énormément de type de noeuds (e.g. un pour chaque balise) qui ont énormément de propriétés. Pour plus d'infos, consulter la documentation.

Événements
04:17

Une partie importante du Javascript est de réagir aux actions et interactions de l'utilisateur avec la page (scroll, clic sur un bouton, etc.)

Asynchronisme et le McDonalds
04:17

Asynchronisme

Dans le navigateur, le JavaScript se comporte comme un·e caissier·e du McDonalds lorsque les machines de commande sont en panne: les clients ne sont pas servis dans l'ordre.

Attente au McDonalds

Le modèle est plus complexe et requiert un peu de travail, mais au moins l'interface fonctionne quand on charge toujours les données.

Synchronisme

Le comportement par défaut est la file de supermarché

Attente au McDonalds

Le modèle est plus simple mais on est bloqué si quelqu'un a oublié son portefeuille ou nourrit une famille de 15.

Asynchronisme: exemple
04:17

  • async: cette fonction prendra du temps et la réponse ne sera pas immédiate
  • await: quitte la file jusqu'à ce que la réponse soit disponible

Réactivité (or lack thereof)
04:17

Question

À la fin du code, que vaut b?