How does the front end work in 2024

Hi everyone, this is Kasong.

Recently, the Stackoverflow 2021 Developer Report was released, and one of them caught my attention:

Among all frameworks (not only front-end), Svelte is the most popular.

This is not to say that Svelte is the most used by people. Another survey shows that React is the most needed framework for developers.

After all, the ecological prosperity of React

The domestic front-end ecology is roughly 2-3 years behind foreign countries. Therefore, today we use the 2021 report to predict the domestic front-end ecological situation in 2024.

The meaning behind Svelte

Svelte has nothing special in terms of grammar and user experience. His most important meaning is:

AOT of the front-end framework field 061110abbaa1f1 (ahead-of-time, which can be understood as precompilation)

Cong Elm (2012), Marko (2014), Vue2 (2014) to Svelte (2016), and pioneers continue to explore AOT .

We can look at the meaning of AOT

• DX ( Developer Experience , the developer experience)
• UX ( User Experience , which is the user experience)

DX (Developer Experience)

React and Vue at the same time may have the following feelings:

Why does React have so many performance optimizations API (such as PureComponent , React.memo ...) need me to manually call, but Vue does not.

The reason is that performance optimization a function. If the framework itself is not done automatically, it can only be done manually by the developer.

To make the framework complete automatically, you need to give the framework enough hints. Vue used template syntax syntax restrictions in fact implied message.

For example, the following template code implies that is the dynamic and changing node :

<template>
  <div>
    <p>Hello</p>
    <span>{{name}}</span>
  </div>
</template>

React Because JSX too flexible to give enough hints from the grammatical level, the function of performance optimization

For React , there are two ways to change:

1. Add constraints for JSX

It is also used JSX but have AOT capability framework Solid.js choice.

For example, in React use arrays map Traversing JSX , in Solid.js use for syntax:

<For each={state.list}>
  {(item) => <div>{item}</div>}
</For>

This serves as a grammar limit .

2. Increase agreement

For example, all Hooks named follow use prefix, which can React future AOT provide some clues ability.

UX (User Experience)

Compared with other view environments, the WEB

Pay attention to application volume

Think about it, the next 60mb application on the mobile phone, do you think: Is it a fake, why is it so small?

Think about it again, PC does not occupy a 20G hard drive in the end game, are you embarrassed to say that you are carefully polished.

However, if a web application is 60mb, it will only load after 20 seconds. Can you bear it?

Therefore, the web have been working to reduce the size of the application.

A very simple truth: if a necessary logic cannot be completed at compile time, it must be completed at runtime.

is completed at compile time and means that what is executed at runtime is the result after completion, and the code size is smaller.

complete when 161110abbaa589 is running, the running logic needs to be loaded together, and the code size is larger.

Therefore, whether from the DX or UX , AOT is profitable.

The direction of making wheels has changed

If you accept the AOT is the general trend , then the direction of domestic developers making wheels will also change after 3 years.

In the previous era of re-runtime front-end, everyone made wheels in the following directions:

• Performance optimization program at runtime
• i18n scheme at runtime

......

However, as the upper framework gradually popularizes AOT , various wheels derived from the framework will be more compile-time.

Therefore, front-end friends who want to eat more in the next few years, compilation principle can learn.

Summarize

The work content of an outstanding front-end student in 2024 is likely to be as follows:

• Use the same framework syntax and paradigm as the front-end in 2021
• When building the wheel, start with AST (Abstract Syntax Tree)

Looking forward to it? Fear?