Ignorance is not an obstacle to survival arrogance is

This is teacher Liu Cixin’s comment on the arrogant attitude of earth people to the three-body problem in the novel “The Three-Body Problem”.

On December 28, 2020, I published the article “Why I Recommend JSX to Develop Vue3” in Nuggets, which aroused great heat. On the day of 29, the article was always in the top five of the front page of the front board, and basically locked the first place in the evening.

I did not expect that this article would be so popular. Although it is indeed full of dry goods and very objective and reasonable analysis, it is recommended and should not be so popular. After analysis, it was found that the biggest reason for the high popularity of the article was more because of the hot comment section. By the time I wrote this article, the number of replies in the comment section had reached 130+, which was definitely different in the nuggets article.

I should have been happy that my content was so popular, but I was really not, because the subjectivity of the comments section has not been professional, so I have a deep concern about the front end of the industry, and I thought for a long time in the night, decided to make a formal response to the comments section today.

My purpose in writing this article is not to argue with those students, I can not wake up and pretend to be confused, I hope that some students who really want to improve themselves will not be misled by the comments section.

I will give a unified reply to some misleading comments in the comments section, and let everyone learn to think by themselves and distinguish what is right and what is wrong from an objective point of view.

Before WE begin, I want to make a few disclaimer:

  • I just objectively analyzed the problems existing in SFC relative to JSX, and did not say that JSX must be used to write Vue3
  • My content is very objective, and can cite real cases for analysis, rather than subjective feelings

And I would like to introduce myself briefly:

  • I created BestVue3 and I really like Vue3
  • I had worked on three Vue3 open source projects before writing that article
    • @bv3/router Learn from the react-router route management tool
    • Vue-jss VUE3 version of CSS-IN-JS scheme
    • JsonSchemForm A tool for generating forms from JsonSchema
  • I mentioned bugs to Vue3 and solved bugs for Vue3’s official test library
  • I wrote Vue3 source code analysis website

I have been active in the Vue3 community since the beginning of this year and will continue to be active. If you want to acquire high-quality Vue3 learning knowledge in the first time or discuss Vue3 with me, you can search the following public account BestVue3. Those interested in the above items can also Star a wave.

So let’s get started. I’ll make a list of typical comments and then respond.

First, why don’t you just React

So the question is, why not react

Reject vUE and react

React calls a pro

The biggest problem with these comments is that

They directly equivalent JSX to React and SFC to Vue. This is a very cheap idea, because it ignores the other features of React and Vue, and is an insult to both frameworks. The most likely person to write these reviews:

  • Don’t understand React’s update mode or Vue’s responsiveness
  • I do not know the results of JSX and SFC compilation
  • Can’t build your own project, most likely will only use CRA or VUE-CLI to create the project

As developers, we should not choose a framework based on development tools, it is up to the community to think that a framework can support a variety of development tools. React can also be written in ClojureScript. We need to focus on the essence of the framework, such as:

  • Principle of virtual DOM
  • His update mechanism
  • Response principle
  • What advanced features does he support, for exampleSuspense.ConcurrentEtc.

The second type, HTML

Personally do not like JS logic code embedded HTML tags, feel diaphragm

Many people have said that writing business or template is appropriate, business focus is not flexible but clear structure; I always thought HTML with JS was like raw PHP. < everywhere? This nesting of PHP is a headache, and PHP frameworks are geared towards templates

Sorry for rejecting JSX in my heart because I hate writing HTML in JS

If you write React and Vue for a long time and you still talk about HTML, it’s really sad. One of the goals of frameworks is to flatten the DOM so that developers don’t have to pay attention to the DOM, and they’re trying to block HTML.

An experienced developer writing JSX or Template should not see HTML at all. Instead, they should see h(‘div’, {id: ‘XXX ‘}, ‘Hello World’), the virtual DOM creation process.

I remember one student said ** why should I care about the results after compilation? ** I was momentarily baffled. Later, I thought for a long time, and I want to say to the students reading this article, if you want to improve yourself, you should study at the bottom level, and the compilation result is not the bottom level at all, but the compilation process is barely. I really can’t argue with anyone who doesn’t want to improve himself.

So stop saying that JSX writes HTML in JS. If you go to an interview and say that, the interviewer will assume that you don’t understand how frameworks work.

The third category is performance optimization

Pursuing performance JSX may not be a good choice, but the flexibility of JSX is something THAT I feel Template cannot achieve

Are the series of compile-time optimizations for template in VUe3 gone

If you use JSX, the compiler is useless, and a lot of template optimization is useless, you should use React instead

The students who can raise this question belong to the better ones, because they know that the template has some performance optimization during compilation, which shows that they have studied the principle carefully.

JSX also needs to be compiled, and like templates, they all go through the parsing stage, so in theory Vue3 templates can be optimized for JSX.

In fact, the Babel-JsX plug-in now has the ability to optimize by enabling the Optimize configuration project to compile patchFlag and so on.

{
  "plugins": [["@vue/babel-plugin-jsx", {optimize: true}}]]Copy the code

However, the author adds a note:

It’s not recommended to enable it If you are not familiar with Vue 3.

If you are not familiar with Vue3, it is not recommended to enable it

In fact, there are some problems in Vue3 performance optimization. I met one a few days ago and raised an issue. The official is not sure whether it can be solved.

If you are not familiar with Vue3’s update mechanism and its source code, you will be confused when you encounter this question.

So don’t buy into optimization.

The fourth category is CSS

Styled scoped CSS, styled- JSX feels styled

The biggest advantage of SFC is scoped Style, which is much better than styledsComponents and CSsmodule

SFC’s Scoped CSS is a really handy feature that allows us to write CSS for a component and explicitly place them in a file to constrain its scope.

We could use CSS-modules in JSX instead, but there’s no doubt that this requires an extra step to import classes from ‘xxx. CSS ‘, and that you need to write classes.xxx when you write classes. We can also use the CSS in JS solution that is very common in React (presumably because SFC is so popular that there is no good implementation in the Vue ecosystem at the moment).

But none of these alternatives are as simple as Scoped CSS. So if scoped CSS is important to you, then you should definitely consider choosing SFC for this reason.

This is a selection factor, and its importance varies from team to team, so I won’t give my personal opinion on it.

conclusion

Respond to these questions and I will update you with new ones.

I welcome you to come and talk to me in the comments section, but only if there are objective facts, some subjective experiences:

  • I just don’t like to write HTML in JS
  • SFC is simple, easier to understand than JSX (I disagree with simplicity)
  • Vue should use SFC

I will directly ignore these nutrientless views in the future. It is true that I did not post for a long time yesterday, so I did not resist to write a few words when I saw some comments. Please forgive me if there are not good ones.

If you think my opinion is not correct, you can express your opinion and list some objective facts to show where I am wrong. We can have a deep discussion and grow together.

As with github issues, you will be asked to give a minimal demo, your expected output, the actual output, and the probable reason. An issue that says “I think the result of this library function should be the same” will almost certainly be shut down.