I met Svelte

background

Svelte starts with 43K starts on GitHub, which is not far behind angular.js 60k and Angular 70k, and could soon become one of the big four frameworks (maybe).

introduce

Search, there are English websites, there are Chinese websites, look at the Chinese website to see

svelte.dev/

www.sveltejs.cn/ Chinese Website (unfinished)

Well, except for the homepage and tutorials, the articles and documentation are all in English. But that’s not a problem

1. Just look at the tutorial. It is similar to the three frameworks, with state, computed and similar concepts.

2. The writing method is relatively free (difficult constraints), script, style, HTML can be interspersed with mixed writing.

3. Note that a bit, https://www.sveltejs.cn/tutorial/updating-arrays-and-objects, said here to modify and vue arrays and objects have similar shortcomings, often push, splice method such as not trigger updates, Object update properties must have this property when initialized, and new properties do not trigger updates. Falling behind vuE3 at this point would be a poor development experience, I think.

4. The component is supposed to be props.

<script>
export let answer;
</script>
Copy the code

5. Conditions apply colours to a drawing and circular logic of writing is done with xx} {# xx} {/ parcel writing, with JSX similar, circulation of writing with similar vue, just look at really not used to (use curly braces when label)

{#if x > 10}
	<p>{x} is greater than 10</p>
{:else if 5 > x}
	<p>{x} is less than 5</p>
{:else}
	<p>{x} is between 5 and 10</p>
{/if}
Copy the code

Support awiat

{#await promise} <p>... waiting</p> {:then number} <p>The number is {number}</p> {:catch error} <p style="color: red">{error.message}</p> {/await}Copy the code

It seems very convenient, but I think if the logic is complicated, you still need to go back to js to make it clear, or if-else is reliable

On :event={eventHandler}

7. Bind :value={}

8. The nextTrick script is the same and ends when all changes are updated to the DOM

// set some state
await tick();
// continue other things
Copy the code

9. It has a status management tool

import { writable } from 'svelte/store';

export const count = writable(0);
Copy the code

Kind of reducer

import { count } from './stores.js';

function increment() {
    count.update(n => n + 1);
}

function reset() {
	count.set(0);
}
Copy the code

Read the state, and the current file declares the state, then listens for the new value of the store and modifies the state

import { count } from './stores.js';
let count_value;

const unsubscribe = count.subscribe(value= > {
    count_value = value;
});
Copy the code

Unlisten when you destroy the component

onDestroy(unsubscribe);
Copy the code

Or HTML with dollar signs instead of listening

<h1>The count is {$count}</h1>
Copy the code

. The tutorial is a little long, so I won’t finish it

What problem did he solve

1. Less code, not much difference, readability is questionable, pass

2. No vitrual DOM, look at the analysis, the main cost of diff process consumption performance, if you want to directly update the node, you have to save the node variable in memory, that is, space for time. If you find a compiled code online, like this update, text is not recycled. I feel that the increase in development difficulty will result in very limited performance gains and increased development (overtime) time.

// Template code (before compilation)
<a>{{ msg }}</a>

// Run the code (after compiling)
function renderMainFragment ( root, component, target ) {
	var a = document.createElement( 'a' );
  
	var text = document.createTextNode( root.msg );
	a.appendChild( text );
	
	target.appendChild( a )

	return {
		update: function ( changed, root ) {
			text.data = root.msg;
		},
		teardown: function ( detach ) {
			if( detach ) a.parentNode.removeChild( a ); }}; }Copy the code

I read in some comments that if you solve the problem of poor DOM performance in the future, the virtual DOM will not make sense to me, so this framework is a good choice.

---

Summary, personal views, there are inappropriate places welcome to point out

Svelte’s bundle.js is relatively small, and AT first I thought Svelte was a great incremental framework. However, it is said that this is true when the project is small. As the number of components increases, the template code increases, so the runtime code is not necessarily smaller than that of vue and React.

I can’t say the disadvantage, because I don’t know, it may be a disadvantage hahaha, Svelte is quite difficult.

However, the framework community is definitely not as popular as Vue and React, or even angular in China.

Finally mobike about the views of Svelte, I was the last to see this thread there is a Taobao big man’s answer, suddenly feel what I said is nonsense hahaha. In this sense, Svelte is really suitable for small projects, and the packaging volume should be much smaller than traditional frameworks.

What do you think of Svelte as a front-end framework? – especially the rain creek answer – zhihu www.zhihu.com/question/53…

Svelte is also a very good framework for the future because it can get so much attention from front-end people, and the new and old front-end people can understand it and use it directly. The special compilation mode and the status update mode without the virtual DOM have their advantages