Why SvelteJS is probably the best framework for new web developers.

Any web developer who has been doing this for at least a few years will probably hear a similar question day after day:

I really want to be a web developer, but I don’t know where to start. Have any suggestions?

About 10 years ago the answer was very simple. Just create index.html, add some tags there, make the title red with CSS and connect jQuery to handle clicks!

Oh, how everything has changed. Now we work with build tools, client-side routing, special frameworks with fancy runtime, tying everywhere “this”, patterned literals, CSS-in-JS ... how can you choose what is most important?

All this has led to countless variations on what can be started with varying degrees of “just enter it now, and I will explain later.” Some encourage newcomers to immediately learn React or Vue to get started with modern practitioners. While others shout from the tops of the mountains, beginners should always start with the basics. In truth, both approaches have their merits. The first may cause newbies to be delighted with such things as hot-reloading and components, risking to leave too much aside. While the second makes newbies understand how the DOM works under the hood, at the same time, perhaps distracting people with the complexity of vanilla JS, from which we have long abstracted.
')
That is why we need a happy medium. A way to get started with the basics while absorbing modern concepts such as component-based development, isolated vs cascading CSS, templates, declarative functions, etc. etc.

Svelte, at your service

SvelteJS is a fairly new chuck in the js framework framework that is just starting to attract attention. Someone might know him after publishing State of JavaScript 2018 . In short, Svelte is intended to be a framework that is not really a framework. It is based on a tool for compiling components at the assembly stage, which allows you to load only the page necessary to display your application. This means that there is no virtual DOM, there are no frameworks on top of the frameworks and there is no framework in runtime .

All these are quite serious arguments for more experienced developers, but most beginners probably could not read the last paragraph without stopping the head. Fortunately, it’s not the compilation magic that makes Svelte so beginner-friendly, but its syntax.

If you have never seen the Svelte component, here is a simple example:

<p class="pretty">Here's some markup <strong>written by {name}!</strong></p> <style> /*   CSS */ .pretty { color: red; } </style> <script> /* ...        */ let name = "Ben"; </script> 

Let's get this straight. So, first of all, it is worth noting that all of this can be written even in a regular .html file, even in a .svelte file, if your heart desires. We also see some familiar tags that resemble development without framework: style and script . Styles and JS code are written in these tags to properly construct components. In addition, it allows syntax highlighting to work without additional plug-ins for the editor, such as solutions for CSS-in-JS. In addition, the Svelte compiler is smart enough to default to isolate any component-specific styles. Therefore, you will not have styles flowing between components.

You also see something magical going on with the javascript variable name . This is a brilliant new concept for Svelte 3, where any variable in the script of your component is accessible from the markup. We do not have a special syntax that needs to be studied for state management. There is no Angular $ scope , no React this.state , no data from Vue. Instead, we can simply use ordinary variables to describe the state, causing re-rendering whenever their values ​​change.

This freedom from this syntactic “jargon” means that component creation begins to resemble the creation of CodePen, only without the need to think about how to connect the JS declarative function to some DOM selector.

Another nice thing is that Svelte components are imported as easily as traditional components. You can simply import .html , since Svelte knows how to deploy it:

 <div> <Wizardry /> </div> <script> import Wizardry from './wizardry.html'; </script> 

Cool, but wait a minute ...

Some readers may find this concept as breathtaking as I am. At the same time, others probably have their own arguments against using a similar approach for teaching beginners. Are they not interested in how DOM manipulations actually work?

The answer is ... maybe. But when someone is just starting (at least from personal experience), you can take a small abstraction to create cool things faster.

In addition, just like some languages, for example, Java and JS, abstracted pointer management using garbage collection, most modern web development tools have abstracted from DOM manipulations. With the exception of more complex extreme cases that beginners probably will not need. By the way, if you are puzzled over the use of pointer management, I think that this only proves my point. So instead of forcing newbies to manipulate the DOM or master the framework-specific ways to manage the state, why not just let them access the variables directly from the markup? Now they can learn the basic principles of managing the state of the components without mourning.

