Un guide pratique du frontend pour les développeurs backend
- 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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" class="lazy" 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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" class="lazy" 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
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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" class="lazy" 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
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1670
14
1428
52
1329
25
1276
29
1256
24
Python vs JavaScript: la courbe d'apprentissage et la facilité d'utilisation
Apr 16, 2025 am 12:12 AM
Python convient plus aux débutants, avec une courbe d'apprentissage en douceur et une syntaxe concise; JavaScript convient au développement frontal, avec une courbe d'apprentissage abrupte et une syntaxe flexible. 1. La syntaxe Python est intuitive et adaptée à la science des données et au développement back-end. 2. JavaScript est flexible et largement utilisé dans la programmation frontale et côté serveur.
De C / C à JavaScript: comment tout cela fonctionne
Apr 14, 2025 am 12:05 AM
Le passage de C / C à JavaScript nécessite de s'adapter à la frappe dynamique, à la collecte des ordures et à la programmation asynchrone. 1) C / C est un langage dactylographié statiquement qui nécessite une gestion manuelle de la mémoire, tandis que JavaScript est dynamiquement typé et que la collecte des déchets est automatiquement traitée. 2) C / C doit être compilé en code machine, tandis que JavaScript est une langue interprétée. 3) JavaScript introduit des concepts tels que les fermetures, les chaînes de prototypes et la promesse, ce qui améliore la flexibilité et les capacités de programmation asynchrones.
Javascript et le web: fonctionnalité de base et cas d'utilisation
Apr 18, 2025 am 12:19 AM
Les principales utilisations de JavaScript dans le développement Web incluent l'interaction client, la vérification du formulaire et la communication asynchrone. 1) Mise à jour du contenu dynamique et interaction utilisateur via les opérations DOM; 2) La vérification du client est effectuée avant que l'utilisateur ne soumette les données pour améliorer l'expérience utilisateur; 3) La communication de rafraîchissement avec le serveur est réalisée via la technologie AJAX.
JavaScript en action: Exemples et projets du monde réel
Apr 19, 2025 am 12:13 AM
L'application de JavaScript dans le monde réel comprend un développement frontal et back-end. 1) Afficher les applications frontales en créant une application de liste TODO, impliquant les opérations DOM et le traitement des événements. 2) Construisez RestulAPI via Node.js et Express pour démontrer les applications back-end.
Comprendre le moteur JavaScript: détails de l'implémentation
Apr 17, 2025 am 12:05 AM
Comprendre le fonctionnement du moteur JavaScript en interne est important pour les développeurs car il aide à écrire du code plus efficace et à comprendre les goulots d'étranglement des performances et les stratégies d'optimisation. 1) Le flux de travail du moteur comprend trois étapes: analyse, compilation et exécution; 2) Pendant le processus d'exécution, le moteur effectuera une optimisation dynamique, comme le cache en ligne et les classes cachées; 3) Les meilleures pratiques comprennent l'évitement des variables globales, l'optimisation des boucles, l'utilisation de const et de locations et d'éviter une utilisation excessive des fermetures.
Python vs JavaScript: communauté, bibliothèques et ressources
Apr 15, 2025 am 12:16 AM
Python et JavaScript ont leurs propres avantages et inconvénients en termes de communauté, de bibliothèques et de ressources. 1) La communauté Python est amicale et adaptée aux débutants, mais les ressources de développement frontal ne sont pas aussi riches que JavaScript. 2) Python est puissant dans les bibliothèques de science des données et d'apprentissage automatique, tandis que JavaScript est meilleur dans les bibliothèques et les cadres de développement frontaux. 3) Les deux ont des ressources d'apprentissage riches, mais Python convient pour commencer par des documents officiels, tandis que JavaScript est meilleur avec MDNWEBDOCS. Le choix doit être basé sur les besoins du projet et les intérêts personnels.
Python vs JavaScript: environnements et outils de développement
Apr 26, 2025 am 12:09 AM
Les choix de Python et JavaScript dans les environnements de développement sont importants. 1) L'environnement de développement de Python comprend Pycharm, Jupyternotebook et Anaconda, qui conviennent à la science des données et au prototypage rapide. 2) L'environnement de développement de JavaScript comprend Node.js, VScode et WebPack, qui conviennent au développement frontal et back-end. Le choix des bons outils en fonction des besoins du projet peut améliorer l'efficacité du développement et le taux de réussite du projet.
Le rôle de C / C dans les interprètes et compilateurs JavaScript
Apr 20, 2025 am 12:01 AM
C et C jouent un rôle essentiel dans le moteur JavaScript, principalement utilisé pour implémenter des interprètes et des compilateurs JIT. 1) C est utilisé pour analyser le code source JavaScript et générer une arborescence de syntaxe abstraite. 2) C est responsable de la génération et de l'exécution de bytecode. 3) C met en œuvre le compilateur JIT, optimise et compile le code de point chaud à l'exécution et améliore considérablement l'efficacité d'exécution de JavaScript.
