Client-side modularization of a requested webpage
View Patent ↗This disclosure provides for a client-server paradigm where a client requests one or more web pages from a server. A web page may include one or more web modules to be instantiated by the client. In addition, the web page may be defined according to a layout, which includes one or more identifiers that indicate where a corresponding web module should be located and/or displayed. As the web modules are being received and rendered by the client, the web modules are initially hidden from view. At periodic intervals of rendering the web page, the client modifies the page's Document Object Model to insert the received web modules. At or about the same time, the client also causes the web modules to become visible. As a web module executes, it may communicate one or more events, which other web modules can use as a signal to display and/or generate associated content.
1. A system comprising:
a machine-readable medium storing computer-executable instructions; and
at least one hardware processor communicatively coupled to the machine-readable medium that, when the computer-executable instructions are executed, configures the system to:
communicate a request for a web page;
receive a notification that a first transfer type is supported for sending the web page;
establish a connection according to the first transfer type for receiving the web page;
receive static content for the requested webpage, the static content comprising a layout identifying one or more locations where a web module is to be instantiated;
display the static content;
receive dynamic content for the requested webpage, the dynamic content comprising a plurality of web modules, wherein:
each web module of the plurality of web modules is to be instantiated at one or more corresponding locations selected from the one or more locations identified by the received layout; and
each web module of the plurality of web modules is initially hidden from view;
modify a Document Object Model of the requested web page to move one or more web modules selected from the plurality of web modules to their one or more corresponding locations;
execute a flush of the received webpage, the flush of the received webpage causing the one or more web modules selected from the plurality of web modules to be displayed; and
execute the one or more web modules selected from the plurality of web modules, wherein:
the one or more web modules selected from the plurality of web modules are assigned a first state selected from a plurality of states associated with the one or more web modules, the assigned first state identifying a behavior of the one or more web modules;
the one or more web modules are configured to change from the assigned first state to a second state selected from the plurality of states in response to at least one interaction with the one or more web modules; and
the one or more web modules communicate an event in response to a change in the assigned first state to the selected second state.
2. The system of claim 1 , wherein the system is further configured to append the selected one or more web modules selected from the plurality of web modules as one or more leaf nodes to the modified Document Object Model of the requested web page.
3. The system of claim 1 , wherein:
the system is further configured to instantiate an event listener that listens for events communicated by the selected one or more web modules selected from the plurality of web modules; and
the event listener is configured to maintain an event queue of events communicated by the selected one or more web modules.
4. The system of claim 1 , wherein the selected one or more web modules selected from the plurality of web modules are each associated with a hidden tag that hides the selected one or more web modules from view; and
the hidden tag is removed from a corresponding selected web module based on the modification of the Document Object Model of the requested web page.
5. The system of claim 1 , wherein:
the selected one or more web modules selected from the plurality of web modules are associated with a Document Object Model identifier that identifies the selected one or more web modules; and
the received layout includes the Document Object Model identifier to the identified one or more locations where the selected one or more web modules are to be instantiated.
6. A method comprising:
communicating a request for a web page;
receiving a notification that a first transfer type is supported for sending the web page;
establishing a connection according to the first transfer type for receiving the web page;
receiving static content for the requested webpage, the static content comprising a layout identifying one or more locations where a web module is to be instantiated;
displaying the static content;
receiving dynamic content for the requested webpage, the dynamic content comprising a plurality of web modules, wherein:
each web module of the plurality of web modules is to be instantiated at one or more corresponding locations selected from the one or more locations identified by the received layout; and
each web module of the plurality of web modules is initially hidden from view;
modifying a Document Object Model of the requested web page to move one or more web modules selected from the plurality of web modules to their one or more corresponding locations;
executing a flush of the received webpage, the flush of the received webpage causing the one or more web modules selected from the plurality of web modules to be displayed; and
executing the one or more web modules selected from the plurality of web modules, wherein:
the one or more web modules of the plurality of web modules are assigned a first state selected from a plurality of states associated with the one or more web modules, the assigned first state identifying a behavior of the one or more web modules;
the one or more web modules are configured to change from the assigned first state to a second state selected from the plurality of states in response to at least one interaction with the one or more web modules; and
the one or more web modules communicate an event in response to the change in the assigned first state to the selected second state.
7. The method of claim 6 , further comprising:
appending one or more web modules selected from the plurality of web modules as one or more leaf nodes to the modified Document Object Model of the requested web page.
8. The method of claim 6 , further comprising:
instantiating an event listener that listens for events communicated by the selected one or more web modules selected from the plurality of web modules; and wherein
the event listener is configured to maintain an event queue of events communicated by the selected one or more web modules.
9. The method of claim 6 , wherein one or more of the web modules selected from the plurality of web modules are each associated with a hidden tag that hides the selected one or more web modules from view; and the method further comprises:
removing the hidden tag from a corresponding selected web module based on the modification of the modified Document Object Model of the requested web page.
10. The method of claim 6 , wherein:
the selected one or more web modules selected from the plurality of web modules are associated with a Document Object Model identifier that identifies the selected one or more web modules; and
the received layout includes the Document Object Model identifier to the identified one or more locations where the the selected one or more web modules are to be instantiated.
11. A computer-readable memory having instructions stored thereon that, when executed by one or more hardware processors, causes a system to perform a plurality of operations comprising:
communicating a request for a web page;
receiving a notification that a first transfer type is supported for sending the web page;
establishing a connection according to the first transfer type for receiving the web page;
receiving static content for the requested webpage, the static content comprising a layout identifying one or more locations where a web module is to be instantiated;
displaying the static content;
receiving dynamic content for the requested webpage, the dynamic content comprising a plurality of web modules, wherein:
each web module of the plurality of web modules is to be instantiated at one or more corresponding locations selected from the one or more locations identified by the received layout; and
each web module of the plurality of web modules is initially hidden from view;
modifying a Document Object Model of the requested web page to move one or more web modules selected from the plurality of web modules to their one or more corresponding locations;
executing a flush of the received webpage, the flush of the received webpage causing the one or more web modules selected from the plurality of web modules to be displayed; and
executing the one or more web modules selected from the plurality of web modules, wherein:
the one or more web modules of the plurality of web modules are assigned a first state selected from a plurality of states associated with the one or more web modules, the assigned first state identifying a behavior of the one or more web modules;
the one or more web modules is configured to change from the assigned first state to a second state selected from the plurality of states in response to at least one interaction with the one or more web modules; and
the one or more web modules communicate an event in response to the change in the assigned first state to the selected second state.
12. The computer-readable memory of claim 11 , wherein the plurality of operations further comprises:
appending one or more web modules selected from the plurality of web modules as one or more leaf nodes to the modified Document Object Model of the requested web page.
13. The computer-readable memory of claim 11 , wherein the plurality of operations further comprises:
instantiating an event listener that listens for events communicated by the selected one or more web modules selected from the plurality of web modules; and wherein
the event listener is configured to maintain an event queue of events communicated by the selected one or more web modules.
14. The computer-readable memory of claim 11 , wherein one or more of the web modules selected from the plurality of web modules are each associated with a hidden tag that hides the selected one or more web modules from view; and
the plurality of operations further comprises removing the hidden tag from a corresponding selected web module based on the modification of the modified Document Object Model of the requested web page.
15. The computer-readable memory of claim 11 , wherein:
the selected one or more web modules of the plurality of web modules are associated with a Document Object Model identifier that identifies the selected one or more web modules; and
the received layout includes the Document Object Model identifier to the identified one or more locations where the selected one or more web modules are to be instantiated.