Long description

The figure displays the functioning elements of a browser. The browser consists of two sections. The first section shows a Minimal H T M L code that reads as follows. Line: Open angle bracket body close angle bracket at indentation level 0. Line 2: open angle bracket div i d equals container close angle bracket open angle bracket forward slash div close angle bracket at indentation level 1. Line 3: open angle bracket forward slash body close angle bracket at indentation level 0. The minimal H T M L sends requests for Static Assets that is placed at the right side of the browser and receives them.

The Static Assets are loaded in the S P “A” JavaScript placed in the second section of the browser. The S P “A” JavaScript consists of Event Handlers open parenthesis Controllers close parenthesis, Data State open parenthesis Model close parenthesis, and Templates open parenthesis Views close parenthesis. The JavaScript Event Handlers fetch data “A” P I from the remote server based on the Data State and attaches it to Templates. The virtual DOM and browser DOM are shown at the bottom of the second section. The event handlers, data state, and templates collectively constructs and modifies the DOMs. An arrow from the virtual DOM to the browser DOM indicates that the virtual DOM makes changes to the browser DOM.