A new perspective: Are the front-end frameworks rolled in the wrong direction?

Hello everyone, I'm Casson.

近几年，前端领域出现了很多新框架，比如Svelte 、 Solid.js 、 Astro 、 Qwik 。

Along with them, there are many great new concepts - runtime/compile-time framework , Islands architecture , Selective Hydration ...

The essence of these concepts is to make pages faster in various ways .

The speed here mainly includes two aspects:

• Make HTML load faster (a group of concepts related to SSR are related to this, such as the Islands architecture )
• Faster response to interactions (a number of frameworks that use fine-grained updates are related to this, such as Vue , Solid.js )

However, is fast the only criterion for evaluating Web the future direction of development?

An old programmer with 32 years of development experience makes a different point in his blog post get-in-zoomer-we-re-saving-react .

This article is a partial interpretation of that blog post.

Welcome to join the human high-quality front-end framework group , with flying

What is important to the application?

As mentioned above, the new feature of the front-end framework is to make the page faster in various ways .

The subject here is the page , not the application .

In fact, although developers often talk about Web App , what most developers develop can only be called pages.

A big difference between pages and applications is the difference in interactive experience .

If some interactions in a page are similar to IOS native applications, we will say that the page interaction does a great job.

Therefore, although fast speed is an important part of the interactive experience, it is by no means all, and there are a lot of details worth considering.

Taking the industry benchmark of user experience Mac OS for example:

• In Mac OS , when opening the status bar of the application, press and hold the shortcut keys such as command + option to enable advanced functions:

• The result of the undo (command + z) operation is expected for various operation targets (regardless of whether the target is a text or a file, etc.)
• Copying and pasting of rich text content is consistent with the performance of rich text content through drag and drop

Students who have done rich text editors should be able to feel the difficulty of the above functions

Behind these expected details is a responsive system .

Responsive system

Mac OS X is the first operating system that claims to be responsive . Prior to this, the industry's follow-up object is Windows operating system.

In Windows the data is non-responsive . The fetched data will not be updated automatically unless the developer manually refreshes or polls for updates.

This low-level mode will have an intuitive impact on the operation of the upper-level application.

For example, the following is the configuration item that changes the desktop appearance in Windows 95 . After the user changes the configuration, only after clicking OK or Apply , can the effect of changing the configuration be seen.

This situation is somewhat similar to the situation where developers manually operated DOM before the popularization of front-end frameworks.

Compared with Windows , Mac OS X adopts responsive update, and users can see the effect immediately after many configuration items in Mac OS are changed.

In this case, similar to when developers use front-end frameworks, state changes can automatically trigger view updates .

The evolution of the operating system is a reference for the development of the front-end framework.

The story behind is as mentioned above, the development direction of Mac OS X is for a better user experience, polishing various details , and the development direction of the front-end framework is faster .

Is the front-end frame crooked?

React concurrency features should be a hot topic in the front-end field this year.

However, judging from the articles about concurrency features in the community, rather than using and benefiting from concurrency features , more articles are about the popular science of concurrency features and explain their impact .

From this point of view, the concurrency feature seems to be very popular.

If the user experience is considered from a wider scope, React can there be other development directions?

For example, the current continuous event ( Continuous Events , refers to the event that is triggered continuously, such as mouse event, scroll event) trigger frequency and speed is usually faster than the re-rendering speed of React , which is easy to cause Bad user experience.

The usual solution is to use ref . In other words, downgrade to manual operation DOM . Is there a lot of room for optimization here?

In addition to React , can other frameworks also consider the development direction from this perspective?

Do you think the development direction of front-end frameworks has gone wrong?