Resources about front-end development

The main purpose of this article is to easily get these resources online

Posted by Vinter on June 2, 2019

成熟不需要刻意为之,当你找到自己的方向并为之奋斗,或者说你在为自己喜欢的东西而填充自我的时候,你已经不再是从前的自己,自信也会随之而来。 生活中有太多的诱惑与城市的快节奏步伐,不迷乱,克制自己,有自己的生活方式。

昨天是六一,虽然已经过了过节的年纪(哈哈),还是想说点什么。我是比较喜欢六月的,六月是我出生的月份,正所谓666,可能在说我出生的月份恰好(容我自恋一下),其实真正喜欢六月,因为六月是一年中旬,正式进入了夏季,但是还未到酷夏时候,本人还是喜欢夏天,喜欢夏天的阳光明媚,蓝蓝的天空,一览无余。我这种喜欢户外运动的家伙,不用再为了天气的不好,而只能限制在家中。swimming,palying basketball,running 或者mountain climbing等等,想想还有点小激动。今天跑步突然就跑到了小学学校,看了看自己曾经待过地方,坐过的座椅,还有学校的水果树,就当做也给自己过个六一,最让我感触的是校门外的那条道路和道路两旁的风景,真的是沧海桑田,三十年河东,三十年河西,以前破旧的小道,已经扩大了几倍,以前很少有人到这边来的道路,已经是车水马龙, 交通灯都设置了好几个,道路两旁已经是高楼林立,不过唯独刚出校门的那段小道还有点以前的模样,还能回想起以前和同学在路上嘻嘻哈哈上下学的情景,物是人非,可能说的就是这种吧。童年已逝,青年正盛,朝着自己的人生努力奋斗吧!
回忆归回忆,该干点正事,这篇文章主要就是汇总前后端常用的一些资源,方便更快的在网上找到,方便自己的同时,方便各位前后端同仁。

HTML && CSS && Javascript

HTML,CSS和JS是前端基础,所以一般学习网站都会同时包含这三者。
W3school
菜鸟教程
MDN web docs

Typescript

Typescript是JS的超集,Angular2及之后版本已经默认使用它,其他前端框架如Vue和React都已经支持,官方消息好像不久的Vue3.x将会完全支持typescript,所以学习好它也是前端需要的。
Typescript

front-end framework

前端三大主流框架。

Vue(当前2.x)

Vue官网 v2.x
脚手架Vue CLI v3.x
Vue Router v3.x
Vuex v3.x
Nuxt v2.x服务端渲染框架
官方优选资源
awesome-vue 生态资源
UI框架
element-ui v2.x
iview v3.x
Vuetify v1.x
移动端UI框架
mint-ui v2.x
cube-ui v1.x
SEO
vue-meta-info

React

React官网 v16.x
脚手架Create React App v3.x
Next v8.x服务端渲染框架
Redux v4.x
React Redux v7.x
React Router v5.x
Redux Thunk v2.x
redux-saga v1.x
awesome-react 生态资源
UI框架
Ant Design v3.x
material-ui v4.x
React-Bootstrap v1.x
移动端UI框架
Ant Design Mobile v2.x

Angular

Angular v1.x官网
Angular v8.x官网
脚手架Angular Cli v8.x
Ngrx v7.x,整合了RxJs和Redux的功能,在Angular中进行异步数据管理和状态管理。
Angular的路由可以通过angular-cli创建

ng new my-routing --routing

再通过标签进行路由跳转,参考文献Angular Cli生成路由
awesome-angular 生态资源
UI框架
PrimeNG v7.x
Angular Material v8.x
NG-ZORRO v7.x,这里是Ant Design的Angular实现,目前支持Angular ^7.0.0版本,Ant Design是很强大的,即有react的UI库还有angular的UI库。
IONIC FRAMEWORK v4.x

HTTP

两个强大的第三方库
axios v0.x(支持 React Native,Node,浏览器)。
Axios 是一个基于 promise 的 HTTP 请求库,可以用在浏览器和 Node.js 中。浏览器中使用 XMLHttpRequest,Node.js 中使用 http/https 模块。且axios是Vue v2.x官方推荐的请求库,且功能强大,具体请参照官网介绍。
fly.js v0.x(Node.js 、微信小程序 、Weex 、React Native 、Quick App 和浏览器)。
Fly.js的npm包名为flyio,Fly.js是一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库,定位是成为 Javascript http请求的终极解决方案。也就是说,在任何能够执行 Javascript 的环境,只要具有访问网络的能力,Fly都能运行在其上,提供统一的API。

