In the world of React, Angular, Vue, and “We Don’t Need More JavaScript Frameworks”, there is another framework that is becoming popular among web developers. This new framework is Svelte 3 which there is not a lot of information about it because it is relatively new (2016). However, it is growing in popularity.
Svelte is different from a framework or a library in the sense that it is really a compiler that creates small components for your application. Those components are already optimized for the browser. In addition, I like the idea of being able to add CSS in a CSS style instead of CSS on JavaScript because it feels a more natural way to create components for me personally.
Another nice feature of Svelte is that it is very easy to learn. I can see new developers using it and building upon their previous knowledge of simple HTML, CSS, and JavaScript. Also, there is no such thing as virtual DOM or dirty checking which is overly complicated and slows down the UI of the application.
HelloWorld.svelte Component
All components in Svelte are saved with the .svelte file type. Inside this file, you could add your HTML, CSS, and JavaScript in a similar way that you are used in an HTML page. The following is an example of a Hello.svelte component that when clicking on the text, it will change the text from “world” to “admixweb”.
<script>
export let name = "world";
function handleClick() {
name = "admixweb";
}
</script>
<style>
h1 { font-size:3rem}
</style>
<h1 on:click={handleClick}>
Hello {name}!
</h1>
The component is very simple and self-explanatory. There is a script tag that will contain all the logic of the component, a style tag that will have all the CSS, and later the HTML is declared that will be rendered on the page. The component only has one property called “name” that has a default value of “world”. Then, there is a function that is used to change the text from “world” to “admixweb”. In the HTML, we use the on:click={handleClick} to change the name on the click event.
I am planning a small application for the near future that will cover the real fundamentals of Svelte. However, you can see by this small example, that the approach of creating components this way is very intuitive and easy. I always think of new developers when approach frameworks because I teach some web development classes, I understand the frustrations of newcomers when trying to understand new technology. But, Svelte seems easier for students when they just learned HTML, CSS, and JavaScript and you don’t want to overwhelm them with a lot of technologies for creating an application.