Se familiariser avec Svelte, le nouveau cadre du bloc

Pendant des années, Vue, Angular et React ont dominé le paysage du cadre des composants frontaux. Alors que Google et Facebook proposent leurs propres solutions, l'éthique open source d'un cadre comme Vue (avec ses multiples sponsors, évitant le contrôle à une seule entreprise) a un attrait important. Entrez Svelte, une étoile montante partageant l'engagement de Vue envers une licence ouverte du MIT.

Précédemment présenté sur CSS-Tricks (notamment l'article perspicace d'Ollie Williams sur son CSS basé sur les composants), Svelte mérite un examen plus approfondi. Cet article explore ses caractéristiques uniques, sa différenciation des autres cadres et sa mise en œuvre pratique.

L'approche distinctive de Svelte

"Svelte a été la bibliothèque de composants JavaScript la plus facile à apprendre et à utiliser de manière productive."

- Jeff Delaney, Liste de Todo en temps réel svelte avec Firebase

Svelte, comme React, Angular et Vue, est une bibliothèque de composants JavaScript. Cependant, ses différenciateurs principaux sont:

1. Compilation à l'avance: Svelte agit en tant que compilateur, transformant son code HTML, JavaScript et CSS hybride en fichiers optimisés JavaScript, HTML et CSS. Cette pré-compilation, analogue à C # à Bytecode ou TypeScript à JavaScript, mais englobant les trois langages, améliore la flexibilité et les performances côté client en passant le calcul de l'exécution à la construction du temps.

2. Aucun Dom virtuel: les cadres traditionnels utilisent un DOM virtuel, une copie résidente de la mémoire du DOM, pour des mises à jour efficaces. Svelte contourne cela, manipulant directement le vrai Dom. Alors que les DOM virtuels offrent une optimisation, l'approche de Svelte, avec ses calculs de temps de construction, applique chirurgicalement des changements, conduisant à des gains de performance potentiels, en particulier dans des applications plus grandes.

3. Coupe CSS intégrée: le style intégré de Svelte évite les complexités des solutions CSS-in-JS. Il isole le composant CSS, le sortie pour séparer les fichiers pendant le processus de construction, favorisant des styles propres et encapsulés. Bien que les plugins existent pour les préprocesseurs comme SASS et moins, la manipulation CSS native de Svelte est remarquablement efficace et simple.

Svelte vs d'autres cadres

L'architecture unique de Svelte a un impact sur ses performances et ses développeurs. Bien qu'il existe de nombreuses comparaisons, sa vitesse est un avantage significatif. Cependant, la vitesse n'est pas la seule métrique. Le tableau suivant fournit une comparaison plus large:

[Le tableau comparant Svelte à d'autres cadres irait ici, sur la base de la description du tableau du texte d'origine.] La position forte de Svelte, malgré sa jeunesse relative et sa petite communauté, est notable. Une satisfaction élevée des développeurs contraste avec les baisses récentes observées dans les "grands" cadres. Sa nature open source est un atout considérable.

Un exemple de svelte pratique: observateur d'intersection

Pour illustrer la praticité de Svelte, mettons en œuvre un observateur d'intersection, une technique d'amélioration des performances souvent recommandée pour éviter les problèmes d'événements de défilement passifs. Nous tirons parti de Svelte REP pour un exemple simplifié.

Après avoir mis en place un projet Svelte de base (détails omis pour Brevity), créez IntersectionObserver.svelte dans un dossier src/components avec le code suivant:

 import {onMount} de 'svelte';
Export Let une fois = false;
Exporter LET TOP = 0;
Exporter Let Let Bottom = 0;
Export Let Left = 0;
Exporter LET REGER = 0;
Soit intersecting = false;
Laissez le conteneur;

onMount (() => {
    if (typeof intersectionObserver! == 'Undefined') {
      const rootmargin = `$ {inférieur} px $ {gauche} px $ {top} px $ {droit} px`;
      const Observer = new intersectionObserver (entrées => {
        intersection = entrées [0] .IsIntersection;
        if (intersection && une fois) {
          Observer.unobserve (conteneur);
        }
        }, {
          rootmargin
      });
        Observer.Observe (conteneur);
        return () => Observer.unObServe (conteneur);
  }

  Fonction Handler () {
    const bcr = contener.getBoundingClientRect ();
    intersection = (
      (bcr.bottom en bas)> 0 &&
      (Bcr.Right à droite)> 0 &&
      (bcr.top - en haut) <window.innerheight gauche if une fois window.removeeventlistener gestionnaire window.addeventlistener handler return> window.reMoveEventListener ('Scroll', Handler);
  });

  div {
    Largeur: 100%;
    hauteur: 100%;
  }
<div bind:this="{container}">
  <slot></slot>
</div></window.innerheight>

Dans votre fichier App.svelte principal, importez et utilisez le composant:

 Import IntersectionObserver depuis "./components/inthersectionobserver.svelte";

<intersectionobserver let:intersecting top="{400}">
  {#if intersection}
    <div class="content">Ce message montre lors de l'intersection.</div>
  {:autre}
    <div class="content">Ce message affiche le contraire.</div>
  {/si}
</intersectionobserver>

<style>
  /* ...styles as in original article... */
</style>

Cela montre comment IntersectionObserver agit comme un wrapper, déclenchant des actions basées sur l'intersection des éléments. La fonction onMount garantit l'exécution de code spécifique au navigateur. L'ajout de CSS (comme indiqué dans l'article d'origine) complète l'exemple.

Conclusion

Svelte offre une alternative convaincante aux cadres établis. Ses performances, sa facilité d'utilisation et son approche propre en font un concurrent solide. Bien que sa petite communauté présente un défi potentiel, sa maturité et sa nature open source atténuent les risques. L'expérimentation avec des projets non critiques est recommandée avant l'adoption à grande échelle.

L'écosystème Svelte comprend Sapeur (pour les applications Web complètes) et le natif de Svelte (pour les applications mobiles), élargissant ses capacités. Considérez Svelte pour ses avantages de performance et sa conception adaptée aux développeurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!