L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Syntaxe JSX et modèle dans les frameworks
JSX résout de nombreux problèmes dans les frameworks React. Découvrez comment cela se compare à la syntaxe des modèles pour divers frameworks.
TL;DR
JSX ne va nulle part et gagne actuellement de loin en tant que syntaxe de modèle par défaut. Il semble également que certains des plus gros problèmes de JSX ne seront jamais résolus. Cependant, React a simplement défini les solutions de contournement par défaut, et cela ne dérange pas beaucoup de gens. La syntaxe des modèles ne peut gagner que lorsque les frameworks qui les prennent en charge sont plus largement adoptés.
Récapitulatif de mon parcours
Perl
J’ai commencé mon parcours de développement de sites Web avec jQuery et Perl – oui, Perl. C’était avant PHP. Perl possède un répertoire de paquets en ligne appelé CPANun précurseur de npm. De nombreux forfaits, comme Boîte à outils de modèlescréez des modèles HTML qui sont lus par des fichiers Perl ou CGI, et j’ai préféré séparer mon code Perl principal de mon code HTML.
<!DOCTYPE html>
<html>
<head>
<title>[% title %]</title>
</head>
<body>
<h1>[% title %]</h1>
<p>[% message %]</p>
</body>
</html>
PHP
J’ai toujours détesté PHP, car vous mélangez HTML et un langage côté serveur. Pour la plupart des développeurs Perl, c’était dégoûtant. Mes modèles HTML et HTML doivent être dans un fichier HTML, mon JS dans un fichier JS et mon code serveur doit rester sur le serveur. Aujourd’hui, PHP ne me dérangerait pas si les environnements d’exécution du serveur JS n’étaient pas beaucoup plus simples.
<!DOCTYPE html>
<html>
<head>
<title><?php echo $title; ?></title>
</head>
<body>
<h1><?php echo $title; ?></h1>
<p><?php echo $message; ?></p>
</body>
</html>
Angulaire
J’ai commencé à utiliser Angular juste au moment de la sortie d’Angular 2. J’aime la séparation des préoccupations pour les modèles. En utilisant des composants autonomes, vous pouvez placer votre modèle et JS dans un seul fichier, mais la syntaxe doit encore être améliorée. Quoi qu’il en soit, JS et les modèles sont toujours des choses distinctes.
import { Component } from '@angular/core';
@Component({
selector: 'app-standalone-component',
template: `
<div>
<h1>{{ title }}</h1>
@if (message) {
<p>{{ message }}</p>
}
</div>
`,
standalone: true,
})
export class StandaloneComponent {
title="Hello World";
message="This is a message from a standalone Angular component!";
}
Svelte
Je construis principalement avec Svelte, qui est le framework interactif le plus simple. Il n’y a qu’un seul fichier, tout est séparé et il est extrêmement simple à utiliser.
<script lang="ts>
let title="Hello World";
let message="This is a message from a Svelte component!";
</script>
<div>
<h1>{title}</h1>
{#if message}
<p>{message}</p>
{/if}
</div>
Nuxt
Je construirais avec Vue et Nuxt si je n’utilisais pas Svelte. Par exemple, voici un composant Vue utilisant le dernier SFC <script setup> pour l’enregistrement des composants locaux. C’est aussi simple que Svelte.
<script setup lang="ts">
const title: string = 'Hello World';
const message: string = 'This is a message from a standalone Nuxt.js component!';
</script>
<template>
<div>
<h1>{{ title }}</h1>
<p v-if="message">{{ message }}</p>
</div>
</template>
J’ai également ajouté un conditionnel pour que vous puissiez voir à quel point c’est facile.
Entrez JSX
J’ai utilisé React pour la première fois lorsque les composants fonctionnels ont été publiés avec l’API Hooks vers la version 16. Fireship avait commencé à déplacer la majorité de ses vidéos d’Angular vers React. Jusque-là, j’ai toujours pensé que React était aussi laid qu’Ember. Next.js et Vercel ont fait exploser l’écosystème avec de nouvelles techniques de rendu côté serveur (SSR).
import { FC } from 'react';
interface GreetingProps {
name: string;
}
const GreetingComponent: FC<GreetingProps> = ({ name }) => {
return <h1>Hello, {name}!</h1>;
};
export default GreetingComponent;
Cadres JSX
JSX résout tellement de problèmes. En utilisant des enfants, vous pouvez transmettre des composants à l’intérieur des composants et vous n’avez pas besoin de générer une balise HTML pour chaque composant comme le fait Angular. Toutes les absurdités de classe sont ignorées et vous déclarez simplement des variables et renvoyez une chaîne JSX. Fait.
Cadres de réaction
- Suivant.js – Construit par Vercel pour les fonctionnalités côté serveur.
- Remix (routeur React) – Un framework fusionné à partir de deux pour les fonctionnalités côté serveur et le routage.
- Préagir – Techniquement, pas React, mais compatible avec les composants React pour une amélioration des performances et un boîtier plus fin.
SolidJS
SolidJS tente de résoudre les problèmes de React, tout en restant fidèle à JSX. Il s’est débarrassé de la surcharge que le code principal de React inclut et utilise Signaux et Attente par défaut. Cependant, comme nous le verrons, il ajoute également de nouveaux composants officiels pour résoudre les problèmes de syntaxe JSX plus intuitifs.
Rapide
Créé par l’un des principaux ingénieurs d’Angular, Qwik gère l’interactivité SSR avec possibilité de reprise et l’interactivité avec les signaux. Je pense que JSX a été choisi en raison de la complexité des classes angulaires. JSX est, de par sa conception, simple.
Problèmes avec JSX
1. Conditions et boucles
Je n’aime pas JSX à cause de la façon dont vous êtes censé gérer conditions et boucles.
// conditional
return (
<li className="item">
{name} {isPacked && '✔'}
</li>
);
...
// loop
const listItems = chemists.map(person => { // Curly brace
return <li>...</li>;
});
Vous voyez ces étranges && conditionnels, opérateurs ternaires ou maps pour gérer les boucles de base. Ce n’est pas un langage de programmation de bas niveau, je préfère les opérateurs ternaires en dehors de mon code de modèle, et les cartes sont en réalité plus lentes que les boucles for.
2. Retourner un article
Vous ne pouvez renvoyer qu’un seul élément JSX, sinon vous devez les regrouper manuellement et combiner les chaînes. Vous pouvez voir à quel point cela pourrait devenir complexe en utilisant des conditions.
import { FC } from 'react';
const CombinedComponent: FC = () => {
const elementOne = <h1>Hello, World!</h1>;
const elementTwo = <p>This is a paragraph element.</p>;
return (
<div>
<div>{elementOne}</div>
<div>{elementTwo}</div>
</div>
);
};
export default CombinedComponent;
3. Composants d’assistance
C’est aussi pourquoi les mini-composants sont si répandus ; ils résolvent plusieurs problèmes simultanément. Je n’aime pas avoir plus d’un composant dans un fichier, mais je suis le Principe de responsabilité unique-vos blocs de code doivent être séparés en petits blocs dans un seul but.
const Component1 = () => (
<div>
<h1>Hello, World!</h1>
<p>This is the first JSX component.</p>
</div>
);
const Component2 = () => (
<div>
<h2>Welcome to the App</h2>
<p>This is the second JSX component.</p>
</div>
);
const CombinedComponent = () => (
<div>
<Component1 />
<Component2 />
</div>
);
return default CombinedComponent;
Bien qu’ils constituent certainement un plus, ces composants utilitaires peuvent ne pas être nécessaires dans les frameworks de modèles.
Solution SolidJS
Par défaut, SolidJS est livré avec des composants intégrés pour résoudre ce problème.
Conditions
import { Show } from "solid-js"
<Show when={data.loading}>
<div>Loading...</div>
<Show when={data.error}>
<div>Error: {data.error}</div>
</Show>
</Show>
Cela a l’air sympa. Cependant, en pratique, vous obtenez du code qui ça ressemble à ça:
const [user] = useUser();
return (
<Show when={user.data}>
{(user) => (
<div class="flex flex-col gap-3 items-center">
...
</div>
)}
</Show>
Boucles
Les boucles sont tout aussi funky.
<For each={data()}>
{(item, index) => (
<li
style={{
color: index() % 2 === 0 ? "red" : "blue"
}}
>
{item.name}
</li>
)}
</For>
Après avoir construit mon Application SolidJS Firebasej’ai compris pourquoi. Vous parcourez généralement des données interactives ou des données créées par un signal, ce qui nécessite de transmettre une instance de l’objet au composant enfant. SolidJS ne compile pas de code comme le fait Svelte.
Flux Qwik
J’ai aidé à créer une version communautaire de Qwik pour le package Qwikifiers appelée Flux Qwik. Bien que Qwik le reconnaisse officiellement, il n’a pas gagné du terrain ; Je ne pense pas que l’équipe Qwik l’ait sur sa liste de priorités. Vous pouvez lire les décisions dans le Conditions intégrées poste. PR bienvenus !
Version de réaction
Vous pouvez facilement créer vos propres versions de React. Cependant, lorsque vous essayez de localiser la détection de modifications, cela peut ne pas fonctionner comme prévu dans toutes les situations. Maintenant que React est compilé, cela peut être corrigé.
Conditions
import { FC, ReactNode } from 'react';
interface ShowProps {
when: boolean;
children: ReactNode;
}
const Show: FC<ShowProps> = ({ when, children }) => {
return when ? <>{children}</> : null;
};
export default Show;
Boucles
import { FC, ReactNode, Fragment} from 'react';
interface ForProps<T> {
each: T[];
children: (item: T, index: number) => ReactNode;
}
const For = <T,>({ each, children }: ForProps<T>) => {
return (
<>
{each.map((item, index) => (
<Fragment key={index}>
{children(item, index)}
</Fragment>
))}
</>
);
};
export default For;
// Usage is just as complex...
return (
<div>
<For each={items}>
{(item, index) => (
<p key={index}>{item}</p>
)}
</For>
</div>
);
📝 Ce sont des idées de base et peuvent devoir être modifiées pour votre framework React spécifique.
Gagnant : JSX
Parce que React domine la communauté du développement Web, les développeurs Web ont doublé leur mise sur JSX. C’est une norme que vous devez utiliser map et && dans votre modèle pour gérer le rendu. Il est accepté dans la communauté React élargie et ne semble être sur le radar de personne à corriger.
Pourquoi ne pouvons-nous pas résoudre ce problème avec JSX2ou au moins avoir des composants conditionnels et de boucle intégrés dans tous les frameworks JSX ?
Perdant : modèles
React connaît une croissance exponentielle plus rapide que les autres frameworks. En attendant un changement de paradigme nécessitant davantage d’adoption et de plugins tiers, vous feriez mieux de vous y habituer. Quoi qu’il en soit, tout se compile simplement en JavaScript.
Mais c’est mon avis, comme le futur n’est pas encore écrit. Rien ne domine pour toujours.
Source link