recherche

Maison >interface Web >js tutoriel >Un guide pratique du frontend pour les développeurs backend

Un guide pratique du frontend pour les développeurs backend

Patricia Arquette
Patricia Arquetteoriginal
2025-01-03 11:42:40401parcourir
  • Présentation
  • Des bases absolues
  • Côté client vs côté serveur
  • Composants
  • Bibliothèques frontales
  • Conclusion

Introduction

Je suis un développeur backend... le genre habituel... le genre qui est bon en mathématiques mais mauvais en esthétique. Toute tentative de conception que j’ai faite aboutissait toujours à des déchets génériques ennuyeux. J'ai essayé d'utiliser des dizaines d'outils, mais le résultat final aurait toujours l'air d'avoir été écrit en Microsoft FrontPage 2003

J'étais suffisamment gêné pour voir ça, alors j'ai renoncé à essayer. Je vais vous écrire un document, mais seulement si vous me donnez un fichier de style $LaTeX$ prêt. J'écrirai un blog, mais uniquement en Markdown et je laisserai quelqu'un d'autre se soucier de l'attrait visuel. Je préparerai une présentation du DevFest, mais seulement si les organisateurs fournissent un modèle PowerPoint. Je n'essaierai jamais de concevoir quoi que ce soit, que ce soit un bouton ou un formulaire de connexion.

Et pourtant, je ne peux pas simplement me raser la tête et me retirer dans le sanctuaire de l'API JSON backend --- j'ai toujours besoin d'écrire du frontend pour mes projets favoris et de créer des tableaux de bord à usage interne. Mais essayer d'entrer dans le monde du frontend est incroyablement pénible : des dizaines de frameworks, de bibliothèques, de philosophies. J'entends les mots React ou Angular ou Node depuis 8 ans mais j'avais trop peur pour essayer de leur donner un sens. Apprendre le C ou le Leetcode a été plus simple que cela.

Néanmoins, je me suis forcé à l'apprendre, et maintenant je veux être un Prometheus (je ne sais pas s'il n'existe pas déjà un framework JS portant ce nom) et apporter ces connaissances à mes gens --- le backend développeurs.

En bonus, j'ai inclus la recommandation ultime sur le framework frontend à choisir. J'ai moi-même eu une paralysie décisionnelle pendant très longtemps et cela vous aidera à la surmonter et à commencer à construire des choses sans trop y réfléchir.

Des bases absolues

Commençons par les bases absolues pour nous assurer que nous sommes sur la même longueur d'onde avant de discuter des frameworks. Vous pouvez ignorer cette section si vous le souhaitez.

Page Web minimale

Une page Web minimale se compose d'un fichier texte avec l'extension .html et de balises pour le contenu :

<html>
    <div>Hello World!</div>
</html>

Pour ajouter une mise en forme, vous pouvez soit ajouter un attribut de style :

<html>
    <div>



<p>or if you have a lot of formatting, add id to your content and refer to it from <style> tag. The style is formatted using CSS language which looks like an HTML element followed by JSON related to it:<br>


<pre class="brush:php;toolbar:false"><html>
    <div>



<p>This will create static pages that do not change and do not react to any events. To add some interactivity, like checking if you left a form field empty or entered a valid email, you will need JavaScript.</p>

<h3>
  
  
  Running JavaScript
</h3>

<p>Before using any programming language you must first install it on your computer. For C/C++ you need to install a compiler like GCC or Clang, for Python you need to install a CPython interpreter.</p>

<p>To run JavaScript you only need a web browser --- all modern web browsers can run JS code. It is as simple as opening a web browser and going to pressing F12. This will open a JS console:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" alt="A no-nonsense guide to frontend for backend developers" /></p>

<p>You can also create a text file with extension .html  and put a <script> tag on it, open this file in browser, and the outcome will be displayed if you press F12:<br>


<pre class="brush:php;toolbar:false"><!-- myfile.html -->
<html>
    <script>
        // write a JS code here
        console.log('Hello World');
    </script>
</html>

Cependant, pour des raisons de sécurité, la console du navigateur n'a pas accès à votre système de fichiers et ne dispose pas d'autres fonctionnalités qui permettraient d'utiliser JS pour, au moins, obtenir les fonctionnalités d'autres langages de script comme Python ou Ruby. Il existe donc une deuxième façon d'exécuter du code JS sur votre ordinateur : en installant Node.js. Il s'agit essentiellement d'un interpréteur JS qui peut faire des choses comme lire et écrire des fichiers :

//$ node
//Welcome to Node.js v23.3.0.
//Type ".help" for more information.
> console.log('Creating a new directory');
> fs.mkdirSync('new_dir'); // access filesystem using fs

