Speaking with different engineers, it's clear that some teams prefer building apps that utilize React's framework, and other teams insist on writing vanilla JavaScript to achieve full control of their web app. I enjoy writing vanilla JS and React projects but was curious when each is best applied.
First off, what are vanilla JS and React?
Vanilla JavaScript is the use of JavaScript without a framework or library. Writing vanilla JS allows for more customization, yet requires more attention to each component of a given project. There are less built-in features and the structure of a vanilla JS project has less limitations. It is worth mentioning that almost every benefit of React can be accomplished with vanilla JS, with the right know-how.
React is an open source JavaScript framework designed by Facebook. It is built on vanilla JS and allows for more structured web apps, which in turn, usually translates to more efficient development. Though React is built on JS, and does utilize vanilla JS within its projects, it does have unique syntax in many places. While building a React web app (with a basic understanding of fundamentals) is likely easier than a vanilla JS web app, it does offer less customization and more limitations.
One of the main differences between the two is the process for sharing code across an app. React allows for the creation of generic and reusable components. These components can be constructed to handle code that will be utilized on many views within an app. Vanilla JS does not provide as easy a solution for creating recyclable code. It is possible to create custom components but requires a greater understanding of JavaScript fundamentals and web app architecture. React's components are essentially plug and play.
Another significant difference is how the DOM (Document Object Model) is updated. With vanilla JS, the DOM is typically updated with event listener functions that modify specific pieces of html. This often creates lengthy solutions for modifying the UI and demands that engineers keep track of more interactions.
Updating the DOM with React happens automatically when state changes. This means that you can modify the UI by simply changing state. For example, action-specific element attributes (e.g. onClick, onChange) trigger functions to change state.
Now back to my initial question - when is React more appropriate than vanilla JS?
I believe that React is great for apps that require many views that could utilize recyclable components, and for apps that frequently change what is displayed to the DOM. Web Apps that have data that is frequently changing and updating what is displayed to your screen could benefit from React's intuitive UI management.
On the other hand, vanilla JS is great for ground-up builds that aim to satisfy a very specific direction. If React's interfaces do not satisfy a specific need for your project, it is probably better to use vanilla JS to keep your project more lightweight. Focusing on vanilla JS also seems to carry more value when interviewing for companies. While React is widely used and is absolutely in demand, frameworks do change and vanilla JS will always have inherent value.
Top comments (0)