Open source Framework Those things 22: UI Framework Design in action

UI is the abbreviation of user interface, which is often considered to be the part of the view in MVC, and serves as a visual interface for interacting with human-computer interaction. In MVC, the model provides the content to render to the UI, and the user responds through the UI framework, which is typically invoked by the control layer to process the business logic and returns the processing results to the view in model mode, rendering again. The general process of UI framework is so, according to the implementation can be divided into Ria and thin client way, currently based on B/s thin client way more popular.
The UI framework is simple, but it's not easy to do it. At present, based on the MVC framework glowing, it is a software company has its own technical framework, the technology of the company may have a few sets. I also experienced a number of internet companies, but also used a lot of frameworks, interface development is always the short board.

First, the new UI framework needs the Origin

1. Scene A
The UI framework has no encapsulation or limited support for the view layer. The Code of the view layer needs to be completed manually by the developer, the framework does not provide code encapsulation or related code generation tools, resulting in a large number of CTRL + C, crtl+v in the project development process, which will affect the interface code quality.
I have worked with the IT industry more famous outsourcing company projects, a JSP page 4,000 or 5,000 lines of code, Java business logic, HTML layout and CSS style together, do not say modified, is to see the page is extremely difficult. Communication with developers learned that the team adoption of the interface is JSP, the framework provides a style that does not meet customer needs, forcing the team to develop many framework-level functions. Often a change in demand, causing developers to modify more than 10 places, the page chaos can be imagined.

2. Scene b
The technical framework is hierarchical and the interface is fully modular. The view layer and the model layer are completely separated, the developer writing the page requires additional learning components, access to the background of huge costs, many business needs through the framework upgrade approach to solve, time wasted serious.
This is from one extreme to the other extreme, with a strict framework that completely restricts dead developers. I have been involved in the bank project, is to use this way: Developers write pages are all component templates, can not flexibly define some functions, resulting in all the business requirements completely through the components, and the developers themselves can not modify the component, the component has a bug or can not implement some business scenarios, the developer also in the component team , the project leadership between the passing, make everyone physically and mentally exhausted.

3. Scene C
Framework performance issues. The frame designer pursues the gorgeous page effect, the perfect level encapsulation is easy to cause this kind of consequence, especially when the page is complex or the page nesting too much, it is easy to happen this kind of problem.
Developers are most afraid of encountering this kind of problem, which means the project should be hurt –. Also the bank project to do example: The original framework version is 3.0, business leaders think the interface is too earth, not beautiful, after the framework of the team for more than a year, frame 4.0 of the interface has done a large-scale landscaping, providing a complex package, resulting in serious performance problems. Because the Bank project page is complex, some forms need to show hundreds of fields, more than 10 seconds after the development of frame 4.0, cannot be accepted at all. At the end of the list, developers pay the price and re-develop this complex page in HTML native syntax.

4. Scene D
Upgrade maintenance issues. Some frameworks design, the design staff under the pressure of the team or leadership, the framework set too many business logic, resulting in the later team faced with a dilemma: Not upgrade, bug can not be resolved, the upgrade interface produces a variety of problems, it takes a lot of effort to correct.
This scenario is also a lot to see, especially when the framework contains multiple project business requirements, the conflict is obvious, the author experienced a project: Each upgrade, the code needs to compare hundreds of, waste 2-3 days of time, it is not guaranteed to be completely correct;

To summarize, the UI framework has the following requirements:
1. Improve development efficiency and reduce duplication of code. For developers, when developing, the interface writes the code as short as possible, and when it is maintained, the less modified the better.
2. Clear UI hierarchy, the framework can separate business logic, layout and style, so that the page structure is clear, so that developers focus more on business logic, rather than page layout, JS, CSS and other technical details.
3. Rich component support, the majority of project team business scenarios should be covered by the framework components, without the need to re-develop.
4. Flexible expansion capability, the project team can expand the presentation component according to the framework specification, and realize the individualized requirement.
5. Excellent performance, the response time of UI display should be close to the original ecological language. The framework can handle JS, CSS loading and merging problems.
6. The framework upgrade does not affect the business code.

Only the UI framework that meets the above requirements is a really helpful UI framework for developers and project teams.

Second, the Tinyui solution

