Javascript流行框架和各自优秀生态整理

449 阅读12分钟

Vue

WX20190322-144219@2x.png


官网:vuejs.org/ 

GitHub:github.com/vuejs/vue


描述:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。


vue-cli (cli.vuejs.org/)官方标准脚手架工具

vetur (marketplace.visualstudio.com/items?itemN…)vscode开发vue的利器

vue-devtools (github.com/vuejs/vue-d…)浏览器调试必备插件

vuex(github.com/vuejs/vuex)vue标准配套的状态管理工具

vue-router (router.vuejs.org)官方路由管理工具


vue-progressbar (hilongjw.github.io/vue-progres…)进度条

v-tooltip (github.com/Akryum/vue-…)tooltip

vue-awesome (github.com/Justineo/vu… )Font Awesome component for Vue.js

vue-awesome-swiper (github.com/surmon-chin… )轮播

g2-vue (github.com/fireyy/g2-v… )📈图表工具

vue-calendar-picker (github.com/FranckFreib… )日历

vue-scroller (github.com/wangdahoo/v… )scroll滚动

vue-markdown (github.com/miaolz123/v… )markdown编辑

vue-pdf (github.com/FranckFreib… )A pdf viewer based on mozilla's PDF.js

vue-qriously (github.com/theomessin/… )二维码生成

vue2-dragula (github.com/kristianman… ) 拖拽

vue-quill-editor (github.com/surmon-chin… )quill富文本编辑器

vue-cropper (github.com/xyxiao001/v… )图片截取

Frameworks(部分常用框架)


  • vuetify - Material Component Framework for Vue.js 2.

  • muse-ui - Material Component library for Vue.js 2.

  • buefy - Components based on Bulma framework.

  • element-ui - A Vue.js 2.0 UI Toolkit for Web.

  • vue-bulma-components - Easily use bulma class syntax with vue components.

  • iview-ui - A Vue.js 2.0 UI Framework for web.