Avec Node.js, vous pouvez exécuter du code JS sur le serveur ou dans votre conteneur Docker sans avoir à installer de navigateur Web. Nous verrons plus bas que cela est très utile.

Pile classique

En combinant les sections ci-dessus, nous pouvons créer une page Web en utilisant la configuration classique HTML CSS JS.

Ils peuvent être combinés dans un seul fichier .html comportant 3 sections : le contenu lui-même, les styles et les scripts :

<html>
    <div>Hello World!</div>
</html>

scripts.js

<html>
    <div>



<p>or if you have a lot of formatting, add id to your content and refer to it from <style> tag. The style is formatted using CSS language which looks like an HTML element followed by JSON related to it:<br>


<pre class="brush:php;toolbar:false"><html>
    <div>



<p>This will create static pages that do not change and do not react to any events. To add some interactivity, like checking if you left a form field empty or entered a valid email, you will need JavaScript.</p>

<h3>
  
  
  Running JavaScript
</h3>

<p>Before using any programming language you must first install it on your computer. For C/C++ you need to install a compiler like GCC or Clang, for Python you need to install a CPython interpreter.</p>

<p>To run JavaScript you only need a web browser --- all modern web browsers can run JS code. It is as simple as opening a web browser and going to pressing F12. This will open a JS console:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" alt="A no-nonsense guide to frontend for backend developers" /></p>

<p>You can also create a text file with extension .html  and put a <script> tag on it, open this file in browser, and the outcome will be displayed if you press F12:<br>


<pre class="brush:php;toolbar:false"><!-- myfile.html -->
<html>
    <script>
        // write a JS code here
        console.log('Hello World');
    </script>
</html>

Le plus gros problème avec cette configuration est que si vous regardez l'élément HTML, par exemple le , vous ne pouvez pas savoir quel style il a et quels scripts l'écoutent à moins que vous ne regardiez les deux autres fichiers. . De même, si vous regardez le fichier .js, vous voyez une fonction sayHelloWorld() mais vous ne savez pas si elle est nécessaire ou non, ou si un élément l'appelle ou non, sans regarder le fichier .html. Cela va à l’encontre du principe dit de Localité du comportement.

Quoi qu'il en soit, cette configuration est utilisée sur le Web depuis plusieurs décennies.

Côté client ou côté serveur

Super ! Nous avons couvert les bases. Parlons maintenant du principal dilemme qui sous-tend toutes les discussions concernant le choix d'un framework frontend, et l'architecture de votre application en général. Avant de commencer, clarifions un peu la terminologie : côté client désigne le navigateur ou une application dans laquelle les utilisateurs consomment votre contenu, et côté serveur est généralement le serveur backend qui stocke le informations de connexion, a accès à la base de données et sert globalement de colonne vertébrale à l'ensemble de l'application. Nous sommes maintenant prêts à approfondir.

Génération HTML classique

Dans toute application Web non triviale affichant tout type de données, nous aurons besoin d'un moyen de générer automatiquement des scripts HTML. Sinon, chaque fois que les données seront mises à jour, quelqu'un devra mettre à jour manuellement les balises HTML.

Étant donné que HTML est un simple fichier texte, il peut être facilement créé par n'importe quel langage de script sous forme de chaîne. Il existe de nombreuses bibliothèques qui font cela. Par exemple, avec la bibliothèque Jinja2, nous pouvons écrire tous les éléments d'une liste mylist = [1,2,3,4,5] dans les lignes du tableau en utilisant un langage qui ressemble à Python :

//$ node
//Welcome to Node.js v23.3.0.
//Type ".help" for more information.
> console.log('Creating a new directory');
> fs.mkdirSync('new_dir'); // access filesystem using fs

Bien sûr, le navigateur ne comprendrait pas cela --- vous devrez rendre ce script Jinja2 en HTML réel en exécutant des commandes spéciales en Python, qui restitueront un fichier .html :

<html>
    <!-- page HTML content here -->
    <div>



<p>You can see that we have a button that triggers a function sayHelloWorld(), which is defined inside  <script> tags and it has font size of 40pt, which is defined inside <style> tags.</p>

<p>Also note that the comment symbols are different in all 3 sections:</p>
  • inside pure HTML it is
  • inside CSS it is /* */
  • inside JS it is //.

This shows that the browser understands that these are 3 different languages. So, the usual practice is not to clutter .html file too much and separate it into 3 files and call styles and scripts by file path:

content.html

<html>
    <div>



<p><strong>styles.css</strong><br>
</p>

<pre class="brush:php;toolbar:false">#mytext {color:red; font-size:20pt}
button {font-size: 40pt}

