When I first wanted to learn the front end, I didn’t know how to start, where to start learning, and what knowledge and ability a front end engineer should have. After learning the front end for a period of time, I summarized the modules of the front end according to the materials and articles I consulted.

The front-end module

The CSS and HTML

HTML refers to text markup language, not a programming language, which defines the meaning and structure of web content. HTML contains language, elements, supplementary standards, and so on. Elements also contain document element information, forms, tables, and so on.

CSS is used to add color to basic HTML content. Language is divided into: selector, unit. Functions: layout, drawing, interaction and so on.

  • CSS and HTML are very basic part of front-end learning, you can browse, W3School, rookie tutorials and other websites, through reading articles hands-on, can quickly master.

JavaScript

JavaScript and ECMAScript are often used to express the same meaning, but JavaScript has much more meaning than ecMA-262. A complete JavaScript implementation should consist of three parts:

1. Core (ECMAScript)

2. Document Object Model (DOM)

3. Browser Object Model (BOM)

ECMAScript

ECMAScript as defined by ECMA-262 has no dependency on Web browsers. A Web browser is just one possible hosting environment for an ECMAScript implementation. Ecma-262 defines only the foundation of the language from which more sophisticated scripting languages can be built. Back to hosting, it provides not only the basic JavaScript implementation, but also extensions to the language, such as DOM. Other hosting environments include Node and Adobe Flash.

The ECMA-262 standard specifies the following components of the language:

Syntax, 2. Types, 3. Statements, 4. Keywords, 5. Reserved words, 6. Operators, 7. Object.

Document Object Model (DOM)

The Document Object Model is an application programming interface for XML but extended for HTML. DOM maps the entire page to a multi-level node structure. Each component of an HTML or XML page is a node of some type, which in turn contains a different type of data.

Take this page for example:

<html>
    <head>        
        <title>Sample Page</title>
    </head>
    <body>
        <p>Hello World!</p>   
    </body>          
</html>
Copy the code

This can be represented by the following hierarchical node tree:

This tree of documents (often referred to as a document tree) is created through the DOM, and programmers can easily delete, add, and modify any node in it through the API provided by the DOM.

Browser Object Model (BOM)

Developers can use the BOM to control what the browser displays outside of the page. What’s really different about the BOM and what often causes problems is that it’s part of a JavaScript implementation and it doesn’t have a standard like DOM. This problem is addressed in HTML5, which aims to write a lot of BOM functionality into the specification. After HTML5 was released, a lot of confusion about BOM went away. Basically, the BOM deals only with browser Windows and frames, but it is customary to count all JavaScript extensions for browsers as part of the BOM as well. Here are some of these extensions:

  • The ability to pop up a new browser window The ability to move, zoom, and close browser Windows;
  • A Navigator object that provides browser details;
  • A Location object that provides details about the page loaded by the browser;
  • A Screen object that provides details about the resolution of the user’s display;
  • Support for cookies;
  • Custom objects like XMLHttpRequest and IE’s ActiveXObject (the core implementation of AJAX).

The front frame

Right now I think the most used front-end framework isvue,react As well asAngular.

vue

Vue.js is a set of progressive frameworks for building user interfaces. Unlike other heavyweight frameworks, Vue is designed with bottom-up incremental development.

The progressive performance of VUE is as follows:

Declarative rendering — component systems — client routing — Big data state management — Build tools

Key features of VUE

  1. Two-way data binding – Vue automatically updates the view as data changes
  2. lightweight
  3. Componentization – Partitioning components maintainable, reusable, and testable.
  4. State management
  5. The MVVM pattern
M: Model (data layer, i.e. exponential data)
V: View (User interface)
VM: View-Model (middle layer for processing data and interfaces)

react

Before React, there were large, mature front-end frameworks like backbone.js and Angular.js, but Facebook engineers found it difficult to respond to complex business scenarios (e.g. React was one of the frameworks that failed to deliver good page performance.

React features

  1. Unidirectional data flow
  2. Pure JavaScript syntax
  3. Also componentized – partitioned components maintainable, reusable, and testable.

Angular

Key features of Angular

  1. Dependency injection
  2. Two-way data binding
  3. Test-driven development
  4. The MVC pattern
M:Model: data, which is the Angular variable ($scope.xx);
V:View: data rendering, Html+Directive;
C:Controller: operate data, that is, function, add, delete, modify and check data;

Front-end engineering

In the daily development process, how to make the preparation of the project more efficient multi-person cooperation, to ensure that the project can be maintained, improve the quality of development. Front-end engineering is designed to solve most of these problems. Front-end engineering should be considered from four aspects: modularization, componentization, standardization and automation.

modular

Modularization is the splitting of large files into interdependent small files for unified assembly and loading. Modularization is only the splitting of code or resources on the file level.

componentization

Componentization is at the design level. It is the separation of UI. Each structural unit that contains template + style + logic with perfect functions is called component.

The canonical

The quality of the early specification formulation has a great impact on the collective development behind the general specification content:

  • The establishment of directory structure
  • Coding standards
  • Front and rear end interface specifications
  • Document specification
  • Component management
  • Git Branch Management
  • Commit Description specification
  • Regular CodeReview
  • Visual icon specification

automation

  • Automated build
  • Automated deployment
  • Automated testing

Front-end performance optimization

  • Reducing HTTP requests
  • Use HTTP2-multiplexing, fast parsing, header compression, configurable priority, flow-volume control, server push
  • Use server-side rendering
  • Static resources use CDN
  • Place the CSS at the top of the file and the JavaScript file at the bottom
  • Use the font icon iconfont instead of the image icon
  • Use caching, not reloading the same resources
  • The compressed file
  • Image optimization – image lazy loading, image quality reduction, using CSS instead of images, using WebP format images
  • Load code on demand through Webpack, extract third-party library code, and reduce the excess code from ES6 to ES5
  • Reduce redrawing and rearrangement
  • Use event delegates to reduce memory
  • Using webWorkers
  • Use the Transform and opacity properties to change the animation

typeScript

TypeScript is a superset of JavaScript that supports the ECMAscript6 standard. Existing JavaScript code works with typeScript without modification.

Node

Node.js is an event-driven I/O server-side JavaScript environment based on Google’s V8 engine, which executes JavaScript very fast and performs very well. Able to write high performance web server Javascript toolkit, single thread running, asynchronous and other features.

network

  • The HTTP protocol
  • TCP three-way handshake
  • Four times to wave
  • Cross domain

Design patterns

A design pattern is a set of repeated, well-known, catalogued code design lessons. Design patterns are used to reuse code, make it easier for others to understand, and ensure code reliability. Design patterns make coding truly engineering. Design patterns are the cornerstones of software engineering, as are the bricks of a mansion. Design patterns can be roughly divided into: creation pattern, structural pattern, behavior pattern, J2EE design pattern.

Creation pattern

Structural mode

Behavioral pattern

J2EE design pattern

Data structures/algorithms

  • The stack
  • The queue
  • The list
  • string
  • Quick sort
  • Bubble sort
  • Selection sort
  • Insertion sort

Web security

  • XSS
  • CSRF
  • Click on the hijacked
  • URL redirect vulnerability
  • SQL injection
  • OS command injection attack