了解更多请转移(github.com/vuejs/aweso…



React

timg.jpeg

官网:https://reactjs.org/ (中文:https://react.docschina.org/)

GitHub:github.com/facebook/re…


描述:

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。

React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。

React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它


redux (redux.js.org/)状态管理工具

create-react-app (facebook.github.io/create-reac…)官方标准脚手架

react-devtools (github.com/facebook/re…)浏览器调试必备插件

react-router-native  (github.com/ReactTraini…) RN项目用

react-router-dom (link.jianshu.com/?t=https%3A…) web项目用


Material-UI

一款React组件库来实现Google的Material Design风格UI界面框架。也是首个React的UI工具集之一。

查看地址:github.com/callemall/m…

React-Desktop

一款面向MacOS Sierra和Windows10桌面风格的ReactUI组件库。我肯定作为前端开发人员,一定听说过Electron框架。它能帮助你使用HTML5-WEB方式来构建跨平台的桌面端应用程序。而React Desktop里面你可以同时找到关于MacOS和Windows10的所有UI组件。

查看地址:reactdesktop.js.org/

Semantic-UI-React


前端小号个人认为,这款是最优秀的ReactUI框架了。前端开发人员对Semantic-UI应该不会陌生,它有极为丰富切漂亮的UI组件库,并且结构化做得非常好。React版本为官方出版,所有React组件都具有非常简洁的API和简明的属性,并且不依赖与jQuery,操作虚拟DOM提高性能带来更完美的用户体验。

查看地址:github.com/Semantic-Or…

Ant-design


Ant-design是阿里巴巴团队出品的ReactUI组件库。有自己独特的设计风格和理念。非常符合国人的审美需求。并且在支付宝、蚂蚁金服等多个阿里项目中投入使用。组件化质量非常高,开箱即用。支持浏览器、服务端渲染以及Electron环境。包括刚刚推出支付宝小程序也是这一套设计风格。可谓国人开发React应用必修科目。

查看地址:github.com/ant-design/…

Blueprint

Blueprint是一款针对桌面应用程序构建复杂、数据密集的Web界面进行了优化的UI组件库。如果你严重厉害移动端互动,并且寻找移动端优先的UI工具包,这可能不适合您。

使用TypeScript编写,拥有不错的开发文档。包括了30多个React基础组件,如表单控件、按钮、提示框、树形控件等等。

查看地址:github.com/palantir/bl…

React-Bootstrap

谈到组件库就不得不提Twitter公司开源的Bootstrap了,它帮助多少程序猿解决了WEB-UI界面开发的难题。React-Bootstrap是一款基于ReactJS对Bootstrap进行封装的库。

查看地址:github.com/react-boots…

React-Toolbox

你是否听说过CSS Modules?React-Toolbox就是基于这个的。它允许你只需要引入CSS,而不需要使用像Purify-CSS这样的工具。另外React-toolbox还是包括了30多个开箱即用组件的高质量可自定义的库。

查看地址:github.com/react-toolb…

Fabric

Fabric是一款用于构建类似Office和Office 365风格的React组件库。过去几年,微软支持或推出了很多开源项目,像TypeScript,VS Code(基于Electron)等等,Fabric也是其中之一。Fabric是官方用TypeScript编写的Office库之一。有所有你能见到的Office组件,包括开发入门指南、博客、官方色调以及字体等。

查看地址:github.com/OfficeDev/o…

element-react

国内饿了吗团队

Element was initially written in Vue, which has many elegant UI components, but we also love React, so we forked it for the React community.

查看地址:elemefe.github.io/element-rea…


AngularJS

timg (1).jpeg

官网:angularjs.org/ (中文:http://www.angularjs.net.cn/)

GitHub:github.com/angular/ang…


描述:

AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC(Model–view–controller)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。


Angular UI Bootstrap

从名字你就可以知道,Angular UI Bootstrap使用顶级框架——Bootstrap构建。你可以使用此框架来重写现有的JavaScript代码,并创建新的代码。Angular UI Bootstrap能帮助你拿出比原来的JavaScript代码更小的指令。更小的版本,更容易集成到AngularJS生态系统或环境中。


Angular Foundation

Angular Foundation是一个流行的完全兼容AngularJS指令和其他自定义HTML元素的框架。采用Angular Foundation,你可以创建带有更精确HTML元素,如页码和顶栏的web应用程序。


Ionic

你是否需要一个可以让开发本地移动应用程序变得容易的框架?Ionic——一个有影响力的HTML5原生应用程序开发框架,就是你可以get最好的框架。


LumX

LumX是一个开放式框架。Sass、Bourbon和Neat语言组成了LumX,因此你可以更快地定制你的应用程序设计。此外,得益于Sass和Javascript文件的自动优化,应用程序性能得到了增强。LumX或许是用于创建扎实和快速的单页app的顶级的Javascript MVC框架。谷歌依然在维持这框架。


Mean.io

如果你想轻松开始基于MongoDB和AngularJS的应用程序,那么Mean.io是你工作的转折点。


Mobile Angular UI

Mobile Angular UI是一个类似jQuery Mobile的移动UI框架。一些Bootstrap 3没有的重要的组件,如可滚动区域、工具条和开关,Mobile Angular UI中都有。Mobile Angular UI也支持顶部和底部的导航栏在滚动时不跳动。

Mobile Angular UI可增强移动体验,因为它的元素来源于可靠的库渠道,如fastclick.js和overthrow.js。Mobile Angular UI的语法在很大程度上类似于Bootstrap3。因此,它并不完全适合于移动目前的桌面网站应用程序到移动端。相反,它有一个超小的CSS文件可以移动移动网站应用程序到桌面。使用那个文件,你会得到一个完全的响应接口。


Radion.io

Radion.io是一个大型AngularJS框架,是处理多个开发项目的完美架构。Radion提供了一个可以帮助你扩大项目规模的接口。Radion的AMD结构能够让个人开发者以及大型团队轻松快速地创建和部署高效的应用程序。担心搜索引擎优化的困境? Radion配有精心打造的PhantomJS网络爬虫,能够SEO的麻烦事。 

 Supersonic

Supersonic UI是一个值得关注的框架,它能够提升你的混合app体验到一个新的水平。Supersonic有一个声明式的UI功能,能够使得构建移动应用程序的过程像吃棉花糖一样简单。


Suave-UI

得益于它提供的各种CSS定义,指令和托管服务,该框架可帮助你轻松高效地创建UI。


UI Grid

UI Grid适合那些想要实现复杂功能的开发人员。使用UI Grid,你还可以执行列排序和列筛选。UI Grid允许你在一个地方编辑数据,并提供非常多的功能。


图片视频类

  • angular-maxonry 图片墙效果插件,可以将图片组织成类似于瀑布流的效果,依赖于jQuery、imageloadedMasonry

  • angular-deckgrid 另一个照片瀑布流解决方案

  • ngImgCrop 图片剪裁工具

  • ngVideo 播放器,直接播放指定地址的mp4,控制按钮美观度远甩朝内99.99%的视频站

  • angular-image-404 当 img 元素的图片无法正常获取时,使用这个指令可以显示占位图片,可以自定义占位图,也可以使用默认的占位图

输入控件类

文本编辑器

  • textAngular 在 Github 中排名第一的 HTML 编辑器, Demo(需翻墙)

  • Angular Froala 非常好用的另外一个 HTML 编辑器,而且支持 inline 编辑,比 textAngular 漂亮,Github

  • angular-umeditor 百度umeditor的AngularJS扩展,umeditor从界面上讲并不够现代化,但却总有人喜欢它

界面类

  • ui-bootstrap 官方扩展,在AngularJS中方便的以指令的方式使用Bootstrap

  • Color-picker 颜色吸取器

  • ngInfiniteScroll 无限滚动加载

  • ui-map 用于在页面中集成Google Maps

  • NG-Grid 官方提供的表格插件,支持表格的主题、排序、直接编辑、多行选择等操作,而且使用非常简单,只需要一行HTML代码,但是,比较难看,适合于不讲究外观但要求功能强大的场合,像后台工具、管理系统之类

  • angular-table 第三方表格工具,适合于需要对表格进行高度定制的场合

  • ng-table 在易用性和外观上对上面两个进行折衷的解决方案

  • AngularUI 上面的ui-bootstrap、ui-map就是它的一部分,官方提供的常用扩展集,除了这两个,还有ui-router、ui-select等,注意,它使用的是Bootstrap 2.x

  • Adapt-Strap 第三方Bootstrap插件,而且是基于扁平化的Bootstrap 3,更美观

  • ng-polymer-elements Polymer风格的AngularJS指令,Material Design设计,值得尝试

  • Angular Loading Bar 可用于在页面顶部增加一个漂亮的进度条

  • angular-busy 与Angular Loading Bar有点类似,主要用于处理$http通信时候的动画

  • ngInfiniteScroll 从名字可以看出来,它是一个用于组织瀑布流和时间线的扩展

  • ngScrollTo 页内滚动工具,可以将页面滚动到指定id的元素位置

  • ngDialog 比Bootstrap更简单,更好用,更漂亮的网页对话框

  • Angular Treeview 树状目录组织扩展,使用相当方便,而且不依赖于jQuery

  • angular-growl 用于在页面上显示警告框,可以设置显示时间,还可以直接显示$http中收到的警告

  • angular-truncate 当文字过多过长时,显示部分文字的插件,可以按文字总长度来控制,也可以按单词数量来控制

  • angular-fallback-image 当你的图片地址返回的是 404 的时候,使用这个插件可以将其替换为另外的占位图

其它工具类

  • angular-translate AngularJS的i18n扩展

  • Satellizer 可以方便的在AngularJS中集成第三方账号登陆,支持国际主流社交网站账号,支持协议有OAuth 1.0/2.0

  • ngStorage 本在存储插件,用于处理localStorage和sessionStorage

  • ng-csv 导出csv的扩展

  • angular-once 双向绑定虽然方便,但如果数据太多,会造成一些性能问题。angular-once的解决方案是,对于不涉及到修改的数据,不要使用双向绑定,而是使用angular-once提供的once-textonce-src等等。


查看更多:www.kancloud.cn/wujie520303…


Dojo 2

86896.png

官网:dojo.io/ (中文:http://www.angularjs.net.cn/)

GitHub:github.com/dojo/framew…



描述:

Dojo是一种为JavaScript开发人员扩展开发过程提供帮助的工具箱。Dojo 2聚焦于开发人员对构建现代企业应用的需求,是在2007年发布Dojo 1的十多年后对Dojo的一次完全重写。Dojo 2使用TypeScript构建,采用了基于组件的架构和虚拟DOM。Dojo 2在工具上做了大幅的改进,其中包括一种新的CLI、集成的测试,以及一些连接Dojo与常见标准及工具的功能。

Dojo 2是受JS基金会支持的一个开源项目。JS基金会还为jQuery、webpack和lodash等关键JavaScript项目提供法律上的和管理上的支持。


Sub-packages within @dojo/framework

There are eight sub-packages that form the framework for building a Dojo application:

  • dojo/core - The foundational code of the Dojo platform

  • dojo/has - A feature detection library

  • dojo/i18n - A set of internationalization tooling

  • dojo/routing - A routing service to build web applications with

  • dojo/shim - Modules that provide fills of ES6+ functionality

  • dojo/stores - A lightweight state container

  • dojo/widget-core - The foundation code of Dojo widgets

  • dojo/testing - A set of modules to help with testing Dojo

External packages

We have additional packages within the Dojo ecosystem to aid in quickly and easily creating Dojo apps:

Dojo CLI

Support Packages

There are several packages which are designed to support the Dojo platform. Generally these packages are not directly used by end developers:

  • dojo/scripts - A package of scripts to aid with Dojo package development.

  • dojo/webpack-contrib - Specialized webpack loaders and plugins used by the Dojo toolchain.

了解更多信息移步官网。


avalonjs

官网:avalonjs.coding.me

GitHub:github.com/RubyLouvre

描述:

大佬 司徒正美 开源的一个迷你mvvm框架,特点:迷你 、 易用 、 高性能