Enterprise wechat development triggered – Svelte framework development guide

preface

Recently, I developed the enterprise wechat embedded H5 project, originally planned to use Prettier-vue3 for development, demo test found incompatible with proxy, enterprise wechat webView embedded browser kernel is Chrome 53, and the latest version of enterprise wechat embedded kernel is still more than 50. This is the version three years ago, the official did not update, it is better to rely on others, so we thought of other ways, originally there was not much business, using Vue or React is a bit overqualified, occasionally got a frame Svelte, found it is suitable for our scene.

Thinking: all such compatibility requirements are high, it is best to use native JS to write, if the project is large, must use the framework to consider compatibility in advance, and the solution.

Enterprise wechat development students carefully development

Svelte — No Runtime Framework for No Runtime code

Packing volume is smaller

Vue and React are runtime based frameworks, and packaged code includes its own Runtime code. Svelte, on the other hand, reduces runtime code at compile time and minimizes runtime code in packaged code. And as mentioned above, it’s not based on the Virtual Dom, so Svelte’s packaged code is much smaller than other frameworks.

Here are Jacek Schae’s statistics on the volume of writing the same Realword application using the mainstream frameworks on the market:

Can you see that Svelte builds applications that are small in size? There are absolute advantages. But this this comparison is one-sided

React and Svelte have been widely discussed in Svelte Github for a long time.

Svelte does have a threshold that makes it less of a size advantage after a certain point, but in general, Svelte should be smaller than other frameworks, as long as it is not a particularly complex back-end management application.

In some H5 games, this is a great solution if you want to get the React/Vue data-driven approach to writing applications, but you don’t want to introduce such a large runtime.

It is estimated that the volume of React will be reduced by 30-50%. The specific data cannot be provided because the migration has not been completed. In addition, the non-runtime framework is also a great help for the first screen rendering. You can split the first screen components. The non-runtime first screen components are actually very small, which is very friendly for mobile terminals, because after all, there is a certain pressure on the server to use SSR.

Less code

The writing style in Svelte is designed to be more user-friendly and can be developed with less code than other frameworks. The Svelte website provides an example when declaring a component state:

Here’s the code for React

const [count, setCount] = useState(0); function increment() { setCount(count + 1); } Duplicate codeCopy the code

This is the code for Svelte

let count = 0; function increment() { count += 1; } Duplicate codeCopy the code

React is much cleaner than React, and it feels like JavaScript we normally write and is much easier to read.

No Virtual Dom

We all know that Vue and React use the Virtual Dom to update the Dom. Virtual Dom will store the data of page Dom into tree structure in memory. Every time the state in the component is modified, a new Virtual Dom will be generated and compared with the old one to generate a patch, and diff will be used to calculate which Dom will be updated. Update the actual DOM node when the actual modification is complete. Of course, the Virtual Dom in the framework is much more complex than the implementation I said.

Sveltedom is the mapping relationship between data and real DOM, which is calculated by AST and stored in P function at compilation time. Svelte modifies and updates DOM nodes using pure JavaScrip and does not depend on any framework. Because you don’t rely on the Virtual Dom, initialization and updates are much easier, making pages up and running much faster.

responsive

Svelte also enables us to be state responsive like Vue, where components are updated when a state changes state. This allows us to better encapsulate components. It’s written just like a normal variable declaration, but Svelte will automatically inject reactive code for you at compile time.

count += 1; Copy the codeCopy the code

Svelte automatically adds reactive code at compile time

count += 1; $$invalidate('count', count); Copy the codeCopy the code

Hight-Performance: High Performance

In the Virtual Dom has been a standard front-end framework today, Svelte claims that they are not supported by Virtual Dom, how can they guarantee high performance?

The performance evaluation

In A RealWorld Comparison of Front-end Frameworks with Benchmarks, Jacek Schae wrote Benchmarks to write A RealWorld application using A mainstream Front End framework, Using Chrome’s Lighthouse Audit, Svelte was slightly worse than Vue, but better than React.

Isn’t that surprising? Another front-end framework performance comparison project gave the same answer: github.com/krausest/js…

Why is Svelte performing well, at least not as badly as we expected? We’ll talk about it in a brief summary of principles.

Svelte disadvantage

Having said the advantages of Svelte, we should also consider the disadvantages of Svelte.

Compare to the Vue and React frameworks

When building a large front-end project, there are many more things to consider when choosing a framework. Svelte is still in its infancy, and there is no complete solution for unit testing necessary for large projects. Svelte is currently used in large applications and needs to be reviewed with caution.

There are some other major points of note that we found when we used Svelte to develop large, medium – and corporate-level projects

• There is no mature UI library like AntD. For example, if the demand side wants to add a toast prompt, or pop up a window, PM: “Very simple, don’t need to issue the UI draft, just use the previous style.”

But Svelte needs to “copy” a toast or popup component from zero, which can lead to extra development and extra work.

• Svelte native does not support preprocessors, for exampleless/scss, you need to configure the WebPack Loader separately.
• Svelte native scaffolding has no directory division
• Typescript is not currently supported, although officially it will be, but we don’t know when.

It is also important to note that frameworks such as React/Vue have runtimes that add bundle.js to the first screen. However, as the project gets bigger, the runtimes make up a smaller proportion of bundle.js. 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.

Svelte is used to develop templates for the official website

Develop templates for the official website

Tutorial and experience address

svelte mdn

svelte github

Svelte Online experience address

Svelte framework

Chinese Material UI

English Material UI

• Reference documentation
• Reference documentation