Hello everyone, in this article, I would like to outline some knowledge about Svelte as well as how to build a web app using Svelte.

TL; DR

For those who are lazy to read with good English and like “learn by doing”:

• All information and documents of Svelte, from basic to advanced are detailed instructions on the homepage: https://svelte.dev
• Study and practice: https://svelte.dev/tutorial
• Github repo: https://github.com/sveltejs/svelte
• Synthesis of relevant documents: https://svelte-community.netlify.app/resources
• Summary of good plugins included: https://github.com/rollup/plugins

1. General

Svelte , also known as SvelteJS, is a front-end JavaScript framework developed by Rich Harris aimed at building user interfaces quickly and easily. In essence, Svelte is a compiler , helping to compile specific syntax you write from Svelte to HTML, JS, and pure CSS at build time, helping to increase performance by reducing client-side processing steps.

1.1. Advantages

Less code

Doing software in general, and writing code in particular has some risks of bugs and bugs. Having to write a lot of code, you have to take a long time> your codebase gets big, maintain, handle errors takes a lot of time> you want to develop more cool features, optimize performance, learn more ants other awake or you want to spend time with friends, family, entertainments … you don’t have time. Therefore, the less code you have, the less bugs you have, or at least you find it easy to fix, you will have more time for activities other than just “fix bugs”. You are happy with the life of dev.

Don’t use the Virtual DOM

If you have been using popular libraries / frameworks such as React or Vue, you will probably be familiar with the concept of “Virtual DOM” as well as the word “Virtual DOM is incredibly fast”. . From the point of view of Rich Harris, the creator of Svelte, that using the Virtual DOM for user interface processing is not quite as fast as what we are mistaken. Therefore, Svelte does not use Virtual DOM but is purely a compiler that compiles your code into pure, zero dependency JS language. Your App will just be fast and fast.

Real Reactive

Tired of understanding the complex state management mechanisms in JavaScript frameworks / libraries? Svelte is your choice, Svelte takes JavaScript’s “reactivity” mechanism to a new level, extremely simple and easy to apply. You will be more and more passionate about code.

1.2. Familiar

Svelte’s syntax is recognized in components, with the extension .svelte . Each component will consist of 3 clear parts:

• <script> contains the JS code you want to process in the component.
• <style> contains CSS code for the makeup of the component (this CSS code will be within the scope of this component only).
• The last part will be automatically recognized by the Svelte compiler as HTML tags.

Looks too familiar like when you first started web development, right? The interesting part is in the back.

1.3. The basic syntax

I go through some basic syntax of Svelte. In general, Svelte’s syntax is not too complex, if not simple. If you are familiar with HTML, CSS, JavaScript, and some of ES6’s syntax, you will quickly adapt.

Retrieve variables

Declare the variable in the <script> tag, in the HTML template, if you want to access it, you just need to enter the variable name in curly braces.

Retrieve the variable in the tag attribute

Similarly, the syntax for accessing variables in tag attributes is used as above. If your variable has the same name as the property, you can write it down as follows:

Import another component

Reactivity – mechanism to respond to change

With the above example, every 1 second, the variable count will increase to 1. As you can see, with just the syntax of declaring and assigning the normal variable value, Svelte makes the “reactivity” mechanism extremely simple.

Creates props for the component

With the export keyword, other components can change the text properties of the Button component.

DOM Events

If pure JS you use onclick to attach events, then Svelte just a little different is on:click .

Conditional rendering

With plain HTML, you cannot conditional rendering, but with Svelte you do. The syntax seems a bit weird, but it needs to be remembered.

Render data from array / list

Svelte also supports rendering each element in an array / list.

Two-way binding

Two-way binding is also incredibly simple to Svelte.

Lifecycle (cycle of operation)

The lifecycle of a component similar to React or Vue is also supported by Svelte. In addition to onMount , there are onDestroy , beforeUpdate or afterUpdate … Depending on the case, you can learn more to use.

2. Steps for building a web app

2.1. Prepare

• Computer, mouse, keyboard …
• Your favorite Code Editor (like Atom, VS Code, Sublime, Vim, …)
• CLI (like CMD or a built-in terminal if your code editor supports it)
• NodeJS (required to use npm)

2.2. Setup environment

Once fully prepared, enter CLI with the following commands:

Open a browser, go to http://localhost:5000 , you see the following screen:

So you have finished the setup and can start building web apps using Svelte

Let’s explain the above commands a bit

degit is another tool developed by Rich Harris that allows you to copy all source code from a repository on Github to your directory. Specifically, here we are copying the source code of an available Svelte template down to our directory with the name MY-SVELTE-PROJECT .

After copying is complete we move the path to the directory we just created, install the dependencies with npm install and finally run the development environment with npm run dev .

Directory structure

A Svelte template will have the following basic directory organization, depending on each project, you can organize the directory your way to the best fit.

Bottom up:

• rollup.config.js : Svelte uses a bundle tool called Rollup, and this is a file you can customize settings to bundle your source code.
• README.md : Your project information file (for users to read) if you publish it to GitHub
• package.json : Your project information file (for developers to read), also contains dependencies for developing and deploying your project.
• .gitignore : As the name suggests, this file to ignore files / folders that you do not want to commit to git.
• src : Directory containing source code
  • main.js : main.js file of the whole web app. Note that if you change the filename, you need to reinstall accordingly in rollup.config.js .
  • App.svelte : Component written in the syntax of Svelte.
• scripts/setupTypeScript.js : File to install TypeScript instead of JavaScript, run the command node scripts/setupTypeScript.js to install.
• public : Directory for deploy.

2.3. Build a simple desktop web app

After completing the preparation and installation of the dev environment, we proceed to build a web app, the simple topic we choose is a computer web app to apply some basic syntax of Svelte. Ok, let’s get started!

Layout, functionality

The structure is the same as above, I will only add 2 new components: Button.svelte and Screen.svelte .

Button.svelte is each key pressed to handle computational operations.

Screen.svelte is the screen that displays the calculation results.

Finally, in App.svelte , I imported the above 2 components and displayed them as a complete computer