Well, I see a basic example, but Svelte must have some specific features for it to work.

No doubt this is true, but this is much less than you think. One part of the Svelte syntax is for iterative and conditional mapping of DOM elements. This works very similarly to the map from JSX, but without all these nested brackets, in which beginners (and me) can easily get lost. Here is the basic method that generates a list of elements from an array:

 <ul> {#each profiles as profile} <li>{profile.name}: {profile.role}</li> {/each} </ul> <script> const profiles = [ {name: 'Wes Bos', role: 'React extraordinaire'}, {name: 'Chris Coyier', role: 'Father of CodePen'}, {name: 'Cassidy Williams', role: 'Letting you know it's pi time'} ]; </script> 

Again, I understand any criticism regarding syntax, but I like how easy it is to understand it. Instead of embedding JavaScript in our HTML code, we simply say: hey, let's loop through this array and create an element for each of them.

It is worth mentioning another feature of Svelte, which I am not so enthusiastic about: the syntax for transferring props to components. Yes, it is fully functional and easy to learn, but, at the same time, it may seem too magical to the taste of some people. To process the props, we simply transfer them to the component, wherever it is imported ...

 <!-- somewhere.html --> <Profile coolGuy="Scott Tolinski" /> 

... and get this variable as an exported "let":

 <!-- profile.html --> <p>{coolGuy}</p> <script> export let coolGuy = ''; </script> 

I fully understand that for some this will seem an abuse of “export”. But at least, this corresponds to how beginners should conceptualize the modules: we export what we need to access outside the component, and import what we want to use in our component.

I could overcome this oddity ... but what about the obligatory assembly step?

So, another criticism about starting to work with frameworks is the need to use the package manager. Which means ... damn, use terminal!

Listen, I understand that opening this thing can be extremely frightening, with its mono-font and creepy “cd” to navigate through directories. But honestly, this is really not a big obstacle when you need only one team to run. In addition, the built-in terminal in VS Code makes it easy to get started. It even opens at the bottom of the window right in your project directory!

In fact, Svelte offers a downloadable starter , but I created my own starting template that simply uses a Rollup for direct download. In fact, the configuration file is less than 30 lines long! For the basic Svelte project, these are all the directories and files that you need:

/public
index.html
/src
index.html
app.js
rollup.config.js
package.json


Just add a command to run the build step in package.json, and you're done! Of course, you can say that all the additional modules and files that other frameworks need are not a problem if the novice doesn’t touch them, but, in my opinion, the fewer additional things, the better for beginners.

Ok, well, it's cool and comfortable for beginners. But how stable is the framework?

This is a very topical issue for such a young framework as Svelte. All the examples I have shown use Svelte version 3 syntax, which is still in beta at the time of this writing. No matter how exciting it is, I would wait a few more months before rushing to programming workshops with him. Nevertheless, Svelte offers a really concise documentation page for version 3 , which can make it easier for beginners to work.

So let's take a look at some of the main benefits of exploring web development with Svelte:

1. This is a component framework with 0 additional plugins.
2. He controls the state without any ordinary trash.
3. Uses style isolation without using CSS-in-JS (so no editor plugins or silly syntax are needed)
4. To get started, you need only a very simple build script.
5. There are almost no additional files in the base project.

Of course, this is perfectly normal if I failed to convince you in this article. All good articles sparked a little controversy! But I hope that this article at least showed you how damn cool and simple Svelte can be to learn.

Thanks for reading this!

I am a front-end web developer-in-process-learning, always fiddling with something new. I will try to publish regularly here, so write if you like it!

***

From the translator:

Thank you for reading this translation! I hope this article will encourage you to look in the direction of Svelte as a tool for learning or even a new project.

Come to my 2-hour workshop on Svelte 3 on HolyJS Piter on May 24-25 . Who wants to simply follow the development of Svelte - welcome in the Russian-language telegram channel SvelteJS . We will be glad to you!

And a small survey, without reference to the framework and technology. Just interested in your opinion.