Hi, I’m Casson.

Recently the Stackoverflow2021 developer report was released, and one item caught my attention:

Of all the frameworks (not just the front end), Svelte is the most popular.

This is not to say that Svelte is the most used framework, another survey showed that React is the most needed framework for developers.

React, after all, is ecologically prosperous.

The front-end ecology in China is roughly 2 ~ 3 years behind that of foreign countries. So, today we look at the 2021 report to predict the domestic front-end ecology in 2024.

The meaning behind Svelte

As a front-end framework, Svelte is nothing special in terms of syntax or experience. His most important meaning is:

An exploration of the front-end framework domain AOT (aHEAD-of-time)

From Elm (2012), Marko(2014), Vue2 (2014) to Svelte (2016), there are many pioneers to explore AOT.

There are two ways to view the significance of AOT:

  • DX (Developer Experience)

  • UX (User Experience)

DX (Developer experience)

Those of you who wrote React and Vue at the same time might have this feeling:

Why React has so many performance optimization apis (such as PureComponent, React.Memo…) I need to call it manually, which Vue doesn’t.

The reason is that performance tuning as a feature, if not automatically done by the framework itself, must be done manually by the developer.

For the framework to automate, you need to give the framework plenty of hints. The syntax limits of the template syntax used by Vue are implicit hints.

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

<template>
  <div>
    <p>Hello</p>
    <span>{{name}}</span>
  </div>
</template>
Copy the code

React doesn’t automate performance tuning because JSX is too flexible to give enough hints at the syntax level.

For React, there are two ways to change:

  1. forJSXIncrease the constraint

This is the choice of the framework Solid. Js, which also uses JSX but has AOT capability.

For example, use the array map method in React to traverse JSX, and use the for syntax in steady.js:

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

This serves as a reminder of syntax limitations.

  1. Increase the contract

For example, all Hooks are named with the use prefix, which gives some clues about React’s future AOT capabilities.

UX

There is one big difference between the WEB environment and other view environments:

Emphasis on application volume

Think about the next 60MB application on the phone, you will not think: is it fake, why so small?

Think again, PC end swim not a 20G hard disk occupancy is not embarrassed to blow oneself is careful grinding.

But a web app, if it’s 60mb, takes 20 seconds to load. Can you stand it?

As a result, Web developers are constantly trying to reduce the size of their applications.

The simple truth is that if a piece of necessary logic cannot be completed at compile time, it must be completed at run time.

Compile-time completion means that the finished result is executed at runtime, and the code is smaller.

Runtime completion requires the runtime logic to be loaded along with the code, which is larger.

So AOT is profitable from both DX and UX perspectives.

The direction of the building wheel changed

If AOT is accepted as the big trend, then the direction of the domestic developers building wheels will change after 3 years.

Once in the front end of the re-run era, everyone built wheels in the direction of:

  • Runtime performance optimizations

  • Runtime I18N scheme

.

However, as the upper frame becomes more prevalent in AOT, the various wheels derived from the frame will become more compile-time oriented.

So, want to eat more open front end friends in the next few years, compiler principles can learn.

conclusion

A good front-end student’s job in 2024 is likely to look something like this:

  • Use the same framework syntax and paradigm as the 2021 front end

  • Start with the AST (Abstract Syntax tree)

Looking forward to? Fear?