Svelte 3: A Radical Compiler-based JavaScript Framework

Svelte 3: A Fresh Approach to Front-End Development

This article explores Svelte 3, a unique front-end JavaScript framework that distinguishes itself through its compilation process. Unlike frameworks like React, which ship a large JavaScript bundle, Svelte compiles applications into significantly smaller, optimized JavaScript code. This optimization, achieved during the build process, results in faster and more efficient applications.

Svelte also offers a distinctive approach to data management and DOM manipulation. It directly updates the real DOM, eliminating the need for a virtual DOM, leading to improved performance. This, coupled with its intuitive component creation and built-in reactive states, makes development enjoyable and efficient. Even seasoned React or Vue developers will find Svelte worth exploring. Let's build a simple application to demonstrate its capabilities.

Key Advantages of Svelte:

• Optimized JavaScript: Svelte compiles to optimized JavaScript, reducing runtime size compared to frameworks like React.
• Direct DOM Manipulation: Svelte updates the real DOM directly, enhancing data management and DOM manipulation efficiency.
• Simplified Components: Component creation is streamlined with scoped CSS and integrated reactive states.
• Less Boilerplate: The compiler approach minimizes code and boilerplate, accelerating development.
• Intuitive Syntax: Reactivity and component communication are handled with minimal syntax.
• Lightweight and Efficient: Svelte offers a lightweight alternative to heavier frameworks like React and Vue.

Getting Started:

To avoid complexities of bundling and infrastructure, we'll follow the official Svelte tutorial. Ensure you have Node and Git installed. Then, execute:

npx degit sveltejs/template github-repository-searcher

This clones the Svelte template into the github-repository-searcher directory and sets up the necessary tooling. Afterward, navigate to the directory (cd github-repository-searcher) and run npm install to install dependencies. Finally, npm run dev starts the development server using Rollup. Access the application at http://localhost:5000.

Building a Svelte Component:

Svelte components reside in .svelte files. The template provides App.svelte, structured into three sections:

1. <code></li> <style> /* CSS for styling the list */ </style> <div class="search-wrapper"> <form class="search-form"> <input type="text" bind:value={userSearchTerm} placeholder="search for repositories" /> </form> <ul> {#each filteredRepos as repository} <li> <strong>{repository.name}</strong> <code>{repository.url} <style> /* CSS for styling the list */
   {#each filteredRepos as repository}
   {repository.name} {repository.url}<p> <code>Search {/each} App.svelte repositories

   Import Search</strong> into <code>App.svelte</p> and use it conditionally based on the availability of <code>repositories<p>.<code>$: Search.sveltefilteredReposReactivity and Filtering:userSearchTermrepositories

   Svelte's reactivity is demonstrated by the $:<p> syntax in <code>Search.svelte<strong>. This ensures <code>filteredRepos</strong> updates whenever <code>userSearchTerm</p> or <code>repositories<p> changes. Alternative approaches using functions or event listeners are also discussed, highlighting the benefits of Svelte's reactivity features.<code>npm run build

   Production Build:

   Run npm run build<p> to create a production-ready bundle. The resulting bundle size is typically small due to Svelte's compilation process.</p> <p><strong>Conclusion:</strong></p> <ul>Svelte offers a compelling alternative to traditional frameworks, emphasizing code efficiency and performance. Its intuitive syntax and built-in features simplify development, making it a strong contender for front-end development.<li> <strong></strong>Svelte FAQ (Concise Version):</li><li> <strong> </strong></li>What is Svelte?<li> A JavaScript framework compiling to optimized code, shifting work from runtime to build time.<strong> </strong></li>How does Svelte differ from React/Vue?<li> Svelte compiles to smaller, faster code; React/Vue do more work in the browser.<strong> </strong></li>How does Svelte handle components?<li> Components are written in an HTML/CSS/JS-like syntax and compiled to efficient JavaScript.<strong> </strong></li>Does Svelte use a virtual DOM?<li> No, it updates the real DOM directly.<strong> </strong></li>What is SvelteKit?</ul> A higher-level framework for building complete web applications on top of Svelte.<p> <img src="https://img.php.cn/upload/article/000/000/000/173932009210437.jpg" alt="Svelte 3: A Radical Compiler-based JavaScript Framework" /></p>Advantages of Svelte?<script>: Contains JavaScript logic.
2. <style>: Houses scoped CSS (styles are confined to the component).
3. HTML: Forms the component's output, incorporating Svelte's templating features.

To ensure efficient editing, install a Svelte extension for your code editor.

User Input and GitHub API Interaction:

Our application prompts the user for a GitHub username, then fetches their repositories using the GitHub API. We'll modify App.svelte:

1. Remove the export let name line from the <script> section and update src/main.js to remove unnecessary props.
2. Add a form to collect the username:

<main>
  <form on:submit|preventDefault={onSubmit}>
    <label for="username">Enter a GitHub username:</label>
    <input type="text" name="username" placeholder="jackfranklin" bind:value={usernameInputField} />
    <button type="submit">Load repositories</button>
  </form>
  {#if repositories}
    <Search repositories={repositories} />
  {/if}
</main>

3. Add the following JavaScript to handle form submission and API interaction:

let usernameInputField = "";
let repositories = undefined;

async function onSubmit() {
  const url = `https://api.github.com/users/${usernameInputField}/repos`;
  const response = await fetch(url);
  repositories = await response.json();
}

Creating and Using the Search Component:

Create Search.svelte to display and filter repositories. This component accepts repositories as a prop:

<code class="language-svelte"><script>
  export let repositories;
  let userSearchTerm = "";

  $: filteredRepos = repositories.filter((repo) =>
    repo.name.toLowerCase().includes(userSearchTerm.toLowerCase())
  );
</script> Smaller bundle sizes, faster performance, simple syntax, less boilerplate.

</code>

The above is the detailed content of Svelte 3: A Radical Compiler-based JavaScript Framework. For more information, please follow other related articles on the PHP Chinese website!