Software application architecture

Abstract

The described technology relates to a software application architecture allowing for creation of a web application that has multiple Single Page Applications (SPAs) within the application. The software application architecture includes components that are common to each page of the web application while also having components that are dynamically loaded to cater to specific respective pages within the application. The dynamically loadable components can be identified based on an identifier in a path being browsed using a web browser application. The described application architecture may be used in the context of AngularJS, as well as other SPA technologies and non-SPA technologies.

1 . A method, comprising:
 at a client device that includes a processor, a memory, and a network interface device:
 transmitting, to a web server and via the network interface device, a Hypertext Transfer Protocol (HTTP) request message, wherein:
 the HTTP request message indicates a Uniform Resource Locator (URL) for a single page application (SPA); 
 the SPA is part of a web application that includes multiple SPAs; 
 the SPA comprises a global module that is common to the multiple SPAs in the web application and a child module that is specific to the SPA; and 
 a portion of the URL is a child module identifier that uniquely identifies the SPA within the web application; 
 
 receiving, from the web server and via the network interface device, one or more HTTP response messages, wherein the HTTP response messages include:
 Javascript code that defines the global module; 
 Javascript code that defines the child module; and 
 a child module configuration object that includes configuration data for the child module; 
 
 loading the global module; and 
 loading the child module, wherein the loading the child module includes:
 using the child module identifier to obtain a reference to the child module configuration object; 
 initializing the child module; and 
 configuring the child module based on the child module configuration object. 
 
   
     
     
         2 . The method of  claim 1 , wherein the client device further includes a display device, the method further comprising:
 generating a user interface based on the global module and the child module; and   displaying the user interface on the display device.   
     
     
         3 . The method of  claim 1 , wherein the global module and child module are AngularJS modules. 
     
     
         4 . The method of  claim 1 , wherein the child module configuration object is received in the one or more HTTP messages as a JavaScript Object Notation (JSON) object. 
     
     
         5 . The method of  claim 1 ,
 wherein the child module configuration object indicates one or more AngularJS views associated with the child module,   wherein each of the AngularJS views is associated with a respective Hypertext Markup Language (HTML) template and route, and   wherein the method further comprises:
 registering the AngularJS views with an AngularJS routing service. 
   
     
     
         6 . The method of  claim 5 , further comprising:
 generating a user interface based on the child module and the AngularJS views; and   displaying the user interface on a display device.   
     
     
         7 . A client device, comprising:
 at least one processor;   at least one memory; and   at lease one network interface device;   wherein the at least one processor, at least one memory, and at least one network interface device are configured to perform actions that include:
 transmitting, to a server, a request message that includes a Uniform Resource Locator (URL), wherein:
 a single page application (SPA) is hosted at the URL; 
 the SPA is part of an application that includes multiple SPAs; and 
 the SPA includes a global module that is common to the multiple SPAs and a child module that is specific to the SPA; 
 
 receiving, from the server, one or more response messages, wherein the one or more response message include a child module configuration object that includes configuration data for the child module; 
 loading the child module, wherein the loading the child module includes:
 initializing the child module; and 
 configuring the child module based on the child module configuration object; and 
 
 generating a user interface based on the global module and the child module; and 
 displaying the user interface on a display device. 
   
     
     
         8 . The client device of  claim 7 ,
 wherein a portion of the URL is a child module identifier that uniquely identifies the SPA, and   wherein the actions further include:
 using the child module identifier to obtain a reference to the child module configuration object. 
   
     
     
         9 . The client device of  claim 7 , wherein the actions further include:
 generating a user interface based on the global module and the child module; and   displaying the user interface on a display device.   
     
     
         10 . The client device of  claim 7 , wherein the global module and child module are Javascript modules. 
     
     
         11 . The client device of  claim 10 , wherein the global module and child module are AngularJS modules. 
     
     
         12 . The client device of  claim 11 ,
 wherein the child module configuration object indicates one or more AngularJS views associated with the child module,   wherein each of the AngularJS views is associated with a respective Hypertext Markup Language (HTML) template and route, and   wherein the actions further include:
 registering the AngularJS views with an AngularJS routing service. 
   
     
     
         13 . The client device of  claim 10 , wherein the child module configuration object is received in the one or more HTTP messages as a JavaScript Object Notation (JSON) object. 
     
     
         14 . A non-transitory computer-readable storage medium, having instructions stored thereon which, when executed at a client device that includes at least one processor, at least one memory, and at least one network interface device, cause the at least one processor to perform actions that include:
 transmitting, to a server, a request message that includes a Uniform Resource Locator (URL), wherein:
 a single page application (SPA) is hosted at the URL; 
 the SPA is part of an application that includes multiple SPAs; 
 the SPA includes a child module that is specific to the SPA; and 
 a portion of the URL is a child module identifier that uniquely identifies the SPA; 
   receiving, from the server, one or more messages that include:
 code that defines the child module; and 
 a child module configuration object that includes configuration data for the child module; and 
   loading the child module based on the child module identifier and the child module configuration object.   
     
     
         15 . The non-transitory computer-readable storage medium of  claim 14 , wherein the loading the child module includes:
 using the child module identifier to obtain a reference to the child module configuration object; and   configuring the child module based on the child module configuration object.   
     
     
         16 . The non-transitory computer-readable storage medium of  claim 15 , wherein the child module is a Javascript module. 
     
     
         17 . The non-transitory computer-readable storage medium of  claim 16 , wherein the child module configuration object is included in the data received from the server as a JavaScript Object Notation (JSON) object. 
     
     
         18 . The non-transitory computer-readable storage medium of  claim 16 , wherein the child module is an AngularJS modules. 
     
     
         19 . The non-transitory computer-readable storage medium of  claim 14 ,
 wherein the child module configuration object indicates one or more views associated with the child module,   wherein each of the views is associated with a respective template and route, and   wherein the actions further include:
 registering the views with a routing service. 
   
     
     
         20 . The non-transitory computer-readable storage medium of  claim 19 , wherein the actions further include:
 generating a user interface based on the child module and the views; and   displaying the user interface on a display device.   
     
     
         21 . A method, comprising:
 at a server system that includes at least one processor and at least one network interface device:
 receiving, from a client device, a request message that includes a Uniform Resource Locator (URL), wherein:
 a single page application (SPA) is hosted by the server system at the URL; 
 the SPA is part of an application that includes multiple SPAs; 
 the SPA includes a child module that is specific to the SPA; and 
 a portion of the URL is a child module identifier that uniquely identifies the SPA; 
 
   transmitting, responsive to the request message and to the client device, information that includes:
 code that defines the child module; and 
 a child module configuration object that includes configuration data for the child module.