Web developer can do more

Hedger Wang, Yahoo's front-end engineer, USA. The original Yahoo! 's first web Developer, very generous to share with us his rich experience. The experience is more contagious than the empty theory, and we find that many of the problems we encounter are also the one he has encountered. Yahoo! Web Developer is a more near-user front-end engineer role that integrates UI and product-function logic and enhances ease-of-use and interactive experiences for the product.

In his information architecture (information Architecture) training, like Yahoo Hundreds of people together to do products, internal needs more speed and efficiency, but also need team collaboration and specialization. The previous development process is single-threaded, the product manager to design requirements for designers, designers began to design and then and product managers to discuss and finalize, and then to the web Developer into HTML template, then the template to the front-end engineer development, front-end engineers need to provide data, The demand is then referred to the back-end engineer. At this time, Web developer can only pray not to write a template that is quite standard to destroy. So, every time you start a project, even a very similar project, you have to go through the process. Obviously, the practice is not efficient, and in every link is prone to problems, like playing dominoes, any one of the small cards fell in vain.

"Bottom up approach", right! It is reasonable to implement web development from the bottom up. The product manager, on the basis of existing systems and existing technologies, plans products, refines product processes, and ultimately determines what functions are available for the product. Once this is done, the front-end engineer can start. For example, all pages have a login module, which can be written directly as follows:

<div id= "Login_mod" >
<form method= "GET" action= "" >
<ul>
<li><label> Username: </label><input type= "text" name= "name"/></li>
<li><label> Password: </label><input type= "password" name= "pwd"/></li>
<li><button type= "Submit" > Login </button></li>
</ul>
</form>
</div>

As for what it looks like on the page, the front-end engineer doesn't have to think about it, and its own web developer later defines it through CSS. Similarly, when you make a search results page, just generate such a result:

<ul>
<li><a href= "URL" > title 1</a><p> Description ...</p></li>
<li><a href= "URL" > title 2</a><p> Description ...</p></li>
<li><a href= "URL" > title 3</a><p> Description ...</p></li>
...
</ul>

Like this, the front-end engineer just needs to describe the structure of the data with XHTML and the web developer, but the things that are developed at this time will be hard to see:

It doesn't matter, after the Web developer to get the design, will be based on the actual effect with CSS definition it, and finally get this:

This is the benefit of the front-end adoption of performance separation (Presentation Tier), where different professional team can focus on developing in their area of expertise to achieve parallel development, efficiently and without problems. With a real-life example of the analogy is more clear, like to build a house, first of all to have detailed engineering drawings, accurately marked the hall how big, there are several rooms, several doors ... After that, the drawings were given to designers to design the 3D decoration, and workers began to build houses. After the house was covered, 3D also came out, and then find the decoration team according to, where to paint, where to paste what tile ... But if the reverse order, first let the designer design, finished and then by the workers to the building, and finally the House will not be qualified even if it is covered. In the case of the above example, the WEB developer is the role of a decorator in the product development process.

The front-end development of the product can be divided into three layers:

The

structure layer is the product prototype developed by front-end engineers. Overlay a layer of performance with CSS. On this basis, the use of javascript/dom to enhance the interactive experience of products. Another benefit of this layering is that if the client environment does not support JavaScript, the product can still be used, and if the client environment does not support CSS (like handheld devices), the content is still readable in a linear arrangement.

Why is web developer a front-end engineer that is more close to the user? The traditional engineer is to complete the product function, optimize the service side performance for the purpose, and web developer to consider the product on the user's machine performance, the user's operating experience and so on these details. Especially now, the user-side of the browsing environment is very complex, the display has 16:9, there are 10-inch small notebook, but also useful for smaller PDA screen ... The site should be a wide range of pages to adapt to different users, which requires web developer development of the site page with flexible layout. At the same time the browser is also a variety of, PC with Firefox, IE, Apple with Safari, mobile phone with opera ... Consistency can be achieved through standards-based web development. If one day the user's mouse is broken, he has to use the keyboard to access our website ... Although the Internet is fast now, but to know what users expect to see, even if half a second users will complain.

It seems that Web developer is really doing a lot of things. Fortunately, Yahoo has a lot of tall people like Hedger wang. Yahoo China's products are currently in the user experience and ease of use, is doing continuous improvement and improvement.