Skip to main content

Svelte Hello World

Introduction to Svelte​

Svelte is a modern JavaScript framework for building user interfaces. It is different from other frameworks like React, Vue, or Angular because it compiles your code during the build process, resulting in highly efficient and performant applications. Svelte focuses on simplicity, reactivity, and ease of use, making it a great choice for both beginners and experienced developers.

History of Svelte​

Svelte was created by Rich Harris and was first released in 2016. It gained popularity quickly due to its unique approach to building user interfaces. Over the years, Svelte has evolved and matured, and it is now widely used by developers around the world.

Features of Svelte​

Svelte offers several powerful features that make it stand out:

  • Reactivity: Svelte automatically updates the DOM when your data changes, eliminating the need for manual state management.
  • Component-based architecture: Svelte allows you to build reusable components that encapsulate both the UI and the behavior.
  • Efficient rendering: Svelte compiles your code into highly optimized JavaScript, resulting in smaller bundle sizes and faster load times.
  • No virtual DOM: Unlike traditional frameworks, Svelte does not rely on a virtual DOM, which leads to better performance.
  • Easy learning curve: Svelte has a gentle learning curve, making it easy to pick up for developers familiar with JavaScript and HTML.

Hello World Example​

Let's dive into a simple Hello World example to get a taste of Svelte.

First, make sure you have Node.js installed on your machine. You can download it from nodejs.org.

Now, let's create a new Svelte project. Open your terminal and run the following commands:

npx degit sveltejs/template svelte-app
cd svelte-app
npm install

This creates a new Svelte project using the official template and installs the required dependencies.

Next, open the src/App.svelte file in your favorite code editor. Replace the existing code with the following:

<script>
  let name = 'World';
</script>

<main>
  <h1>Hello {name}!</h1>
  <input type="text" bind:value={name} />
</main>

<style>
  h1 {
    color: red;
  }
</style>

In this code, we define a variable name with the initial value of 'World'. We then use it to display a greeting message. When the user types in the input field, the name variable is automatically updated.

Now, save the file and go back to your terminal. Run the following command to start the development server:

npm run dev

After the server starts, open your browser and go to http://localhost:5000. You should see the Hello World message with a red heading. Try typing in the input field, and you'll see the greeting message update in real-time.

Congratulations! You've successfully created your first Svelte application.

Comparison with Other Frameworks​

Svelte stands out from other frameworks due to its unique compilation approach and focus on performance. While frameworks like React, Vue, and Angular rely on a virtual DOM to update the UI, Svelte compiles your code into optimized JavaScript that directly manipulates the DOM. This results in faster rendering and better overall performance.

Additionally, Svelte's simplicity and ease of use make it a great choice for beginners. Its reactive nature and clear syntax allow developers to build complex applications with ease.

In summary, Svelte offers a fresh take on building user interfaces, prioritizing performance and simplicity. It's worth exploring if you're looking for a modern JavaScript framework that can help you build fast and efficient applications.

For more information and official documentation, please visit the Svelte website.