[Reprinted] Front-end knowledge system and training strategy

Http://blog.csdn.net/borishuai/article/details/8676573

Directory (?) [+]

Front-end Introduction

Web Front-end development engineers are a very new profession, and they have been really valued for less than five years at home and abroad. Web Front-end development evolved from the production of web pages, and its names have clear characteristics of the times. As people have higher and higher requirements on user experience and the technical difficulty of front-end development increases, the profession of Web Front-end development engineers is finally independent from the design and production situations.

In the early days, the front-end was actually the table layout. Later, we developed the so-called Div + CSS website reconstruction, and now we have various dazzling new technologies, the development of Web Front-end technology is very fast, so choosing the front-end industry means learning continuously. Let's first look at the front-end Knowledge System Structure drawn by Zhang kejun:

The core of front-end development is HTML + CSS + JavaScript. Essentially, they constitute an MVC framework, that is, HTML is used as the information model, CSS control style (view), JavaScript is responsible for scheduling data and implementing a certain display logic (Controller ).

Html1. label Classification 1. Label represents an element 2. Division by nature: block-level and Inline-Level3. By semantics:

• Headings: H1, H2, H3, H4, H5, h6
• Paragraphs: P
• Text Formatting: Em, strong, sub, Del, INS, small
• Lists: Ul, Li, ol, DL, DT, dd
• Tables: Table, thead, tbody, TR, Th, TD
• Forms and Input: Form, input, select, textarea
• Others: Div, span, A, IMG, <! ---->
• HTML5: Header, footer, article, Section

2. XHTML

XHTML became W3C standard in. W3C defines XHTML as the latest html version. XHTML will gradually replace HTML. XHTML is formed by combining the strengths of HTML and XML. The XHTML syntax rules are as follows:

• Attribute name and Tag name must be in lower case
• The attribute value must be enclosed in quotation marks.
• Attribute cannot be abbreviated
• Replace the name attribute with the ID attribute
• XHTML elements must be correctly nested
• The XHTML element must be disabled.

3. Tag Semantics

A document is marked to express semantics, rather than for style. A well-structured document can convey as many semantics as possible to the browser, whether it is a browser on a handheld computer or a fashionable desktop graphics browser. Well-structured documents can convey visual semantics to users, even in old browsers or modern browsers where CSS is disabled by users. At the same time, well-structured HTML code also helps search engines index your website.

• Do not use table layout. Table is used for table display.
• Do not abuse Div labels everywhere. Div is used for partitioning.
• Do not use style labels, such as font, center, big, small, B, I. styles can be controlled by CSS, and B and I can be replaced by strong and em.
• Do not use line feed labels <br/> or spaces to control the style. Use CSS.
• Try not to use inline CSS

CSS.

• Cascade and inheritance
• Priority
• Box Model
• Positioning
• Floating

2. CSS advanced

• CSS Sprite
• Browser compatibility
• IE haslayout and block format content
• CSS frameworks
• Css3
• CSS Performance Optimization
• Less and sass

CSS Sprite

CSS Sprite is mainly used for front-end performance optimization. The principle is to combine multiple background images into one image to reduce HTTP requests and speed up loading.

Browser compatibility

In most cases, we need to consider the compatibility of browsers. There are many browser versions currently in use, including IE6, IE7, IE8, ie9, ie10, chrome, Firefox, and safari.

IE haslayout and block format content

IE haslayout is a private concept of Internet Explorer for Windows, it determines how an element displays and limits its content, how it interacts and establishes connections with other elements, how it responds to and transmits application events, and user events. This rendering feature can be irretrievably triggered by certain CSS attributes. Some HTML elements have "layout" by default ". Currently, only IE6 and IE7 have this probability. BFC is a concept in W3C CSS 2.1 norms. It determines how an element locates its content and the relationship and interaction with other elements. This is actually related to browser compatibility, because most of the compatibility problems are caused by it. Reference: css bfc and IE haslayout Introduction

Css framework

The css framework is a collection of CSS files, including basic element resetting, page layout, grid layout, form styles, general rules, and other code blocks. It is used to simplify front-end web development, improve work efficiency. Currently, common frameworks include:

• 960 Grid System
• Blueprint CSS
• Bluetrip
• Minimum page

A well-known and special framework is Twitter's Bootstrap. Bootstrap is a front-end toolkit for rapid development of Web applications. It is a collection of CSS and HTML. It uses the latest browser technology to provide your web development with a stylish layout, forms, buttons, tables, and grid systems. It is developed based on less. IE6 is not supported, and the effect in IE7 and IE8 is not very good.

Css3

Although css3 has not yet become a standard, modern browsers such as ie9 +, chrome, and Firefox support css3. CSS provides a lot of functions that can be done by using JavaScript and cropping. Currently, the main functions are:

