Before to begin
There are lots of libraries and frameworks in javascript. But I questioned myself. ‘Do I know about the difference between them?’ I was not sure about it. So I decided to discover the history of javascript and why some kind of the libraries or frameworks such as jQuery, React, Vue, Angular, and Svelte was made.
The Birth of JavaScript
The creator of JavaScript was Brendan Ike. According to this website, The reason why he wants to make JavaScript was to validate user input on websites. Nowadays, JavaScript can help complex features inside of web browsers such as interacting with users or renewing something periodically.
Some people just compare HTML, CSS, and JS to nouns, adjectives, and verbs. I also agree about this opinion. JavaScript could make web browsers more dynamic.
jQuery
jQuery: write less, do more
Then, why jQuery was made? Did VanillaJS doesn’t work properly? I was curious about this question so I searched the jQuery website to find the truth. According to this website, they said jQuery is a fast, small, and feature-rich JavaScript library.
In 2006, John Resig was a web designer who processed his project. He was frustrated with writing JavaScript because of its difficulty. For example, the compatibility of the browser was difficult to manage. There are some separate codes only for IE(Internet Explorer), Chrome, of Firefox. This compatibility issue makes him frustrated. Not only about just compatibility issues, but also the grammatical things were more simple rather than JavaScript.
So he made jQuery, the simple and powerful JavaScript library to use. This powerful tool could solve compatibility issues easily. And that makes web developers more productive rather than just using JavaScript.
The Weakness of jQuery
However, one of the problems with using jQuery was the speed. The speed in jQuery is really slow compared to using only JavaScript. Especially using jQuery to make an animation. Also, maintaining the code of jQuery is more difficult than just using JavaScript. Some people might think maintaining jQuery is easier because of its simple code. However, because of that, some people just duplicate the code in jQuery and that makes it more difficult to maintain. This causes jQuery easy to make spaghetti code, which makes maintainability terrible.
Why we don’t use jQuery more than before?
First, the browser compatibility is good enough. So that makes jQuery not useful rather than before. One of the reasons why jQuery was made was the compatibility issue(especially, the cross-browsing issue). Nowadays, this issue is not as important as before.
Also, most features in jQuery can be implemented in VanillaJS or TypeScript. However, jQuery is the library that is built over JavaScript with ‘Wrapping’. And this feature makes it slower than VanillaJS. jQuery is not a library related to optimization.
And the most important thing is the reason we use not jQuery but some other framework or library is ‘Virtual DOM’, which makes it more powerful to build front-end things.
Virtual DOM
According to Wikipedia, a virtual DOM is a lightweight JavaScript representation of the Document Object Model(DOM) used in declarative web frameworks such as React, Vue, and Elm. However, Before doing some research about virtual DOM, I need to know what exactly the ‘DOM’ is.
What is DOM?
‘DOM’ is the data representation of the objects that comprise the structure and content of a document on the web. It is a kind of programming interface for web documents. and it represents the page so that programs can change the document structure, style, and content
And we can access this DOM in JavaScript. Not only just for access but also can manipulate using the DOM and scripting languages like JavaScript.
DOM’s structure is represented by a ‘Node Tree’. In this tree, one parent node can get several child nodes. But it doesn’t mean DOM is the same as HTML. DOM is just a valid HTML document interface. During creating DOM, the browser figures out the things that are not correct HTML code. Also, DOM is neither the things that the user can see in the browser. What exactly the user can see is the ‘Render Tree’, which is combined with DOM and CSSOM. ‘display: none’ is one of the most representative things to understand the difference between DOM and Render Tree. It doesn’t render when some elements have ‘display: none’. However, DOM doesn’t care about what the property of CSS is.
Why do we need Virtual DOM then?
First of all, DOM is structured by Tree Node. So it is easy for us to understand. But lots of nodes makes DOM slower, and there could be more error when we update DOM. Furthermore, recent modern app use SPA(Single Page Application), which means only one page is configured for the whole application. Therefore, the source of HTML is quite huge because lots of dynamic features are inside of it. Furthermore, there are also some problems that we need to rerender consistently.
Some people might think that just rerendering DOM doesn’t take lots of effort. However, the thing when we write this code like this should have happened like this.
document.getElementById('some-id').innerValue = 'updated value';
the Browser parses the HTML and figures out where exactly the node has the same ID compared to this code.
remove the child element which is related to this element.
update this element to ‘updated value’
calculate the CSS about the parent and child nodes.
finally, it is painted in the display of the browser.
So many things happened during updating the value of the DOM. Entire things have been changed even if it is not necessary, and the browser needs to calculate and update the new layout. Changing the layout should need a complex algorithm to change. And it also affects performance. Especially, when it comes to rendering 10 times, the browsers also update the new render tree 10 times. And when the size of the DOM is huge, It is quite complex to find which DOM has been changed and should be rerendered.
So, Here the Virtual DOM comes! 😁
Virtual DOM is quite lightweight. The concept of virtual DOM is like a concept of abstraction of HTML DOM, but it is already an abstract concept so it could be lightweight and also it is separated from the browser’s real DOM.
Because the virtual DOM didn’t truly rerender in the browser, it is relatively fast compared to the real DOM. After the data update, there are three steps to rerender through the virtual DOM.
The entire UI is re-rendered through virtual DOM. This virtual DOM is now current(relatively fast compared to real DOM).
Calculating the difference between the previous virtual DOM(it is equal to the real DOM) and the current virtual DOM.
After the calculation is completed, DOM only changes the real DOM about the thing that has been changed.
These 3 steps of the process are called ‘Reconciliation’ in React.
Angular: I’ll use Incremental DOM!
From now, I was talking about the virtual DOM. However, virtual DOM is not the only way to solve the problem of the performance of re-rendering. What makes the difference between Incremental DOM and virtual DOM? And why the Angular.js using Incremental DOM?
What is Incremental DOM?
Incremental DOM gives us a more simple way of approach than a virtual DOM. There are no virtual things in memory in incremental DOM. They just use a real DOM to find the difference.
Incremental DOM compiles all the components through the chunks of instruction. This instruction created a DOM tree and find out what the difference is.
Hmm. Okay. Incremental DOM looks more simple. Because they don’t need to make a virtual DOM. Instead of that, they use a real In-Memory DOM that was used before. Then, what makes the Incremental DOM special?
Actually. that was the point. It is more efficient to use memory because we don’t need to make a virtual DOM. it also means that we don’t need to copy the real DOM to re-render the application UI. So it decreases the usage of memory a lot.
Also, There is ‘Tree Shaking’ in Incremental DOM. Tree Shaking is a kind of stage that removes some code that is not useful during the build process. Therefore, Incremental DOM can remove some instructions that are not used right now by the Components. However, it is impossible to do tree-shaking when some kind of framework or library uses virtual DOM. because virtual DOM is used by an interpreter. But Incremental DOM can do a Tree-Shaking when it comes to compiling the code.
So, What’s Better? Incremental DOM or Virtual DOM?
The answer is ‘It depends’. There are some trade-offs between incremental DOM and virtual DOM. If some project has a highly important about using memory, then Incremental DOM would be better. However, if speed is more important than memory usage, then virtual DOM would be the better choice.
React vs Vue: What’s the difference?
Nowadays(in 2023), React and Vue are the two most popular frameworks or libraries in JavaScript. They both use virtual DOM, and they are both component-based. So you can reuse components in other projects and build more flexible development because of capsulation and ease of expansion.
Then, What makes React and Vue different?
Vue: Single File Component
Vue.js is a framework based on a single file component. So, they just put HTML, CSS, and JavaScript in only one file which extension is ‘.vue’. This could make the production and maintenance of the project easier, and also it is easy to cooperate with this framework. Vue is also HTML based and they use a ‘template’ which is a kind of grammatical thing in Vue. Many people said it is easy to learn because the grammar in Vue.js is based on HTML.
React: Separate Each File
Unlike Vue.js, React separate the file into ‘.js’ and ‘.css’.
There are a lot more differences compared to Vue.js and React.js. Supposed we need to mutate data. In Vue, we must create data objects and then freely update data. Whereas in React, we create the object which is called ‘state’. and also we need more stuff to do if we want to update it.
In conclusion, Vue looks more strict than react to use, and React looks more flexible than Vue. So, If you want to build a large-scale application, React would be a better choice than Vue. However, Vue seems like easier to learn than React. And also it seems like it is faster to build an application. So If you want to build a small app as fast as possible, then Vue would be a much better choice than react.
Binding Methods
Two-way Data Binding vs One-way Data Binding
One thing that makes react differently compared to Angular and Vue is the ‘Binding Method’. Binding Method is a kind of policy about data interaction between a child component and a parent component. Only Angular uses Two-way Data Binding whereas React, Angular, and Vue all use One-way Data Binding.
In Two-way Data Binding, data flows each direction. What I mean is both parent components to child components and vice versa. Model and View watch each other so that if one of them changes its data, then the other one changes it directly. However, because of this, it is more difficult than One-way Data Binding to know which direction the change of data comes from.
However, In One-Way Data Binding, data only flows in one way. For example in React, If they manage state, then they use props so that there could be some data flow from the parent component to the child component. So that we can predict the flow of data more clearly. But One-Way Data Binding doesn’t mean that we cannot send data from the child component to the parent component. If the parent component sends the handler function to the child component, and when the event happened in the child component, then the child can change the state through the function that the parent component gives. And this is also called ‘Lifting State Up’.
Svelte: Write less
Svelte was born in 2016, and it is an open-source front-end framework. On this website, we can clearly understand why this framework was born.
One of the most popular features in Svelte is ‘write less code’. looks quite similar compared to jQuery. We can build boilerplate-free components using languages that we already know such as HTML, CSS, and JavaScript through Svelte. Boilerplate code means the thing that could be reused repeatedly. However, it is quite uncomfortable when someone refactors those things.
Also, Svelte has ‘No virtual DOM’ compare to React. We already know what is not a good thing when we use a virtual DOM. Unlike React or Vue, Svelte is a kind of compiler whereas virtual DOM is an interpreter. So, the Svelte can interpret the code during build time. And that makes less code. On the other side, React and Vue interprets the code during the run-time.
And the last thing that makes Svelte more powerful is ‘Truly reactive’. There are no complex state management libraries compared to React. So Svelte can brings reactivity to JavaScript itself.
However, there are some challenging things to using Svelte as a production stage. Here is a good article to read about why people aren’t switching to Svelte yet.
Conclusion
Thank you to read my article. I was born and live in South Korea so my English sometimes looks terrible. If you notice some kind of things that make some trouble such as grammatical errors or incorrect information, please leave a comment below or send mail to me 😌.
Top comments (0)