React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC.
We built React to solve one problem: building large applications with data that changes over time.
Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.
When the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts.
React is all about building reusable components. In fact, with React the only thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy.
What is a DOM?
Before we start to discover the virtual DOM let’s talk a little bit about the basic thing — the original DOM. DOM stands for Document Object Model. It’s a way of representing a structured document via objects. It is cross-platform and language-independent convention for representing and interacting with data in HTML, XML and others. Web browsers handle the DOM implementation details, so we can interact with it using JavaScript and CSS. We can search for nodes and change their details, remove one and insert a new one. This days DOM API is almost cross-platform and cross-browser. So what’s the problem with it?
DOM Problem
The main problem is that DOM was never optimized for creating dynamic UI. We can work with it using JavaScript and libraries like jQuery (thanks God we have it). But jQuery and others did little to solve performance issues. Think about modern social networks like Twitter, Facebook or Pinterest. After scrolling a little bit, user will have tens of thousands of nodes. Interact with them efficiently is a huge problem. Try to move a 1000 divs 5 pixel left for example. It may take more then a second. It’s a lot of time for modern web. You can optimize the script and use some tricks, but in the end, it’s a pain to work with huge pages and dynamic UI. Can we solve this problem? Looks like we can. Currently W3C group is working on new Shadow DOM. Shadow DOM — A W3C working draft standard. This specification describes a method of combining multiple DOM trees into one hierarchy and how these trees interact with each other within a document, thus enabling better composition of the DOM. Another option is Virtual DOM — Not a standard. Virtual DOM solutions are built on top of standard DOM. They still utilize DOM eventually, but do it as little as possible and very efficiently.
Virtual DOM
Rather than touching the DOM directly, we’re building an abstract version of it. That’s it. We working with some kind of light weight copy of our DOM. We can change it as we want and then save to our real DOM tree. While saving we should compare, find difference and change (re-render) what should be changed.
It is much faster than working directly with DOM, because it doesn’t require all the heavyweight parts that go into a real DOM. It works great, but only if we are working with it in a right way. There are two problems to solve: When re-render the DOM and How to do it efficiently.
When. When the data is changed and needed to be updated. But how do we know that the data is changed? We have two options here.
First one (dirty checking) — poll the data at a regular interval and check all of the values in the data structure recursively.
Second option (observable) is to observe for the state change. If nothing has changed, we do nothing. If it changed, we know exactly what to update.
How. What makes it really fast is:
- Efficient diff algorithms.
- Batching DOM read/write operations.
- Efficient update of sub-tree only.
As you understand it’s not an easy thing and implementation of it can be tough. There are some libraries that helps us to implement the idea in our projects. The famous one is React JS by Facebook.
React JS — is a JavaScript library for building user interfaces developed by Facebook. It actually populated the virtual DOM idea. React library creates lightweight tree from a JavaScript objects that mimic a DOM tree. Then creates HTML from it and append / insert it to some HTML element. This cause browser to re-draw the page. React is a library, not a framework. You can’t compare it to Angular or Ember.
-
virtual-dom by Matt Esch- A JavaScript Virtual DOM and diffing algorithm.
-
Mithril- A Javascript Framework for Building Brilliant Applications.
-
Bobril- Component oriented framework inspired by Mithril and ReactJs.
-
cito.js- JavaScript framework for building fast, scalable and modularized web applications.
JSX is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX syntactic transform with React.
You don't have to use JSX with React. You can just use plain JS. However, we recommend using JSX because it is a concise and familiar syntax for defining tree structures with attributes.
It's more familiar for casual developers such as designers.
XML has the benefit of balanced opening and closing tags. This helps make large trees easier to read than function calls or object literals.
It doesn't alter the semantics of JavaScript.
BabelJS
Babeljs is a configurable transpiler, a compiler which translates from Javascript to Javascript unlike a compiler which translates high level application code into lower level code or binaries. Babel started out as 6to5 and has established itself as the defacto tool for Javascript transpilation beating out tools like Traceur. Part of this is because is because it manages to generate output that is sensible and easy to read.
Webpack is a module bundler.
Webpack takes modules with dependencies and generates static assets representing those modules.