• Rounded corner
• Multi-Background
• @ Font-face
• Animation and Gradient
• Gradient
• Box shadow
• Rgba-add transparent color
• Text shadow

CSS Performance Optimization

CSS code is the most direct "tool" for controlling the display style and Effect of pages. However, they are usually ignored by web development engineers during performance optimization, in fact, nonstandard CSS will have a serious impact on page rendering efficiency, especially for complicated web 2.0 pages, which is even more indelible. Therefore, writing standard and high-performance CSS code will greatly improve the efficiency of applications. Discussion on CSS Performance Optimization

Less and sass

Both less and sass are CSS preprocessors, which are used to add some programming features for CSS without considering the compatibility of browsers, for example, you can use some basic skills in programming languages such as variables, simple program logic, and functions in CSS to make your CSS more concise and adaptable, code is more intuitive and many other benefits.

Sass is developed based on Ruby. Less can be run either on the client or on the server with node. js or rhino.

Javascript1. basic JavaScript knowledge

• Data Type
• Variable
• Expressions and operators
• Control statement
• Function
• Exception
• Oo
• Event
• BOM
• Closure

2. Javascript advanced

• Dom
• JSON
• Ajax
• Javascript frameworks
• HTML5
• Front-end Template
• Front-end MVC
• Modular Development
• Javascript unit test
• Javascript Design Mode
• Nodejs
• Es5

Dom

Dom is the Document Object Model. html Dom defines standard methods for accessing and operating HTML documents. Almost all modern browsers support Dom.

JSON

JSON (JavaScript Object Notation) is a lightweight data exchange format that is easy to read and write, and easy to parse and generate by machines. It is actually the standard format of data exchange. Almost all languages Support JSON, which is much better than XML.

Ajax

Ajax is "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML). Ajax is not a acronym, but a term created by Jesse James gaiiett and developed by Google. Technologies used to create better, faster, and more interactive web applications.

Javascript frameworks

Javascript frameworks greatly simplifies the workload of JavaScript programming. It provides the following main functions: Dom operations, cross-browser compatibility, and program architecture. Of course, jquery itself is not a framework, but a library (LIB ). Currently, the mainstream frameworks or libraries include the following:

• Jquery
• Yui
• Dojo
• Mootoolos
• Extjs
• Prototype

The above are some heavyweight frameworks or libraries, which are strongly recommended for small libraries, such as underscore.

HTML5

HTML5 is similar to css3, that is, although it has not become a standard, it is supported by mainstream browsers. HTML5 is not an hmtl. Although some new labels are provided, its main purpose is JavaScript. HTML5 provides the following functions:

• Local Audio/Video Playback
• Canvas/SVG
• Geographic Information
• Hardware acceleration
• Run locally
• Local Storage
• Upload from desktop drag-and-drop files to browsers
• Semantic tag, Form

Front-end Template

The front-end template is mainly used to solve the complicated data splicing problem. It can convert the template language into an HTML structure, which can greatly simplify the workload and greatly improve the maintainability of the Code. Currently, mainstream front-end Templates include:

• Mustcache
• Jsrender

Front-end MVC

Web applications are becoming more and more powerful, and JavaScript code is also growing. The architecture of a large number of JS Code to be organized becomes an urgent problem, so someone has transplanted the traditional MVC Architecture to the front-end to solve these problems. Currently, mainstream front-end MVC frameworks mainly include the following:

• Backbone. js
• Spine
• Knockoutjs
• Yui
• Agility. js
• Ember. js
• Batman. js
• Angularjs (Google)
• Dojo

Todomvc uses all the above MVC frameworks to write the same sample code "todo list", which is a good place to learn and compare the MVC framework.

Modular Development

In fact, JavaScript modularization is a hot topic nowadays. Its main feature is "modular development, loading on demand". Here, the commonjs organization defines amd specifications used to standardize the module definitions on the browser side. Requirejs and seajs are two excellent amd frameworks. See: http://www.weakweb.com/articles/341.html

Javascript unit test

However, with the popularization of unit testing, especially the promotion of agile development, many excellent JavaScript unit testing frameworks have emerged. For details, see the list. All these frameworks can basically perform good tests on JavaScript code. Of course, testing code in the UI part is equally troublesome, however, we can test some UI code by carefully constructing our test code. The mainstream testing frameworks are as follows:

• Qunit
• Jasmine
• Jstestdriver

Currently, all jquery code is tested through qunit and the test code is put on GitHub. If you are interested, refer to it. For details, see Introduction to the Javascript unit test framework.

Javascript Design Mode

Many design patterns can be applied to Javascript. For example, the Observer Pattern of event processing is often used. Therefore, the design pattern is a required technology to increase the encoding level.

Nodejs

