Comprehensive Overview of Front-End Technologies and Practices

Original source: https://github.com/ouvens/frontend-system-map Author: Ouven

1. Frameworks and Components

Bootstrap and Other UI Framework Design and Implementation

Responsive layout: grid system

Basic UI styles: element reset, buttons, images, menus, forms

Component UI styles: button groups, icon fonts, dropdowns, input groups, navigation, breadcrumbs, pagination, tags, carousel, modal, list, multimedia, alerts

Responsive design: layout, structure, styles, media, JavaScript responsiveness

Third‑party plugins: plugin management

jQuery and Zepto Usage Principles and Plugin Development

Modular encapsulation supporting AMD, CMD, and global variables

$.fn.method = function(){}

MVC/MVVM Framework Design Principles (Vue, Angular, Avalon, etc.)

Directive design: html, text, class, attr, repeat, ref, extensible

Filter design: bool, upperCase, lowerCase, extensible

Expression design: if‑else implementation

ViewModel structure: data, elements, method mounting and scope

Data change detection: function triggers, dirty checking, object hijacking

Polymer and Angular2 Concepts and Design Ideas

Import technology

Template and script inclusion methods

CSS namespace isolation

Simple reuse of third‑party libraries

ReactJS Principles and Usage

Virtual DOM with one‑way data binding

JavaScript execution syntax

UI controlled by state

CommonJS / AMD / CMD

Module import

Module definition

Module identifier

UMD solves compatibility across specifications (e.g., Webpack bundling)

Lazy execution (CMD) vs pre‑execution (AMD)

loadJs Modular Loading Principles and Implementation

Create script tags with ID mapping to resource URLs

Onload checks module queue

Trigger after all modules load

Optimization for load failures

RequireJS, modjs, SeaJS

Polyfill and Shim Principles and Implementation

Polyfill provides features browsers do not yet support natively

Shim introduces new APIs into old environments using existing mechanisms

Virtual DOM and Incremental DOM

Represent DOM tree with a JavaScript object tree and build the real DOM from it

On state change, rebuild the object tree, diff with the previous tree, and record differences

Apply object‑tree differences to the real DOM

Summary: js object simulating DOM (elem.js), virtual DOM diff algorithm ( diff.js), diff rendering ( patch.js)

Incremental DOM applies differences directly during state changes

Shadow DOM

Isolate external environment for component encapsulation: structure, style, behavior

Implementation: new tags, class attributes + compilation

Web Workers and Service Workers

Web Workers and main‑thread mechanism, on/post communication

Service Worker can act as a browser request proxy

Application scenarios

ES6 to ES5, Babel and ES6 Development Standards

Complete ES6 coding standards

ES6 compatibility under Babel

ES6 compatibility and performance under Node

New ES6 features (see coding standards)

Aurelia ES6 front‑end framework

Isomorphic JavaScript

Isomorphism principles

Isomorphic solution Rendr

Node.js as server

Hapi as application service

Backbone.js for backend MVC

RequireJS for module loading

jQuery for DOM handling

ReactJS isomorphism: React + Flux + Koa

Two‑Way Data Binding

Function trigger: Vue.js

Dirty data detection: Angular

Object hijacking: Avalon

Browserify Execution Principles

Start from entry module and analyze require calls

Generate AST based on dependencies

Find module IDs from AST

Build a dependency dictionary

Wrap each module (inject dependency dictionary, export, require) to produce executable JS

Performance Timing

Performance timing API

Performance timing process

Performance calculation

PerformanceTrace library

Component UI and JavaScript Component Standardization

Component coding standards

Component directory standards: component vs shared directories

Component build standards: build environment support

Component modular management: spm, browserify

Component reusability management

Third‑party component integration cost

Immutable JavaScript

Generator and Promise Principles and Usage

2. Build Ecosystem

Grunt / Gulp Development Task Scripts

File processing plugins: HTML, SCSS, JS, images, fonts, others

Optimization plugins: sprite generation, image compression, iconfont building

Publish replacement plugins

Packaging and compression plugins: automatic component analysis

Whitelist configuration

Custom plugin development

npm, jspm, bower Package Management Tools

r.js, Browserify, Webpack, Webpack 2, Rollup Bundlers

Principle: bundle files based on dependency configuration

Webpack supports more specifications (AMD, CommonJS)

Webpack + Babel + ReactJS + Reflux

fis3 Build and Plugin Development, Build Environment, Offline Packages

Web Component: rosetta‑org, x‑view, Q, Riot, Nova

Brunch Build Tool

3. Development Techniques and Debugging

Fiddler + Willow Basic Combination Debugging

Common configurations and analysis

Integration with browser debugging

Werien, VorlonJS Remote Debugging, Chrome Inspect

MockJS, Front Mock Server (F.M.S) Simulation and CGI Automatic Debugging

Macha / PhantomJS / CasperJS / Karma Automated Testing Tasks

Automated UI Testing, Dolphin

node‑supervisor, node‑inspector, Karma

Development Release System Process

Sublime Efficient Plugins

Emmet, SublimeLinter, Babel snippets, SassBeautify, JSXLint, SideBarEnhancements, SnippetsMaker, SublimeCodeIntel, CSS snippets, ColorPicker, HTML/CSS/JS prettify, SpinnetMacker, DocBlockr, MultiEditUtils, JavaScript & Node snippets, JSLint, CSSLint

Code Automation Check – FECS

4. HTML, CSS and Refactoring

