STIC I

Code réutilisable

Bibliothèques JavaScript & Co.

Rappel : perspective du cours

JavaScript between Computational Thinking and Interaction

Dans l'idéal...

Le développement sert à créer quelque chose d'utile, important, amusant, ... qui répond à un besoin, apporte une solution à un problème, ou améliore la situation pour des utilisateurs/apprenants.

Les développeurs passent leur temps à créer !

Répartition du temps (indicative)

Afficher comme ou

Comment optimiser le temps ?

  1. Utiliser des outils (éditeur de texte, Git/GitHub, ...)
  2. Adopter des bonnes pratiques (guides de style, ...)
  3. Suivre une méthode de développement (e.g. ERGO)
  4. Construire une architecture (e.g. pour un mémoire)
  5. S'appuyer sur du code réutilisable (frameworks, libraries, plug-ins)

Architecture de l'application

Example of application architecture

Tiré de Fritz (2015).

Code réutilisable pour le front-end

Il peut être appliqué à tous les niveaux

Bibliothèques JavaScript

Une bibliothèque JavaScript est un fichier .js – parfois plusieurs – déjà codé qui met à disposition des méthodes et des propriétés pour l’ajout de fonctionnalités dynamiques à une page HTML.

Comment ça marche ?

Les fichiers sont incorporés à travers la balise <script>.
  1. Télécharger les fichiers depuis le site officiel ou GitHub et les téléverser ensuite sur son propre serveur.
  2. Utiliser une Content Delivery Network (CDN). Les fichiers sont hébergés dans le "cloud".

Télé-charger/verser les fichiers

Download the file(s)

L'ordre de l'inclusion est souvent fondamentale !

Utiliser une Content Delivery Network

Use a CDN

Voir par exemple CDNjs.com

Différentes intentions de re-usabilité

Reusable code funnel

Comment choisir une bibliothèque

  • Définir en amont :
    • Les objectives de l'application
    • La taille/complexité du projet
  • Faire attention à :
    • La qualité de la documentation
    • Qui est responsable du projet
    • L'environnement visé (front- or back-end)
    • La licence et les limitations d'utilisation (e.g. commercial, ...)