takeaway

This article is a short piece of insight that I made while exploring Vue3 + TSX best practices and is a spin-off of Vue3 + TS Best Practices. React and Vue were designed with the help of these “new findings”.

background

I have 2 + years of React + hooks + TS development experience and I can say that the development experience is much better than Class Component + Redux. After the initial discomfort with TS, the feeling of writing code can be described as exhilarating. If I had to go back to the old way of writing, I would definitely not.

Recently, due to work reasons, the technology stack changed to Vue3. This coincided with the team’s attempt to introduce TS, resulting in a number of Vue3 + TS best practices studies. When I calm down to think and experience, especially when I compared the two excellent frameworks, I suddenly realized the secret of React design idea, which made me very happy. Can not help but share it out, I hope you don’t want to laugh.

The body of the

The benefits of TS have been mentioned many times in previous articles (such as Vue3 + TS Best Practices) and will not be covered here. This paper will take TS as the starting point and reflect the difference in design concepts between React and Vue by analyzing their support for TS.

Why was React so successful with TS

Key words: Abstract

React after introducing the concept of hooks in V16.8, all scenarios can be implemented using Functional Component + hooks. This means that “components are functions”, and hooks are also functions wrapped from a usage perspective. In other words, in the React system, only function is left, which achieves extremely simple abstraction. Here can be used to describe amazing, when the author realized the subtlety of this point, the heart is very shocked and excited.

You know, how difficult it is to abstract a very complex and exhaustive scene into a, mind you, a concept. To use an unfortunate metaphor, if the difficulty of abstracting something into two concepts is 10, then the difficulty of abstracting into one concept is 100. That’s still a little bit of a lie, so let’s keep going.

In my opinion, the credit should go to hooks. Reuse of common logic through HOC => renderProps => hooks (see Do hooks replace Render props and higher-order Components?) . Hooks elegantly solve the problem of reuse of common logic, and even directly abstract away state maintenance within components. It is no exaggeration to say that hooks are another revolution on the front end. In my opinion, the invention of Virtual DOM is comparable to it.

Only function is left, which means absolute simplicity and purity. The combination with TS is naturally extremely smooth and perfect. That’s one of the benefits of high abstraction.

JSX’s role in this

Key words: decoupling

The essence of JSX is just a syntactic sugar of JS. In order to make it more convenient for developers to write DOM tags, JSX will eventually be converted into JS code (usually the render function) by compiler tools. Its essence can also be understood as function.

In addition, JSX is really only responsible for the “presentation level” implementation, which is very one-dimensional. Other very complex logic, such as if-else, for-loop, etc., is hosted by JS, which is a critical decoupling. It’s even safe to say that there will be almost no major changes in JSX usage in the future, nor need there be. In contrast, JS (ES) responsible for the logic part will continue to iterate and upgrade, bring forth the new, enhance capabilities and improve development experience.

Besides, TS. For JSX adaptation, you only need to implement it once because it is very stable; JS adaptation, TS must achieve the task, needless to say. So, JSX + TS, TSX will iterate naturally with TS, without much cost. That’s one of the benefits of high decoupling.

JSX vs. Vue Template(SFC)

Key words: Performance

The Vue Template can also be understood as a syntactic sugar, which will eventually be compiled into the Render function (see the official documentation for why SFC is used for its advantages). Unlike JSX, it also couples some logic in it, such as if-else, for-loop, emits, and so on. This means that if Template wants to be combined with TS, its coupling logic must be taken care of. Also, some of ES’s new features, such as destructuring assignments (common when rewrapping components), are not available in Template. In contrast, the benefits of React’s full decoupling are obvious.

However, just because Template is coupled with logic in it, it also adds some semantic certainty that Vue can take advantage of to do some optimization for you. Static promotion for Vue3, event listener caching, etc. If React wants to achieve similar optimization, it needs to use useMemo, useCallback and other methods. It is believed that most people can use these optimization methods correctly and skillfully. This means that Vue has a higher lower bound probability of performance in most scenarios than React without guaranteeing programmer proficiency.

In addition, the SFC writing method of Vue makes it possible to reuse data between template, script and style. In fact, Vue already has the ability to use script variables directly in style, see state-driven dynamic CSS. React would have to introduce its own CSS-in-JS solution to achieve similar functionality. Have to joke, React ecology is always like this, want to use something to build their own. Comparatively speaking, Vue is much easier to use in terms of ecology, of course, the former still dominates in terms of richness.

Back to TS. Since Template is the render function, it is theoretically possible to implement TS support just like JSX, but with much more logic to adapt. Fortunately, Volar has largely solved this problem, so far there are no obvious problems.

conclusion

React and Vue are true. This paper lists the thinking and comparison of abstraction, decoupling and performance. The author is deeply impressed by the wisdom and thoughts of the authors of React and Vue. After learning React and Vue, I think I have gained a touch of understanding in architecture design.

React and Vue have their pros and cons (duh), but I personally like React more than React right now, because we are in the middle of a revolution brought about by hooks. In the early years, I preferred Vue because of its user-friendly design, smooth learning curve, perfect documentation, and unified management of ecological tools. The user experience is much better than React. Only the recent addition of TS, with hooks, seriously broke the old order. Now it looks like Vue is catching up, and already catching up quite a bit. I hope Vue can release a big move in the future, let me applaud again. Finally, with the author’s limited cultural accumulation to end, with everyone.

The Master said, “If one considers the old and learns the new, one can become a teacher.” — “The Analects of Confucius · Wei Zheng”