Applications web

Architecture des sites

Site statique vs. site dynamique

• Site web statique
  • Page web statique = page servie telle quelle par le serveur
  • 1 page web = 1 fichier HTML
• Site web dynamique
  • Pages HTML créées par des programmes
  • Sources de données diverses
  • Stockage de l’information

Paradigme document

• HTML + CSS = structure et présentation de documents
• Objectifs : consultation de documents
• Articles, documentation, etc.
• Pas d'interactions (ou peu)
• UE TW1

Architecture et navigation classique

Paradigme application logicielle

• HTML + CSS = structure et présentation
• JS : interactions
• Objectifs : créer des logiciels qui fonctionnent dans un navigateur
• Webmail, chat, médias sociaux, etc
• UE TW2

Programmation côté client

• Application fonctionnant dans un navigateur
• Côté serveur : fabrication de la structure HTML et des données
• Notion de logiciel plus que de document
• Limitations : pas d'accès aux données stockées dans le Système d'Information (base de donnée, fichiers sur le serveur, etc)

Application client

Web APIs

• API (Application Programming Interface) : ensemble de spécifications fournissant des fonctionnalités standardisées pour divers types d'applications
• Web APIs : APIs spécifiques pour le développement Web
• Ne font pas partie de la norme Javascript mais implémentées par les navigateurs en Javascript
• Par ex. l'API DOM utilisée dans (presque) toutes les pages web
  • Liste complète
  • Web Storage
  • History
  • Geolocation Demo
  • Web Speech (Demo
  • File
  • Etc.
• Can I use? : voir quels navigateurs implémentent une fonctionnalité donnée

Stocker et/ou transmettre des informations : data-*

• Un élément HTML peut avoir besoin de conserver « en interne » des informations
• Pour que JS puisse facilement avoir ces informations
• Solution : attributs data-*
• Tout attribut commençant par data- est ignoré par le navigateur
• Attributs data-* sont destinés à être utilisés uniquement par les scripts de la page
• Ne pas y mettre de données sensibles : même si ces données sont ignorées par le navigateur, elles sont visibles l'inspecteur du navigateur !
• Exemple :

  <ol>
      <li data-length="2m11s">Beyond The Sea</li>
      ...
  </ol>
  

Propriété dataset

• Tout élément de l'arbre DOM possède une propriété dataset
• dataset est un objet représentant tous les attributs data-* de cet élément
• Noms des propriétés transformées en camelCase (comme pour elt.style.fontSize)
• HTML :

  <ol>
      <li id="sea" data-length="2m11s" data-original-singer="Frank Sinatra">Beyond The Sea</li>
      ...
  </ol>
                  

• Javascript :

  document.getElementById('sea').dataset.length;
  document.getElementById('sea').dataset.originalSinger;

• Démo
• Exemple d'application

Applications Javascript

• Penser à l'utilisation des attributs data-*
• Pour avoir des informations complémentaires à l'intérieur d'un élément HTML lui-même
• Pour faciliter les accès aux données par le JS
• Pour découpler la logique de l'application et le contenu HTML
• Demo

Stockage de données dans le navigateur

• Problème : par défaut le navigateur ne permet pas de stocker des informations
• Comment garder en mémoire des infos d'une page à une autre ?
• API Web Storage : un stockage simple
• Infos conservées uniquement localement dans le navigateur
• ⇒ aucune sécurité ou garantie d'enregistrement
• ⇒ utile pour faciliter le développement d'applications Javascript

Deux types de stockage

• Objet sessionStorage conserve en mémoire les données tant que le navigateur n'est pas fermé
  Permet de conserver des informations pendant la navigation en cours
• Objet localStorage conserve en mémoire les données même si on ferme le navigateur
  Permet de stocker des informations pour une (ré)utilisation future
• Évènement storage peut être capté à chaque changement dans le stockage

API Web Storage : principes

• Enregistre des données sous la forme de paires (clé, valeur)
• Ne peut enregistrer que des scalaires (nombres, booléens, chaines de caractères)
• Peut stocker ~5Mo de données maximum
• Objet sessionStorage ou localStorage fonctionnent pareil
• Propriété Storage.length pour savoir le nombre de clés existantes
• Méthodes :
  • Storage.setItem(key, value) pour enregistrer la clé key avec la valeur value
  • Storage.getItem(key) pour obtenir la valeur correspondant à la clé key
    (renvoie null si la clé n'existe pas)
  • Storage.removeItem(key) pour supprimer l'enregistrement correspondant à la clé key
  • Storage.clear() pour tout supprimer
  • Storage.key(n) pour avoir le nom de la n^ième clé
• Évènement storage crée un objet StorageEvent avec les infos sur les chnagements effectués dans le stockage (voir détails dans la documentation)
• Démo

Inspecter le storage

Comment stocker des données complexes ?

• Problématique : on ne peut enregistrer que des scalaires (nombres, booléens, chaines de caractères)
• On voudrait pouvoir stocker des objets ou tableaux
• Solution : sérialisation
• Sérialisation de données : transformer une structure de données complexe en une structure simple comme une chaine de caractères (le plus souvent)
• Opération inverse : désérialisation
• Format texte adapté à Javascript : JSON (Javascript Object Notation)
• json.org
• Exemple : ["tableau", "de", 4, "éléments"] ou { "nom": "John", "prenom": "Doe" }

Objet JSON

• Pour sérialiser du Javascript en JSON
• Et désérialiser du JSON en Javascript
• Documentation de l'objet JSON de Javascript
• Méthodes :
  • JSON.stringify(variable) transforme la donnée variable en une chaine au format JSON
    Documentation et exemple
  • JSON.parse(chaine) transforme chaine au format JSON en données Javascript
    Documentation et exemple
• Attention aux cas à problèmes (voir doc et démos ci-dessus)

Application au stockage

• Pour stocker une donnée complexe, on la sérialise avec JSON.stringify puis on peut stocker la chaine de caractères
• Pour récupérer une donnée complexe, on prend la chaine dans le stockage et on la désérialise avec JSON.parse pour l'utiliser

La suite : Exploiter les possibilités du Web

La suite : Exploiter les possibilités du Web

• Javascript effectue des requêtes HTTP
• Vers son serveur web ou vers des services tiers
• Utilisation de services Web
• Basés sur des APIs échangeant des données au format JSON
• Exploitables directement par JavaScript
• Exemples : APIs Facebook, Twitter, Flickr, Strava, etc