Nodejs is now very popular, and its biggest tribute is to port JavaScript to the server, so that the front-end and back-end can use the same technology to facilitate unified development. In addition, nodejs is non-blocking and has very powerful performance in specific fields. In addition, this is a good opportunity for front-end developers to enter the background development, so that the front and back ends can be integrated for development, but there is no need to learn other background development languages.

Es5

Es5 is ecmascript 5, the latest JavaScript specification. It has made many improvements to the previous JavaScript and added many new features, such as JSON, in addition, es5 is supported by mainstream modern browsers, so it is very necessary to learn about it.

Others

Below are some technologies that are not directly related to HTML, CSS, and JavaScript, but are equally important for front-end development.

• Responsive Design
• Http1.1
• Web mobile development
• Front-end security
• Cross-origin Processing
• Debugging tools
• Seo
• A/B Test
• Availability/accessibility
• Frontend process/deployment
• Regular Expression
• Editor
• Browser plug-in development
• Browser principles

Responsive Design

With the popularity of various smart devices, responsive design is now very popular. In the past, as long as the web page is oriented to a PC browser, the page can be directly fixed in width, for example, 960px, but now the access volume through the mobile phone has exceeded PC, and the device size is diverse, there will be more in the future. In this context, webpage support for access from all devices is a basic requirement, and responsive design can solve these problems well.

Http1.1

HTTP is very important for front-end development, such as the simplest get, POST method, request/response header, and status code.

Web mobile development

Nowadays, mobile development is very popular, and the development method is generally native or web. As a front-end developer, it is natural to learn web mobile development. Phonegap is required. Front-end frameworks such as jquerymobile, sencha touch, and jqtouch are all good choices.

Front-end security

With the development of front-end technology, security issues have quietly come to every user from the server, stealing user data, creating malicious worm code that can be self-copied, and spreading viruses among users, disable the server. what's more, users may become attackers without being aware of them, which is definitely not shocking. Rich clients are increasingly widely used, and front-end security problems are also increasing. Common attack methods include:

• XSS, Cross-Site Scripting). A malicious attacker inserts malicious HTML code into a web page. When a user browses this page, the embedded malicious HTML code is executed to achieve the Special Purpose of malicious users.
• Csrf (Cross Site Request Forgery), cross-site forgery request. As the name suggests, the attacker needs to achieve some goals by forging connection requests without the user's knowledge.
• Cookie hijackingBy obtaining page permissions, you can write a simple malicious site request in the page, after obtaining the cookie with the user's cookie, the user can directly log on to the website as a stolen user.

Cross-origin Processing

The same-origin policy specifies that scripts in different domains are isolated. scripts in one domain cannot access and operate most of the attributes and methods in another domain. The so-called cross-origin processing is to call each other without Inter-Domain requests. Currently, there are many methods to process it.

Debugging tools

There are many front-end debugging tools, such as firebug, WebKit core Web Inspector, and IE developer. HTTP-related Fiddler, httpwatch, and jsbeatutifier for formatting code. It helps you read JavaScript code that has been compressed and processed. Ietester can simulate all IE versions and is a good tool for debugging ie compatibility.

Seo

Front-end developers often need to know about search engine optimization.

A/B Test

The core of a/B testing is to determine which version of the two elements or versions (A and B) are better. You need to experiment with the two versions at the same time. Finally, select the best version.

Availability/accessibility

Availability refers to whether the product is easy to use, whether the user can complete the task, how efficient the product is, and whether the user's subjective feelings are good during the process. The quality of the product is determined from the user's perspective. Good availability means high product quality and is the core competitiveness of enterprises.

Accessibility: for online users who have impaired eyesight, use the Keyboard Command on the screen reader to read the content of the webpage to them. Web files written in semantic HTML (HTML with separated structure and representation) can make it easier for such users to navigate, important information in web files may be found by these users.

You can gradually strengthen the functions of your website and test the support. Develop websites using the principles of "progressive enhancement" and "stable degradation.

Regular Expression

It is estimated that most programming languages will use it. It can greatly simplify your work when processing strings. Required.

Editor

Everyone has their own favorite editor. From the front end, eclipse + Aptana, notepad ++, and Vim are good choices. I personally prefer notepad ++, Which is concise and fast.

Frontend process/deployment

When front-end projects are complex, we should consider introducing technologies such as automatic building and automatic deployment. Jslint can be used to check the Javascript syntax, CSS lint or CSS validator can be used to check the CSS syntax, JavaScript code can be compressed with jsmin or Yui compressor, and jsdoc/yuidoc can be used for automatic document generation, use Jasmine/jstestdriver for automated unit testing. You can use ANT/Maven/make for Automatic Build and deployment. However, with the popularity of nodejs, grunt, Bower, and Yeoman are almost the most popular automated project building tools at the front end. For details, see Web Front-end development process automation.

