Several methods for implementing website UI are discussed.

Several methods for implementing website UI are discussed.

I would like to give you some suggestions and give you some suggestions.

 

For websites, the final form of UI is nothing more than (X) HTML + script + style. The question now is how to generate these front-end elements to achieve a balance in the following aspects:

(Assume that there are two roles: Development and front-end. The front-end is responsible for expressing logic and performance, while the Development is responsible for business logic and business data)

1) workload and difficulty of developers

2) Front-end developers (the front-end is omitted later), which is difficult to work.

3) Can the UI change requirements of products (assuming that the front-end belongs to the product department) be implemented quickly (whether it can be implemented only by the front-end)

4) the pressure on the server side (the performance of the client is not considered for the moment) can improve the development efficiency of the front-end UI framework by 500%!

 

 

Method 1: XML + XSLT

 

The data source is XML, which is provided by developers. XSL can be written by developers at the beginning, and later developed and maintained by the front-end.

T can be performed on the server. The advantage is that the search engine is friendly, and the disadvantage is that the server is under heavy pressure.

T process can also be performed on the client, and the advantages and disadvantages of the server are reversed.

This method is applicable to systems with high access traffic (especially client T) and simple interaction, such as forums, because the server only needs to provide data sources, while XSL is a static resource that can be cached on the client.

The advantage of this method is that if the front-end directly maintains XSL, you can directly adjust the page layout without development intervention, and achieve the best performance.

However, the disadvantage is that the learning cost is relatively high. If the conversion is performed on the client, the search engine is not supported, and the XSL is relatively difficult to maintain, resulting in a high cost for implementing complex logic.

Method 2: ASP. NET Webform

 

The most common method is to generate HTML by controls based on controls. developers can also directly operate server controls. This is a developer-led approach.

This is a universal method that can be supported by any application. The disadvantage is that it is not conducive to quick UI changes, and it is difficult for the front-end to participate in aspx maintenance. Because many UIS are implemented by controls, developers may perform some UI modifications on the back-end operation controls.

 

Method 3: Pure javascript + server data source

 

All rendering-related logic is written by javascript (dependent on jquery, jtemplate, and other components), and data is filled with data obtained from the server in AJAX mode and some business logic is implemented.

This is a frontend-dominated method. It can write a large number of scripts to implement logic and obtain the required data from the server.

This method is suitable for front-end interactive applications such as web games.

The advantage is that the front-end has great autonomy in page layout and behavior, and the pressure on the server is relatively small.

The disadvantage is that you need to write a lot of script code, which is difficult and error-prone and prone to security problems. A front-end UI framework that can improve development efficiency by 500%!

 

Method 4: template engine

 

The template engine dynamically fills data by adding predefined placeholders to HTML-based templates. While ensuring the UI flexibility, it also guarantees very high performance.

This method is suitable for news systems, blog systems that require multiple interfaces, and even Forum systems with different layout of each Forum.

Although it is flexible enough, the combination of the front-end and development is two-way, that is, the front-end still needs to know the data structure provided by the development.

In addition, for applications with complex interactions, you may need to use the predefined scripts of the template engine to write a lot of logic, making maintenance difficult.

 

Method 5: ASP. NET MVC

 

This is also a universal method, but it is more suitable for Internet-oriented websites than lan-oriented internal applications.

Although MVC has implemented a good separation between UI and UI logic, it is still difficult for me to adjust the page layout without development intervention.

 

Method 6: dynamically inject data to the appropriate HTML location on the server

 

This is a novel method. load HTML on the server as a template file, write code to modify the dom element in HTML, and fill the element with data.

