Maîtriser les frameworks web

Bien démarrer avec jQuery

1. Concepts

a. Présentation

jQuery (https://jquery.com/) est un framework très courant 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 (https://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 (https://jqueryui.com/) se focalisant sur des composants graphiques et d’une version pour mobile « jQuery Mobile » (https://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...

Bien démarrer avec React

1. Présentation

React (https://fr.react.dev/) est un framework JavaScript reposant généralement sur Node.js. Il fonctionne sur le principe de composants réutilisables. Un composant est une fonction JavaScript qui va retourner une balise HTML et son contenu. Le composant va gérer tout le paramétrage mais également toute la partie dynamique.

Vous pouvez soit intégrer React à votre site web en passant par l’API React, soit développer l’intégralité de votre site web en React et en employant le format de composant JSX. Le format JSX est une extension de la syntaxe JavaScript pour rendre plus simple l’usage de l’HTML dans vos composants.

2. Premiers pas

Pour commencer, vous devez disposer de Node.js (nous avons déjà vu l’installation qui ne pose aucune difficulté). Une fois installé, il faut vous positionner à la racine de votre projet web puis saisir en ligne de commande :

npx create-next-app@latest

Cette commande ne met à jour que votre projet pour que vous puissiez bénéficier du framework Next.js (https://nextjs.org/), ce dernier va se charger de gérer le format JSX de telle sorte que votre navigateur puisse l’afficher.

Par défaut, un fichier package.json est nécessaire à la racine de votre projet. À l’intérieur, vous allez trouver quelque chose comme :

{  
  "name": "exemples",  
  "version": "0.1.0",  
  "private": true,  
  "scripts": { 
    "dev": "next dev",  
    "build": "next build",  
    "start": "next start",  
    "lint": "next lint"  
  },  
  "dependencies": {  
    "react": "19.1.0",  
    "react-dom": "19.1.0",  
    "next": "15.4.5"  
  }  
}

C’est la partie « dev » qui va nous intéresser pour tester nos JSX. Si vous exécutez la ligne de commande suivante à la racine de votre projet...