The tiny team also has its own ideas for the UI framework and a UI framework solution. Tinyui adopt the following design principles, the project team in the technology selection needs to be considered clearly.

tinyui principle
1. Ensure the flexibility of interface development and respect developer rights. The
Tiny team adheres to the "28" principle, thinking that the perfect UI framework can only solve 80% of the interface problems encountered in the actual development process, and that the remaining 20% require the experience and wisdom of the developer. The kind of UI framework that advocates a blanket solution to all of the interface development issues will only put designers into too much technical detail, leading to over-design. As a result, Tinyui provides maximum flexibility: by adhering to the necessary framework specifications, developers can freely expand their components to meet changing business needs.
2. Separation of technical issues from business logic. The
Tinyui uses an open source protocol as an open source software to provide a UI framework, and the code itself does not contain any business logic. Avoid framework designers developing business components, patterns used by business teams. The technical problem is solved by the designer, and the business logic is flexibly customized and expanded by the business team according to its own business.
3. Performance first, efficiency first.
Tinyui in the early stages of design to consider component performance issues, the goal is to approach the original ecological page, second, the UI framework is fully open source, developers can easily learn the template language, as long as the learning curve is too high impact on development efficiency.
under the above-mentioned principle, Tinyui has the following characteristics:

Characteristics
The 1.TinyUI is based on jQueryUI, which is easier to use and simpler to jQueryUI than Dojo, and is lighter and more responsive than Extui, and it is also fat and thin, which allows for relatively large-scale controls, You can also use a small amount of code to make the interface more agile.
2. Layout and interface separation. Tinyui introduces the template engine, which renders the page in a template + component way, which greatly simplifies the page.
3. Multiple layouts are used, and a layout can be written for each level of the directory. Project managers can define different layouts at different levels according to business requirements.
4. Using the Pagelet method, the page block can be provided independently or referenced by other pages.
5. The UI component mode is provided, the user can compose the UI component easily and publish it to the application, and also provide the resource loading mechanism, if the UI component contains JS or CSS file, do not specify, and do not need to merge the homepage, can be used directly.
6. Provide the bigpipe mechanism, can greatly provide the processing speed of the template and improve the user interface experience.
7. The interface is developed by means of component, which encapsulates the implementation details of the component and can be smoothly switched to other implementations.
8. It is easier to integrate with a variety of open source components or code snippets, with an already implemented open source component packaged as a UI component in just a few minutes. The expansion of the interface can be sequential, with the packaging.
9. Resource self-discovery. The framework will load the newly added components itself, and all css/js files will be added automatically.

Tinyui is not actually a specific UI presentation component, it's just a UI building system. It can be adapted to various HTML+CSS+JS architectures, providing a technical solution for UI development of the interface.

Component Specifications
Tinyui that all common content of the interface can be summarized by the UI component package (uicomponents). The UI component package includes one or more components (UIComponent), and the UI component package contains all the resources that it needs, such as css/js/gif/htm, and so on. There is also a UI component package description file (*.ui.xml) that describes the structure of the UI component package, the content, and the dependencies on other UI component packages.
At development time, the UI component package is released as a separate MAVEN project and finally in a jar package.
For example: We want to reuse jquery, which is actually very simple. In the MAVEN engineering structure, in the resources directory, place all of the jquery resources in, and then write a UI component package description file. The UI component package is even developed.

The component manager of the Tinyui framework automatically loads and introduces related resources based on package profiles, all without program personnel intervention.

Page specification
Tinyui recommend the use of template language, such as: Tinytemplate,freemaker as a presentation layer, so that the advantages of the component package can be fully played. The tiny internal implementation re-uses the Tinytemplate template language, but there is no limit, you can do the same thing in other template languages.

When the specific page development, the component developer uses the macro to define the concrete function interface, the ordinary developer directly calls the macro interface to be possible.

Example:

This is a simple way to write a page, using the tiny framework of the foreground development, basically to help you solve the above problems, but there is no limit to your work.

Tips
About Dojo:
Dojo is an open source DHTML Toolkit implemented in JavaScript language. With its low-level API and compatible code, you can write lightweight, single-style (complex) JavaScript code that improves your Web application usability, interactivity, and functionality.

