Web apps can be complex and may require a lot of dynamic functionalities. One can opt for Vanilla JS to build their applications but if you have worked with Vanilla JS before, you know how messy it can get. Here's when JS frameworks like, React, Angular and Vue, come into the picture.
In this article, I'll walk you through the main differences between a JS library like React and plain Javascript - when to choose which and why?
Let's start by answering two simple questions.
What is Vanilla JS?
Vanilla JS is nothing but plain JS without any external libraries or frameworks. Using this we can build powerful and cross-platform applications.
What is React?
React is a Javascript library used for building user interfaces. It allows us to make complex UIs from isolated pieces of code called "components".
React has quickly become one of the most popular Javascript libraries. This is entirely because of its flexibility and the improvement it brings in the performance. React breaks down the UI into smaller and reusable components that can move around data amongst each other. This breaking down of the UI is what gives React an edge over Vanilla JS.
In Vanilla JS, the code becomes very difficult to maintain if the application is large because in such cases the UI needs to be updated regularly. Here, to change a UI element you need to first find the element in the DOM and then update it. This is fine when you have to update only a single element but imagine doing this on long-form which a user needs to fill. This could be very memory and browser intensive.
This is where React comes in with a great feature i.e its own virtual DOM. The virtual DOM is a shortcut to bypass the manual work. It is a lightweight copy of the actual DOM. It has the same properties as the real DOM but lacks the power to make changes on the screen.
The most important and fundamental reason why modern frameworks are used is that, with Vanilla JS, keeping the UI in sync with the state is hard.
Let's understand this by taking an example
Consider Facebook. Say at a given time, your friends comment on a picture of yours and you want to see it immediately. You'd want to shift from liking posts to commenting or sharing without being slowed down.
Now, this can be done in Vanilla JS too, but the number of changes you'd have to do in the code would be very tedious. All this tiresome work can be avoided by using something like React.
Basically, with React, we can manage to keep the UI and the state synchronized with each other. In Vanilla JS, if you have to change the state, you would need to update the UI. One small mistake and your UI could be out of sync with your data.
Code organization and re-use is another important aspect of React. A component created only once can be used multiple times with different data.
Conclusion
Whether you should use Vanilla JS or React depends very much on your use case.
Vanilla JS is awesome but it's not a great alternative when it comes to building huge applications with complex dynamic functionalities. Besides, it cannot create complex and efficient UIs. So if you have an app that changes frequently and drastically with thousands of pages, it is better to use a modern Javascript framework.
On the other hand, React which allows us to use reusable components and is capable of keeping the UI in sync with the state, can definitely solve this problem.
If you liked this post, you can find more by:
Following me on twitter: @afraz_momin
Joining the newsletter: afrazblogs.netlify.com
Thanks for reading!
Top comments (5)
What is Vanilla JS?
Vanilla JS is a lightweight cross-platform framework used to build powerful Javascript applications. It's basically plain JS without any external libraries or frameworks.
i guess vanilla js is not a framwork
Okay article and fairly you are not bashing VanillaJS too much.
BUT:
"VanillaJS is a lightweight cross-platform framework" -> FALSE. The browser and its JavaScript Engine is a Runtime. VanillaJS is just JavaScript and the framework like features you mention are the Web API and DOM. All that lies below extra code eg. React, Angular, VueJS
FURTHER:
By the outdated nature of your statements, you clearly have not used no Framework for writing a bigger application. And even before Web Components most of your Cons of VanillaJS are simply false. You could create Components with ES5, no PROBLEM. Anyways, I invite you to look at and maybe even participate in github.com/Weedshaker/event-driven... or there is a not Event Driven but already complete VanillaJS Conduit example: github.com/gothinkster/web-compone... .
This is kind of absurd. React is written in JS; therefore anything you can do in React you can do in JS.
The point of a framework is that it provides you with the tools to build large applications without having to repeat work that has been done before. It gives you well established paradigms (e.g. components) and structures to help organise your code. It provides standards that mean new team members can be up and running on a project quickly. Ideally it does this without significant bloat or performance impact.
By its very nature React cannot be more performant than raw JS; but as demonstrated by Svelte, it is still possible to provide better performance, an even better developer experience and less bloat than frameworks such as React.
Hello, I do not understand what is the difference between UI and state, could you explain it to me a little?
UI is User Interface. It's basically everything you see on the Browser is UI like: current page you are in.
Some comments have been hidden by the post's author - find out more