A brief analysis of WEB development model_html/css_WEB-ITnose

WEB technology has emerged with the rise of the Internet, and has become more diverse with the development of the mobile Internet.

Dark Ages: Before about 2005, so-called WEB development was mainly the work of artists, with HTML/CSS dominating. As one of the three swordsmen of page design, Dreamwaver has become a must-have tool for most WEB programmers. If you can't use Javascript, don't use it. Use it less if you can. The browser only considers IE. At that time, Javascript seemed very heterogeneous, with prototypal inheritance, flexible syntax, and difficult debugging (remember the painful experience of debugging Javascript in IE?). Most programmers were not willing to do front-end work. Finally, Bindows was created, which was hailed as an artifact by many programmers. But after a little trial, I found that it was as slow as a snail, had constant problems, and was not practical at all. It can be seen that browsers at that time did not pay attention to the optimization of Javascript engines. Those were the dark ages of web development. Renaissance: Around 2005, everyone gradually began to pay attention to user experience, AJAX technology became increasingly popular, and the mention of WEB2.0 became very popular. It would be embarrassing if one's own applications were not labeled as WEB2.0. People said hello. At that time, the Java community was very active and prosperous under the leadership of Struts/Spring/Hibernate. At this point, Ruby On Rails appears! Its concept of "contract first" simply makes the complicated XML configuration method in SSH mode embarrassed. Against the background of new technologies and new ideas emerging one after another, jQuery was born in 2006. The emergence of jQuery has completely ended the dark age of WEB development and ushered in the "Renaissance" in the WEB field. The widespread use of Ajax technology, the gradual advancement of WEB standardization, the slow changes in the browser market, etc. are all evidence of this "revival". Hundreds of flowers bloom: Today, more than six years have passed since Apple launched its first iPhone in 2007. This is the year when the mobile Internet developed from its inception to rapid development. The ultimate pursuit of user experience has led to more profound changes in WEB technology. Javascript's move to the server has made node.js possible, and Flush technology seems to be gradually declining due to business and technical reasons. Various MVC frameworks based on Javascript are emerging in endlessly, such as fluid layout, responsive layout, adaptive, skeuomorphic design, and flat design. Concepts such as personalized design continue to emerge, and today is an era where a hundred flowers are blooming in the WEB field.

Now doing WEB development is just like doing Java server development. You need to make appropriate choices among many basic libraries and development frameworks:

jQuery: simple chain operation It is famous for encapsulating the API of the underlying browser and shielding the differences in browser implementation. It is currently the most popular basic library; however, as the HTML5 standard is gradually accepted by major browser manufacturers, the role of jQuery has also been greatly reduced, and its release Bag size is also often criticized by people. mootools: The frameworks that competed with jQuery back then were prototype.js and mootools. At that time, prototype received strong support from the ruby ​​community and was once comparable to jQuery. Mootools is supported by the Java camp. Although it is not as good as the first two, its API design is more in line with the habits of Java programmers, so it has also developed rapidly. Some time ago, I saw the author of prototype writing an article admitting the failure of prototype. Nowadays, jQuery is still the only one in the selection of underlying libraries; Dojo: Dojo is a complete framework similar to Java Swing, which includes both basic libraries and a large number of UI components. Although dojo has received strong support from struts2, it still cannot reverse its status in the world; extjs: similar to Bindows back then, it achieves an effect similar to a desktop program in the WEB. Back then, Bindows died tragically on the battlefield due to performance issues. It can only be said that it was born at the wrong time. However, the current fate of extjs is also worrying. The unchanging interface style and operation mode actually go against the ever-changing essential characteristics of WEB; easyui: a declarative UI component library based on jQuery. The so-called declarative components mean that there is no need to create and set components by writing code like traditional desktop programs. You only need to follow the most original HTML declarative concept and set attributes on the original HTML Tag to get the desired effect; The domestic framework DWZ similar to easyui also has a similar idea; backbone: MVC framework based on Javascript, a complete implementation of the MVC concept in the browser. As you can imagine, this type of framework has great advantages in handling client-side multi-view data synchronization, and can greatly simplify the development process of client display and interaction logic;

Choose one or several of the above basic libraries or development Framework means choosing a development model. From the perspective of development model, we can briefly summarize:

Traditional HTML CSS JS mode: In this mode, developers need to write a large amount of HTML code to implement the display logic of the page, and write JS code to implement the interaction logic. This is the most traditional development method, and it is also the most widely used development method. Whether it is an enterprise-level management system, an e-commerce website, or a mobile WEB application, it can be implemented in this way; the disadvantage of this method is that it can implement a single page. When using applications or complex interactive applications, the amount of JS code is relatively large; Desktop application development mode: such as EXTJS, all pages are implemented using JS. Developers basically do not need to write HTML code, and a large amount of display logic and interaction logic are completed using JS code. This method is very convenient for implementing single-page applications; but it requires developers to have an in-depth understanding of JS and the component library of the development framework; the thinking mode must be adapted to the component-based event mechanism; declarative UI development model: such as easyui and domestic DWZ , the display logic of the page is implemented in HTML just like the first mode, but compared to the first mode, this mode does a better job of abstracting components. Some of the display logic and even interactive logic implemented in JS in the traditional mode are also This can be achieved using a declarative approach. It can be said that this is an enhancement to the first mode; Client-side MVC development mode: such as backbone, this mode is similar to the desktop mode. The display and interaction logic of the page are implemented through a large amount of JS code, but the data model is maintained on the client side. and its status, and then using the binding mechanism of the view and the model, the amount of JS code can be greatly reduced;

The first mode is similar to the third mode, both use HTML code to implement the display logic, and use JS code to implement the interaction logic. It’s just that the third mode uses more abstract components and tries to use HTML to achieve as much display and interaction logic as possible; the second mode is similar to the fourth mode in that it focuses on using JS as much as possible to realize the display logic and interaction logic. HTML only serves as a page layout or page container. Relatively speaking, the second mode focuses on using JS to realize the assembly of interface views, while the fourth mode focuses on using JS to realize the complete MVC mechanism. In backbone, views are usually implemented using templates based on HTML code snippets. .

Since the third mode is an enhancement of the first mode, you can try to choose the third development mode in actual projects; compared with the first and third modes, the second mode has The main reason is the difference in development methods. The former focuses on JS, and the latter two focus on HTML. In addition, the application scenarios and application scope of the two are very similar.

Although the fourth mode, like the second mode, also focuses on using JS to implement page logic, it is essentially different from the second mode due to its powerful MVC mechanism. Just imagine for applications like gmail, if the client does not maintain a set of email data models at the bottom layer, it will be very difficult to simply use the previous three methods to achieve the current gmail page interaction effect.

In short, regarding the choice of WEB development mode, at this stage, I personally recommend giving priority to the third mode. If the application interaction is very complex, or needs to achieve a better interactive experience (such as supporting local storage, undo, redo, etc.), which results in a large amount of JS code, you can consider using the fourth mode.