Extui Introduction:
It is primarily used to create a front-end user interface and is a basic front-end AJAX framework that is not related to background technology. The components are rich and powerful, but now they are charged.

Three, the design idea of Tinyui

Problems
1.UI JS in the introduction and sequence, JS merger problem.
The introduction and sequence of CSS in 2.UI, the problem of CSS merging.
3. Duplicate the code problem. The same content in many places, if you want to change to change a lot of places, changes in case of the left, the future is a pit.
4. The overall layout adjustment difficult problem.
5. The problem of development efficiency, the project manager always expect the interface development as soon as possible.
6. The efficiency of the implementation of the problem, the front desk response requirements faster.
7. Internationalization issues.

......

Below, the author in turn explains how Tinyui deals with the above problems:

The introduction and sequence of JS and CSS and the problem of merging

The introduction of 1.JS and CSS.
Traditional interface development, programmers need to introduce the path of JS and CSS in the page configuration, both cumbersome and error prone. Tinyui uses components to encapsulate the JS and CSS, this work is unified to the Component Designer to deal with, the programmer to develop the page does not care about the need to introduce which JS and CSS, as long as you know what the macro interface to use the line.
2.JS and CSS order issues.
This problem is also the traditional interface development between the difficulties, JS and CSS between the wrong order, usually lead to the page messy problems, location problems are also very complex. Tinyui the order problem to the Component Manager, which checks the dependencies of the components in turn, and if there is a dependency configuration error for the UI component, the Component Manager logs the Exception log, which is not loaded into the normal components list. After the dependencies between components are straightened out, the relationship between the JS and CSS contained within the component is smoothed out. Tinyui load JS and CSS in the following order:
A. The parent component's resources are loaded first than the child components. For example, component A relies on component B, and the framework loads component B resources before loading component a resources.
B. The resources of the same component, in order of priority loading before. The JS and CSS paths of the components can be configured in multiple configurations, and the same component framework loads the resources in the order in which they are configured.
3.JS and CSS merge issues.
In the traditional interface development, performance tuning often involves the combination of JS and CSS, the page has less IO, the performance will naturally improve, but it is very difficult for programmers, change JS and CSS means that a lot of related pages to be modified. Tinyui supports the merging of JS and CSS from the frame level, the programmer does not need to manually adjust, the framework provides uienginetinyprocessor this adapter handles the above merging problems.

Uienginetinyprocessor Merge JS
A. Adapters get all the normal UI components through the Component Manager, and loop through each component
B. Call the component's Getcomponentjsarray method, get all the JS paths referenced by the component, and loop through each path
C. The content of JS obtained by the VFS according to the path, merged into the OutputStream
D. Merge the introduction JS content of each component, and finally merge the component needs to call JS code

Uienginetinyprocessor Merging CSS
A. Adapters get all the normal UI components through the Component Manager, and loop through each component
B. Call the component's Getcomponentcssarray method, get all the CSS paths referenced by the component, and loop through each path
C. Get CSS content from the VFS based on the path, merge to OutputStream
D. Merge the introduced CSS content for each component, and finally merge the component to call the CSS code

Problem with repeating code

Carefully analyze the origin of the page duplicate code, mainly can be divided into the following blocks:
1. Useless resources are introduced. People who have written the page know that programmers like to put a paragraph of JS, CSS everywhere sticky, not to analyze whether it is useful, resulting in a large number of unnecessary resource introduction, reduce page performance. Tinyui manages resources through the Component Manager and ultimately outputs a reference to a page that is absolutely consistent with the resources of the component package, as long as the Component Designer is designing the component package to ensure that no useless resources are introduced.
2. Duplicate business logic. Tinyui renders pages in a template language and resolves repetitive business logic with macro definitions. Because macros can be nested macros, so the theory of complex pages can be done by macro, macro if used properly, you can greatly reduce the page code.
3. The same feature fragment. Some business scenarios require the introduction of a unified functional fragment with the same interface, and Tinyui can use the template command include to perfectly handle this scenario.

Problems with difficulty in overall layout adjustment

Traditional interface development, page layout and logic code is mixed, especially complex pages, adjustment is naturally difficult. Tinyui's design begins with a thorough partitioning of the layout and page logic into two files, and of course you need to organize them with Tinyui recommended templates.

