React, Vue, and Angular dominate Web development, but Svelte has been gaining traction in the last six months. What’s so great about this Svelte framework? This article will take a look at why Svelte has become so popular and help you quickly get started by building a simple bookshop application using Svelte.
Why did Svelte become popular?
To understand why Svelte took off, you have to look at the problems with frameworks like React and Vue.
Big Runtime – Large runtime
React and Vue are both Runtime-based frameworks. The runtime-based framework itself is also packaged into the final bundle.js and sent to the user’s browser. When the user performs various actions on your page to change the state of the component, the Framework Runtime calculates (diff) which DOM nodes need to be updated based on the new component state to update the view. To see how big these Runtime codes are, look at some community statistics:
| Name | Size |
|---|---|
| Ember 2.2.0 | 435K |
| Ember 1.13.8 | 486K |
| Angular 2 | 566K |
| Angular 2 + Rx | 766K |
| Presents 1.4.5 | 143K |
| Vue 2.4.2 | 58.8 K. |
| Inferno 1.2.2 | 48K |
| Preact 7.2.0 | 16K |
| React 0.14.5 + React DOM | 133K |
| React 0.14.5 + React DOM + Redux | 139K |
| React 16.2.0 + React DOM | 97.5 K. |
As can be seen from the table above, the smallest Vue of commonly used frameworks has 58K, while React has 97.5K. In other words, if you use React as a framework for development, even if your business code is simple, your first screen bundle size should start at 100K. Of course, 100K is not very large, but everything is relative. Compared with large management systems, 100K is certainly not a big deal. However, for those applications that are sensitive to the loading time on the first screen (such as Taobao and jingdong home page), 100K bundle size will really affect the user experience in some bad network environment or mobile phone. So how do you reduce the runtime code size of your framework? The most effective way to reduce runtime code is to not use the Runtime at all. If you think back to the history of Web development, back when we used Jquery and Bootstrap, our code didn’t include runtime. Change native DOM nodes directly through JavaScript when data changes, without the framework’s process of diff and React Fiber scheduling. At this point you might ask, does reducing bundle size really mean going back to the slash-and-burn era? Is there a way for me to write code in a syntax close to React and Vue without including the framework Runtime? That’s exactly what Svelte does, taking the idea of Compiler-as-framework and putting framework concepts at compile time rather than run time. Your application code, when packaged with tools such as Webpack and Rollup, is directly converted to JavaScript’s native operations on DOM nodes, so that bundle.js does not contain the framework runtime. So how much can Svelte reduce bundle size? Here are the RealWorld stats:
Inefficient Virtual DOM Diff
What? Isn’t Virtual DOM always efficient? The fact that Virtual DOM is efficient is a misconception. One reason Virtual DOM is efficient is that it does not operate directly on native DOM nodes, as this is a performance drain. When the component state changes, it uses some diff algorithm to calculate the actual view change for the data update, and then only changes the DOM nodes that “need to change.” Anyone who has used React knows that React isn’t as efficient as you might think. Frameworks sometimes do a lot of useless work. This is reflected in the fact that many components are re-rendered “for no reason”. Note that re-render is not the same thing as manipulating the native DOM! Re-render is when the render method of the class Component you defined is re-executed, or your Component function is re-executed. Components are rerendered because Vitual DOM’s efficiency is based on diff algorithms, and diFF requires rerendering components to know whether the new and old states of components have changed, so as to figure out which DOM needs to be updated. React Fiber is coming out, you might say. In fact, Fiber does not allow component rerender and reconcile processes to block mainline execution, the component rerender problem still exists, and according to feedback, components rerender more frequently after React Hooks are implemented. Because it’s hard for frameworks to avoid useless rendering, React allows you to use apis like shouldComponentUpdate, PureComponent, and useMemo to tell frameworks which components don’t need to be rerendered. But this introduces a lot of boilerplate code. If you want to learn more about the problems with the Virtual DOM, check out Virtual DOM is Pure overhead.
So how to solve the problem of inefficient Vitual DOM algorithm? The most efficient solution is not to use the Virtual DOM! In fact, the problem to be solved as a framework is that corresponding DOM nodes will be updated when data changes. Virtual DOM needs to compare the status of old and new components to achieve this goal. A more efficient way is to directly update corresponding DOM nodes when data changes:
if (changed.name) {
text.data = name;
}
Copy the codeThat’s the approach Svelte took. Svelte translates each state change into the corresponding DOM node operation at compile time, allowing the DOM node to be updated quickly and efficiently when the component state changes. Svelte performs better than React and Vue on large lists, according to JS Framework Benchmark.
What is a Svelte?
Svelte is a compilation framework written by RollupJs author Rich Harris. If you are not familiar with RollupJs, Svelte is a packaging tool similar to Webpack. The Svelte framework has the following features:
- Similar to modern Web frameworks like React and Vue, it allows developers to quickly develop Web applications with a smooth user experience.
- It does not use the Virtual DOM, nor is it a runtime library.
- Based on the idea of Compiler as Framework, it converts your application to native DOM manipulation at compile time.
- CSS scope, like CSS Modules, is supported by default, allowing you to avoid CSS style conflicts.
- Native support for CSS animation.
- Extremely easy component state management, reducing developer boilerplate less code writing.
- Support for Reactive Statements.
- It is extremely easy to apply global state management. The framework has its own global state, similar to React’s Redux and Vue’s Vuex.
- Support context, avoid component props Drilling.
The main difference between the Svelte framework and Vue and React is that it has many other useful features besides managing component states and tracking their renderings. For example, it natively supports CSS scope and CSS Animation. If you use React or Vue, you will need to introduce third-party libraries to implement the same functions, and the introduction of third-party dependencies will add learning and maintenance costs to developers.
Build a Bookshop application with Svelte
Next, we will build a simple bookshop application based on Svelte framework from scratch. Through this demo, we hope you can understand some basic concepts of Svelte and master some basic uses of Svelte, and can use Svelte to build more complex applications.
Application functions
The Bookshop app supports the following features:
- The librarian entered the new book
- Display the list of books in the bookstore
- Add books to shopping cart
- Display shopping cart data information
Technical requirements for learners
- Basic knowledge of HTML, CSS and javascript
- React or Vue development experience is preferred
The source code for the project can be found in my Github repository.
Project structures,
Start by creating a new project folder in our local development environment:
mkdir svelte-bookshop
Copy the codeWe then initialize our application with svelte’s official scaffolding:
npx degit sveltejs/template svelte-bookshop
cd svelte-bookshop
yarn
yarn dev
Copy the codeThe degit command will copy the github project files directly to a local folder. This is the github address used for the svelte/ Tempalte template project. After the above command runs successfully, visit http://localhost:5000 and you will see the following interface:
- Rollup.config. js, this is the rollup configuration file, similar to webpack.config.js, which specifies that the project entry file is SRC /main.js.
- The SRC folder, which is used to store the source code for our project, now has only a main entry file main.js and a component file app.svelte.
- Public folder, This folder is used to store the static files of the project (index.html, global.css, and favicon.png) and the static files generated by rollup compilation (bundle.js and bundle.css under the build folder and their respective source maps).
Next, let’s take a closer look at the contents of each file under the SRC folder
src/App.svelte
<script> export let name; </script> <main> <h1>Hello {name}! </h1> <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p> </main> <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style>Copy the codeThis file defines a Svelte component called App. Note that the app. Svelte file does not define the name of the component. The name of the component is determined by its filename. Svelte component file names end with. Svelte. A component file usually contains the following three parts:
- The
- The < style > tagThe component-related CSS code will be placed here. Note that CSS is scoped, meaning that the h1 tag styles in app. svelte only apply to the H1 tags in the App component, and not to the h1 tags in the project, including the child nodes of the component. You can use the browser debugging tool to see the h1 tag in action:
As you can see from the figure above, Svelte generates code using random hashes to distinguish the styles of components from those of other components.
- The HTML tag of the component. The HTML tag of a component can be written directly in a file. For example, the HTML part of an App component is:
<main>
<h1>Hello {name}!</h1>
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>
Copy the codeThe h1 tag contains a Hello string and an insert string wrapped in curly braces (Interpolation). The React JSX script is Hello ${name}. They both indicate that the string at that position is the content of the variable name. The name variable is the external parameter we defined above with export.
In general, Svelte puts all the component-related JavaScript, CSS, and HTML code in one file, a bit like Vue, but with less template code.
src/main.js
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'world'}});export default app;
Copy the codeThis file simply mounts the App component you just defined to the target node body and provides the App component with a name parameter with a value of world. This code acts like the Reactdom. render function in React.
Now let’s take a look at what the generated static code looks like.
public/build/bundle.js
Let’s take a look at the generated JavaScript main file bundle.js. Due to the large size of the original file, I’ve only captured the key parts of it:
/* SRC/app. svelte generated by svelte v3.16.4 */
const file = "src/App.svelte";
function create_fragment(ctx) {
let main;
let h1;
let t0;
let t1;
let t2;
let t3;
let p;
let t4;
let a;
let t6;
const block = {
c: function create() {
main = element("main");
h1 = element("h1");
t0 = text("Hello ");
t1 = text(/*name*/ ctx[0]);
t2 = text("!");
t3 = space();
p = element("p");
t4 = text("Visit the ");
a = element("a");
a.textContent = "Svelte tutorial";
t6 = text(" to learn how to build Svelte apps.");
attr_dev(h1, "class"."svelte-1tky8bj");
add_location(h1, file, 5.1.46);
attr_dev(a, "href"."https://svelte.dev/tutorial");
add_location(a, file, 6.14.83);
add_location(p, file, 6.1.70);
attr_dev(main, "class"."svelte-1tky8bj");
add_location(main, file, 4.0.38);
},
l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
},
m: function mount(target, anchor) {
insert_dev(target, main, anchor);
append_dev(main, h1);
append_dev(h1, t0);
append_dev(h1, t1);
append_dev(h1, t2);
append_dev(main, t3);
append_dev(main, p);
append_dev(p, t4);
append_dev(p, a);
append_dev(p, t6);
},
p: function update(ctx, dirty) {
if (dirty[0] & /*name*/ 1) set_data_dev(t1, /*name*/ ctx[0]);
},
i: noop,
o: noop,
d: function destroy(detaching) {
if(detaching) detach_dev(main); }}; dispatch_dev("SvelteRegisterBlock", {
block,
id: create_fragment.name,
type: "component".source: "",
ctx
});
return block;
}
Copy the codeThis code corresponds to the App component we just defined. The Create_fragment method takes a context object CTX parameter and returns a block object representing the component.
block
This object contains four important methods c (create), M (mount), P (update), and D (destroy).
C (create)
function create() {
main = element("main");
h1 = element("h1");
t0 = text("Hello ");
t1 = text(/*name*/ ctx[0]);
t2 = text("!");
t3 = space();
p = element("p");
t4 = text("Visit the ");
a = element("a");
a.textContent = "Svelte tutorial";
t6 = text(" to learn how to build Svelte apps.");
attr_dev(h1, "class"."svelte-1tky8bj");
add_location(h1, file, 5.1.46);
attr_dev(a, "href"."https://svelte.dev/tutorial");
add_location(a, file, 6.14.83);
add_location(p, file, 6.1.70);
attr_dev(main, "class"."svelte-1tky8bj");
add_location(main, file, 4.0.38);
}
Copy the codeThis function creates the native DOM nodes associated with the App component and adds meta data to them.
M (mount)
function mount(target, anchor) {
insert_dev(target, main, anchor);
append_dev(main, h1);
append_dev(h1, t0);
append_dev(h1, t1);
append_dev(h1, t2);
append_dev(main, t3);
append_dev(main, p);
append_dev(p, t4);
append_dev(p, a);
append_dev(p, t6);
}
Copy the codeThis function mounts DOM nodes generated by the C function.
P (update)
function update(ctx, dirty) {
if (dirty[0] & /*name*/ 1) set_data_dev(t1, /*name*/ ctx[0]);
}
Copy the codeThe p function updates the DOM node properties when the CTX context is updated. Presumably, when the context changes, check to see if the name variable has changed and update the DOM node if it has.
D (destroy)
function destroy(detaching) {
if (detaching) detach_dev(main);
}
Copy the codeThe d function is used to delete App components.
After seeing the code generated by Svelte, you should have a better understanding of the compiler-as-framework concepts I mentioned at the beginning of this article. The difference between Svelte and React (also similar to Vue) is that after the React application is packaged, The react. createElement, setState and other framework functions are retained, while the framework code is converted to operate on native DOM nodes after Svelte is compiled.
With a general understanding of the organizational structure of the project, let’s start building the bookshop application.
Component definition
HTML markup
Let’s create a new bookcard. svelte file under the SRC folder that defines the HTML markup for the card component:
// src/BookCard.svelte
<div>
<h1>title</h1>
<div>price</div>
<div>description</div>
<button>Add to shopping cart</button>
</div>
Copy the codeThen use the BookCard component inside the app. svelte component:
// src/App.svelte
<script>
import BookCard from "./BookCard.svelte";
</script>
<style>.</style>
<main>
<h1>Welcome to my online bookstore!</h1>
<section>
<BookCard />
</section>
</main>
Copy the codeThe way to use a custom component is simple: import the newly defined component BookCard in the Script tag, and then write the component in the HTML markup of the App component, with the same syntax as JSX. At this point, look at the content of the page:
CSS
Now that the BookCard component is out, we need to define some CSS to make it look better:
// src/BookCard.svelte
<style>
.card {
text-align: left;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
padding: 10px;
}
h1 {
font-size: 20px;
}
h2 {
font-size: 15px;
color: # 999;
}
button {
background-color: #ff3e00;
color: white;
border-radius: 5px;
cursor: pointer;
border: none;
}
</style>
<div class="card">
<h1>title</h1>
<h2>price</h2>
<p>description</p>
<button>Add to shopping cart</button>
</div>
Copy the codeThe way to style a component is to create a new style tag and write the style associated with the component inside the tag. Note that the style here only applies to elements within the component, and does not affect the style of other components. After styling, the interface should look something like this:
Props to define
The book details should be specified by the props passed in. The props variable of the Svelte component should be specified as export. The specified props variable can be used directly by the component:
// src/BookCard.svelte
<script>
export let title;
export let price;
export let description;
</script>
<style>.</style>
<div class="card">
<h1>title</h1>
<h2>price</h2>
<p>description</p>
<button>Add to shopping cart</button>
</div>
Copy the codeVariable used
Variables defined and introduced can be used directly in the component’s HTML markup by referring to them in curly braces in the markup:
// src/BookCard.svelte
<script>
export let title;
export let price;
export let description;
</script>
<style>.</style>
<div class="card">
<h1>{title}</h1>
<h2>${price}</h2>
<p>{description}</p>
<button>Add to shopping cart</button>
</div>
Copy the codeComponent parameter passing
Then in the parent component App, pass the parameters required by the BookCard to the component:
// src/App.svelte
<script>. let title ="JavaScript Advanced Programming";
let price = 99.0;
let description = "Let's learn JavaScript.";
</script>
<style>.</style>
<main>
<h1>Welcome to my online bookstore!</h1>
<section>
<BookCard title={title} price={price} description={description} />
</section>
</main>
Copy the codeThe contents of the book card should be the parameter passed in:
// src/App.svelte
<main>
<h1>Welcome to my online bookstore!</h1>
<section>
<BookCard {title} {price} {description} / >
</section>
</main>
Copy the codeInput book information
As a bookstore, the administrator should be able to enter new books, so we added a simple form to the App component to let users enter data:
// src/App.svelte
<script>.</script>
<style>.</style>
<main>
<h1>Welcome to my online bookstore!</h1>
<section>
<h2>Add new book</h2>
<label for="title">Title</label>
<input type="text" id="title" value={title} />
<label for="price">Price</label>
<input type="number" id="price" value={price} />
<label for="description">Description</label>
<textarea rows="3" id="description" value={description} />
</section>
<section>
<BookCard {title} {price} {description} / >
</section>
</main>
Copy the codeWe create some input tags for the App component and specify the values of these input tags as variables we defined earlier. At this point we try to change the contents of the input field:
event
We can add an event listener to the DOM using the on keyword plus the event name. The following code will listen for the input event in the input field:
<script>. let title ="JavaScript Advanced Programming"; . function handleTitleChange(event) { title = event.target.value; }</script>
<style>.</style>
<main>
<h1>Welcome to my online bookstore!</h1>
<section>
<h2>Add new book</h2>
<label for="title">Title</label>
<input type="text" id="title" value={title} on:input={handleTitleChange} />.</section>
</main>
Copy the codeChange the value of the title variable to the value of the input variable.
Automatic two-way data binding
However, if we manually added an event listener to each input tag, our code would have a lot of template code. To solve this problem, Svelte allows us to bind two-way data directly with the bind keyword and the attribute to bind:
// src/App.svelte
<script>. let title ="JavaScript Advanced Programming";
let price = 99.0;
let description = "Let's learn JavaScript.";
</script>
<style>.</style>
<main>
<h1>Welcome to my online bookstore!</h1>
<section>
<h2>Add new book</h2>
<label for="title">Title</label>
<input type="text" id="title" bind:value={title} />
<label for="price">Price</label>
<input type="number" id="price" bind:value={price} />
<label for="description">Description</label>
<textarea rows="3" id="description" bind:value={description} />
</section>.</main>
Copy the codeIn this case, we can remove the initial value of each variable:
// src/App.svelte
<script>
let title = "";
let price = 0;
let description = "";
</script>
Copy the codeAt this point, the input field of our page is “bound” to all variables:
Show book list
We should have more than one book in our store and store all books in an array:
// src/App.svelte
<script>. let books = []; .</script>
Copy the codeAdd a submit button to the newly added form. After filling in the book information, the user clicks “Submit” to create a new book object, which will be added to the books list:
<script>. let books = [];function handleAddBook(a) {
books = books.concat({ title, price, description });
title = "";
price = 0;
description = ""; }...</script>
<style>.button {
background-color: #ff3e00;
color: white;
border-radius: 5px;
cursor: pointer;
border: none; }...</style>
<main>
<h1>Welcome to my online bookstore!</h1>
<section>
<h2>Add new book</h2>
<label for="title">Title</label>
<input type="text" id="title" bind:value={title} />
<label for="price">Price</label>
<input type="number" id="price" bind:value={price} />
<label for="description">Description</label>
<textarea rows="3" id="description" bind:value={description} />
<div>
<button on:click={handleAddBook}>add book</button>
</div>
</section>.</main>
Copy the codeShow list data
We can use the each syntax block to display the data from the books list:
// src/App.svelte
<script>. let books = [];function handleAddBook(a) {
books = books.concat({ title, price, description });
title = "";
price = 0;
description = "";
}
</script>
<main>.<section>
{#each books as book}
<BookCard
title={book.title}
price={book.price}
description={book.description} />
{/each}
</section>
</main>
Copy the codeYou can also deconstruct the contents of the recursive object directly when the each block is defined. The code above becomes:
// src/App.svelte
...
<section>
{#each books as { title, price, description }}
<BookCard {title} {price} {description} / >
{/each}
</section>.Copy the codeAfter the code changes are made, your page should be ready to enter new books and display a list of them:
Shopping cart function
The first step is to add a click event to the button of the BookCard component: when the user clicks the BookCard button, the book is added to the cart. To achieve this effect we define a handleAddBook parameter for the BookCard button, which is provided by the external component. The handleAddBook function is called when the user clicks the BookCard button and adds the book to the shopping cart. The code is as follows:
// src/BookCard.svelte
<script>. exportlet handleAddToCart;
</script>
<style>.</style>
<div class="card">
<h1>{title}</h1>
<h2>${price}</h2>
<p>{description}</p>
<button on:click={()= >HandleAddToCart (title)}> Add to cart</button>
</div>
Copy the code// src/App.svelte
<script>. let booksInCart = [];function handleAddToCart(title) {
let bookNeededToBeAdded = books.find(book= > book.title == title);
booksInCart = booksInCart.concat(bookNeededToBeAdded);
}
</script>
<style>.</style>
<main>.<section>
<h2>The shopping cart</h2>
{#each booksInCart as { title, price }}
<div>Name: {title}, price: {price}</div>
{/each}
</section>
<section>
<h2>book</h2>
{#each books as { title, price, description }}
<BookCard {title} {price} {description} {handleAddToCart} / >
{/each}
</section>
</main>
Copy the codeAt this point we can see our shopping cart:
conditional
Svelte can use the if syntax block to display different contents according to different conditions. We can show the user an empty state when the shopping cart is empty:
// src/App.svelte
...
<section>
<h2>The shopping cart</h2>
{#if booksInCart.length === 0}
<p>The shopping cart is empty</p>
{:else}
{#each booksInCart as { title, price }}
<div>Name: {title}, price: {price}</div>
{/each}
{/if}
</section>.Copy the codeThe interface changes to:
Display shopping cart statistics
We will add a function for the bookstore to help users count the books in the shopping cart, which can show the total number of books and total amount in the shopping cart. The code is as follows:
// src/App.svelte
<script>. let booksInCart = [];let booksNumInCart = booksInCart.length;
let totalCheckoutPrice = booksInCart.reduce(
(sum, book) = > sum + book.price,
0); .</script>.<section>
<h2>The shopping cart</h2>
<div>Total number of books: {booksNumInCart}</div>
<div>Order amount: {totalCheckoutPrice}</div>.</section>.Copy the codeWhen we operate the interface, we find that the statistical data does not change when the shopping cart data changes:
booksNumInCart
totalCheckoutPrice
Equation definition
In this case, Svelte provides a Reactive Assignment to represent the linked data by using the $sign to define variables instead of lets. Here’s the code:
<script>. let booksInCart = []; $: booksNumInCart = booksInCart.length; $: totalCheckoutPrice = booksInCart.reduce((sum, book) = > sum + book.price,
0); .</script>
Copy the codeThe booksNumInCart and totalCheckoutPrice variables are automatically recalculated when the booksInCart data is changed. At this time, if we operate the interface again, we will find that the statistics will automatically change as the shopping cart data changes:
Packaging releases
Finally, let’s wrap up the Bookshop application we just wrote. Run the following command under the root directory to package the code:
yarn build
Copy the codeOnce the packaging is complete, take a look at the size of the generated file:
➜ build git:(master) ls -lh
total 152
-rw-r--r-- 1 sean staff 659B 12 17 14:17 bundle.css
-rw-r--r-- 1 sean staff 3.9K 12 17 14:17 bundle.css.map
-rw-r--r-- 1 sean staff 7.6K 12 17 14:17 bundle.js
-rw-r--r-- 1 sean staff 57K 12 17 14:17 bundle.js.map
Copy the codeAs you can see, bundle.js is less than 8K, while React is estimated to be 100K +. Svelte does reduce the amount of generated code.
conclusion
Our simple Bookstore system (Bookshop) probably does these things, so let’s summarize the Svelte framework basics we covered while developing the project:
- Component definition – Component definition
- – using variables
- Props definition and passing – props definition and passing
- Event listening – event listening
- Data binding – Data binding
- – If condition
- List data display – each block
There are many useful features of the Svelte framework that I haven’t mentioned, such as:
- Event forwarding – Event Forwarding
- Life-cycle functions – Life-cycle functions
- Global state Management – Stores
- Context management – context
- CSS Animation – CSS Animation
- .
I haven’t covered all the properties of Svelte due to the limitations of this article, so please check out the official tutorial of Svelte.
My personal thoughts on the Svelte framework
In my opinion, Compiler as Framework should be a trend of front-end framework development due to various problems of Virtual DOM. Svelte currently implements very good functions, but for now I think it still has the following problems:
- Scalability – Scalability. Frameworks like React and Vue have runtime versions that add bundle.js to the first screen. However, as projects get larger and larger, the runtime version of the framework becomes a smaller and smaller portion of the bundle.js component. Conversely, since the generated code is not as encapsulated as React and Vue, will Svelte pile up a lot of duplicate code in large projects? At this point we need to consider whether there is a code generated by Svelte that is greater than the threshold generated by React and Vue. There is no specific answer to this question at present, but the answer can only be given when future generations practice. If you are interested, you can have a look at the author’s discussion on Github.
- Ecosystem – Ecosystem. As a newly popular framework, the ecosystem of Svelte is far behind React and Vue, which have been popular for so many years. This is also the reason why I think Svelte cannot shake the status of React and Vue at present. But could Svelte be ready for an ecological explosion just because it’s so advanced? We can wait and see.
One thing is certain, however, that Svelte has the advantage of generating far less code in less complex projects than React, Vue, and Angular, and will thrive in less-performing embedded operating systems.
Learn useful links to Svelte
- Author’s Rethinking Reactivity talk
- Svelte website
- Svelte making warehouse
Keep an eye on my technical updates
I am a green onion, and now I am working as a Team Leader in an e-commerce company. I want to pay attention to me and make progress together with me into a full-stack engineer.
The team blogs here: Space-fe Blogs
Follow my personal official account to get my latest technical updates!