Cette fonctionnalité est si cruciale qu'elle porte même un nom spécial --- template. Je tiens à souligner une chose : une telle génération HTML à partir d'un modèle se produit sur le serveur dans un langage de votre choix (Python/Ruby/Java/C#), généralement un langage dans lequel votre code backend est écrit. Les navigateurs ne comprennent pas ces langages de manière native. --- ils ne comprennent que JS, nous leur envoyons donc un fichier HTML pré-rendu. Cela deviendra important plus tard.

API JSON ou HTML

Dans la section précédente, nous avons vu comment le backend peut générer des scripts HTML et les remplir avec les données de la base de données et d'autres informations. Par exemple, si l'utilisateur appuie sur le bouton J'aime sur une publication sur un réseau social, le backend doit mettre à jour le contenu de la page Messages aimés pour y inclure cette nouvelle publication. Cela peut être fait de deux manières :

1) Backend a un modèle HTML prêt avec un script Jinja2 et le restitue avec le dernier résultat de requête de la base de données :

<html>
    <div>Hello World!</div>
</html>

Ici, le HTML rendu est envoyé directement au frontend avec les styles CSS et les scripts JS. Le navigateur affiche simplement ce que le backend a déjà préparé et n'est pas conscient des types de données ni de la logique de la page.

2) Le backend envoie le JSON qui spécifie le résultat de la requête de la table like_posts de la base de données dans un format que le navigateur comprendrait :

<html>
    <div>



<p>or if you have a lot of formatting, add id to your content and refer to it from <style> tag. The style is formatted using CSS language which looks like an HTML element followed by JSON related to it:<br>


<pre class="brush:php;toolbar:false"><html>
    <div>



<p>This will create static pages that do not change and do not react to any events. To add some interactivity, like checking if you left a form field empty or entered a valid email, you will need JavaScript.</p>

<h3>
  
  
  Running JavaScript
</h3>

<p>Before using any programming language you must first install it on your computer. For C/C++ you need to install a compiler like GCC or Clang, for Python you need to install a CPython interpreter.</p>

<p>To run JavaScript you only need a web browser --- all modern web browsers can run JS code. It is as simple as opening a web browser and going to pressing F12. This will open a JS console:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" alt="A no-nonsense guide to frontend for backend developers" /></p>

<p>You can also create a text file with extension .html  and put a <script> tag on it, open this file in browser, and the outcome will be displayed if you press F12:<br>


<pre class="brush:php;toolbar:false"><!-- myfile.html -->
<html>
    <script>
        // write a JS code here
        console.log('Hello World');
    </script>
</html>

Le navigateur exécute des fonctions JS spéciales qui demandent un tel JSON, et lorsqu'ils le reçoivent, ils en extraient des données et génèrent du HTML à partir de celui-ci sur le navigateur lui-même :

//$ node
//Welcome to Node.js v23.3.0.
//Type ".help" for more information.
> console.log('Creating a new directory');
> fs.mkdirSync('new_dir'); // access filesystem using fs

L'option 2 est populaire pour une raison quelconque, même si elle est plus compliquée. Dans cette configuration, vous exposez uniquement le port frontend au client, et il servira l'application HTML JS statique sans avoir besoin du backend. Et ce n’est que lorsqu’il a besoin de récupérer des données du backend que le frontend se connectera au backend lui-même, supprimant ainsi cette fonctionnalité du navigateur. Bien entendu, pour ce faire, le frontend aura désormais besoin de son propre routeur. Fondamentalement, il s'agit d'un frontend qui essaie de faire ce que le backend devrait faire.

Composants

Jusqu'à présent, nous avons couvert les bases de la façon dont le code frontend fonctionnel peut être écrit et où il se trouve. Nous avons vu comment le HTML peut être généré automatiquement mais, jusqu'à présent, nous avons supposé que la partie JS était écrite manuellement. Ce n’est très souvent pas le cas dans le développement frontend réel. L'écriture manuelle de scripts JS est fastidieuse et la structure de votre code devient très compliquée très rapidement. De plus, si vous devez réutiliser des scripts, vous devrez les copier et les coller à l’ancienne. Ainsi, depuis le tout début, les développeurs ont utilisé certaines sortes de bibliothèques pour rendre le développement JS plus facile et plus structuré.

JQuery

Au début, utiliser Vanilla JS pour rechercher et modifier des éléments ou pour envoyer des requêtes AJAX au serveur était très fastidieux. Ainsi, de nombreux développeurs ont utilisé JQuery, qui était un sucre syntaxique soigné au-dessus du JS vanille. De nombreux modules complémentaires ont été écrits en JQuery, comme les Datatables (tableaux interactifs avec recherche, pagination, tri hors boîte), ou des horloges animées, ou des compteurs, etc. Utiliser de tels composants pré-écrits par quelqu'un d'autre était vraiment simple --- juste téléchargez le code et ajoutez-le à votre page HTML sous