Browser plug-in development

Browser is our work platform. It is interesting to develop plug-ins on it, and it is also useful in many cases.

Browser principles

The majority of front-end work is running on the browser. Therefore, understanding the browser principles helps you to better understand the principles and working processes of various technologies.

Communication skills

Excellent front-end engineers must 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 requirements of at least four types of customers.

• 1. product managers-a group of people responsible for planning applications. They can imagine how to use applications to meet user needs and how to make money (hopefully) through their design model ). In general, these people are pursuing a wealth of features.
• 2. UI designers-these people are responsible for visual design and interaction simulation of applications. They care about what users are sensitive to, what interactions they have, and how they can be used as a whole. They are keen on FLUENT and beautiful user interfaces that are not easy to implement.
• 3. Project Manager-these people are responsible for running and maintaining the application. The main focus of project management is nothing more than the normal running time (uptime)-the time, performance, and deadline when the application is always available. The goal of a project manager is to keep things as simple as possible and not introduce new problems when upgrading and updating.
• 4. End Users-of course, they are the main consumers of applications. Although we don't often deal with end users, their feedback is crucial; applications that no one wants to use are worthless. What end users require most is personal functions and the functions of competitive products.

So who should front-end engineers be most concerned about? The answer is all four groups of people. Good front-end engineers must know how to balance the needs and expectations of these four groups of people, and then come up with the best solution. As front-end engineers are at the intersection of the four groups of people, the importance of their communication capabilities is self-evident. If a really cool new feature affects front-end performance and must be simplified, how can you explain it to the product manager? For another example, if a design is not changed back to the original solution, it may have a negative impact on the application. How can you convince the UI Designer? As a front-end engineer, you must understand where each type of thinking comes from, and come up with solutions that all parties can accept. In a sense, a good front-end engineer is like an ambassador who needs to handle the daily work with the attitude of a diplomat at all times.

How to Improve front-end technology

• GitHub is an excellent code hosting website. We can create our personal projects and learn from them. We can focus on other excellent projects. Jsfiddle is a practice field for Web developers and a tool that can be used in many aspects. We can use it to edit HTML, CSS, and JavaScript fragments online. The code you edit can be shared with others or embedded into your blog.
• Read excellent open source code
• Attend front-end party
• Follow the Technology Development Trend and learn about the latest industry technologies. You can subscribe to well-known blogs and read the technology news
• Write a blog or take notes to accumulate knowledge. Blogs can buy their own space or various well-known blog websites. For example, Evernote and youdao note.

Divided by Stages

How to divide the benevolent and wise, and make adjustments based on the project situation? The following is my division based on my own experience and I will give you a reference.

Stage 1

Get started with the basics and be able to participate in the project at the same time.

• Hmtl & XHTML
• Basic CSS knowledge
• Basic JavaScript knowledge
• Dom
• JSON
• Ajax
• Javascript frameworks
• Editor

Stage 2

Master the core front-end technologies and work independently.

• HTML5 tags, TMl tags semantic
• CSS Sprite
• Browser compatibility
• IE haslayout and block format content
• Css3
• Proficient in Javascript frameworks
• HTML5
• Front-end Template
• Front-end MVC
• Modular Development
• Http1.1
• Debugging tools
• Regular Expression
• Responsive Design

Stage 3

Grasp the entire front-end project and be the architect of the entire front-end project.

• CSS Performance Optimization
• Less and sass
• Javascript unit test
• Javascript Design Mode
• Nodejs
• Es5
• Web mobile development
• Browser plug-in development
• Front-end security
• Cross-origin Processing
• Seo
• A/B Test
• Availability/accessibility
• Frontend process/deployment
• Browser principles

Stage 4

A generation of masters.

• Constantly learning new technologies
• Interaction Design and management capabilities

Where is the future of front-end engineers?

The first way is to take the technology flow route, that is, to thoroughly study various front-end technologies, such as browser principles, JavaScript research, W3C standards, and so on. The front-end technology is developing rapidly, and various new technologies are emerging one after another. This road is very tiring.

The second step is to move towards interaction design. After the front-end engineers reach a certain level, the interaction design capability will be greatly improved, and the ability to grasp the entire information architecture will be stronger. It can make up for the lack of visual designers in the exchange design. This path does not conflict with the first one, or even the same one.

The third step is to move back, that is, to learn background development technologies, such as Java/PHP. In fact, most traditional background developers are in this status, that is, both the frontend and backend developers are in this status. I personally think this is actually a long way back. After all, the front end is independent from the original background development.

The last line is to manage, such as a project manager, or simply change the line, such as a civil servant.

If you need to reprint it, please indicate from: borishuai front-end training> How to Become a front-end developer

[Reprinted] Front-end knowledge system and training strategy