Highlights of Part-II
HTML and CSS are parsed to DOM and CSSOM respectively
DOM and CSSOM get mixed up in the process called rendering and outputs render tree
The layout is the place where structure and position(HTML structure and CSS decoration) meets
At last, they get displayed on the screen
We know that JS is a DOM manipulator, it gets access to DOM by API(Application Programming Interface)
To implement the same output or display across all browsers, ECMA standardizes the JS.
Every browser runs the JS differently
What prompted the invention of ReactJS?
This question leads us to how things were working before JS libraries/frameworks like React, Angular, Vue etc. We know that JS was introduced to give dynamicity to web pages. To add dynamicity like background colour change like night mode, content change like a news website, customized user experience like Netflix etc.
This essentially leads us to the question of how dynamicity is added to the webpage before libraries/frameworks and after?
Dynamicity basically enables user interaction with the web. Most of the time user interaction happens through events like clicking, scrolling, keys, selecting etc. These are called Events.
You can read more events here
Events detection(Clicking,selection,page resize etc) --> Triggers JS function(contains DOM queries) --> DOM updation through DOM queries
On a code level, the stakeholders are DOM elements, DOM queries, events and JS functions.
What element we need to update in DOM --> DOM queries like getElementById,getElementByClassName etc.
Create a function in JS that does what we intended to do - This function is called Event Listeners
Attach an element to the event listener function
Apply the above processes,
What element do we need to update? We will update the element with id 'one'
What do we intend to do? Let us replace the text 'a' with 'hello'
We will create the function in JS (aka Event listeners) in the script(either inline or <script> which changes the text to 'hello'
If there is an event listener, we need to specify the event. For simplicity, we will take the 'click' event.
I consciously didn't want to write code here because people don't even realize why they write code. They write code because they are asked or trained to do so. The brain always thinks in terms of visualization.
Limitations of this approach
This approach may look easy at first. But it gets tougher when you build web applications on large scale.
Think of a scenario where you need to track many element nodes which have different IDs and classes. How can we update the DOM?
How do we connect different script files into the source HTML file?
Traversing and accessing the DOM elements gets complex and bug fixes become tedious
Reusability of code is nearly impossible
The modular approach i.e JS, CSS and HTML is not in the same place. Connections between them are another tedious process.