How to become an excellent front-end engineer (share)

First, the need for technology

As a most basic front-end engineer you have to master HTML, CSS, and JavaScript. The three must be proficient at the same time, similar to my knowledge of the front-end smattering, a problem to stop work around the search solution, first, 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 is this, how to perform a GET request in full, and how to detect errors.
• 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.
• HTML and XHTML-what's the difference between the two, which one 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, really good is those who understand the mechanism behind the library, especially to be able to write a personal library of their own 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.

Second, communication is very important

Excellent front-end engineers need to have good communication skills, because your work is closely related to the work of many people. In any case, front-end engineers must meet the needs of at least the following four categories of customers.

1. Product Managers -These are the people who are responsible for planning the application. They can imagine how to use the application to meet user needs and how to make money through the patterns they design (hopefully). In general, these people pursue a wealth of functions.
2. UI Designers -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. They are passionate about a smooth, but not easy-to-implement user interface.
3. Project Managers -these people are responsible for actually running and maintaining the application. The primary focus of project management is no more than uptime-the time, performance, and expiration dates that the application is always available. The goal of the project manager is often to keep things simple and not to introduce new issues when upgrading updates.
4. The end user --of course the main consumer of the application. Although we don't often deal with end-users, their feedback is critical; apps that no one wants to use are worthless. What the end user demands most is the functionality that is useful to the individual, as well as the capabilities of the competitive product.

Don't casually accept a task without making an assessment. You must always keep in mind that it is important to understand what other people want you to do and not simply accept the approximate of "This function is problematic". Also, you need to know exactly what this feature or design is really about. A task like "Add a button" doesn't always mean you'll end up with a button. It may also mean that you will be looking for a product manager, ask what the button is for, and then find a UI designer to discuss whether the button is the best way to interact. To be a good front-end engineer, this communication is essential.

So, what should the front-end engineers care about most? The answer is all of these four categories of people. A good front-end engineer must know how to balance the needs and expectations of these four categories of people and then come up with the best solution on that basis. Because front-end engineers are at the intersection with these four types of people, the importance of their ability to communicate is self-evident. If a very cool new feature will affect the front end performance, must Shanfanjiujian, how do you explain to the product manager? For example, how can you convince a UI designer if a design does not change back to the original scheme and can adversely affect the application? As a front-end engineer, you must understand where each category of people's ideas comes from and must be able to come up with solutions that all parties can accept. In a sense, a good front-end engineer is like an ambassador who needs to be a diplomat at all times to cope with every day's work.

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

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

How to become an excellent front-end engineer (share)