WebApp Project Front End summary

Outline

• Overall grasp, starting from the design draft-technology selection
• Parallel development, starting with the implementation of static pages
• Front-End automation
• Front-end JS logic
• Front-end integration
• Small problem Set
• Summarize

1. Overall grasp, starting from the design draft-technology selection

New Project Hand, is lucky, design drafts have all completed, more than 40 pages. Do not worry about the side of the situation to change. Ability to determine reusability and some specifications in advance.
Main requirements of the project:
1. Compatible with PC, mobile, modern browser, ie9+, etc.
1. Embed to Android, iOS client and require the page to be independent
1. Using node. js as the middleware

I am responsible for front-end pages and logic, node is responsible for another colleague, front-end architecture by the front-end leader.
Front-end frame selection is an important preparation before development:
1. UI Framework: Consider Uikit, Amazeui, Bootstrap, and finally choose bootstrap+ Custom Style, the main reason for the company's other projects also used bootstrap. For me, these three frames I have not used before, as a one-year experience of the front end is ridiculous, in fact, I think there is nothing, immediately learn is.
1. JS Library: Consider jquery and Zepto, and finally choose jquery
1. Front-end tool: gulp,browserify,bower,less
1. Express,node, the colleague of node, is familiar with
1. Swig for front-end templates
1. Greensock Animation Library

2. Parallel development, starting with the implementation of static pages

After one weeks of preliminary preparation and research, the front-end basic shelves up, gulp, bower, norms. JS this piece of automation is not ready, node backstage shelves are also in the building. There are inconsistencies in the progress of the parties, considering the parallel development, I suggest I do a static page, node backstage continue to engage in their own, the team leader continue to study shelves.
This is good, concentrate on the page, can be more focused on the HTML, CSS aspects of things. It took 8 of the work time to finish 40 pages (no overtime), and I thought it was faster.
CSS from the Bower introduced the bootstrap part of less source code, and then cover some of the source code needs to modify the style, and then more of their own definition of the style. This process has been considered a lot of reuse, structure, naming problems, so the first 4 days of my progress is very slow, because the edge of writing on edge optimization, ax, 4 days after the completion of almost 30 pages. The following is the file structure, as per the bootstrap specification:

3. Front-End automation

Static page finished, just the leader of the shelf, the work flow this piece also set up, backstage also do some functions waiting for integration.
Organization JS used to Browserify, the front and back of the JS logic can be used to require.
The project is relatively tight, the leader of this one shelf has not been thoroughly understood, or quite complex, after the loose point will take a good look.
Automation brings more efficient development, monitoring, packaging, compression, Iconfont, require and other pre-made configuration, the back almost no need to change, for the front end, these are essential technical requirements.

4. Front-end JS logic

JS this piece, for each page configured ViewName, written in the base.html, all the pages will inherit base, this piece of course is to start to say Swig template, the corresponding folder of all the HTML file JS will be introduced page->{% ViewName %}->index.js.
Browserify some rely on JS hang to the overall, such as: Jquery,jq-validate,jq-form,greensock.
Specific pages are configured with Pageconfig, which is used to obtain some data.
The triggering events are controlled by the event agent, and the trigger triggers are used for inter-component communication.

View: HTML to write good DOM node and dynamic parameters, automation tools will automatically splice node generation Swig front-end template, in other JS inside can be require. By passing in the corresponding parameters, you can output to the page, and the custom popup component and the list component can be called easily.

5. Front-end integration

There seems to be nothing to say, the backend ready interface, the front-end call on the line, some problems need more communication, to ensure that the needs of the same understanding.

6. Small problem Set

1. Gulp Iconfont Some font icons are incomplete, temporarily icomoon manually updated
2. Mobile active failure:-webkit-tap-highlight-color:transparent;
3. HTML5 video audio Many events modern browser support is not good, especially the mobile browser, you can use this address to do the test http://www.w3.org/2010/05/video/mediaevents.html

7. Summary

1. Overall control, attention to naming and reuse, appear to be unreasonable and need to be reused should be optimized.
2. If there are conditions to implement static pages, and then finally to write the JS logic, so that development should be faster.
3. Because how many have also done the design, also know that sometimes as the front-end feel designers do not let everyone feel a bit tired, but we should respect the designers, do not have any complaints because it is their responsibility, of course, I say this is not I complained about them before, but whenever very busy very tired, Look at the designer to bring up the UI problem, I have inspired myself so, I think this is very good, let me more positive, I hope you can change a bit more thinking.
4. The front and back end do their own unit test, try to ensure that their code problems will be the least, so that the integration cost is lower.
5. Use of third-party frameworks and libraries and unfamiliar situations, encounter demand problems, you should first from the three-party documents to find solutions to the needs of the three-party library has no solution, and then consider their own solution.
6. Pre-contract all kinds of specifications

Http://www.cnblogs.com/1wen/p/4477894.html

WebApp Project Front End summary