Knowledge of web Front-end engineers and knowledge of web engineers

Knowledge of web Front-end engineers and knowledge of web engineers
Category: Web development applications
1. What is a Web Front-end engineer?

A front-end engineer is also called a Web Front-end development engineer. With the development of web, he is subdivided into different industries. Web Front-end development engineers are mainly responsible for using (X) HTML/CSS/JavaScript/DOM/Flash and other Web technologies for product interface development. Create Standard-optimized code, add interactive dynamic functions, develop JavaScript and Flash modules, and use Background Development Technology to simulate the overall effect for Web development on a wide array of the Internet, we are committed to improving user experience through technologies.
How Web front-end engineers grow-knowledge aggregation
Figure 1. Front-end technology MSS


The Web Front-end development technology mainly includes three elements: HTML, CSS, and JavaScript!
It requires front-end development engineers not only to master the basic Web Front-end development technology, website performance optimization, SEO and basic knowledge on the server side, in addition, you must learn to use various tools to assist development and theoretical knowledge, including code maintainability, component usability, hierarchical semantic templates, and browser hierarchical support.
With the abbreviation of Rich Internet Applications in the past two or three years, the Chinese meaning is: the popularity and popularization of Rich Internet Applications, such as Flash/Flex, silverlight, XML, and server-side languages (PHP, ASP. NET, JSP, Python) and other languages, front-end development engineers also need to master.
The front-end development entry threshold is actually very low. Compared with the learning curve of the server-side language that is slow first and then fast, the learning curve of the front-end development is fast first and then slow.


HTML is not even a language. It is just a simple markup language!
CSS is just a non-typed style modifier language. Of course, it can barely count as a weak language.
The basic part of Javascript is relatively difficult to start.



Because of this, there are many self-taught peers in the front-end development field, but most people are stuck in the use phase, because the learning curve behind is becoming steep, every step forward is hard. The Web Front-end technology has some advantages and disadvantages, and the knowledge points are too trivial. The game of technical values is also difficult, that is, the knowledge structure of the global system is not systematic, these factors also objectively influence the accumulation of "Orthodox" front-end technology! In addition, all kinds of "tricks and tricks" are abused, and the inheritance of front-end technical knowledge is too extensive. New people are difficult to understand and grasp the primary and secondary issues. Therefore, in the front-end technology field, it is important to find a reliable senior for yourself, covering projects, teams, companies, and even salaries.


On the other hand, as mentioned above, front-end development is a very new profession, and the research on some norms and best practices is in the exploratory stage. There are always new inspirations and technologies emerging from time to time, such as CSS sprite, negative margin layout, and raster layout. Various JavaScript frameworks emerge one after another, injecting great vitality into the front-end development field; browser Wars are getting increasingly fierce, and cross-browser compatibility solutions are still varied. To meet the "high maintainability" requirements, you need to have a deeper and more systematic understanding of the front-end knowledge so that you can create a good front-end architecture and ensure the quality of code.


With the rapid development of handheld devices, the rapid development of HTML5 industry standards has been promoted. The web technology has not been significantly updated for about 10 years! At present, the market needs excellent and senior front-end engineers. On the one hand, it is because this is a relatively new sub-industry, and most front-end programmers learn part of it by themselves, the knowledge structure is not systematic; on the other hand, there is no such course in the university, the most important thing is: there are no specialized front-end engineer training courses for training institutions such as Peking University qingbird !!


Wu Liang said in the preface to "Return of the JavaScript King": Most Programmers think that Javascript is too simple and only suitable for some fancy web pages, so they do not want to spend their energy learning, or think you can master it without learning. In fact, whether a language is a scripting language is often determined by her design goals. simplicity and complexity are not the criteria for distinguishing scripting and non-scripting languages. In fact, Javascript is a rather complex language in scripting. Its complexity is measured in non-scripting languages! Javascript is not as complex as Perl and Python!




2. How to learn the front-end knowledge?

