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:

<code class="language-bash">npx degit sveltejs/template github-repository-searcher</code>

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

Building a Svelte Component:

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

1. <code><code>
{#each filteredRepos as repository}
• {repository.name} <code>{repository.url}
  {#each filteredRepos as repository}
  {repository.name} <code>{repository.url}

  <code>Search {/each} <code>App.svelte <code>repositories

  Import <code>Search into <code>App.svelte

  and use it conditionally based on the availability of <code>repositories

  .<code>$: <code>Search.svelte<code>filteredReposReactivity and Filtering:<code>userSearchTerm<code>repositories

  Svelte's reactivity is demonstrated by the <code>$:

  syntax in <code>Search.svelte. This ensures <code>filteredRepos updates whenever <code>userSearchTerm

  or <code>repositories

  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 <code>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></script>: Contains JavaScript logic.
• <code><style></style>: Houses scoped CSS (styles are confined to the component).
• 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 <code>App.svelte:

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

<code class="language-html"><main>
  <form on:submit>
    <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}"></search>
  {/if}
</main></code>

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

<code class="language-javascript">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();
}</code>

Creating and Using the Search Component:

Create <code>Search.svelte to display and filter repositories. This component accepts <code>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!