Client - Side Rendering

Introduction

Earlier we had discussed about the client-server architecture- DNS Lookup, HTTP communication Protocol, Now we came across the topic- how the client be able to parse html page received from the server? simply, we can say how client renders the html page received from the server.

In this blog, we discuss about the things that involve in client - side rendering. In other words, the Data Structure / API / Frameworks that facilitates the parsing of web applications in client side.

1. Document Object Model (DOM Tree):

Document Object Model, commonly referred to as DOM, is a Language independent Programming Interface that represents web documents in a tree structure, where each node is an object consisting HTML element, style and event handlers.

In other words, a same HTML page is visualized different in HTML compiler and a Browser window. This is because the browser uses in-built DOM tree to parse the HTML document to display a web page.

Illustration of HTML code in code editor, Browser and DOM Tree:

The Language Independent in DOM refers to Traversal / Manipulation of Nodes in DOM tree can be done in any programming Language.

DOM considers every element as a Node,

• A Document/web page is a Document Node,

• HTML element is a element node,

• HTML attribute is a attribute node, and

• text inserted in element is a text node which are implemented by respective interfaces in DOM.

Some Common operation that can be performed on DOM are:

1. Traversing over DOM Tree- It includes the fetching of HTML elements using programming interface.

2. Manipulating DOM Nodes- It includes changing styles, manipulating HTML elements.

3. Event Handling in DOM- It covers how the client-side events on DOM elements are handled, example-mouse clicks.

2. Event Handling

We come across many websites and applications where we interact with mouse, keyboard. So, How websites recognize and trigger to our interactions?

The answer is In-Built Browser Event-Handling, with in Document-Object-Model (DOM). Before we discuss further, Let's understand about Event and its properties.

2.1 What are Events ?

Events are the things that we interact with the websites, that triggers (or, fires) some actions. Be it a mouse-click, keyboard press or anything else, which fires some activity- form submission, selecting text, collapsing/expanding accordion, etc...

2.2 What are Event Attributes ?

Each Event posses properties and methods for handling the behavior of events.

2.3 What is Event Mechanism ?

Event Mechanism is all about how an event is handled when an event is triggered.

When an Isolated elements triggered with an event (mouse-click), there is no discussion on event mechanism.

But the concern arises, if multiple elements overlap each other that are triggered with same event, then understanding of event mechanism is an important factor.

This can be illustrated in the following:

Each Event should follow three phases when it is triggered:

1. Capture Phase- It is the primary stage, where event travel down from the parent of the target to target

2. Target Phase- It is secondary stage, where event reaches the target.

3. Bubbling Phase- It is the ternary Stage, where event propagates back from target to parent of the target.

When multiple elements overlap each other, having event listeners triggered to same event- there exists 2 possible ways to handle events:

• Capturing Mechanism: Its the default mechanism where the elements are triggered in reverse-order of capturing phase. i.e., down to upward execution

• Bubbling Mechanism: Optional( specified, at time of adding event listener). The elements are triggered in the capture phase. i.e., Upward to Downward execution flow.

Determining the type of mechanism could be done while defining the event listener to the element.

2.4 Types of Events

2. Web Storage APIs:

Before discussing, Have you noticed why the storage of browser apps are increasing, even just by browsing websites. We often found that, frequent websites loads faster than the new ones. The reason is Web Storage APIs used by browsers.

So, What are Web Storage APIs? It is a standard JavaScript API used by browsers to store application data by the websites.

We can say, Web Storage API's provides mechanisms that allow applications to store application data in the client side. The data is stored in form of Key-Value pairs.

Why applications store data on client-side? Storing application data on client-side gives ability to load faster, enables web app to work offline with some extent, and moreover session information such as login status, session id, login id,... are stored to maintain and track the user's session.

JavaScript provides 2 mechanisms for web storage- Local Storage and Session Storage.

Session Storage is the data stored in form of Key-Value pairs with per-Origin and per-Instance scheme, which persists for that session only( until the tab/ window opened) .

• per- Instance means when we are accessing https://www.pavanpps.biz/ across multiple tabs / windows, the session storage is maintained differently.

• per- Origin means Session Storage is maintained separately, for http://www.pavanpps.biz/ and https://www.pavanpps.biz/ , as they are different in origins.

Local Storage is the data stored with per- Origin in Key-Value pairs, that can be maintained till either browser cache is cleared or through a browser console.

3. Single-Page vs Multi-Page Application Framework:

Lets observe scenarios- 1 & 2 shown below before moving to next topic:

We observe that in one case, entire page is loaded while making internal navigations, meanwhile in other case only the sections that needs to be update is loaded.

Therefore we can draw fundamental difference between Single-page and Multi-page application architecture.