2015-2016 front-end knowledge system

Design and implementation of UI framework such as frame and component bootstrap

• Scaling layouts: Grid grid Layout

• Basic UI styles: Elements reset, buttons, pictures, menus, forms

• Component UI Styles: button groups, font icons, drop-down menus, input box groups, navigation groups, breadcrumbs, pagination, labels, carousel, pop-up boxes, lists, multimedia, warnings

• Responsive layout: Layout, structure, style, media, JavaScript responsive

• Third-party plugins: plug-in management

JQuery, Zepto usage principles and plugin development

• Modular package support for AMD, CMD, global variables

• $.fn.method = function () {}

MVC/MVVM frame principle design, Vue/angular/avalon, etc.

• Directive Design: HTML, text, class, HTML, attr, repeat, ref, extensible

• Filter design: bool, uppercase, lowercase, expandable

• Expression Design: If-else and other implementations

• ViewModel structure Design: For example data, elements, methods of mount and scope

• Data notconsistent detection: function triggering, dirty data detection, object hijacking

Polymer/angular2 thought and design thinking

• Import Technology

• How template and script are introduced

• CSS style namespace Isolation

• Simple re-use of third-party libraries

Reactjs principle and use

• Virtual DOM One-way data binding

• JS Execution Syntax mode

• UI is controlled by state

Commonjs/amd/cmd

• Module Introduction

• Module definition

• Module identification

• UMD address different specification compatibility issues, such as the Webpack package

• Module lazy Execution (CMD) with with pre-execute (AMD)

The principle and implementation of LOADJS modular loading

• Create a script tag that requires ID mapping to a resource URL

• OnLoad load Module queue judgment

• Trigger when full load is complete

• Load Failure problem optimization

• Requirejs, Modjs, Seajs

Principle and realization of polyfill and shim

• Polyfill provides features that developers want to provide support for native browsers

• Shim introduces new APIs into the old environment, and is implemented only by means already available in the old environment

Virtual DOM, Incremental Dom

• 1. Using the JS object tree to represent the DOM tree structure, build the DOM tree from the object tree

• 2. When the state changes, reconstruct the object, compare with the old object, record two object tree differences

• 3. Applying object Tree differences to the DOM

• Summary: JS object simulation Dom (Elem.js), Virtual Dom diff algorithm (Diff.js), differential render dom (patch.js)

• Incremental DOM scans the old object tree when the state changes to apply the difference directly to the DOM

Shadow Dom

• Isolating an external environment for encapsulating components: structure, style, behavior

• Implementation form: New tag, class attribute + build compilation

WebWork and service Worker

• WebWork and main thread mechanism, on/post

• Serviceworker can request proxy as browser

• Application Scenarios

ES6 ES5, Babel and ES6 development norm System

• ES6 Coding Specification Full

• ES6 compatibility under Babel

• ES6 under node compatibility and performance

• ES6 new features: See Coding specifications

• Aurelia ES6 front-end frame

Isomorphic JavaScript

• Isomorphism principle

• Homogeneous scheme Rendr

• Nodejs: Server

• HAPI: Application Services

• Backbone.js: Background MVC

• Requirejs: module Loading

• Jquery:dom processing

• Reactjs isomorphism: React + Flux + Koa

Bidirectional data binding

• Function trigger: Vuejs

• Dirty data detection: angular

• Object Hijacking:avalon

Browserify Operating principle

• 1. Start analyzing require function calls from the Ingress module

• 2. Generate an AST based on dependency

• 3. Find the module name of each module according to AST

• 4. Get dependencies on each module and generate a dependent dictionary

• 5. Package each module (incoming dependent dictionaries and export and require functions), generate JS for execution

Performance timing

• Performance Timing API

• Performance Timing Process

• Performance Timing Performance Calculation

• Performancetrace Library

Component UI and JS component normalization

• Component Coding Specification

• Component Catalog Specification: Component catalog and common directory

• Component Building Specification: Building environment support

• Modular Management of components: Spm,bowserify

• Component reusability Management

• Third-party component access costs

The principle and use of immutable javascriptgenerator and promise the establishment of ecological GRUNT/GULP development environment Task writing

• File processing plugin: HTML, scss, JS, image, font, other

• Optimization plugin: Sprite, image compression, Iconfont build

• Publish Replacement plug-ins

• Packaging, compression package plug-in: Component Auto-analysis

• White List Configuration

• Custom plug-in authoring

NPM, JSPM, Bower package management tools R.js, Browserify, Webpack, Webpack 2, Rollup packaging tools use

• Rationale: Depending on the dependent configuration file, the file is packaged

• Webpack supports more specification packaging, AMD,COMMONJS

• Webpack+babel/reactjs+reflux

FIS3 build and plug-in development, build environment, FIS3 build offline Package Web component:rosetta-org, X-view, Q, Riot, novabrunch build tools three, development techniques and debugging Fiddler plus Willow base combination debugging

• Common Configuration and analysis

• Combined with browser debugging

Werien, VORLONJS remote debugging, Chrome INSPECTMOCKJS,F.M.S (Front mock Server) simulated debugging using automatic debugging with CGI macha/phantomjs/casperjs/ Karma Test Automation Tasks Use automated UI testing, Dolphin Node-supervior, node-inspector, Karma Development Release system flow sublime efficient plug-ins

• Emmet tools use, Sublimelinter, Babel Snippets, Sublimelint, Sassbeautify, Emmet Quick Edit, Jsxlint, Sidebarenhancements, SNIPPETSM Aker, Sublimecodeintel, CSS snippets, ColorPicker, Html/css/js pretty, Spinnetmacker, Docblockr, Multieditutils, JavaScript & Node Spinnet, JavaScript & NodeJS Snippets, JSLint, Csslint

