Java Web Front-End development framework and process __web

1 Common Java Web Development Framework

For example, for the advertising system, we first ignore some job,cache,config ... These optimizations, some frameworks and hierarchies can be like this,

Technology selection of MVC: V:freemarker vs jsp/velocity C:springmvc vs Struts/webwork M:spring/jpa/hibernate vs I Batis 2 Front-end v architecture

Front-End development has just arisen stage, front-end developers often interspersed in the back-end development process as an auxiliary role, as the business becomes more complex, the front-end must have its own development framework and processes, so that the backend focused on the development of service classes, front-end focus on the development of user interaction classes.

The Web front-end is conceptually divided into three levels: structure, performance, and behavior. Three layers are relatively independent and do not affect each other. On the physical level of the corresponding HTML, CSS, JS three different file formats. HTML: Responsible for defining the structure of Web pages, Content CSS: Responsible for the presentation of content JS: Responsible for the Web page on Dynamic behavioral response

A good hierarchy is also critical to the development of the front-end. The only source of content issues should be the HTML file definition, and the only source of the problem should be the CSS file definition, and the only source of behavioral problems should be the JavaScript file definition, which is independent of each other. But they are relevant because the behavior and style cannot be separated from the structure and must be written in the same file. In this case, the first thing to do is to separate the behavior from the HTML tag, and then introduce it into the HTML file.

The actual development structure is this:

The core of the front-end development is HTML + CSS + JavaScript. Essentially they form an MVC framework, which is HTML as an information model, a CSS control style (View), and JavaScript is responsible for scheduling data and implementing some kind of presentation logic (Controller). 1) Structural layer

In the Java field, there are three kinds of performance layer technology: JSP, Freemarker, Velocity. (1) JSP (Java Server Pages)

It inserts a Java program segment (scriptlet) and JSP tag (tag) into a traditional HTML file (. htm,.html), which implements the Java extensions in HTML syntax (in <%,%> form). The JSP file is formed, and the suffix name is (. jsp). Because Java has cross-platform features, Web applications developed using JSP are Cross-platform, run on Linux, and run on other operating systems. The JSP, like the servlet, is executed on the server side and eventually changes to the. class file, which is usually returned to the client as an HTML text, so the client can browse as long as it has a browser.

Advantages: Can write Java code support JSP tag (JSP tag) Support expression language (EL) official standards, a wide range of users, rich Third-party JSP Tag library performance is good, JSP compiled into class file execution, have a good performance

Disadvantages: Writing Java code, such as improper use, easily destroys the MVC structure. (2) Freemarker

It generates a static page, first of all, you need to use your own definition of the template page, this template page can be the most common HTML, can also be nested freemarker in the value expression, tags or custom tags, and so on, and then read the template page in the background to resolve the corresponding operation of the label, Then, the key-value pair is passed to replace the value expression in the template, and then a new HTML page is generated based on the configured path to achieve the purpose of static access.

Template + data Model = output, the template is only responsible for the performance of the data in the page, does not involve any logical code, and all the logic is handled by the data model. The output that the user eventually sees is created after the template and data model have been merged.

Freemarker is not related to the Web container, that is, when the web is running, it does not know the servlet or other.

Advantages: Can completely separate the presentation layer and business logic, using the JSP development process in the page in a large number of business logic code, making the page content messy, in the later a large number of changes in the maintenance process becomes very difficult. Freemarker does not support Java code at all. Can improve the development efficiency, JSP in the first time to implement the need to convert to a servlet class, the development phase of the function of timing, the need to frequently modify the JSP, each modification must be compiled and converted. Freemarker template technology does not have the problem of compilation and conversion, in the development process, the backend does not have to wait for the interface design developers to complete the page prototype, then to develop the program. For JSP tags to support a good built-in a large number of commonly used functions, such as HTML filtering, date amount format, etc. use expression language (EL)

Disadvantage: Not the official Standard user group and third party tag library is not richer than JSP

With Freemarker, as an interface developer, focus on creating HTML files, images, and other visualization aspects of Web pages, ignoring the data, while the program developer focuses on the system implementation and prepares the data to be displayed for the page.

There are also some of the earlier template languages, such as velocity, used to replace the JSP ... 2 Performance Layer CSS

After the structure is built, you add style sheet properties to them. It is the content of the page and the actual style of separation, all of the CSS is not necessary, even if the CSS or CSS can not be applied to conflict, the Web page can also be normal access.

For ease of management, different styles can be split, such as global styles, structural layout styles, color styles, text styles, and reset styles. CSS in the development of the code used in the form of norms, such as annotations, indentation, etc., so that the size of these files is relatively large, in order to reduce network traffic, improve the download speed of the Web page, the general release of the need for JavaScript and CSS compression processing, we will style file merge compression, The goal is to reduce the time and frequency of interacting with the server. If the http://www.jb51.net/tools/cssyasuo.shtml can be compressed online.

Style Mix selection: A unified style code for the entire site, placed in a separate style file. css Some styles different pages, in addition to linking external style files, also need to customize the style of a page, some of the content if needed a different, using the expert style

3 behavior Layer JavaScript

The common and most famous JavaScript framework, in fact, should be the library:

(http://www.ibm.com/developerworks/cn/web/1404_wangfx_jsframeworks/) jQuery

JQuery is currently the most used front-end JAVASCRIPT class library, it is a relatively lightweight class library, the operation of the DOM is also more convenient in place, the support of the effect and a lot of controls. At the same time, there are a number of extension projects based on jquery, including the jquery UI (some of the control and effect frameworks that jquery supports), the jquery Mobile (the mobile-side jquery framework), the Qunit (the test framework for JavaScript). These additions make the JQuery framework more complete, and these extensions are basically compatible with the current framework and can be interleaved to make front-end development richer. Ext

Compared to Jquery,ext JS more heavyweight, there are several megabytes of files, making Ext in the development of the drawbacks and cumbersome. But, on the other hand, in Ext JS huge file behind is Ext JS powerful function. EXT JS control and function can be said to be strong and gorgeous to the extent. charts, menus, special effects, Ext JS Control Library is very rich, at the same time its interaction is very strong, independent of EXT JS can almost replace the control layer completed in customer interaction. Powerful function, rich control Library, the gorgeous effect also makes EXT JS become the development tool of intranet. YUI

YUI also has its own JavaScript class library, DOM operation and effect processing is also relatively convenient, function and control is also very complete, but compared to jQuery and Ext JS more moderate. With the decline of Yahoo, YUI also gradually be diluted.

At present, the front-end frame mainly adopts javascript+css mode. Based on the several JavaScript libraries above, we can build a framework for a Java Web front-end system based on the jquery framework. such as the front of the jungle is cos-ui+jquery set up, and then use plug-in ztree to achieve category tree in front of the display. jquery's encapsulation of JavaScript

jquery can greatly simplify the writing of JavaScript programs, the main performance: positioning elements

JS writing: document.getElementById ("abc") jquery Writing: $ ("#abc") by ID positioning $ (". ABC") by Class positioning $ ("div") through the label positioning

Change the contents of an element

js notation: abc.innerhtml = "TEST"; jquery: