Getting Acquainted With Svelte, the New Framework on the Block

For years, Vue, Angular, and React dominated the front-end component framework landscape. While Google and Facebook offer their own solutions, the open-source ethos of a framework like Vue (with its multiple sponsors, avoiding single-corporation control) holds significant appeal. Enter Svelte, a rising star sharing Vue's commitment to an open MIT license.

Previously featured on CSS-Tricks (notably Ollie Williams' insightful article on its component-based CSS), Svelte warrants a closer examination. This article explores its unique features, differentiation from other frameworks, and practical implementation.

Svelte's Distinctive Approach

"Svelte has been the easiest JavaScript component library to learn and use productively."

— Jeff Delaney, Svelte Realtime Todo List with Firebase

Svelte, like React, Angular, and Vue, is a JavaScript component library. However, its core differentiators are:

1. Ahead-of-Time Compilation: Svelte acts as a compiler, transforming its hybrid HTML, JavaScript, and CSS code into optimized JavaScript, HTML, and CSS files. This pre-compilation, analogous to C# to bytecode or TypeScript to JavaScript, but encompassing all three languages, enhances flexibility and client-side performance by shifting computation from runtime to build time.

2. No Virtual DOM: Traditional frameworks utilize a Virtual DOM, a memory-resident copy of the DOM, for efficient updates. Svelte bypasses this, directly manipulating the real DOM. While Virtual DOMs offer optimization, Svelte's approach, with its build-time calculations, surgically applies changes, leading to potential performance gains, especially in larger applications.

3. Built-in CSS Scoping: Svelte's integrated styling avoids the complexities of CSS-in-JS solutions. It isolates component CSS, outputting it to separate files during the build process, promoting clean, encapsulated styles. While plugins exist for preprocessors like Sass and Less, Svelte's native CSS handling is remarkably efficient and straightforward.

Svelte vs. Other Frameworks

Svelte's unique architecture impacts its performance and developer experience. While numerous comparisons exist, its speed is a significant advantage. However, speed isn't the sole metric. The following table provides a broader comparison:

[Table comparing Svelte to other frameworks would go here, based on the original text's table description.] Svelte's strong position, despite its relative youth and smaller community, is notable. High developer satisfaction contrasts with recent declines observed in the "big three" frameworks. Its open-source nature is a considerable asset.

A Practical Svelte Example: Intersection Observer

To illustrate Svelte's practicality, let's implement an Intersection Observer, a performance-enhancing technique often recommended for avoiding passive scroll event issues. We'll leverage Svelte's REPL for a simplified example.

After setting up a basic Svelte project (details omitted for brevity), create IntersectionObserver.svelte in a src/components folder with the following code:

import { onMount } from 'svelte';
export let once = false;
export let top = 0;
export let bottom = 0;
export let left = 0;
export let right = 0;
let intersecting = false;
let container;

onMount(() => {
    if (typeof IntersectionObserver !== 'undefined') {
      const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
      const observer = new IntersectionObserver(entries => {
        intersecting = entries[0].isIntersecting;
        if (intersecting && once) {
          observer.unobserve(container);
        }
        }, {
          rootMargin
      });
        observer.observe(container);
        return () => observer.unobserve(container);
  }

  function handler() {
    const bcr = container.getBoundingClientRect();
    intersecting = (
      (bcr.bottom   bottom) > 0 &&
      (bcr.right   right) > 0 &&
      (bcr.top - top)  window.removeEventListener('scroll', handler);
  });

  div {
    width: 100%;
    height: 100%;
  }
<div bind:this="{container}">
  <slot></slot>
</div>

In your main App.svelte file, import and use the component:

import IntersectionObserver from "./components/IntersectionObserver.svelte";

<intersectionobserver let:intersecting top="{400}">
  {#if intersecting}
    <div class="content">This message shows when intersecting.</div>
  {:else}
    <div class="content">This message shows otherwise.</div>
  {/if}
</intersectionobserver>

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

This demonstrates how IntersectionObserver acts as a wrapper, triggering actions based on element intersection. The onMount function ensures browser-specific code execution. Adding CSS (as shown in the original article) completes the example.

Conclusion

Svelte offers a compelling alternative to established frameworks. Its performance, ease of use, and clean approach make it a strong contender. While its smaller community presents a potential challenge, its maturity and open-source nature mitigate risks. Experimentation with non-critical projects is recommended before large-scale adoption.

The Svelte ecosystem includes Sapper (for full web applications) and Svelte Native (for mobile apps), expanding its capabilities. Consider Svelte for its performance advantages and developer-friendly design.

The above is the detailed content of Getting Acquainted With Svelte, the New Framework on the Block. For more information, please follow other related articles on the PHP Chinese website!