Automated widget code generation from design objects
A network computer system provides a graphic application for a user device operated by a user. The network system can receive input that identifies a design object, and further generates design programming logic that, when executed through the graphic application, creates the design object. The network computer system can also receive input that identifies a behavior programming logic describing one or more interactions with the design object. The network computer system can generate widget programming logic for a widget object based on the design programming logic and the behavior programming logic that, when executed, creates an instance of the widget object in an environment of the graphic application. In examples, an instance of the widget object including an instance of the design object and the one or more interactions.
1 . A network computer system comprising:
one or more processors; and
at least one memory storing instructions that, when executed by the one or more processors, perform operations including:
serving a design application for execution on a first browser for creating design interfaces to one or more first user devices operated by one or more first users, wherein the one or more first users operate the design application to create a design object by providing first user input to the one or more first user devices;
maintaining design workspace data describing a design interface including the design object;
serving a whiteboarding application for execution on a second browser on a second user device operated by a second user;
receiving second user input from the second user identifying the design object created by the one or more first users;
in response to the second user input identifying the design object, programmatically accessing the design workspace data to capture one or more design elements of the design object;
generating design programming logic in response to the second user input and based on the one or more design elements that, when executed, creates the design object;
executing the design programming logic to create the design object in the whiteboarding application;
receiving third user input from the second user indicating one or more interactions with the design object that modify the one or more design elements;
generating, in response to the second user input and the third user input and based on the one or more design elements, behavior programming logic describing the one or more interactions with the design object;
generating widget programming logic for a widget object based on the design programming logic and the behavior programming logic that, when executed, creates an instance of the widget object; and
executing the widget programming logic to create the instance of the widget object in the whiteboarding application, the instance of the widget object including an instance of the design object and the one or more interactions.
2 . The network computer system of claim 1 ,
wherein the second user input identifying the design object is received by a design code plugin interface of a design code plugin; and
wherein the design code plugin generates the design programming logic.
3 . The network computer system of claim 1 , wherein the second user input identifying the design object is received from the second user device through the whiteboarding application.
4 . The network computer system of claim 3 , wherein the behavior programming logic is received from the second user device.
5 . The network computer system of claim 1 , wherein the instructions, when executed by the one or more processors, perform operations including:
providing the design programming logic to the second user device in an edit interface, wherein the third user input from the second user in the edit interface includes additional programming logic.
6 . The network computer system of claim 5 , wherein the edit interface is provided in an instance of an edit interface object rendered on the whiteboard application.
7 . The network computer system of claim 1 , wherein the second user input identifying the design object created using the design application includes reference programming logic that identifies the design object by reference.
8 . The network computer system of claim 1 , wherein the instructions, when executed by the one or more processors, perform operations including:
in response to the second user input from the second user selecting the widget object in relation to a first whiteboard of a first collaborative workspace for a first plurality of users, creating a first instance of the widget object in the first whiteboard.
9 . The network computer system of claim 8 , wherein the instructions, when executed by the one or more processors, perform operations including:
maintaining first collaborative workspace data comprising state information for the first instance of the widget object across the first plurality of users.
10 . The network computer system of claim 1 , wherein the instructions, when executed by the one or more processors, perform operations including:
providing the whiteboarding application to a third user device operated by a third user; and
in response to fourth user input from the third user selecting the widget object in relation to a second whiteboard, creating a second instance of the widget object in the second whiteboard.
11 . The network computer system of claim 1 , wherein the widget programming logic includes JavaScript code.
12 . The network computer system of claim 1 , wherein the widget programming logic includes React code.
13 . The network computer system of claim 1 , wherein the whiteboarding application is distinct from the design application.
14 . A method for providing a graphic application design platform, the method being implemented by one or more processors and comprising:
serving a design application for execution on a first browser for creating design interfaces to one or more first user devices operated by one or more first users, wherein the one or more first users operate the design application to create a design object by providing first user input to the one or more first user devices;
maintaining design workspace data describing a design interface including the design object;
serving a whiteboarding application for execution on a second browser on a second user device operated by a second user;
receiving second user input from the second user identifying the design object created by the one or more first users;
in response to the second user input identifying the design object, programmatically accessing the design workspace data to capture one or more design elements of the design object;
generating design programming logic in response to the second user input and based on the one or more design elements that, when executed, creates the design object;
executing the design programming logic to create the design object in the whiteboarding application;
receiving third user input from the second user indicating one or more interactions with the design object that modify the one or more design elements;
generating, in response to the second user input and the third user input and based on the one or more design elements, behavior programming logic describing the one or more interactions with the design object;
generating widget programming logic for a widget object based on the design programming logic and the behavior programming logic that, when executed, creates an instance of the widget object; and
executing the widget programming logic to create the instance of the widget object in the whiteboarding application, the instance of the widget object including an instance of the design object and the one or more interactions.