Front-end technology collection ~ continuous updates_html/css_WEB-ITnose

Purpose: To gain a broad understanding of front-end tools, select appropriate front-end tools for development in projects, and achieve twice the result with half the effort.

Building Tools

Gulp Based on nodeJs, it relies on different plug-ins to automatically complete code compression, merging, style checking and other operations. Similar ones include grunt, webpack

Build tool plug-ins

Code compression and merging, image compression, MD5 suffix

LESS for CSS Introduce functions, nesting and other operations to facilitate the development and maintenance of CSS. Similar ones include: SASS

Babel ES6/ES2015 to ES5. es6 introduction

CoffeeScript uses another more streamlined syntax to write JS. Similar ones include: TypeScript

artTemplate Template Engine

RequireJs

Achieve asynchronous loading of JS files (prevent JS blocking)

Manage dependencies between modules (strictly ensure js loading order)

Introduction, documentation

MVC, MV*
AngularJs , Backbone is suitable for single-page, complex interactive web projects.

DOM operation library

jQuery Suitable for PC

zeptoJs Suitable for mobile

UI / Component library

jQuery UI, Kissy, Bootstrap, pureCss

icon font

Font Awesome A set of font icons that use css to replace commonly used ones icon/img.

es5-shim.js

enables older browsers to be compatible with es5.

　es5-shim.js, es5 introduction

Hybrid App Development

Based on WebView: APPCAN, phonegap

Based on HTML5 : MUI, Hbuilder

React Native

React

Developed as components

ReactJs Use Virtual DOM (diff algorithm) to alleviate slow DOM operation and special effects card problems.

React Canvas Based on ReactJS and Canvas, further optimize the special effects of mobile web pages.

React Native is used to develop IOS and Android applications. (1) Concept: Have the user experience of Native while retaining the development efficiency of React; (2) learn once, write anywhere; (3) Use the browser rendering engine developed by javascriptCore instead of webview; (4) css- layout, JSX;

Code management

SVN centralized

Git/Github distributed

Comparison of the two