Web Front End Engineer Knowledge summary

Source: Internet
Author: User
Tags jquery library website performance css zen garden

Category: Web Development applications
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.
The path of the development of Web front-end engineers--Knowledge summary
Figure 1, front-end technology MSS


Web 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.



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, HTML5 industry standards have led to rapid development. 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 sequence of "The Return of JavaScript king," said: "Most programmers think that JavaScript is too primitive, only for some Web page above the fancy performance, so do not want to spend energy to learn, or think not to learn to master." 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


The path of the development of Web front-end engineers--Knowledge summary
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
Automated testing
Webdriver


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
Compress merge
YUI Compressor
Google clousure complier
Cleancss/uglifyjs
Document output
JSDoc
Dox/doxmate
Project Building Tools
Make/ant
Gyp
Grunt
Yeoman


Code Organization
Modularity of class libraries
Commonjs/amd
YUI3 Module
Modularity of business logic
File loading
Labjs
Seajs/require.js


Safety
Csrf/xss
Adsafe/caja/sandbox
Mobile Web
Html5/css3
Responsive design
Zeptojs/iscroll
V5/sencha Touch
PhoneGap
JQuery Mobile
JavaScript ecology
Mongodb/couchdb
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


Back-end Engineer
Programming languages
c/c++/java/php/ruby/python/...
Database
Sql
Mysql/mongodb/oracle
Operating system
Unix/linux/os x/windows
Data






Five, Web front-end learning books

HTML, 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, miserable hermit, simulation biosphere, push box game, etc.) to introduce the knowledge and application of JavaScript in every aspect.
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 consider a large Web program, 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.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Web Front End Engineer Knowledge summary

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.