Dynamic loading of routes in a single-page application

• US 9,967,309 B2
• Filed: 10/06/2014
• Issued: 05/08/2018
• Est. Priority Date: 10/06/2014
• Status: Active Grant

• Current Assignee: Microsoft Technology Licensing LLC (Microsoft Corporation)
• Original Assignee: Microsoft Technology Licensing LLC (Microsoft Corporation)
• Inventors: Brown, Derek, Pandya, Abhishek, Mulgrew, Zachary, Smith, Jordan, Miller, Adam, Kusuma, Asa
• Primary Examiner(s): Baturay, Alicia
• Application Number:
  US14/507,644
• Publication Number:
  US 20160100030A1
• Time in Patent Office: 1,310 Days
• Field of Search: 709217
• CPC Class Codes: G06F 3/0482 Interaction with lists of selectable items, e.g. menus
• CPC Class Codes: G06F 9/44521 Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
• CPC Class Codes: H04L 67/02 based on web technology, e.g. hypertext transfer protocol [HTTP]

Abstract

Techniques for dynamically loading route and dependency information in a single-page application (SPA) that executes on a client device are provided. In one technique, a SPA includes a route handler that receives a requested route. The route handler determines whether the requested route matches any route in a list of routes. The only route that the request route may “match” is a wildcard route, which is associated with a function, when called with the requested route as input, causes a server request to be generated and transmitted from the client device to a server. The server responds with the requested route, dependency information for the requested route, and, optionally, one or more other routes, which may be “child” routes of the requested route. A module instance is generated based on the dependency information and loaded into the SPA.

Claims

1. A method comprising:

receiving, at a client device, from a server, a web document data;

in response to receiving the web document data;

executing, at the client device, based on the web document data, an application, and

creating a router process within the application;

wherein the application is a single-page application;

after creating the router process, receiving, at the client device, input that indicates a particular route;

in response to receiving the input that indicates the particular route;

determining, by the router process, whether the particular route is indicated in a list of routes;

in response to determining that the particular route is not indicated in the list of routes, causing, by the router process, the particular route to be sent to the server;

after causing the particular route to be sent to the server, receiving, from the server, at the client device, a set of routes that is associated with the particular route.

2. The method of claim 1, wherein receiving the set of routes further comprises receiving, at the client device, one or more files that are associated with a module that is used to process each route in the set of routes.

3. The method of claim 2, wherein the one or more files comprise one or more JavaScript files and one or more Cascading Style Sheet (CSS) files.

4. The method of claim 2, further comprising:

generating an instance of the module based on the one or more files and loading the instance of the module into the application.

5. The method of claim 1, wherein:

when the input is received, the router process has access to only a single path and the single path is a wildcard path;

determining that the particular route is not indicated in the list of routes comprises determining that the particular route only matches the wildcard path;

the wildcard path is associated with a function that the router process calls, that accepts the particular route as input, and that causes the particular route to be sent to the server.

6. The method of claim 1, further comprising:

receiving, at the client device, second input, initiated by a user, that indicates a second route that is different than the particular route;

in response to receiving the second input that indicates the second route, determining, by the router process, whether the set of routes includes the second route.

7. The method of claim 6, further comprising:

in response to determining that the set of routes includes the second route and without sending a request to the server, causing a set of data files that is associated with a second module to be retrieved from storage that is located on the client device.

8. The method of claim 6, further comprising:

in response to determining that the set of routes does not include the second route, causing, by the router process, the second route to be sent to the server;

after causing the second route to be sent to the server, receiving, by the router process, a second set of routes that is associated with the second route.

9. The method of claim 8, further comprising:

in response to determining that the set of routes does not include the second route, removing, by the router process, the set of routes;

wherein, after removing the set of routes, the router process does not have access to the set of routes.

10. The method of claim 8, wherein receiving the set of routes further comprises receiving, at the client device, one or more files that are associated with a module, the method further comprising:

generating, at the client device, based on the one or more files, an instance of the module;

loading the instance of the module into the application;

in response to determining that the set of routes does not include the second route, unloading the instance of the module from the application.

11. The method of claim 1, wherein the input is initiated by a user and the particular route is a fragment of a URL.

12. A system comprising:

one or more processors;

one or more storage media storing instructions which, when executed by the one or more processors, cause;

receiving, at a client device, from a server, a web document data;

in response to receiving the web document data;

executing, at the client device, based on the web document data, an application, and

creating a router process within the application;

wherein the application is a single-page web application;

after creating the router process, receiving, at the client device, input that indicates a particular route;

in response to receiving the input that indicates the particular route;

determining, by the router process, whether the particular route is indicated in a list of routes;

in response to determining that the particular route is not indicated in the list of routes, causing, by the router process, the particular route to be sent to the server;

after causing the particular route to be sent to the server, receiving, from the server, at the client device, a set of routes that is associated with the particular route.

13. The system of claim 12, wherein receiving the set of routes further comprises receiving, at the client device, one or more files that are associated with a module that is used to process each route in the set of routes.

14. The system of claim 13, wherein the one or more files comprise one or more JavaScript files and one or more Cascading Style Sheet (CSS) files.

15. The system of claim 13, wherein the instructions, when executed by the one or more processors, further cause:

generating an instance of the module based on the one or more files and loading the instance of the module into the application.

16. The system of claim 12, wherein:

when the input is received, the router process has access to only a single path and the single path is a wildcard path;

determining that the particular route is not indicated in the list of routes comprises determining that the particular route only matches the wildcard path;

the wildcard path is associated with a function that the router process calls, that accepts the particular route as input, and that causes the particular route to be sent to the server.

17. The system of claim 12, wherein the instructions, when executed by the one or more processors, further cause:

receiving, at the client device, second input that indicates a second route that is different than the particular route;

in response to receiving the second input that indicates the second route, determining, by the router process, whether the set of routes includes the second route.

18. The system of claim 17, wherein the instructions, when executed by the one or more processors, further cause:

in response to determining that the set of routes includes the second route and without sending a request to the server, causing a set of data files that is associated with a second module to be retrieved from storage that is located on the client device.

19. The system of claim 17, wherein the instructions, when executed by the one or more processors, further cause:

in response to determining that the set of routes does not include the second route, causing, by the router process, the second route to be sent to the server;

after causing the second route to be sent to the server, receiving, by the router process, a second set of routes that is associated with the second route.

20. The system of claim 19, wherein the instructions, when executed by the one or more processors, further cause:

in response to determining that the set of routes does not include the second route, removing, by the router process, the set of routes;

wherein, after removing the set of routes, the router process does not have access to the set of routes.

21. The system of claim 19, wherein receiving the set of routes further comprises receiving, at the client device, one or more files that are associated with a module, wherein the instructions, when executed by the one or more processors, further cause:

generating, at the client device, based on the one or more files, an instance of the module;

loading the instance of the module into the application;

in response to determining that the set of routes does not include the second route, unloading the instance of the module from the application.

22. The system of claim 12, wherein the input is initiated by a user and the particular route is a fragment of a URL.