UI-oriented Programming framework: A detailed design of ui.js frame thinking

The idea of UI-oriented programming was realized as a result of the last flash of inspiration. After a period of consideration and design, the thought and details are now recorded:

Specific idea Description:

1. In the Ui.config file, configure all parameters, such as page templates, all components, component controls, interface injection
2. Ui.js from the template selected in the configuration file, go to the Layout Template gallery and locate the loaded template
3. First inject the template into the page.
4. Ui.js Analyze the components and other operations that are required to load in the page template layout, injecting these component data into the data staging pool
5. Then the data transfer pool, which components and actions are required to pass component information to Ui.js
6. Ui.js the component information passed through the transfer pool is searched from the component library through the configuration file.
7. Find the template required component injection page, data transfer pool with the component JS, initialize the component. Until the page load is complete

Configuration file Configuration design:

Ui.config= ({    //config path    baseUrl: "/",    //injection module    template:{        //Layout template name: Template address + whether to load        "LAYOUT1": [" Layout/layout1.tpl ", True],        " Layout2 ": [" Layout/layout1.tpl ", False]    },    //injection interface    interface:{        " Interface1 ":" Www.123.com/interface1 ",        " Interface2 ":" Www.123.com/interface2 ",        " Interface3 ":" Www.123.com/interface3 ",        " Interface4 ":" Www.123.com/interface4 ",        " Interface5 ":" Www.123.com/interface5 ",    },    ///Injection component    module:{        //Component Name: Component address + whether the component is loaded + interface injected        " MD1 ": [" Module/header.mold ", true,[" Interface1 "," Interface2 "]],        " MD2 ": [" Module/body.mold ", true,[" Interface1 "," Interface2 "]]    },    // Component Logic JS    data:{        //js required interface and other data required data transfer pool with        "Md1_js": "Modulejs/md1.js"    });

　　

Data transfer pool design ideas:

Specific idea Description:

1. After each component is generated in the configuration file, the UUID (unique identifier) for each component is generated after processing in the import ui.js
2. Data flow and interoperability must be stored and used through UUID
3. Tag and recycle data that is only used once and permanently
4. Components are changed, component load data is loaded, component offload data is unloaded
5. ...

UI-oriented thought framework benefits:

1. Highly reusable HTML, if a more general template, can be reused infinitely (can replace the interface)
2. Flexibility to change page layouts. Traditional pages are not changed after the layout, UI introduced layout template, can be arbitrary layout, as long as the final introduction of the component is correct
3. Unified management of all interfaces, with each component injected separately, on-demand
4. Globally distributed collaborative development, each component configuration address can be anywhere in the Internet, I just need to press the address can be taken to my component and processing JS can
5. A project can be pieced together by components from all over the Internet, and if the background can support cross-domain, then both the front and back of a project are resources on the Internet, and the servers we deploy just provide a showcase portal
6. Development only needs to focus on the development of each component, one component development, the development is completed by configuring the load on-line
7. For project local updates, you can unload a component directly without shutting down the entire server. After the update is complete, update the components and reload the online
8. Each enterprise can maintain its own set of component libraries, highly reusable. The new project is used if it encounters a previously developed component that directly configures the path and parameters.
9. The profile parameters can be retrieved in the background to dynamically maintain all components. Convenient operation and maintenance
10. More convenient and efficient way to handle (maintenance personnel) (Local component Development Specification reference Self-summary of efficient development and maintenance programs)
11. More for single-page applications, because loading is faster than normal web pages for local refreshes only
12. ... The only thing I can think of is that I will open up this project and hopefully more like-minded people to develop more powerful ui.js.

PS: Now just to do a detailed design of ideas, in the development may encounter a variety of problems, and the idea is my first draft, may not be very perfect, if you have a better idea and inspiration, I hope you are not hesitate to enlighten us. This period of time to first write the basic version, and then published into open source projects out, and later welcome to improve together.

Here is my manuscript:

I am a yard farmer, I do not like to be playing with the code, I like to use code to change the world, I hope this world is better!!! Refueling, mutual encouragement!!!

UI-oriented Programming framework: A detailed design of ui.js frame thinking