浏览器
Fetch,浏览器通过XMLHttpRequest,远古的IE6借助ActiveXObject对象来实现Http请求,W3C标准新增Fetch API,基于promise实现Http请求,相对XMLHttpRequest对象调用更方便,但旧浏览器不支持Promise,需要对Promise进行pollyfill。最大的缺点就是没有请求和响应拦截等,需要自己再次封装。

Node.js
Node.js中通过引入http/https/http2模块实现 http 请求。

const http = require('http');

React Native
Fetch,也默认支持Fetch API。

Weex
Weex是阿里2016开源跨平台移动应用开发工具,提供了stream模块来实现网络请求。

微信小程序

wx.request({
  url: 'test.php',
  data: {},
  header: {
    'content-type': 'application/json' // 默认值
  },
  success(res) {
    console.log(res.data)
  }
})

支付宝小程序

my.httpRequest({
  url: 'http://xxxx',
  method: 'POST',
  data: {},
  dataType: 'json',
  success: function(res) {
    my.alert({content: 'success'});
  },
  fail: function(res) {
    my.alert({content: 'fail'});
  },
  complete: function(res) {
    my.hideLoading();
    my.alert({content: 'complete'});
  }
})

jQuery
$.ajax(支持浏览器),$.ajax为jQuery对XMLHttpRequest对象进行兼容封装。

library

JS

Lodash v4.x官网,是一个js工具库,高效,实用且体积小,主要节省js编程时间(推荐)。
Underscore,也是js工具库,体积相对loash要大点。
Anime.js v3.x,一个强大的、轻量级的用来制作动画的javascript库。
particles.js制作粒子,微粒。
three.js v0.x该库目标是创建容易使用,轻量级基于WebGL(3D绘图协议)3D协议的3D渲染库。 fullPage.js v3.x快速实现全屏滚动特性。 favico.js动态 favicon Sortable v1.x 拖拽插件。

CSS

Animate.css v3.xCSS3动画库,也是目前最通用的动画库。
Hover.css

jQuery

官网 v3.x
Animsition v4.x CSS实现动画过渡的 jQuery 插件。

Boostrap

官网 v4.x

chart

Echart v2.x百度推出的一款开源的,商业级数据图表,图表类型丰富。
Highcharts是国外的一款功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库。针对个人用户及非商业用途免费,商业用途需要购买授权。
Chart.js v2.x是个简单的,面向对象的客户端图形库,支持6种图表类型,基于 HTML5的图表库。小巧而轻便的的图表插件,缺点是支持的图形类型较少,数据交互功能也非常有限。
G2 v3.x是由阿里团队开发,纯 javascript 编写、强大的语义化图表生成工具,它提供了一整套图形语法,可以让用户通过简单的语法搭建出无数种图表,并且集成了大量的统计工具,支持多种坐标系绘制,可以让用户自由得定制图表,是为大数据时代而准备的强大的可视化工具。

Icon

Font awesome v4.x
阿里巴巴矢量图标库
feather v4.x
react-native-vector-icons 这是基于react-native的图标库,里面分类齐全,来源各大图标库,例如Ant Design、Font awesome、Feather等,可以根据它的分类去查找适合自己的图标。

Canvas

fabric.js v3.x
d3/d3 数据驱动SVG, Canvas and HTML。

Svg

fabric.js v3.x

Node

官网 v10.x
框架
Express
Express v4.X
Egg
Egg v2.x
Sequelize v5.x
koa
Koa v2.x

github

Github
Git
jekyll v3.x,本blog就是基于jekyll + github page搭建。
Hexo,脚手架hexo-cli,它是和jekyll一样可以快速搭建静态博客页面的库。

Database

Mongodb

MongoDB
Mongoose v5.x

Mysql

Mysql

Electron

Electron v5.x
UI框架
React-Desktop v0.3x

微信小程序

微信小程序官方文档
wepy v1.7小程序框架
awesome-wepy汇总资源

跨平台框架

react-native v0.59基于react跨平台,facebook团队开发。
awesome-react-native

uni-app 基于vue跨平台
awesome-uni-app

Ionic v4.x基于Angular跨平台,是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架。绑定了AngularJS和Sass。这个框架的目的是从web的角度开发手机应用,基于PhoneGap(Cordova)的编译平台,可以实现编译成各个平台的应用程序。

Weex v0.x 阿里团队发开,Vue.js 和 Rax 这两个前端框架被广泛应用于 Weex 页面开发,同时 Weex 也对这两个前端框架提供了最完善的支持。

FlutterFlutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。优点:性能强大,流畅。但学习成本高,会java语言才能才发,只会JS的前端开发者学习成本太大。

参考

前端常用库