The template system of tiny is organized in the following ways:
Support multi-layer file structure
? layout files are unified with the. layout extension End
? page file unification with. page extension structure
? only. page files can be accessed externally and accessed in two different ways. Page or. pagelet
Access. Pagelet, actually equivalent to accessing the same name page, the template engine will only do page rendering; The template engine renders the layout in addition to page rendering

Maybe some people see here asking: Is it too complicated to split a file into two pieces and define the relationship between the two? In fact, it is not complicated, the user does not need to define the layout file and page file contact, please refer to the following specifications to design your page layout structure:

Find layout file rules
1. Match the layout file with the same name as the current directory.
2. Match the default layout file for the current directory.
3. If a level of directory does not meet the matching criteria, match the first-level directory on that directory until the root directory is reached.

For example: The path in Aa.page is/a/b/c/aa.page, and the rendering process for the layout is as follows:

Find out if/a/b/c/aa.layout exists? Renders if present, otherwise looks for/a/b/c/default.layout, if present, renders.

Find out if/a/b/aa.layout exists? Renders if present, otherwise looks for/a/b/default.layout, if present, renders.

Find out if/a/aa.layout exists? Renders if present, otherwise looks for/a/default.layout, if present, renders.

Find out if/aa.layout exists? Renders if present, otherwise looks for/default.layout, if present, renders.

With the above rendering mechanism, programmers may write only a very small amount of content, but through a layered layout rendering, the final result will be very colorful.

The problem of development efficiency
Using the TINYUI framework to improve development efficiency, at least the following two points:
1. Repetitive code is greatly reduced, and productivity naturally increases.
2. Learning curve decreased. The use of Component + Template page development model, for ordinary developers can basically block JS and CSS, both of the skill requirements can be greatly reduced; the additional learning cost is the template language, for programmers, the template language to reach the level of use, a day enough.

The issue of efficiency of implementation
The Tinyui framework uses the following technical means to speed up page access:
1. Combine JS and CSS on the page. By reducing the network IO request, especially when the original page involves a lot of resources, the speed-up effect will be more obvious.
2. Buffering function. Users can set which pages to buffer and how long to buffer.
3. Support Bigpipe mode rendering page. As mentioned earlier, Tinyui framework supports splitting large pages into Pagelet, allowing the browser to render simultaneously in multiple threads, thereby improving performance.

Ordinary Web pages, typically page generation, network transmission, front page rendering, the three parts of the time to add up is the operator from the click of the mouse to the last time to see the page.

For example, a page has a main page frame, a total of 4 parts of the content display. For ease of analysis, simplify the model, assuming that the main page frame generation needs to 0.2s,4 parts of the content generation each need 0.2S, network transmission and browser rendering is also counted as 0.2 seconds, so in the traditional way, the time required is 0.2*5+0.2*5+0.2*5=3 seconds.

Then instead of bigpipe, the execution distribution of the time is probably as follows:

So instead of Bigpipe, the time is about 1.4 seconds. The time saved is probably a little over 50%.

Of course This time is in each of the three periods of time is 0.2 seconds, the actual running process, the network transmission time in the LAN time will be faster, background page processing, can also use multi-threaded processing way to carry out, so that the back page processing time can be shortened to 0.4S, network transmission time 0.2S can also. As a result of the use of the Bigpipe way, in 0.6S, you can see the most page frame, the back of time is a block out, when the back out of time more quickly, to use the feeling is in the 0.6s+ interface can come out. This is distinctly different from the original 3S, the user experience.

The question of internationalization
For small projects, this issue may not be of concern. But Tinyui is the technical framework, the goal is large-scale projects, if not support internationalization, that is not justified.

Tinyui offers two international solutions, with the choice of:
1. International resource tags. International resources will be easy to understand, the project to add International resource files, pages with international tags to reference.
2. Internationalization page. An internationalized page is when a page is accessed, and the template engine takes precedence over the rendered page file in the same language as the visitor. For example: There is aa.page,aa.zh_cn.page, if non-ZH_CN language people to access, rendering is AA.PAGE,ZH_CN language of the people to visit, rendering is aa.zh_CN.page.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Open source Framework Those things 22: UI Framework Design in action