If you are interested in reading about the evolution of technology,
then you might know that every technology has its own evolution phases,
where the technology evolves more and more over time.
In the recent post, we discussed how the ecosystem evolved from a
low-level HTTP Node.js server to Express.
Now this is the right time to discuss how web UI evolved from HTML to React.
1. The Early Web: HTML Documents
In the early web, websites were primarily documents.
The page was mostly static.
If you wanted another page, the browser would request another HTML document.
2. JavaScript and the DOM
Then JavaScript entered the picture.
JavaScript gave us the ability to execute code.
Now the browser wasn't just displaying static web pages or documents; it was also executing behavior, which led to interactive web pages.
At this time, the browser also exposed a programming interface called the DOM (Document Object Model).
The use of the DOM and JavaScript enabled changing elements without requesting a completely new HTML document.
At this time, if you wanted to change elements when a user interacted with a web page, the flow was like this:
A user action executes JavaScript, which finds and modifies the DOM elements, and the page becomes interactive.
This worked perfectly for websites.
3. The Rise of Web Applications
But the web evolved from websites to applications, such as Gmail, Facebook, Google Maps, and online shopping.
Those applications have lots of state, and the application needs to behave according to that state.
Maintaining the UI according to the state using DOM manipulation became complicated.
4. jQuery and Easier DOM Manipulation
To overcome this problem, developers started building JavaScript libraries to make browser programming easier.
One of them was jQuery.
jQuery simplified browser operations, which made working with the DOM easier.
It provided tools for DOM selection, DOM manipulation, events, AJAX, and animations.
Now you only needed to think about the elements that needed to change, and jQuery made selecting and modifying elements easier.
5. The Era of JavaScript Frameworks
As applications became even more complex, developers wanted something more structured.
This led to the development of JavaScript frameworks and libraries around Model, View, and Controller.
The era of MVP, MVVM, and MV* began.
From this era, one important framework became influential: AngularJS, developed by Google.
6. AngularJS and Two-Way Data Binding
It introduced concepts like controllers, scopes, services, dependency injection, directives, templates, and two-way binding.
It solved many problems, but large applications could still become difficult to reason about because of data flow and complex relationships between components and state.
In large applications, data flows in multiple directions.
7. React and a Different Approach
At the peak of AngularJS, React came into the picture, taking a somewhat different approach to maintaining multi-directional data flow and complex relationships between components and state.
React's philosophy was different:
The UI should be a function of state.
Instead of thinking, change this element, change that element, update the template, and synchronize this model, you only need to think about what the UI should look like given this state.
8. The Era of Interactive Web Applications
This helped create the era of highly interactive web applications.
Now web applications became more like desktop applications.
9. Client-Side Rendering and Server-Side Rendering
One important thing is that this evolution was not only about client-side rendering; server-side rendering also evolved.
But we are only discussing the evolution of client-side rendering.
Top comments (0)