“Updating the DOM is the hardest task of UI development” (Jordan Walke, Creator of React)
If you've ever created projects using native Javascript DOM or jQuery or have dabbled with MVC-styled frontend frameworks, you probably agree with what Jordan Walke said.
Updating the DOM can be a cumbersome process, requiring multiple steps for every little update. You also need to be very careful to not introduce any bug.
Before the rise of frameworks, many web developers use jQuery as substitute for using native Javascript DOM API (many still use to this day though) to develop their projects. Here is a simple example of procedural, step-by-step, programming using jQuery to update the DOM :
$(document).ready(function () {
let totalPrice = 0;
// Function to update the shopping cart's total price
function updateTotalPrice() {
$('#total-price').text(totalPrice.toFixed(2));
}
// Function to add a new item to the shopping cart
function addItemToCart(name, price) {
const newItem = `<li>${name} - $${price.toFixed(2)}</li>`;
$('#cart-items').append(newItem);
totalPrice += price;
updateTotalPrice();
}
// Event handler for the "Add Item" button
$('#add-item').on('click', function () {
const itemName = prompt('Enter the item name:');
const itemPrice = parseFloat(prompt('Enter the item price:'));
if (!itemName || isNaN(itemPrice) || itemPrice <= 0) {
alert('Invalid input. Please enter a valid item name and price.');
return;
}
addItemToCart(itemName, itemPrice);
});
});
Can you see there are many places in the example that can lead to bugs if you are not careful ?
The State of Web Development in Early 2010s
Before React came into the picture, many teams used existing frameworks like Backbone, Knockout, Ember, or AngularJS to simplify frontend development. These frameworks used the concept of MVC (Model, View, Controller) to handle DOM rendering and updates.
Those frameworks required careful management of relationships between models (data) and views (DOM). This tedious work of relationship management often resulted in bugs and made UI updates a challenging task. Let's take a look at updating list of items using one of the popular framework before React, Backbone.js as an example:
Example: Backbone.js DOM Update
const ItemModel = Backbone.Model.extend({
defaults: {
content: '',
},
});
const ItemView = Backbone.View.extend({
tagName: 'li',
initialize: function () {
this.listenTo(this.model, 'change', this.render);
},
render: function () {
this.$el.text(this.model.get('content'));
return this;
},
});
const ItemCollection = Backbone.Collection.extend({
model: ItemModel,
});
const itemCollection = new ItemCollection();
const container = document.getElementById('item-list');
itemCollection.add({ content: 'Item 1' });
itemCollection.add({ content: 'Item 2' });
itemCollection.each(function (model) {
const itemView = new ItemView({ model: model });
container.appendChild(itemView.render().el);
});
Can you see how complicated it is ?
Then came React, a library created by Jordan Walke and Facebook team, which shifted away from the traditional MVC approach and introduced a revolutionary way of handling DOM updates. The core idea behind React was to focus solely on the "V" of MVC, which stands for View. Instead of tediously managing the relationships between models (data) and views (DOM), React proposed a different approach:
"Instead of tediously managing the relationships between models (data) and views (DOM), why don’t we just rerender (remove and build) parts of the DOM from scratch?"
React also focused on declarative approach, which means you write what will happen on the UI, not how, using JSX that will be transpiled to Javascript using Babel.
Example: React DOM Update (using Class Component because the first version of React used it)
import React, { Component } from 'react';
class ItemList extends Component {
constructor(props) {
super(props);
this.state = {
items: ['Item 1', 'Item 2'],
};
}
addItem = () => {
const { items } = this.state;
this.setState({ items: [...items, `New Item ${items.length + 1}`] });
};
render() {
const { items } = this.state;
return (
<div>
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
<button onClick={this.addItem}>Add Item</button>
</div>
);
}
}
Can you see it is much simpler and than the Backbone example ? With Hooks, React also becomes simpler.
React also introduced the concept of a virtual DOM, a lightweight representation of the actual DOM. Rather than updating the DOM directly, React compared the virtual DOM with the previous version, identified the differences (diffing) and applied only the necessary updates to the actual DOM. This approach significantly improved performance and made complex UI updates much more manageable in comparison to the frameworks in the past.
The Aftermath
Initially, React's idea seemed radical and "unlikely to work" even for internal Facebook developers. Facebook also had a UI framework of their own named Bolt.js. However, once they gave it a try, they fell in love with it—just like countless web developers worldwide after React was open-sourced. The rest, as they say, is history.
In conclusion, React's ability to simplify DOM updates while improving performance has made it a popular choice among developers worldwide, leaving a lasting impact on frontend development practices. The journey of DOM updates in frontend development has seen remarkable transformations, from the challenges of Vanilla JS to the structured approach of Backbone.js and the revolutionary virtual DOM of React.
Nowadays, there are major frameworks that performs better than React and has better developer experience, such as Svelte, Solid, Vue or Astro. But the emergence of React is an important step that has brought us closer to more efficient and maintainable UI development thus paved the way for new frameworks to rise.
Source :
Top comments (0)