Third Party Code pour applications web

Mattia A. Fritz
TECFA, Université de Genève

Comment optimiser le temps ?

1. Utiliser des outils de développement
   Éditeur de texte, gestionnaire de versions, ...
2. Adopter des bonnes pratiques
   Organisation des fichiers, indentation du code, guides de style, ...
3. Suivre une méthodologie de développement
   Approche centrée utilisateur, méthode Agile, tableau Kanban, ...
4. Documenter le projet (e.g. mémoire MALTT)
   Architecture, blueprint, commentaires dans le code, ...
5. Intégrer du code réutilisable
   Framework, bibliothèques, plug-in, ...

Incorporation dans la page

Le code est incoporé normalement à travers la balise script.

            <script src="path/to/file.js"></script>
            <script src="https://link.to/file.js"></script>
            

Deux possibilités d'incorporation qui peuvent se combiner dans la même page pour différents fichiers :

1. Télécharger le fichier depuis le site officiel ou GitHub et le téléverser ensuite sur son propre serveur.
2. Utiliser une Content Delivery Network (CDN). Les fichiers sont hébergés dans le "cloud".

Fichiers sur son propre serveur

Utiliser le chemin relatif à la page qui incopore les fichiers :

    
    <script src="./assets/vendor/revealjs/reveal.js"></script>
    <script src="./assets/vendor/revealjs/plugin/zoom/zoom.js"></script>
    <script src="./assets/vendor/revealjs/plugin/notes/notes.js"></script>
    
    <script src="./assets/js/my-app.js"></script>
          

L'ordre des fichiers est souvent fondamental !

Par exemple les plugins doivent être incorporés après la bibliothèque principale, et si vous utilisez des élément de la bibliothèque dans votre code, vos propres fichiers JavaScript doivent être incorporés plus bas. Ce mécanisme concerne également les fichiers CSS et s'applique même si vous utilisez une CDN.

Content Delivery Network (CDN)

Utiliser le URL absolu du fichier hébergé dans le cloud :

            <script 
                src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.common.dev.min.js"
                integrity="sha512-PkyFg1MEb/EwsFAqzqvZqWdMT4ItV+E1NgOtfBC9X8UecJcO9bwirD+v/9tJwci4wTNHdNYBk4ev6ceb1hy73g==" 
                crossorigin="anonymous"
            ></script>
          

L'attribut integrity contrôle que le contenu du fichier n'a pas été modifié. Le moindre changement dans le code du fichier modifie le code d'integrité et, sans correspondance, le navigateur bloque l'incorporation du fichier.

Voir par exemple CDNjs.com

Quelques exemples

• Revealjs
  Création de diaporama en HTML5/CSS/JavaScript (c.f. cette présentation).
• Plotly
  Représentation visuelles interactives (c.f. slide sur la répartition du temps).
• Graphery SVG
  Création de dessins SVG avec fonctions JavaScript.
• P5.js
  Utilisation artistique du code, basé sur la philosophie du langage Processing.
• Tensorflow.js
  Intégrer des modèles de machine learning dans les applications web

Choisir du 3rd party code

• Définir objectifs, taille et complexité du projet
  Est-ce que le code réutilisable facilite vraiment le développement ?
• Évaluer la qualité de la documentation
  Documentation exhaustive et soignée, présence de petits tutoriels Getting started, ...
• Identifier le(s) responsable(s) du code
  Des projets sont abandonnés rapidement, d'autres sont maintenus par communautés/entreprises.
• Contrôler attentivement la licence d'utilisation
  Open-source, utilisation personnelle, commerciale, ...

Pour aller plus loin

Les concepts abordés dans cette présentation sont traités de manière plus exhaustive dans l'article Bibliothèques JavaScript sur EduTechWiki.

EduTechWiki est un wiki sur la technologie éducative hébergé est maintenu par TECFA, une unité de l'Université de Genève, depuis 2006.