Editions ENI Livres | Vidéos | e-Formations
Maîtriser les frameworks Web
Bien démarrer avec jQuery
1. Concepts
a. Présentation
jQuery (http://jquery.com/) est un framework qui simplifie la construction d’applications web. Pour cela, il dispose d’un mécanisme de sélecteurs s’appuyant sur la syntaxe existant en CSS3 afin de filtrer certains nœuds de la page. Une « surcouche » est également ajoutée aux nœuds DOM pour simplifier leur gestion. Le traitement des événements est simplifié afin de réduire les dépendances entre la page HTML et le code JavaScript. Divers utilitaires sont à disposition comme la gestion simplifiée pour AJAX (voir le chapitre Développer aisément en client/serveur).
jQuery est probablement le framework JavaScript pour le Web le plus employé avec une quantité impressionnante de plugins (http://plugins.jquery.com/) offrant des services variés (nouveaux composants, effets graphiques...).
Utiliser jQuery est indéniablement un atout mais il faut aussi être conscient qu’il peut exister des bugs et que son fonctionnement sur certains navigateurs est parfois problématique. Cela ne dispense donc en aucun cas d’avoir une bonne connaissance de l’API DOM pour les « contourner ».
jQuery est accompagné d’une version orientée IHM nommée jQuery UI (http://jqueryui.com/) se focalisant sur des composants graphiques et d’une version pour mobile « jQuery Mobile » (http://jquerymobile.com/) pour l’intégration dans une tablette ou un téléphone portable (iOS, Android...).
Pour travailler, il faut télécharger jQuery qui se résume à un fichier disponible sous deux formats :
-
Un format compact moins lisible mais plus rapide à télécharger pour un usage en production (suppression des blancs, renommage...).
-
Un format « lisible » lorsque vous êtes en développement.
Vous pouvez également passer par les utilitaires npm, yarn ou bien bower pour effectuer l’installation en local.
Si vous ne voulez pas installer jQuery sur votre machine mais pouvoir bénéficier d’un cache utilisateur, vous pouvez passer par un CDN (Content Delivery Network). Par exemple à partir de Google vous aurez...
Bien démarrer avec Dojo
1. Concepts
a. Présentation
Dojo est un framework JavaScript (http://dojotoolkit.org/) reposant sur l’architecture AMD que nous avons déjà abordée dans le chapitre dédié aux bonnes pratiques. Il est découpé en un noyau (nano core), une librairie Dijit pour le développement web, Dojo Mobile pour l’intégration mobile, Dojo GFX pour la gestion de graphe et différents outils présents dans dojox et util.
Contrairement à jQuery, les fonctionnalités sont éparpillées au sein d’un nombre important de modules. Chaque module peut correspondre à une fonction ou bien à un objet.
La demande d’un module Dojo s’effectue avec require (voir le chapitre sur les bonnes pratiques). La conception de modules suivant AMD s’effectue donc avec define.
Tous les modules AMD sont catalogués dans cette arborescence : http://dojotoolkit.org/api/. Par exemple, le module dojo/dom sert à trouver un élément à partir de son identifiant (équivalent à getElementById).
Le module dojo/domReady! est particulier et garantit que l’arborescence DOM a bien été chargée (à la manière de ready avec jQuery). Vous aurez en arguments soit des modules fonctions (c’est-à-dire retournant une fonction) indiqués par une icône F, soit des modules objets (retournant des objets) avec une icône O.
Pour installer Dojo, vous avez la possibilité d’utiliser bower avec la commande bower install dojo/dojo dojo/dijit dojo/dojox dojo/util, ou en passant simplement par le CDN de Google.
Nous allons construire un premier exemple. Pour pouvoir utiliser les modules AMD de Dojo, il est nécessaire de charger le script dojo/dojo.js.
Exemple
<html>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.14.1/dojo/dojo.js"></script>
<script type="text/javascript">
require( ["dojo/dom", "dojo/domReady!" ],
function( dom ) {
dom.byId( "hello" ).innerHTML = "hello world";
} ...Construire votre framework web
1. Première étape
a. Présentation
La réalisation d’un framework web peut apporter un certain confort dans la maîtrise et l’évolution de votre code. C’est d’autant plus vrai si des éléments se répètent dans vos pages. Utiliser jQuery ou Dojo est certes pratique voire indispensable selon les cas mais crée une dépendance par rapport à votre environnement qui n’est pas toujours efficace en termes d’évolution, de performance et de correction d’erreur. Devoir contourner/corriger un bug jQuery sur un navigateur peut avoir un coût important, qui empiète sur le gain d’usage.
Nous proposons ici un exemple de framework. Il ne prétend en aucun cas être un remplaçant des frameworks déjà mentionnés mais juste vous montrer des pistes pour démarrer et faire évoluer votre code sereinement.
Nous allons nous appuyer sur l’architecture AMD qui montre à l’usage un véritable potentiel pour faciliter la réutilisation de code et donc la construction d’un framework. Nous emploierons également le gestionnaire de module curl qui a montré également en production les meilleurs résultats.
b. Organisation
Tout d’abord, il faut organiser les répertoires pour recevoir les modules AMD. Nous proposons cette organisation :
|
Répertoire |
Description |
|
/js |
Répertoire de base pour les scripts. |
|
/js/amd |
Répertoire de base pour les modules AMD. |
|
/js/amd/curl/plugin |
Répertoire pour étendre curl par des plugins. Il s’agit du chemin de recherche par défaut avec curl. |
Le chemin par défaut de chargement d’un plugin curl peut être modifié grâce à la propriété pluginPath dans l’objet de paramétrage curl.
Nous aurons dans le répertoire js le gestionnaire de module AMD curl.js. Nous prendrons la version qui intègre le module domReady (https://raw.github.com/cujojs/curl/master/dist/curl-with-js-and-domReady/curl.js). Ce module, que nous avons déjà trouvé dans Dojo, va servir à détecter le chargement de la page et exécuter un code.
Le répertoire amd contiendra les modules en les répartissant en répertoires....
