Digging and looking around about JavaScript alternatives, I came across Svelte.
When starting studies from scratch about a subject you get many alternatives.
This is marvelous, but the setback is to get the right path to start getting the grips with it as fast as possible.
Since many pages tell us more than one or three, I’ve decided to share my notes from my researches and initial procedures to start using this very interesting framework.
Therefore, all content here comes from someplace and all places are properly referenced.
I do not make up or create solutions in this kind of approach. I just share paths to get acquainted faster.
The only intention here is just to put together some notes, sharing summaries, and offering a faster start about the subject that may save you time.
So, in this post, no content is created from my own.
It is a little humble guide to guides. 🙂
Table of Contents
ABOUT SVELTE
(Texts selected from many sources, as all topics)
Svelte is an alternative to web frameworks like React, Vue, and Angular. Like those, Svelte can be used to build entire web apps. It can also be used to create custom elements that can be used in existing web apps implemented
with other frameworks.
Svelte was developed by Rich Harris, who formerly worked at The Guardian and is currently at The New York Times.
Harris previously created the Ractive web framework (https://ractive.js.org/), which is used at The Guardian and inspired parts of Vue. He also created the Rollup module bundler, which is an alternative to Webpack and Parcel.
Svelte provides a different approach to building web apps than some frameworks. While frameworks like React and Vue do the bulk of their work in the user’s browser while the app is running, Svelte shifts that work into a compile step that happens only when you build your app, producing highly-optimized vanilla JavaScript. Instead of using a tool during the running process, it’s compiled to vanilla JS at the building stage so the application requires no dependencies to start.
| Svelte – No Virtual DOM | Other Framework with Virtual DOM |
|---|---|
| Loading the page | Loading the page |
| Build the DOM | Build the DOM and Virtual DOM |
| Render the page using pure JS | Render the page using the framework’s lib |
The outcome of this approach is not only smaller application bundles and better performance, but also a developer experience that is more approachable for people that have limited experience of the modern tooling ecosystem.
Svelte sticks closely to the classic web development model of HTML, CSS, and JS, just adding a few extensions to HTML and JavaScript. It arguably has fewer concepts and tools to learn than some of the other framework options.
It’s main current disadvantages are that it is a young framework — its ecosystem is therefore more limited in terms of tooling, support, plugins, clear usage patterns, etc. than more mature frameworks, and there are also less job opportunities. But it’s advantages should be enough to make you interested to explore it.
Note: recently Svelte has added official TypeScript support, one of its most requested features. We’ll look at it later on in this tutorial series.
Svelte has not yet received the attention it deserves.
When it is mentioned, the focus is typically on its ability to produce bundled code that is significantly smaller than the alternatives. However, Svelte makes many tasks easier, including defining components, managing component state, managing application state, and adding animation.
Svelte apps have smaller bundle sizes than equivalent apps created with other web frameworks. This is achieved by compiling the application code to a single, optimized JavaScript file that includes a very small amount of framework
code.
Svelte is a library trying to bring modularity into the front-end game. It keeps that modularity not only in separating different components but also in isolating the logic, view, and the template.
Svelte is a web application compiler implemented in TypeScript. It is not a runtime library.
For example, the todo app presented later has a bundle size that is 13% of the size of an equivalent React app.
These apps can be found at https://github.com/mvolkmann/svelte-todo and github.com/mvolkmann/reacttodo.
The website at www.freecodecamp.org/news/a-realworld-comparison-of-front-end-frameworks-withbenchmarks-2019-update-4be0d3c78075/ catalogs statistics on building a real world web application using many web frameworks.
The reported gzipped app size in KBs for some popular choices include:
Angular + ngrx: 134
React + Redux: 193
Vue: 41.8
Svelte: 9.7
Some web frameworks, including React and Vue, use a virtual DOM to optimize rendering changes. When components re-render, the framework builds a new version of the DOM in memory and then compares it to the previous version. Only the differences are applied to the actual DOM. While this is faster than updating everything in the actual DOM, it does take time to build a virtual DOM and compare it to the previous one.
Svelte provides reactivity without using a virtual DOM. It does this by tracking changes to top-level component variables that affect what each component renders and only re-rendering those parts of the DOM when changes are detected. This contributes to good performance.
Svelte dramatically simplifies component and application state management. Contributing features include context, stores, and module context, each of which is covered in detail later.
Svelte provides runtime warnings for accessibility issues. For example, <img> elements that have no alt attribute are flagged.
Svelte does not currently support using TypeScript but work to add this is underway. See github.com/sveltejs/svelte/issues/1639.
Svelte Native supports developing mobile apps.
It builds on NativeScript.
Does It Disappear?
Some say that Svelte disappears once an app is built.
The Svelte library is mostly defined by .js files in the node_modules/svelte directory.
The main functions are defined in internal.js which is currently around 1400 line of code.
Other library files are used for specific features.
These include easing.js , motion.js , register.js , store.js , and transition.js .
Entering npm run build produces files in the public directory including bundle.js.
Svelte library functions that are used by the app are copied to the top of bundle.js.
So Svelte library code doesn’t disappear, it is just very small compared to other web frameworks.
@FROM:
JavaScript – Svelte – Web Development Make Easier [REF23313].pdf
TUTORIALS, PROCEDURES
Some suggestions to begin coding, but there are many other alternatives.
Check the last section: “References and Documentation”.
First Steps
1a. Guide to the Svelte Framework
Begin, first with this post.
The author has a good approach offering the core basics of theory and practice, Svelte modularity and implementation.
Fast approach. Good.
1b. Svelte: o que é, vantagens, desvantagens e cases
The author shows concepts and pros and cons. Good.
Portuguese (Brazil) but you may use the translator.
1c. Front-end com Compilador Svelte
The concepts are exposed and analized comparing with Vue.
Interesting. Helps to enlarge the vision.
Portuguese (Brazil) but you may use the translator.
NOTE: if you read the posts from the links above, because they are short, when you get to the next it will turn the subject much easier.
2a. Svelte’s Introduction/Basics
Extending the overview from 1a step.
2b. Refining concepts and Code Source
Follow the examples from Stelve’s site to refine the initial approach.
This is an excelent source to consult code snippets, howtos, etc.
3. Frequently Asked Questions
Extending
1. Svelte Typescript SCSS Webpack Starter Kit
Extending the knowledge with other technologies.
Svelte app using yarn and containing svelte 3.x, typescript, scss, eslint, prettier, whatwg-fetch, webpack.
RESULT: works perfectly.
About Yarn
Yarn is Fast. It caches every package it has downloaded, so it never needs to download the same package again.
It also does almost everything concurrently to maximize resource utilization.
This means even faster installs.
It is not uncommon to want to migrate a project from npm to yarn. So how exactly does one migrate? The first thing to note is that both yarn and npm can consume the same package.json format, and both of them can install any package from the npm registry.
www.w3resource.com/yarn/migrating-from-npm.php
2. Sapper: Extending the Framework
Sapper is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.
Unlike single-page apps, Sapper doesn’t compromise on SEO, progressive enhancement or the initial load experience — but unlike traditional server-rendered apps, navigation is instantaneous for that app-like feel.
Read the introductory blog post to learn more.
Svelte + Sapper : a good summary, faster to begin.
3. Implementing SSH/TLS – HTTS Protocol
How can I run a Svelte/Sapper app over HTTPS/SSL?
4. Routing
Check github.com/pateketrueke/yrv
INSTALLING ADDITIONAL RESOURCES: ANDROID-SDK (NPX, TNS )
PRE-REQUISITES: assuming that Node.js and npm or yarn (see Package management basics) are already installed.
Procedure based on svelte tutorial – tutorialspoint
1. CLI setup: install tns.
npm install -g nativescript
2. tns help
tns
tns –help
3. Env setup
– Windows dependency: installs android-sdk:
Execute the below command in your windows command prompt as administrator – NOT powershel prompt:
@powershell -NoProfile -ExecutionPolicy Bypass -Command “iex ((new-object net.webclient).DownloadString(‘https://www.nativescript.org/setup/win’))”
If pointing to:
https://www.nativescript.org/setup/win
downloads the following file, that enables you to inspect before installation:
native-script.ps1
To run it inside a WINDOWS POWERSHELL console against the production branch (only one supported with self-elevation), turn off “Mcafee Real-time scan” and use:
start-process -FilePath PowerShell.exe -Verb Runas -Wait -ArgumentList “-NoProfile -ExecutionPolicy Bypass -Command iex ((new-object net.webclient).DownloadString(‘https://www.nativescript.org/setup/win’))”
@SEE: documentation inside the script: native-script.ps1
4. Verify dependencies.
tns doctor
5. If just the case, to switch the default install home at:
C:\Android
Locations – Where the stuff is installed
C:\Android
Envvars:
Use:
sysdm.cpl
ANDROID_HOME=C:\Android\android-sdk
Path=
C:\Android\android-sdk\tools
C:\Android\android-sdk\platform-tools
C:\Android\android-sdk\tools\bin
C:\ProgramData\chocolatey
COMMUNITIES
WELCOME TO THE SVELTE BRASIL COMMUNITY
Access our channels to answer questions, learn news and interact with the entire Svelte community here in Brazil (ahh, it is just beginning).
REFERENCES AND DOCUMENTATION
NOTE: the link order in this section has no meaning, no prioritization.
JavaScript – Svelte – Web Development Make Easier [REF23313].pdf
“Rethinking reactivity”
This is a talk by Rich Harris at “You Gotta Love Frontend (YGLF) Code Camp 2019”. It describes the motivations behind Svelte 3 and provides a brief introduction.
Svelte home page
Svelte Tutorial
Svelte API
Svelte Examples
Online Svelte REPL
This is great for trying small amounts of Svelte code. It can also display generated code and save code for sharing and submitting issues.
Svelte Blog
Discord chat room
Svelte GitHub repository
Brazilian system analyst graduated by UNESA (University Estácio de Sá – Rio de Janeiro). Geek by heart.