First, what is the Web front-end engineer?
Front-end engineer, also called Web front-end development engineer. He is a subdivision of the industry with the development of the Web. Web front-end development engineer, the main responsibility is the use of (X) Html/css/javascript/dom/flash and other Web technologies for product interface development. Create standard-optimized code and add interactive dynamic capabilities, develop JavaScript and flash modules, and combine background development techniques to simulate the overall effect of web development that enriches the Internet and is committed to improving the user experience through technology.
Figure 1, front-end technology MSSWeb front-end development technology consists of three elements: HTML, CSS, and javascript! It requires the front-end development engineers not only to master the basic Web front-end development technology, site performance optimization, SEO and server-side basic knowledge, but also to learn to use a variety of tools to assist development and theoretical level of knowledge, including the maintainability of the code, ease of use of components, layered semantic templates and browser rating support. With the recent two or three years of RIA (Rich Internet applications abbreviation, Chinese meaning: Rich Internet applications) The popularity and popularity brought by such as: Flash/flex,silverlight, XML and server-side language (PHP, ASP. Net,jsp, Python) and other languages, front-end development engineers also need to master. Front-end development of the entry threshold is actually very low, and the server-side language first slow after the fast learning curve, the front-end development of the learning curve is first fast and slow.
- HTML is not even a language, he is just a simple markup language!
- CSS is just an untyped style-decorating language. Of course it can be counted as weakly typed language.
- The basic part of Javascript is relatively easy to get started with.
also because of this, the front-end development field has a lot of self-study into "just" peers, but most people stay in the stage of use, because the learning curve behind the more and more steep, every step forward is difficult. Web front-end technology has some rivers and lakes, the knowledge point is too trivial, the game of technical values is also difficult to divide, that is, the overall system of knowledge structure has not become a system, these factors also objectively affect the "orthodox" front-end technology precipitation! and a variety of "artifice" is abused, the front-end technical knowledge of the inheritance is too general, new people difficult to see the situation grasp primary and secondary. Therefore, the front-end technology field, for themselves to find a reliable brother, the importance of the project, Team, company, and even pay. on the other hand, as mentioned earlier, front-end development is a very new profession, and research on some norms and best practices is at the exploratory stage. There are always new ideas and techniques to flash, such as CSS sprites, negative margin layouts, grid layouts, and so on, with a variety of javascript frameworks that inject tremendous vitality into the entire front-end development landscape, and the browser wars are becoming more and more intense, and the cross-browser compatibility scenarios are still diverse. In order to meet the needs of "high maintainability", we need to master the front-end knowledge more deeply and systematically, so that we can create a good front-end architecture and guarantee the quality of the code. with the rapid development of handheld devices, led to the rapid development of HTML5 industry standards. Web domain technology, about 10 years there is no big update! Now the market is in need of excellent, advanced front-end engineers. On the one hand because this is a relatively new industry, and the front-end programmers mostly self-study part of the knowledge structure is not system, on the other hand, the university does not have such courses, the most important thing is: Beida Jade bird Such training institutions do not have a dedicated front-end Engineer training courses!! Wuliang in the first preface to the Return of javascript: "Most programmers think that JavaScript is too primitive for some web pages to be flashy, so they don't want to devote their energies to learning, Or think that you can master without learning. In fact, whether a language is a scripting language is often the goal of her design, simple and complex is not a distinction between scripting language and non-scripting language standards. In fact, in scripting languages, Javascript is a fairly complex language, and his complexity, even in non-scripting languages, is a very complex language! Javascript's complexity is not inferior to Perl and python!
second, how to learn the front-end knowledge? as a most basic front-end engineer you have to master HTML, CSS, and JavaScript. Three must be proficient at the same time, similar to my words to the front-end knowledge smattering, a problem to stop work around the search solution, first of all, even if not a qualified front-end personnel. Like me, if a front-end engineer that period is certainly not guaranteed. Qualified front-end engineers The first thing to learn is that without any external help (including search engines), can complete most tasks. The following knowledge points are required to be understood and familiar as a front-end engineer:
- DOM structure--what relationships may exist between two nodes and how to move between nodes arbitrarily.
- Dom operations-How to add, remove, move, copy, create, and find nodes.
- Events-how to use events and what are the main differences between the IE and DOM event models.
- xmlhttprequest--What this is, how to perform a GET request completely, and how to detect the error.
- Strict mode and promiscuous mode--how to trigger these two patterns, what is the point of distinguishing them.
- Box model-The relationship between margins, padding, and borders, and how the box models in IE < 8 differ.
- Block-level elements and inline elements-how to control them with CSS, how they affect the surrounding elements, and how you think they should be defined.
- Floating elements--how to use them, what their problems are, and how to solve these problems.
- What is the difference between HTML and xhtml--, and what do you think should be used and why?
- json--What it is, why it should be used, how to use it, and say the implementation details.
these points of knowledge should be what you know without thinking. In addition to the above-mentioned front-end knowledge, you also need to learn at least one backend programming language, so you can learn how to interact with the backend better. Many front-end engineers are very familiar with some libraries, jquery,bootstrap and so on, but the knowledge of the library is not able to mention your excellent, the whole good is those who understand the mechanism behind the library, especially to be able to write a self-made library of people. Truly qualified front-end engineers are able to achieve specific functional requirements, and excellent front-end engineers need to solve the problem is to find an optimal solution. Furthermore, excellent front-end engineers need to have good communication skills, as front-end engineers at least meet the needs of four types of customers:
- Product Manager. These are the people who are responsible for planning the application. They will come up with a lot of fresh, strange, and even non-fulfilling applications. In general, product managers are pursuing rich functionality.
- UI Designer. These people are responsible for the visual design and interactive simulation of the application. They are concerned about what the user is sensitive to, the consistency of the interaction, and the overall usability. In general, UI designers are fluent, but not easy to implement user interfaces, and they are often dissatisfied with front-end engineers to cause 1px error.
- Project manager. These people are responsible for actually running and maintaining the application. The main focus of project management is the time, performance, and due date of uptime, uptime, and availability of applications. The goal of the project manager is often to keep things simple and not to introduce new issues when upgrading updates.
- End-users. Refers to the main consumer of the application. While front-end engineers do not often deal with end users, their feedback is critical. What the end user demands most is the functionality that is useful to the individual, as well as the capabilities of the competitive product.
Yahoo Company, Yui's development engineer Nicholas C. Zakas that: Front-end engineers are the most complex job in the field of computer science. The vast majority of traditional programming ideas have not been applied, in order to use in a variety of platforms, a variety of technologies have borrowed a lot of soft science knowledge and ideas. The expertise required to be a good front-end engineer involves a wide and complex field that becomes more complicated by the involvement of all the parties that you end up having to serve. Expertise may lead you into the door to being a front-end engineer, but only the applications you create with the technology and the ability to work side by shoulder with others will really make you good.
third, the promotion of endless
Figure 2, web front end Engineer Knowledge architecture Excellent front-end engineers should have fast learning ability. The technology that drives web development is not static, these technologies change almost every day, and without fast learning, you can't keep up with the pace of web development. You must constantly improve yourself, learn new technologies and models, and just rely on today's knowledge to not adapt to the future. There will be a difference between the future of the web and today, and your job is to figure out how to manifest this change through your own Web application.
Iv. Front-end development Knowledge architecture
Front End Engineer
- Browser
- ie6/7/8/9
- Firefox
- Chrome/Safari/Opera
- Programming languages
- JavaScript/node. js
- JavaScript language Essence
- Cut page
- HTML/HTML5
- CSS/CSS3
- PhotoShop/paint.net
- Development Tools
-
- IDE
- VIM / Sublime Text2
- notepad++ / editplus
- webstorm
- Debugging Tools
- Firebug / firecookie
- YSlow
- Iedevelopertoolbar / ietester
- Fiddler
- version Management
- Git / SVN
- Github / bitbucket / Google Code
- Code quality
-
- Coding style
- jslint / jshint
- csslint
- Markup Validation Service
- Unit Test
- qunit / Jasmine
- mocha / should / Chai
- automation test
- Front End Library/framework
-
- jQuery/underscore/Mootools/prototype.js
- YUI3/Dojo/ExtJS
- Backbone/knockoutjs/emberjs
- Front-end standards/specifications
-
- HTTP1.1
- Ecmascript3/5
- W3c/dom/bom/xhtml/xml/json/jsonp
- Commonjs/amd
- Html5/css3
- Performance
-
- JSPerf
- YSlow rules
- Pagespeed
- HttpWatch
- DynaTrace ' s Ajax
- High-performance JavaScript
- Programming Knowledge Reserve
-
- Data
- Oop/aop
- prototype chain /scope chain
- Closed Package
- Function-Type programming
- Design Patterns
- Javascript Tips
- Deployment Process
-
- Compact Merge
YUI Compressor
- Google clousure complier
- cleancss/ uglifyjs
- document output
- Project Builder
/ span>
- make / Ant
-
- Span>grunt
- Yeoman
- Code Organization
-
- Modularity of class libraries
- Modularity of business logic
- File loading
- Safety
-
- CSRF/XSS
- Adsafe/caja/sandbox
- Mobile Web
-
- Html5/css3
- Responsive design
- zeptojs/iscroll
- v5/Sencha Touch
- PhoneGap
- JQuery Mobile
- JavaScript ecology
- Cutting-edge technology community/Conference
-
- D2/webrebuild
- nodeparty/W3ctech/HTML5 Dream Factory
- jsconf/ Shanghai JS (jsconf.cn)
- Qcon/velocity/sdcc
- Jsconf/nodeconf
- Ydn/yuiconf
- Computer Knowledge Reserve
-
- Compilation principle
- Network
- Operating system
- Algorithm principle
- Engineering/Software Testing principles
- Soft Skills
-
- Knowledge Management/summary sharing
- Communication Skills/Team collaboration
- Demand Management/PM
- Interactive design/usability/accessibility knowledge
- Visualization of
- Svg/canvas/vml
- D3/Raphaël/Datav
Five, Web front-end learning booksHTML, CSS category books, are similar, in Dangdang, excellent network search a lot of recommendations. If you feel like learning, you can focus on "CSS Zen Garden", which is very influential. JavaScript books are recommended to read by foreigners, and many of the authors of JavaScript books in the country do not understand the JavaScript language very thoroughly. Here are a few Javascript books to recommend:-- Primary reading:--
JavaScript Advanced Programming: A very complete classic primer book, known as one of the JavaScript Bible, detailed in detail, the latest version of the third edition has been released, the proposed purchase.
"The Return of JavaScript ", a Web development project manager of Baidu, wrote, as a beginner to prepare the entry-level tutorial is also good. -- Intermediate reading:--
JavaScript authoritative guide: Another JavaScript Bible, explained in very detailed, is intermediate reading, recommended to buy.
"JavaScript.The.Good.Parts": Yahoo Daniel, JavaScript Spirit leader Douglas Crockford's masterpiece, although only 100 pages, but Abas Ah! It is highly recommended to read.
High-performance JavaScript: Another masterpiece of Nicholas C. Zakas, author of the Advanced programming of JavaScript.
"Eloquent JavaScript": This book is only 200 pages, very short, through a few very classic examples (Aunt Emily's Cat, the tragic hermit, the simulation of the biosphere, Push box games, etc.) to introduce the knowledge and application of all aspects of JavaScript. -- Advanced reading:--
"JavaScript Patterns": The book introduces a variety of classic patterns, such as constructors, Singleton, factory, etc., is worth learning.
"Pro.JavaScript.Design.Patterns": Apress The book that explains JavaScript design patterns, very good.
"Developing JavaScript Web Applications": Build rich applications of good books, for the MVC model has a more in-depth explanation, but also some of the process of the library to explain.
"Developing Large Web Applications": Not only the introduction of JavaScript, but also the introduction of CSS, HTML, but the introduction of the content is very good, Really considering a large web application, how to design a JavaScript architecture is worth reading.
to be a good front-end engineer, we still need to continue to work hard: "High-performance website Construction Guide", "Yahoo Engineer's website performance optimization Recommendations", "YSLOW" Performance optimization recommendations, "website refactoring", "Web development Agile Road", "JQuery Library", "front-end framework", " HTML5 "," CSS3 "... These all need to be researched deeply! everything starts hard! If you can get to this state, the rest of the road can go on its own. If you only learn the front-end programming language, but not the back-end programming language (PHP, asp.net,jsp, Python), it can not be counted as a good front-end engineer. In becoming an excellent front-end engineer on the road, full of sweat and toil.
The path of the development of Web front-end engineers--Knowledge summary
