Svelte: A Rising Star in the Frontend Framework Landscape

Svelte has rapidly gained popularity, surpassing the status of "just another frontend framework." Its accolades include "Breakthrough of the Year" (State of JS 2019), top satisfaction rating (State of JS 2020), and the title of most loved web framework (Stack Overflow 2021). This success stems from its compelling blend of small bundle sizes, excellent performance, and user-friendly design. Beyond its core strengths, Svelte offers valuable features such as built-in state management, transitions, and animations. This tutorial explores how Svelte achieves this efficiency. Subsequent tutorials will delve deeper into building applications with Svelte.

The Genesis of Svelte

While Svelte's mainstream adoption began in the early 2020s, its origins trace back to late 2016 with its first GitHub commit. Created by Rich Harris (also known for the Rollup bundler), Svelte emerged from his experiences as a graphics editor at The Guardian. His need for a tool that simplified the creation of interactive website visualizations without sacrificing performance or bundle size, while remaining accessible to less technically proficient colleagues, led to Svelte's development.

Initially gaining a small, dedicated following within the open-source community, Svelte's breakthrough arrived with the release of version 3 in April 2019. This version, a complete rewrite emphasizing developer experience and ease of use, propelled Svelte into the spotlight. Its popularity has since soared, attracting more maintainers and leading to Rich Harris joining Vercel to focus on Svelte full-time. For a comprehensive comparison of Svelte with React and Vue, see "Svelte 3: A Radical Compiler-based JavaScript Framework."

Building a Simple Book List Application

Let's build a simple book list application to illustrate Svelte's capabilities. The final application will resemble the image below:

We'll start with the official Svelte project template (alternatives include Vite-based templates or SvelteKit for more complex applications). After installing the necessary packages (npm install), we'll modify App.svelte to create the basic HTML structure:

<h4>Add Book</h4>
<input type="text">
<h4>My Books</h4>
<ul>
  <li>A book</li>
</ul>

This code, written directly at the top level, leverages Svelte's HTML-superset syntax.

Next, we'll add a static book list and a loop to render it:

<h4>Add Book</h4>
<input type="text">
<h4>My Books</h4>
<ul>
  <li>A book</li>
</ul>

The </pre> <label> Add Book <input type="text" bind:value={newBook} on:keydown={addBook}> </label> <h4 id="My-Books">My Books</h4> <ul> {#each books as book} <li>{book}</li> {/each} </ul>

bind:value={newBook}newBook creates two-way binding between the input and the on:keydown={addBook} variable. addBook adds an event listener; the books function updates the

array when Enter is pressed. Svelte's reactivity automatically rerenders the component.

Svelte's Compilation Process

.svelteSvelte's performance and small bundle sizes are due to its compiler nature. It preprocesses the

files, transforming them into optimized JavaScript that surgically updates the DOM. This eliminates the need for a large runtime and allows for efficient rerenders.

Adding Styling and Transitions

Let's enhance the UI with CSS:

<??>

<label>
  Add Book
</label>
<h4>My Books</h4>
<ul>
  {#each books as book}
    <li>{book}</li>
  {/each}
</ul>

Svelte scopes styles by default. Finally, let's add a fade-in transition:

<style>
  input {
    padding: 5px 10px;
  }
  li {
    list-style: none;
  }
  ul {
    padding: 5px 0;
  }
</style>

The complete code, including styling and transition, is shown below:

<??>

<ul>
  {#each books as book}
    <li transition:fade>{book}</li>
  {/each}
</ul>

This results in a functional and visually appealing book list application. (Image of the final application would go here:

)

Architectural Considerations and Future Enhancements

This tutorial provides a basic introduction. Larger applications require state management, multiple components, and component interaction mechanisms. Svelte offers solutions for these, which will be explored in subsequent tutorials.

Is Svelte Right for Your Next Project?

Svelte's active maintenance, robust tooling, stable features, growing ecosystem, and the availability of SvelteKit make it a strong contender for various projects. The community is thriving, and the framework shows no signs of slowing down.

Next Steps

This is the first part of a six-part series. Future parts will cover template syntax, reactive statements, stores, component interaction, and testing. The complete series is also available on Amazon.<script> let books = ['Learning Svelte', 'The Zen of Cooking Tea']; </script>

The above is the detailed content of Build a Reading List with Svelte. For more information, please follow other related articles on the PHP Chinese website!