As a basic front-end engineer, you must master HTML, CSS, and JavaScript. The three must be proficient at the same time. Similar to my words, I know the front-end knowledge. When I encounter problems, I will stop working and search for solutions. First, I will not be able to use a qualified front-end personnel. If I become a front-end engineer like me, the construction period cannot be guaranteed. Qualified front-end engineers must first learn how to complete most tasks without any external help (including search engines.
The following knowledge points must be understood and familiarized as a front-end engineer:


DOM structure-the relationship between two nodes and how to move them freely.
DOM operations-how to add, remove, move, copy, create, and search nodes.
Event-how to use events and what are the main differences between the IE and DOM event models.
XMLHttpRequest -- what is this, how to fully execute a GET request, and how to detect errors.
Strict mode and hybrid mode-how to trigger these two modes to differentiate their significance.
Box Model-the relationship between the outer margin, the inner margin, and the border. What is the difference between the Box Model in IE <8.
Block-level elements and intra-row elements-how to use CSS to control them, how they affect the surrounding elements, and how you think they should be defined.
Floating elements-how to use them, what problems they have, and how to solve them.
What is the difference between HTML and XHTML? Which one do you think should be used and why.
JSON -- what it is, why it should be used, how it should be used, and implementation details.



The above knowledge points should be something you know without thinking about. In addition to the above front-end knowledge, you also need to learn at least one backend programming language, so that you can learn how to better interact with the backend. Many front-end engineers are very familiar with some libraries, such as jQuery and Bootstrap. However, they are not able to tell you how good you are. What is really good is the mechanisms behind the library, especially those who can write their own databases by hand. A truly qualified front-end engineer can meet specific functional requirements, and an excellent front-end engineer needs to solve the problem by finding an optimal solution.


Furthermore, excellent front-end engineers must have good communication skills, because front-end engineers must meet the needs of at least four types of customers:


Product Manager. These are groups of people responsible for planning applications. They will come up with a lot of new, strange, or even less practical applications. Generally, product managers are pursuing a wide range of features.
UI Designer. These people are responsible for visual design and interactive simulation of the application. They care about what users are sensitive to, what interactions they have, and how they can be used as a whole. In general, UI designers are fluent and beautiful but not easy to implement user interfaces, and they are often dissatisfied with front-end engineers resulting in 1px errors.
Project Manager. These people are responsible for running and maintaining the application. The main focus of project management is the normal running time, the time when the application is always available, the performance and the deadline. The goal of a project manager is to keep things as simple as possible and not introduce new problems when upgrading and updating.
End user. It refers to the main consumer of the application. Although front-end engineers do not often deal with end users, their feedback is crucial. What end users require most is personal functions and the functions of competitive products.



Nicholas C. Zakas, a yui development engineer at Yahoo, believes that front-end engineers are the most complex jobs in the field of computer science. The vast majority of traditional programming ideas are no longer applicable. In order to use them on multiple platforms, many technologies have borrowed a lot of soft science knowledge and ideas. The expertise required to become an excellent front-end engineer involves a broad and complex field, which will become more complex because of the involvement of all parties you must ultimately serve. Professional technology may lead you to become a front-end engineer, but only Applications created using this technology and the ability to work with others can truly make you excellent.


3. Endless improvements


How Web front-end engineers grow-knowledge aggregation
Figure 2. knowledge architecture of Web Front-end engineers


Excellent front-end engineers should be able to learn quickly. The technologies that promote Web development are not static. These technologies are changing almost every day. Without the ability to learn quickly, you will not be able to keep up with the pace of Web development. You must constantly improve yourself and learn new technologies and models. You cannot adapt to the future by relying solely on today's knowledge. The future of the Web will be quite different from today, and your job is to figure out how to reflect this earth-shaking change through your Web applications.




Iv. Front-end development knowledge architecture


Front-end engineer


Browser
IE6/24/60/9
Firefox
Chrome/Safari/Opera
Programming Language
JavaScript/Node. js
The essence of JavaScript Language
Switch 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/shoshould/Chai
Automated Testing
WebDriver


Front-End library/framework
JQuery/Underscore/Mootools/Prototype. js
YUI3/Dojo/ExtJS
Backbone/KnockoutJS/Emberjs
Frontend standards/specifications
HTTP1.1
ECMAScript3/5
W3C/DOM/BOM/XHTML/XML/JSON/JSONP
CommonJS/AMD
HTML5/CSS3
Performance
JSPerf
YSlow 35 rules
PageSpeed
HTTPWatch
DynaTrace's Ajax
High-performance JavaScript
Programming knowledge reserve
Data Structure
OOP/AOP
Prototype chain/scope chain
Closure
Functional Programming
Design Mode
Javascript Tips
Deployment process
Compression and merge
YUI Compressor
Google Clousure Complier
CleanCSS/UglifyJS
Document Output
JSDoc
Dox/Doxmate
Project Build Tool
Make/Ant
GYP
Grunt
Yeoman


Code Organization
Modular class library
CommonJS/AMD
YUI3 Module
Modular business logic
File Loading
LABjs
SeaJS/Require. js


Security
CSRF/XSS
ADsafe/Caja/Sandbox
Mobile Web
HTML5/CSS3
Responsive Design
Zeptojs/iScroll
V5/Sencha Touch
PhoneGap
JQuery Mobile
JavaScript Ecosystem
MongoDB/CouchDB
Cutting-edge technology communities/conferences
D2/WebRebuild
NodeParty/W3CTech/HTML5 DreamWorks
JSConf/Hu JS (JSConf.cn)
QCon/Velocity/SDCC
JSConf/NodeConf
YDN/YUIConf
Computer Knowledge reserves
Compilation principles
Computer Network
Operating System
Algorithm principle
Software Engineering/software testing principles
Soft Skills
Knowledge management/Summary and sharing
Communication skills/team collaboration
Requirement management/PM
Interaction Design/availability/accessibility
Visualization
SVG/Canvas/VML
D3/Rapha rjl/DataV


Backend Engineer
Programming Language
C/C ++/Java/PHP/Ruby/Python /...
Database
SQL
MySQL/MongoDB/Oracle
Operating System
Unix/Linux/OS X/Windows
Data Structure






5. Web Front-end learning books

The books in HTML and CSS categories are all similar. Search for many recommendations on Dangdang and zhuoyue. If you feel like you have learned it, you can take a look at "CSS zen garden", which is very influential. Javascript books are recommended to be written by foreigners. The authors of many domestic Javascript books do not have a thorough understanding of the Javascript language.
Several Javascript books are recommended here:
-- Beginner's books :--
JavaScript advanced programming: a very complete and classic entry-level book, known as one of the JavaScript Bibles, is very detailed. The latest version of the third edition has been released, it is recommended to purchase.
Written by a Web Development Project Manager of Baidu in return of the JavaScript king, the entry-level tutorials for beginners are also good.
-- Intermediate reader :--
JavaScript authoritative guide: Another JavaScript Bible, which is explained in great detail and belongs to intermediate books. We recommend that you purchase it.
JavaScript. The. Good. Parts: The masterpiece of Douglas Crockford, The JavaScript spiritual leader of Yahoo! It is strongly recommended to read.
High-performance JavaScript: Another masterpiece of Nicholas C. Zakas, author of JavaScript advanced programming.
Eloquent JavaScript: This book contains more than 200 pages, which is very short. It uses several classic examples (Aunt Emily's cat, miserable hermit, simulated ecosystem, and box pushing games) to introduce all aspects of JavaScript knowledge and application methods.
Advanced books:
JavaScript Patterns: It describes various classic models, such as constructors, Singleton instances, and factories. It is worth learning.
"Pro. JavaScript. Design. Patterns": Apress published a book on JavaScript Design Patterns, which is very good.
Developing JavaScript Web Applications: A good book for building rich Applications. It provides a more in-depth explanation of the MVC model and also explains some process libraries.
Developing Large Web Applications: not only about JavaScript, but also about CSS and HTML, but the content is very good, it is worth reading how to design the JavaScript architecture under a large Web program.
To be an excellent front-end engineer, we still need to continue our efforts: high-performance website construction guide, Yahoo engineer's website performance optimization suggestions, YSLOW performance optimization suggestions, website reconstruction, Web development agility, and jQuery library, front-end framework, HTML5, and CSS3 "...... This requires in-depth research!


Everything starts with hard! If you can go to this realm, you can continue the rest of the journey. If you simply want to learn the front-end programming language, but do not understand the back-end programming language (PHP, ASP. NET, JSP, Python), it cannot be regarded as a good front-end engineer. The road to becoming an excellent front-end engineer is full of sweat and hard work.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.