You Yuxi recommended Vite developed by himself to React, netizens: It doesn’t make any sense to use third-party tools

Author｜ Chu Xingjuan Nuclear Cola

Recently, the React team is updating the React documentation. During the period, Vue.js author Yuxi You tweeted that the new React documentation should recommend Vite rather than CRA for beginners — or at least a Vite-based custom template if you need to use ESLint or testing (also a Vite-based custom template). Vitest should be used instead of Jest).

Vite is a general-purpose build tool designed to provide a faster, leaner development experience for modern web projects like VanillaJS, Vue, React, and Svelte, and it’s not tied to any particular framework. It is worth noting that Vite is developed by the Vue development team, and You Yuxi is also the core developer of Vite.

You Yuxi’s release of such content aroused discussions among developers.

A developer left a message saying: React has created its own tools (jest, CRA, testing library) around itself. Many projects still use them. There’s no point in recommending third-party tools (for beginners or not), maintain your own tools no matter how good the others look.

You Yuxi responded: The React team did not create Jest/testing-library, nor did they maintain them. CRA is first-party to some extent, but once they drop it, they can provide users with better DX and reduce their own maintenance burden.

In the face of developers’ doubts about Vite, You Yuxi said, “I don’t think Vite’s level is too low, it provides almost all the configurations provided by CRA.” You Yuxi also added, “Of course I am biased, but I Would love to know if there are any valid reasons to stick with the CRA.”

The battle between the two mainstream frameworks

As the two mainstream frameworks in the front-end of the web, the competition between React and Vue is particularly fierce.

React originated as an internal project at Meta (former Facebook) when the company was dissatisfied with all the JavaScript MVC frameworks on the market and decided to develop it on its own. Facebook first deployed React on News Feed in 2011, followed by Instagram in 2012. In May 2013, Facebook announced that it would open source the project.

Currently, React is the first choice for many large companies, like Atlassian (Jira, Trello), Codecademy, Dropbox, Netflix, Airbnb, Twitter, Reddit, and Alibaba all use React. React, though always seen as a framework, is equally suitable for building the whole view of a web application.

Vue was first released in February 2014. You Yuxi said that Vue extracted the parts of Angular that he liked, and then built this rather lightweight framework. The earliest versions were posted on Hacker News, Echo JS, and Reddit’s /r/javascript section, and hit the front pages of all three sites within a day. Now, Vue is also one of the most popular open source projects on Github.

According to Yuxi You, the main users of Vue are small and medium-sized businesses, freelance developers, and small agencies. Businesses using Vue today include Behance, Dribbble, Adobe, GitLab, Namecheap, Grammarly, Nintendo, Zoom, Louis Vuitton, Google Careers, and more.

This is not the first time You Yuxi has publicly commented on React. In May of this year, React core team member Dan Abramov posted a new React document on Twitter, and some netizens praised the document for reaching very high standards in terms of structure, aesthetics, and performance. But You Yuxi said that after testing the new Vue document and the React Beta document respectively, he believes that the new Vue document has more advantages in terms of performance.

In this regard, Dan Abramov said that the document is still in the Beta version, and the performance will be optimized before the official version is launched. However, some netizens found that Dan Abramov stayed up late on the night of May 26 to optimize the performance of the new React document. The competition between React and Vue is obvious.

Which one to use?

The industry’s discussions on “Who is more powerful between React and Vue” and “Who to choose between React and Vue” have never stopped. Developer Oleg Goncharenko analyzed how React and Vue.js create components, how components communicate with each other, and how components affect the browser DOM.

Component Building Principles in React and Vue.js

The role of the component is to render data on the web browser, including the UI part (HTML) and the logic part (JS) that are displayed to the user. The logic here is responsible for describing the functions and methods of the data passed in the browser.

React uses JavaScript Syntax Extension (JSX), a syntax language that helps write functions that correspond to native methods in the browser. Safari, Chrome, and Firefox are all based on JS engines, so it’s possible to talk directly to logic functions written in React. But because the JS code also contains a lot of HTML tags, the web browser cannot directly recognize it. Therefore, React needs to use Babel Transpiler to convert the code to pure JS.

JSX allows returning HTML in JS or executing in HTML. JS variables, on the other hand, can be assigned using HTML markup as follows:

const message = <h1>React is cool!</h1>

Dynamic variables can be placed inside the bracket syntax ( { … } ) in JSX.

According to Stackshare statistics, the most popular features of React are components (747 votes) and convenience (484 votes). But JSX received very limited support, only 31 votes.

The biggest problem with JSX is that it does not require a specific code structure, so component logic and UI are stored in a single file, which is likely to lead to code confusion.

This idea of ​​putting components into a single file is the opposite of Angular, which requires HTML, JS, and CSS to be kept in separate files. Unless Airbnb and Netflix join the React community and build their own MVPs (Minimum Viable Products) using React, this form of single-file component implementation will certainly not become mainstream.

Like React, Vue.js also recommends keeping UI and logic in the same file. Component code in Vue.js is contained within a specific HTML template. The presence of templates provides a clear outline for component code. Programmers can use this to observe methods, properties, and render functions.

Also, Vue.js has its own specific syntax that uses double brackets as data placeholders. HTML attributes are directives in VUe.js, prefixed with v-. At the same time, Vue.js also supports coding with JSX, which also expands the programming capabilities of the framework itself.

In general, React requires developers to have solid JS skills, while Vue.js is more friendly to novice developers. Similar to React, Vue.js also supports writing in JSX, but its components are written in HTML templates.

How do components affect the browser DOM?

When a user opens a web page, the web browser parses it into a tree-like structure and reads it from top to bottom. This tree-like structure file is called the Document Object Model (DOM). If the user performs some action on the page, the browser needs to recreate the page and read the DOM. This brings more load and consumes browser resources.

React avoids traditional DOM rendering in favor of in-browser data rendering capabilities. React devised a way to render content to the virtual DOM. The working principle is as follows:

1. Before the web browser loads the page, React makes a copy of the DOM and puts all objects into a new component.

2. When a user opens a web page, instead of accessing the actual DOM, React accesses a copy of the rendered DOM—the virtual DOM.

3. While the user browses the page, React is also calculating all the changes in it. If the user clicks a button or takes some other action, React creates a new DOM snapshot and compares it with the previous version.

4. If any other node element changes, React updates the page to render the actual DOM.

The text and pictures in this article are from InfoQ