Optimized data resolution for web components
An abstract data graph may be constructed at a server. The abstract data graph may include nodes and links between nodes and may represent computer programming instructions for generating a graphical user interface at a client machine. At least some of the links may represent dependency relationships between portions of the graphical user interface. The abstract data graph may be resolved at the client machine to identify data items, which may be retrieved from the server and used to render the graphical user interface.
1. A method comprising:
presenting on a display screen a graphical user interface including a plurality of components, wherein the plurality of components include a first set of components in a visible state and a second set of components in an invisible state;
detecting a state change event associated with a designated component of the second set of components;
resolving via a processor a designated portion of an abstract data graph based on the state change event, wherein the abstract data graph is received from a remote computing system via a communication interface, wherein the abstract data graph includes a plurality of nodes and a plurality of links between the plurality of nodes, wherein the abstract data graph represents computer programming instructions for generating the graphical user interface, wherein selected links of the plurality of links represent dependency relationships between portions of the graphical user interface, and wherein the designated portion of the abstract data graph includes a designated plurality of nodes corresponding with the designated component; and
updating the graphical user interface so that the designated component is placed in the visible state when an invocation of a JavaScript decorator that includes a reference to the designated component returns a response indicating that the graphical user interface is to be updated.
2. The method recited in claim 1 , wherein resolving the designated portion of the abstract data graph involves retrieving one or more data items from the remote computing system.
3. The method recited in claim 2 , wherein resolving the designated portion of the abstract data graph comprises identifying a subset of nodes of the plurality of nodes for which all dependency relationships have been satisfied, and wherein the one or more data items are associated with the subset of nodes of the plurality of nodes.
4. The method recited in claim 2 , wherein the one or more data items are displayed within the graphical user interface.
5. The method recited in claim 1 , wherein the graphical user interface is updated prior to resolving the designated portion of the abstract data graph.
6. The method recited in claim 1 , wherein the graphical user interface is updated after resolving the designated portion of the abstract data graph.
7. The method recited in claim 1 , wherein the graphical user interface is updated during the resolution of the designated portion of the abstract data graph.
8. The method recited in claim 1 , wherein the designated component is an instantiation of an hypertext markup language (HTML) template that is associated with a shadow document object model (DOM) tree and that is controlled by a JavaScript custom element application procedure interface (API).
9. The method recited in claim 1 , wherein the designated component is represented by a designated node within the abstract data graph, and wherein resolving the designated portion of the abstract data graph involves resolving one or more nodes that are dependent on the designated node within the abstract data graph.
10. The method recited in claim 1 , wherein the graphical user interface is updated when an invocation of a JavaScript decorator that includes a reference to the designated component returns a response indicating that the graphical user interface is to be updated.
11. The method recited in claim 1 , wherein a designated node of the plurality of nodes represents a graphical user interface component property, and wherein the graphical user interface component property stores a data value associated with a component within the graphical user interface.
12. The method recited in claim 1 , wherein a designated node of the plurality of nodes represents a conditional statement, wherein the conditional statement defines a condition under which a Boolean output value is true, wherein the designated node of the plurality of nodes is linked with one or more dependent nodes of the plurality of nodes, and wherein the one or more dependent nodes of the plurality of nodes are associated with one or more portions of the graphical user interface rendered if the condition is true.
13. The method recited in claim 1 , wherein the abstract data graph is received from the remote computing system in response to an initial request for the graphical user interface, and wherein information for rendering the graphical user interface is retrieved from the remote computing system when the abstract data graph is resolved.
14. The method recited in claim 1 , wherein the graphical user interface is presented in a native application executed on a mobile computing device.
15. The method recited in claim 1 , wherein the graphical user interface is a web page presented within a web browser at a client machine.
16. The method recited in claim 1 , wherein the remote computing system is situated within an on-demand computing services environment that provides on-demand computing services to a plurality of entities via the Internet.
17. A computing device comprising:
a display screen operable to present a graphical user interface including a plurality of components, wherein the plurality of components include a first set of components in a visible state and a second set of components in an invisible state; and
a processor operable to detect a state change event associated with a designated component of the second set of components and to resolve a designated portion of an abstract data graph based on the state change event, wherein the abstract data graph is received from a remote computing system via a communication interface, wherein the abstract data graph includes a plurality of nodes and a plurality of links between the plurality of nodes, wherein the abstract data graph represents computer programming instructions for generating the graphical user interface, wherein selected links of the plurality of links represent dependency relationships between portions of the graphical user interface, wherein the designated portion of the abstract data graph includes a designated plurality of nodes corresponding with the designated component, and wherein the graphical user interface is updated so that the designated component is placed in the visible state when an invocation of a JavaScript decorator that includes a reference to the designated component returns a response indicating that the graphical user interface is to be updated.
18. The computing device recited in claim 17 , wherein resolving the designated portion of the abstract data graph involves retrieving one or more data items from the remote computing system, wherein resolving the designated portion of the abstract data graph comprises identifying a subset of nodes of the plurality of nodes for which all dependency relationships have been satisfied, wherein the one or more data items are associated with the subset of nodes of the plurality of nodes, and wherein the one or more data items are displayed within the graphical user interface.
19. The computing device recited in claim 17 , wherein the designated component is an instantiation of an hypertext markup language (HTML) template that is associated with a shadow document object model (DOM) tree and that is controlled by a JavaScript custom element application procedure interface (API), wherein the designated component is represented by a designated node within the abstract data graph, and wherein resolving the designated portion of the abstract data graph involves resolving one or more nodes that are dependent on the designated node within the abstract data graph.
20. A method comprising:
presenting on a display screen a graphical user interface including a plurality of components, wherein the plurality of components include a first set of components in a visible state and a second set of components in an invisible state;
detecting a state change event associated with a designated component of the second set of components;
resolving via a processor a designated portion of an abstract data graph based on the state change event, wherein the abstract data graph is received from a remote computing system via a communication interface, wherein the abstract data graph includes a plurality of nodes and a plurality of links between the plurality of nodes, wherein the abstract data graph represents computer programming instructions for generating the graphical user interface, wherein selected links of the plurality of links represent dependency relationships between portions of the graphical user interface, wherein the designated portion of the abstract data graph includes a designated plurality of nodes corresponding with the designated component, wherein a designated node of the plurality of nodes represents a conditional statement, wherein the conditional statement defines a condition under which a Boolean output value is true, wherein the designated node of the plurality of nodes is linked with one or more dependent nodes of the plurality of nodes, and wherein the one or more dependent nodes of the plurality of nodes are associated with one or more portions of the graphical user interface rendered if the condition is true; and
updating the graphical user interface so that the designated component is placed in the visible state.