For example, a.html+a.shtml,a.shtml(httphandler+a.html then parses the HTML document, adds data from the database to HTML, and outputs This HTML.

HTML files provided by the front-end can be used directly without adding any template tags or any controls. All data is filled in by the Code.

You can search for data filling paths in the same way as jquery. You can also use html as a template and copy it into a list page cyclically.

The advantage is that the front-end maintains HTML, scripts, and styles, developers write code to generate data, populate data, and completely separate the data.

The disadvantage is that the front-end cannot change some elements that involve paths (for example, if we use className to locate elements, the front-end cannot change className), and the performance may be poor.

A front-end UI framework that can improve development efficiency by 500%!

Method 7: dynamically load HTML data on the server and inject data on the client

 

We still use HTML as the template file, but the data assembly process is carried out on the client, which has better performance than the sixth method.

That is, the server directly adds a JSON data segment to the HTML document without parsing the HTML document. The data is all the data required on this page.

Then, when the server uses a framework similar to this type to generate a script to populate the data with HTML, the filling process is executed by the client.

The code is written in the same way as the sixth method, but this code completes two tasks. One is to generate a script file for some code, and the other is to write json data for some code generation to the page.

It seems that no ready-made framework has been used for this purpose. Is this method not practical?

As a matter of fact, you can also directly write scripts without using ScriptSharp to generate, but one of the major advantages of writing on the server is that you can directly use strong types of entities.

Imagine the pseudocode: Document. FindElement ("path"). Fill (product. Take (10), product => product. Name );

In this way, the first 10 items of the product List will be output on the page in json format, and the Code for locating elements and assigning values will also be output on the page using jquery/javascript code.

The advantages and disadvantages are the same as those in Method 6.

 

Method 8: Generate HTML from the server

 

This is an extreme method. All HTML is generated by code, and you can splice strings or use a framework similar to this type.

It is suitable for Process Systems with great changes in business logic, or some template generation tools, and is not suitable for business systems.

Several methods for implementing website UI

I would like to give you some suggestions and give you some suggestions. For websites, the final form of UI is nothing more than (X) HTML + script + style. The question now is how to generate these front-end elements, achieve a balance in the following aspects: (assume there are two roles: Development and front-end, the front-end is responsible for showing the logic and performance, and Development is responsible for business logic and business data) 1) workload of developers, work difficulty 2) Front-end developers (the front-end is omitted later) workload, work difficulty 3) Products (assuming the front-end belongs to the product department) can UI changes be implemented quickly (can they be implemented only by the front-end)? 4. Server pressure (client performance issues are not considered for the time being) (how can I find that since I translated the Microsoft application architecture guide, I wrote a translation tone?) the first method: XML + XSLT data source is XML, which is provided by developers, XSL can be written by developers at the beginning, and later developed and maintained by the front-end. T can be performed on the server. The advantage is that the search engine is friendly, and the disadvantage is that the server is under heavy pressure. T process can also be performed on the client, and the advantages and disadvantages of the server are reversed. This method is applicable to systems with high access traffic (especially client T) and simple interaction, such as forums, because the server only needs to provide data sources, while XSL is a static resource that can be cached on the client. The advantage of this method is that if the front-end directly maintains XSL, you can directly adjust the page layout without development intervention, and achieve the best performance. However, the disadvantage is that the learning cost is relatively high. If the conversion is performed on the client, the search engine is not supported, and the XSL is relatively difficult to maintain, resulting in a high cost for implementing complex logic. Method 2: ASP. NET Webform is the most common method. Based on controls, HTML is generated by controls. You can also directly operate server controls during development. This is a developer-led approach. This is a universal method that can be supported by any application. The disadvantage is that it is not conducive to quick UI changes, and it is difficult for the front-end to participate in aspx maintenance. Because many UIS are implemented by controls, developers may perform some UI modifications on the back-end operation controls. Method 3: purely javascript + all the logic related to the data source and rendering on the server are written in javascript (you can rely on jquery, jtemplate, and other components ), use AJAX to retrieve data from the server for data filling and implementation of some business logic. This is a frontend-dominated method. It can write a large number of scripts to implement logic and obtain the required data from the server. This method is suitable for front-end interactive applications such as web games. The advantage is that the front-end has great autonomy in page layout and behavior, and the pressure on the server is relatively small. The disadvantage is that you need to write a lot of script code, which is difficult and error-prone and prone to security problems. Method 4: The template engine dynamically fills data by adding predefined placeholders to HTML-based templates. While ensuring the UI flexibility, it also guarantees very high performance. This method is suitable for news systems, blog systems that require multiple interfaces, and even Forum systems with different layout of each Forum. Although it is flexible enough, the combination of the front-end and development is two-way, that is, the front-end still needs to know the data structure provided by the development. In addition, for applications with complex interactions, you may need to use the predefined scripts of the template engine to write a lot of logic, making maintenance difficult. Method 5: ASP. net mvc is also a universal method, but it is more suitable for Internet-oriented websites than for internal LAN applications. Although MVC has implemented a good separation between UI and UI logic, it is still difficult for me to adjust the page layout without development intervention. Method 6: dynamically inject data to the appropriate location of HTML on the server side. This is a novel method. load HTML on the server side as a template file and write code to modify the dom element in HTML, fill data with elements. For example, a.html+a.shtml,a.shtml(httphandler+a.html then parses the HTML document, adds data from the database to HTML, and outputs This HTML ....... Remaining full text>

Several methods for implementing website UI

I would like to give you some suggestions and give you some suggestions. For websites, the final form of UI is nothing more than (X) HTML + script + style. The question now is how to generate these front-end elements, achieve a balance in the following aspects: (assume there are two roles: Development and front-end, the front-end is responsible for showing the logic and performance, and Development is responsible for business logic and business data) 1) workload of developers, work difficulty 2) Front-end developers (the front-end is omitted later) workload, work difficulty 3) Products (assuming the front-end belongs to the product department) can UI changes be implemented quickly (can they be implemented only by the front-end)? 4. Server pressure (client performance issues are not considered for the time being) (how can I find that since I translated the Microsoft application architecture guide, I wrote a translation tone?) the first method: XML + XSLT data source is XML, which is provided by developers, XSL can be written by developers at the beginning, and later developed and maintained by the front-end. T can be performed on the server. The advantage is that the search engine is friendly, and the disadvantage is that the server is under heavy pressure. T process can also be performed on the client, and the advantages and disadvantages of the server are reversed. This method is applicable to systems with high access traffic (especially client T) and simple interaction, such as forums, because the server only needs to provide data sources, while XSL is a static resource that can be cached on the client. The advantage of this method is that if the front-end directly maintains XSL, you can directly adjust the page layout without development intervention, and achieve the best performance. However, the disadvantage is that the learning cost is relatively high. If the conversion is performed on the client, the search engine is not supported, and the XSL is relatively difficult to maintain, resulting in a high cost for implementing complex logic. Method 2: ASP. NET Webform is the most common method. Based on controls, HTML is generated by controls. You can also directly operate server controls during development. This is a developer-led approach. This is a universal method that can be supported by any application. The disadvantage is that it is not conducive to quick UI changes, and it is difficult for the front-end to participate in aspx maintenance. Because many UIS are implemented by controls, developers may perform some UI modifications on the back-end operation controls. Method 3: purely javascript + all the logic related to the data source and rendering on the server are written in javascript (you can rely on jquery, jtemplate, and other components ), use AJAX to retrieve data from the server for data filling and implementation of some business logic. This is a frontend-dominated method. It can write a large number of scripts to implement logic and obtain the required data from the server. This method is suitable for front-end interactive applications such as web games. The advantage is that the front-end has great autonomy in page layout and behavior, and the pressure on the server is relatively small. The disadvantage is that you need to write a lot of script code, which is difficult and error-prone and prone to security problems. Method 4: The template engine dynamically fills data by adding predefined placeholders to HTML-based templates. While ensuring the UI flexibility, it also guarantees very high performance. This method is suitable for news systems, blog systems that require multiple interfaces, and even Forum systems with different layout of each Forum. Although it is flexible enough, the combination of the front-end and development is two-way, that is, the front-end still needs to know the data structure provided by the development. In addition, for applications with complex interactions, you may need to use the predefined scripts of the template engine to write a lot of logic, making maintenance difficult. Method 5: ASP. net mvc is also a universal method, but it is more suitable for Internet-oriented websites than for internal LAN applications. Although MVC has implemented a good separation between UI and UI logic, it is still difficult for me to adjust the page layout without development intervention. Method 6: dynamically inject data to the appropriate location of HTML on the server side. This is a novel method. load HTML on the server side as a template file and write code to modify the dom element in HTML, fill data with elements. For example, a.html+a.shtml,a.shtml(httphandler+a.html then parses the HTML document, adds data from the database to HTML, and outputs This HTML ....... Remaining full text>