JPEG, WebP, APNG, BPG Image Formats

Encoding principles

Features and pros/cons

Applicable scenarios

Iconfont Usage and Implementation Principles

Automatic packaging and build methods

Cross‑browser compatible writing

Online tools: fontello, FontAwesome, IcoMoon, iconfont.cn

Responsive Page Design

Layout responsiveness

HTML structure responsiveness

CSS style responsiveness

Image/media responsiveness

JavaScript responsiveness

Media queries and platform detection

CSS Reset

Reset

Normalize

Neat

Sass / Compass / Less / PostCSS Common Syntax and Usage

Common syntax features

Component‑based UI design management

Build tool implementation solutions

Automatic sprite generation

Automatic iconfont integration, etc.

Media Queries and Common Page Sizes

Media type and feature inclusion

Device‑width adaptation

Retina screen adaptation

em, rem Principles and Implementation

rem calculation: width × retina / 10 (screen width equals 10 rem)

Fonts still use px under rem

code4ui, code4app, Chuyue, Maka, etc.

Front‑end DOM operations can refresh the page

Generate component config from DOM operations and store in DB

Use r.js or Webpack to bundle based on config

Output files after packaging

CSS3 Animations

transform

animation

transition

3D acceleration and animation easing

Animation libraries

Easing function reference: http://www.xuanfengge.com/easeing/easeing/

Ceaser: http://xuanfengge.com/easeing/ceaser/

Cubic‑bezier: http://cubic-bezier.com/

CSS Grid Layout

Susy

Responsive Grid System

Fluid 960 Grid (adaptjs)

Simple Grid

Search Engine Optimization (SEO) for Front‑End

TDK optimization

Page content optimization

Single H1 title

Image alt attributes

nofollow

URL optimization

Canonical links

Robot optimization

robots.txt

meta robots

sitemap

SEO tools and webmaster utilities

Browser Cache Types: resources, WebSQL, IndexedDB, localStorage, cookies, AppCache, Cache Storage

store.js, cookie.js

UI Frameworks

Bootstrap, jqWidgets, Semantic UI, Amaze UI

WeChat UI: frozenui, weui, blend UI

ExtJS, ECharts chart UI

5. Native / Hybrid / Desktop Development

Ionic Mobile Development Solution

Runtime architecture

Hybrid development

Cordova interaction

Offline package updates

Performance bottlenecks

Nativescript Mobile Development Solution

React Native Mobile Development Solution

Runtime architecture: JavaScript engine

Performance issues and memory leaks

Update mechanisms

Use cases

Android / iOS Native Development and Frameworks

Java

Objective‑C, Swift

Web‑native interaction

Screen rotation

Shake gesture

Video recording, photo capture, local image selection

Phone calls, SMS

Battery status

Geolocation

Date picker

Hardware acceleration

Desktop Application Development

node‑webkit

Atom‑shell (now Electron)

NetEase Hex

Pomelo (game server framework)

React Desktop

AppJS: appjs.com

6. Front‑End / H5 Optimization

YSlow, PageSpeed

Mobile Web Performance Optimization

Mobile browser "data‑saving" principles

Incremental update principles and considerations

Local storage applications

Loading optimization

Image optimization

Single‑page application and routing implementation

Case studies of well‑known sites

7. Full‑Stack / Full‑End Development

Express / Node Club + MongoDB, ThinkJS and Other Frameworks

Node.js Direct Rendering

Real‑Time Web Development: Meteor / Express.io

MEAN Stack (MongoDB / Express / Angular / Node.js)

HTTP and HTTP/2 Protocols, BigPipe, Pipeline

Offline Cache: Cookies, localStorage, IndexedDB

CDN and DNS

Dynamic domain acceleration

CDN principles and CDN combo

8. Research Experiments

WebAssembly, WebTRC, TypeScript

Material Design Front‑End Frameworks

Interactive animation libraries

AMP‑HTML Specification

Use restricted HTML and caching to improve static content performance on mobile networks

Replace disabled elements with custom ones: amp‑audio, amp‑img, amp‑video, etc.

9. Data Analysis and Monitoring

BadJS Data Reporting

Error capture methods: onerror and try‑catch; sampling reporting; onerror for syntax errors, try‑catch for runtime errors

Backend statistics methods, different business integration, sampling statistics

onerror captures syntax and runtime errors, provides message, stack, file, line, column; works for all script errors on the page; cross‑origin resources need special headers

try‑catch cannot capture syntax errors, only runtime errors; requires wrapping functions/blocks in try‑catch to add static info

Click Heatmap (clickHeat, heatMap)

JavaScript Load Failure Optimization

Retry mechanism

Load from source domain server files

HTTPS anti‑hijacking

Baidu Alog Data Reporting

10. Other Soft Skills

Axure Prototyping

XMind Mind‑Map Management

Efficiency Management

Can I Use, GitHub

Knowledge Management / Summary Sharing

Product Thinking and Skills

11. Front‑End Technology Websites

Technical Communities

W3C Tech, W3C Plus, W3 Help

div.io, nodeParty

Juejin, Front‑End Early Reading Class

AlloyTeam, HTML5 Base

W3 Help

Industry Conferences

SegmentFault conferences

DeepJS, HangJS

GMIC (Global Mobile Internet Conference)

D2, WebRebuild

InfoQ content, QCon, Velocity

© Content sourced from the web; copyright belongs to the original authors. We indicate authors and sources where possible. If any infringement is found, please notify us for immediate removal.

-END-