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 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) server pressure (client performance issues are not considered for the moment)

(How can I find that since I translated the Microsoft application architecture guide, I wrote a translation tone)

 

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.

 

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.

 

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 such as scriptsharp to compile, it generates a script to populate the data with HTML. This 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. You can spell strings or use sharpdom or other frameworks.

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

 

Welcome to the discussion:

1) what kind of business does your website use?

2) What is better way to facilitate the separation of frontend and development responsibilities?