What does front-end development need to know?

Anyone engaged in the internet basically will write a few lines of HTML, used Word people with Dreamweaver can also make regular pages, so most people will naturally think "page development is not technical content, very simple." There is not only this universal cognition, but also a lot of doubts about the practitioners: do the front end of the page, no problem; compatibility, small case; Picture integration, always in use ... What's the problem? The bottleneck, the ceiling, the transformation, the way out. It is widely discussed among practitioners. Is there really no problem? NetEase Mailbox Front-end Technology Center has been set up for several years, it seems that there is no discussion of the topic, but also often some new ideas to let everyone spirits. So what are the requirements of page development, but also what to do, how deep the water inside, let us scoop scoop look.

At different times the view of the front end of the page seems to be changeable. In the early days of the internet, the car is still more expensive than the house, cakes and fans are only used to eat, chrysanthemum is only used for tea.

At that time, the page design style is relatively simple, the corresponding page needs are simpler, and then the browser is basically the IE6 of the world, JavaScript is only a synonym for Web effects, the HTML page itself does not cause too many people's attention, it seems as long as can use div even table plus CSS Assist to set the image position, the content of the page reserved OK, and this concept exists for a long time.

With the rich content of the page, the development of design style, the increase of the complexity of the interaction, the application of AJAX, the upgrading of the browser, but also let everyone re-the most basic page itself attention. Then the hot discussion is the browser compatibility, encountered the most passionate about the problem is full network search hack, by the way again scold scold IE6, 7 ... When these have been done again, it seems to have encountered a bottleneck, and began to find a way out. Let's start at this stage.

1: Implementation is the most basic work

The visual manuscript is represented by the Code of the page contains two basic requirements: 1. Can reflect the visual manuscript, 2. Be able to be compatible with the browser. These two demands to achieve the need for us to pursue the details of the attitude and a certain page foundation, can complete these two content can be preliminary into the front page of the practitioners ranks, but this means that we can be qualified for the work of the page development? No, it's just beginning!

2. Communication with the designer and participation in the project
Communication is important. Let's start with a few questions: have we discussed with the designers that some effects are more effective for low-end browser rendering efficiency? Have you explored some of the effects that can be achieved with CSS3 to make the structure more concise and clear? Have you ever sought balance in code and vision? Page front-end development to basic users, The code written is also directly on the browser, and we are obligated to be responsible for the stability and rendering efficiency of the page. We also often meet the project under the overall schedule pressure caused by the design and page front-end development synchronization, it is more necessary to get the project information as much as possible, understand what we have to do, which can help us to fully consider the reuse and framework development.

3. Good page structure
The construction of the page structure is like building the foundation of the house, its good or bad will directly affect the quality of CSS code, JS Development, background development will also affect the future page expansion, Iteration and page adjustment. After you get the visual manuscript, don't be too busy to start, and watch your thoughts more. First analyze the layout, divide the framework, then plan the structure and write the code. Especially in large-scale projects, the rational use of modular development, whether from the overall or extended maintenance has considerable benefits.

4. About hack
Many students in the page development when the most online search is hack, whether we rely entirely on the hack to achieve page compatibility, the answer is negative. We often liken IE6 to a lie to us, and we will lie 100 more lies. Do not deny that IE6 often let us spit blood, but does not mean that we use more "lies" to compensate can be complacent. In most cases, you can tweak the HTML structure by changing your mind, or use some of the more secure CSS to kill hack. No one can predict when the use of hack will make us a big somersault. Triggering layout or position:relative, for example, can help solve many IE6 problems.

5. Beautiful Code
Now a lot of Web projects are complex, code size will become very large, how to better co-development and maintenance is a problem we face. Need to consider perfect unified planning, but also to develop good code development habits in the face of all kinds of situations. Flip through the page code, see a reasonable label use, good comments, clear code structure, accurate CSS is not only like appreciating a work of art, more downstream development and collaborative development to reduce the cost of communication, we have no reason to do so? for example: Div Abuse is now a more typical problem. Count the number of labels you use. Different semantics should use the corresponding tag code, especially HTML5 provide richer semantic tags, they are waiting for the battlefield bugle, let us go to liberate them!

6, with the spirit of entrepreneurship
The best developers will not be idle people. For them, the success of the product means more than just a fall in their salary. Because they are enthusiastic in their work, they work for a better development of the project and will indomitable.

7, measuring two times, the knife once ... But do not measure more than three times
One of the worst mistakes a developer could make is not knowing what to do, just a opposing into the code. When great developers jump into the code, it's because the requirements specification is very similar to what they've done before. Great programmers are thinking, planning, and researching when they are faced with new problems.

The most outstanding developers do not fall into the "analysis paralysis" trap. They learn to be cautious about certain things (such as when it comes to money or personal data), and only these special areas are suitable for what I call "measuring three times". Anything that happens more than three times means you're wasting your time.

It is important to stop planning at a specific point in time, start coding, and then see where your plan needs to be adjusted accordingly. That, by the way, is one of the reasons why I became a fan of agile methods. The best developers I know will be willing to give up their plans when they are no longer appropriate or if they find their plans flawed.

HTML5 Technical Personnel master the content:
First stage: Front page Reconstruction: PC-side website layout, HTML5+CSS3 Foundation project, webapp page layout;
Second stage: JavaScript Advanced Programming: Native JavaScript interactive function development, object-oriented development and ES5/ES6, JavaScript Tool Library independent research and development;
Phase III: PC-side full-stack project development: jquery Classic Interactive development, HTTP protocol, AJXA advanced and backend development, front-end engineering and modular applications, PC-side web development, PC-end management Information system front-end development;
Phase four: Mobile project development: Touch side project, Scene project, Application Vue.js Development WebApp Project, Application Ionic Development WebApp project, Application react.js development webapp;
Fifth stage: Hybrid (Hybrid) development: All kinds of mixed application development;
Sixth stage: Nodejs full stack development: WebApp backend system development.

What does front-end development need to know?