Code automation check FECs, HTML, CSS and refactoring jpeg, WEBP, apng, BPG pictures

• Coding principle

• Characteristics and advantages and disadvantages

• Applicable scenarios

Iconfont Use and implementation principle

• Automated Packaging Build Method

• Iconfont compatibility notation

• Fonthello, Fontawesome, Icomoon.io, iconfont.cn on-line tools

Page-Responsive Design

• Layout-Responsive

• HTML-structured response

• CSS-style responsive

• Image Media Response type

• JavaScript-Responsive

• Media Query and platform judgment

CSS Reset

• Reset

• Nomalize

• Neat

SASS/COMPASS/LESS/POSTCSS Common syntax and use

• Common syntax Features

• Modular UI Design Management

• Build Tool Implementation Scenarios

• Sprite Chart Automatic synthesis

• Iconfont automatic access and so on

Media Query and common page size understanding

• Introduction of media types and introduction of media features

• Device-width adaptation

• Retina screen Adaptation

Em,rem Principle and realization

• REM calculation: WIDTH*RETINA/10, equivalent to a screen width of 10rem

• The font still uses PX in rem cases

Code4ui, Code4app, first page, Maka, etc.

• Front-end DOM operations even when refreshing front-end pages

• Build component config configuration to DB based on DOM operations

• Package using R.js or Webpack according to config configuration

• Publish packaged output files

CSS3 Animation

• Transform

• Animation

• Transiction

• 3D Acceleration and animation acceleration

• Animation Library

• Quick check table for easing function: 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 and front-end SEO

• TDK optimization

• Page Content Optimization

• The only H1 title

• IMG Setting alt Property

• Nofollow

• URL optimization

• Unified Link

• 301 Jump

• Canonical

• Robot optimization

• Robots.txt

• Meta robots

• Sitemap

• SEO Tools

• Various webmaster tools, etc.

Browser cache type, resources,websql,indexdb, Localstorage,cookie,app cache,cache Storage

• Store.js, Cookie.js

UI Framework

• Bootstrap, Jqwidgets, semantic UI, amaze UI

• Hand Q Ui:frozenui, Weui, blend UI

• ExtJS, Echart Chart UI

V. Native/hybrid/Desktop Development Ionic Mobile development solution

• Run the schema

• Hybrid Hybrid development

• Cordova Interaction

• Offline Package Updates

• Performance bottlenecks

Nativescript Mobile development solution react native mobile development solution

• Run Schema: JS engine

• Performance flaws and memory leaks

• Update mechanism

• Usage Scenarios

Android/ios native Development and framework

• Java

• OC, Swift

• Web interacts with native

• Screen rotation

• Shake a Shake

• Video, take photos, select Local images

• Call, send a message

• Battery charge

• Location

• Date selection

• Turn on hardware acceleration

Desktop application Development

• Nodewebkit

• Atom-shell (later renamed to Electron)

• NetEase Hex

• Pomelo (game server framework)

• React Desktop

• Appjs:appjs.com

Vi. front-end/h5 optimization (another diagram given) YSlow, Pagespeed Mobile Web performance optimization

• Mobile browser "Save Traffic" principle

• Incremental update principles and considerations

• Apps for local storage

• Load optimization

• Picture optimization

• Single page and routing implementation

• Industry famous site Case analysis

Seven, full stack/full-end development Express/node Club + MongoDB, THINKJS and other framework node. JS Direct-out real-time web development, Meteor/express.iomean (mongodb/express/angular/ Nodejs) HTTP and HTTP2 protocol, Bigpipe, pipeline offline cache, cookies, localstorage, INDEXDBCDN and DNS

• Dynamic Domain acceleration

• CDN Principle and CDN Combo

Viii. front-end framework for research experiments webassembly, WEBTRC, typescriptmaterial design specifications

• Interactive action-Effect library

amp-html specification

• Use restricted HTML and caching techniques to improve the performance of static content in mobile networks

• Add custom elements instead of disabled elements: Amp-audio, amp-img, Amp-video, etc.

IX. data analysis and monitoring Badjs data escalation

• Two methods of capturing errors: OnError, Try-catch. Sample escalation, first onerror statistical syntax error, if it is script error, and then use TRYJS.

• Background statistics method, different service access system, sampling statistics

• OnError: can catch syntax error and run-time error, can get error information, stack, error file, line number, column number, the current page execution of JS script error will be captured; cross-domain resources require special head support.

• Try-catch: Unable to catch syntax error, only catch run-time error, can get error message, stack, error file, line number, column number, need to use tool to add function block and file block to Try,catch, can enter more static information at this stage.

Click on thermal Map clickheat, HEATMAPJS load failure optimization scheme

• Failure re-send mechanism

• Load Source name server files

• HTTPS anti-hijacking

Baidu Alog Data Report Ten, other soft skills axure prototype design xmind brain graph management Efficiency management can I use, GitHub knowledge management/summary share product thinking and skills xi. front-end technology website Technology community

• Tech, W3 and help

• Div.io, Nodeparty

• Rare Earth nuggets, front-end morning reading class

• Alloyteam, HTML5 base

• W3 Help

Industry Conferences

• Segmentfault Conference

• Deep js, Hang JS

• GMIC (Global Mobile Internet Conference)

• D2, Webrebuild

• Infoq content, Qcon, velocity

2015-2016 front-end Knowledge system (RPM)