2016 年最具潜力前端开源项目 Top20

5,050 阅读12分钟
原文链接: my.oschina.net

在2016年,前端的开源世界越发精彩,Vue的不断壮大,Angular 2的发布,Amaze UI 3.0蓄势待发,黑马级别的Ant Design,这些都给2016年的前端世界注入了不同的鲜活血液。作为一名前端开发者,今天就给大家盘点一下在过去的2016年中,哪些开源项目值得期待,哪些具有成为开发者眼中NO.1的潜力。

因盘点的开源项目不能完全以技术等标准来判定谁高谁低,所以以下项目排名以Github上Star数量排名,且盘点的项目里均是在2016年中保持了较高的活跃度(有重大更新、重大事件、最新发布等),毕竟个人精力和水平有限,如有不足之处还请见谅。

 

1

Bootstrap

作者:Twitter

官网:http://getbootstrap.com/

Github:https://github.com/twbs/bootstrap
Star:10W+
最近更新:4.0.0-alpha.5(2016.10.19)
介绍:作为老牌的前端框架,Bootstrap 一直保持着不俗的成绩,Bootstrap 4 目前也正处于 Alpha 阶段,预计在 2017 年发布。值得关注的变化是新的通用卡片组件和 Flexbox 网格(查看与常规网格的对比),这使得框架更加现代化,并且让用户使用它进行工作时更加得舒心。

 

2

React

作者:Facebook

官网:https://facebook.github.io/react/

Github:https://github.com/facebook/react
Star:5.7W
最近更新:v15.4.1(2016.11.23)
介绍:无人不知,无人不晓的新兴技术栈,一经推出,就受到了前端圈的极度关注,经过2016年的洗礼,已经逐渐成为了很多企业的开发技术栈标配。作为2016年最具潜力,乃至最具影响力的前端开源项目真的不为过。

 

3

Angular


作者:Google

官网:https://angularjs.org/

Github:https://github.com/angular/angular.js
Star:5.4W+
最近更新:v1.6.1(2016.12.23)
介绍:Angular.js 2 在今年也已经发布了。该框架由 Google 进行维护,受到了众多企业和大公司的青睐。它所具备众多的功能,也为从网络到桌面以及移动应用程序中编写任何东西成为了可能。而它的框架也是用 TypeScript 所编写的,这也是写应用程序推荐的编程语言。

 

但也因为Angular.js 2太过复杂,很多特性成为了鸡肋,引起了众多开发者抱怨,希望下个版本有所改进!不过,仍然无法掩盖他在前端圈子里的火热程度。

 

4

Vue

作者:尤雨溪

官网:http://cn.vuejs.org/

Github:https://github.com/vuejs/vue
Star:3.8W
最近更新:v2.1.8(2016.12.28)
介绍:如果说2016年,前端圈不可不知道的开源项目,那Vue绝对是名列前茅,在今年的新版本Vue.js2.0中,新的渲染层较之 v1 带来了巨大的性能提升,尽管渲染层全面更新,Vue 2.0 兼容了绝大部分的 1.0 模板语法,仅废弃掉了其中的一小部分。

Vue的持续增长速度也超过了作者的预期,在2016年达到了几乎一个巅峰状态,在2017年,他们还会探索将Vue组件编译并且发布成原生的自定义元素以及更好的浏览器兼容性上努力,未来不可小视!

 

5

Semantic UI

作者:jlukic等技术人员

官网:http://semantic-ui.com/

Github:https://github.com/Semantic-Org/Semantic-UI
Star:3W+
最近更新:v2.2.7(2016.12.22)
介绍:Semantic UI—完全语义化的前端界面开发框架,跟 Bootstrap 和 Foundation 比起来,还是有些不同的,在功能特性上、布局设计上、用户体验上均存在很多差异。在程序猿圈里其因版本更新频繁,有着“版本帝”之称。

在2016年发布的2.2版本中,做了诸多改进以及加入了新的UI元素,更新日志长达十页之多,作为名副其实的“版本帝”,在2017年也将会有大动作,也是值得期待的开源项目之一。

 

6

Ionic

作者:Ionic技术团队

官网:http://ionicframework.com/getting-started/

Github:https://github.com/driftyco/ionic
Star:2.7W
最近更新:v2.0.0-rc.4(2016.12.15)
介绍:Ionic 是一个轻量的手机 UI 库,具有速度快,界面现代化、美观等特点。为了解决其他一些UI 库在手机上运行缓慢的问题。它使用 JavaScript MVVM 框架和 AngularJS 来增强应用,专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从web的角度开发手机应用,基于 PhoneGap 的编译平台,可以实现编译成各个平台的应用程序。

目前最新版本是v2.0.0-rc.4,进行测试中的Ionic2新增了诸多新特性,将会在2017年带给开发者不一样的体验!

 

7

Backbone

作者:jashkenas等技术人员

官网:http://backbonejs.org/

Github:https://github.com/jashkenas/backbone
Star:2.5W
最近更新:v1.3.3(2016.4.6)
介绍:又是一款老牌的前端类库,他是第一代的前端MVC,Backbone 最适合的应用场景是单页面应用,并且页面上有大量数据模型,模型之间需要进行复杂的信息沟通。Backbone 在这种场景下,能很好的实现模块间松耦合和事件驱动。 其他适用产品还有微博,网易微博的前端设计也是和 Backbone 类似的一个结构,早年的有道云笔记Web版就是用的Backbone。

虽然过去了五六年的时间,但是Backbone依旧还保持着常年的更新,虽然并没有看到太大的改进,但始终还是有一批人在使用着。

 

8

Foundation

作者:ZURBfoundation
官网:http://foundation.zurb.com/
Github:https://github.com/zurb/foundation-sites
Star:2.4W+ 
最近更新:v6.3.0(2016.12.16)
介绍:这是一款传说中标榜世界上最先进的前端响应式框架,能够快速创建运行在任何设备上的应用的原型和产品代码,虽然并没有说的那么夸张啦,但本身的发展史也可以跟 Bootstrap 相媲美了,并且也保持着不俗的更新。 

 

如果一个产品不能保持持续的更新,或许会慢慢淡出人们的视野,当很多人以为 Foundation 在 Vue 等的大潮下会消失,但没想到在2016年的6.3.0版本的更新让他再次出现在人们的眼前,我们也有信心期待他在2017年有更大的突破!

9

Ember

作者:YehudaKatz
官网:http://emberjs.com/
Github:https://github.com/emberjs/ember.js
Star:1.7W+
最近更新:v2.10.2(2016.12.20)
介绍:Ember 是 JavaScript 框架的另一个不错的选择。它支持数据双向绑定,并能够自动更新模板、组件以及服务器端渲染。与其他竞争者相比,使用它的好处是它更加成熟与稳定,而其框架的重大更改频率之低,社区重视向后的兼容性,也使得此框架成为开发较长生命周期的应用程序的不二之选。

 

10

Echarts

作者:百度前端技术团队
官网:http://echarts.baidu.com/
Github:https://github.com/ecomfe/echarts
Star:1.5W+
最近更新:v3.3.3(2016.11.24)
介绍:ECharts 是一款由百度前端技术部开发的,基于 Javascript 的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。目前也已经成为了百度开源项目中的佼佼者,也是目前在国内使用人数最多的数据可视化的开源项目。 


在2016年重磅推出的3.0版本更是加入移动端交互体验、更小的体积文件、更灵活的打包方式,我们相信,在未来 ECharts 还会新增更多特性来提高他的活跃度。

 

11

Weex

作者:阿里巴巴
官网:https://weex-project.io/
Github:https://github.com/alibaba/weex
Star:1W+
最近更新:v0.9.4(2016.12.22)
介绍:Weex 的前身是WeApp,一个用JSON配置原生UI组件来实现动态化的框架,Weex 是WeApp的进化版本,加上ex去掉App,就成了现在这个名字。在2016年4月份的Qcon大会上正式宣布开源, 对于移动开发者来说,Weex 主要解决了频繁发版和多端研发两大痛点,同时解决了前端语言性能差和显示效果受限的问题。

 

阿里这样的大公司背景支撑再加上@勾三股四 这样的技术大牛带队,未来的 Weex 不可限量!

12

Ant Design

作者:蚂蚁金服

官网:https://ant.design/

Github:https://github.com/ant-design/ant-design

Star:9300+
最近更新:v2.6.0(2017.1.1)
介绍:这是一款基于 React 的 UI 组件库,主要是负责开发和服务于企业级后台产品。通过Github上的介绍,这个项目是偏右(阿里的前端大牛)和yiminghe(阿里的前端大牛+1)主导·,而且从 Ant Design 中也不难看出有些部分是来自yiminghe参与过的GitHub项目react-component 。

 

这样的强强联手,再加上 React 大行其道今天,还有玉伯团队全明星般的号召力,这个项目后面必然会火得一塌糊涂。

 

13

Amaze UI

作者:云适配
官网:http://amazeui.org/
Github:https://github.com/amazeui/amazeui
Star:8600+
最近更新:v2.7.2(2016.8.17)
介绍:Amaze UI 是国内首款开源前端框架,也是率先提出移动优先理念的框架之一,在2016年Amaze UI 相继推出了针对移动端的 Touch版,还与阿里钉钉合作推出了钉钉版,另外在2017年年初将迎来3.0版的重大更新,据说是全新界面,全新设计,是不是有点小激动?另外,还会有一个针对企业系统开发的版本,貌似也在秘密研发中,值得期待一下。

14

Knockout

作者:SteveSanderson等技术人员
官网:http://knockoutjs.com/
Github:https://github.com/knockout/knockout
Star:7900+
最近更新:v3.4.1(2016.11.8)
介绍:Konckout是以兼容性著称的前端框架,因为他支持一些老版本的IE(IE6-IE8)的特性,能够让一些企业开发者免于在浏览器兼容性问题上浪费时间,但因为兼容IE6等老版本的IE,所以需要用 observable 才能双向绑定,而且他相比 Angular 更轻量级。 

 

Konckout 在众多前端轮子面前也在逐渐的发展出自己的组件化思路,目前跟Vue比较类似,偏向于视图层的组件化 MVVM 框架,如果你想要兼容老版本IE浏览器并且兼顾PC和移动端,不妨试试他。

 

15

Element

作者:饿了么前端技术团队
官网:http://element.eleme.io/
Github:https://github.com/ElemeFE/element
Star:6700+
最近更新:v1.1.2(2016.12.30)
介绍:Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。由于目前 Vue 的大红大紫,导致了很多衍生库的出现,饿了么前端技术团队出的这套是基于最新的 Vue 2.0 的组件库,方便了很多使用 Vue 的开发者能够快速开发。 

 

有饿了么这个大公司的背景作支撑,后续的维护应该不用担心,虽然只是一个 Vue 的衍生组件库,但是其质量颇高,可读性也较好。

 

16

avalon

作者:qinerg
官网:http://avalonjs.coding.me/
Github:https://github.com/RubyLouvre/avalon
Star:4100+
最近更新:v2.2.4(2017.1.4)
介绍:avalon是一个功能强大,体积小巧的 MVVM 框架。它遵循操作数据即操作DOM的理念,让你在代码里基本见不到一点DOM操作代码。DOM操作全部在绑定后,交给框架处理。相当后端有了ORM一样,不用你手写SQL,提高生产力! 与其它js框架相比,同样实现著名的todos功能,在所有MV*的实现中avalon是让用户写代码最少的。与其他MV*相比,它不仅轻量,最低支持到IE6,而且性能是最好的。

17

svelte

作者:Rich Harris
官网:https://svelte.technology/
Github:https://github.com/sveltejs/svelte
Star:3800+
最近更新:v1.6.3(2017.1.4)
介绍:这款框架是在2016年下半年最新发布的,作者是 Rich Harris,也就是 Ractive, Rollup 和 Buble 的作者,Svelte 的核心思想在于『通过静态编译减少框架运行时的代码量』。当前的框架无论是 React Angular 还是 Vue,不管你怎么编译,使用的时候必然需要『引入』框架本身,也就是所谓的运行时 (runtime)。但是用 Svelte 就不一样,一个 Svelte 组件编译了以后,所有需要的运行时代码都包含在里面了,除了引入这个组件本身,你不需要再额外引入一个所谓的框架运行时!(部分内容摘自知乎Vue作者尤雨溪回答)


出自前端轮子哥之手的新型框架,从中可以看到很多与现有的框架相同之处,但也有他的优势所在,因为他可以用来编译可独立分发的 Web Components,而这个规范也在逐渐的成为前端的主流!

 

18

T3js

作者:box
官网:http://t3js.org/
Github:https://github.com/box/t3js
Star:1500+
最近更新:v2.7.0(2016.8.27)
介绍:T3js(t3.js)与MVC框架不同,T3是建立在可伸缩 JavaScript 应用体系结构的概念之上来创建松耦合、少模型的系统,以此来创建大型 JavaScript 应用。T3可以与其他框架一起工作后,创建和转换组件变得很容易,而不用停止重新编写整个客户端。 

 

T3的设计完全遵循可扩展 JavaScript 应用体系结构相关原则,尤其是组件间强调松耦合、依赖透明化、为不明确的需求留有扩展点以备扩展、抽象出共同点等原则。T3的创建目的是鼓励开发者编写一些小且用途单一的组件,继而创建出扩展性比较强的客户端代码。

 

19

ZUI

作者:禅道项目管理软件团队
官网:http://zui.sexy/
Github:https://github.com/easysoft/zui
Star:1200+
最近更新:v1.5(2016.9.6)
介绍:ZUI 继承了Bootstrap 3中的大部分基础内容,但出于与Bootstrap不同的目的大部分内容都进行了定制和修改。其中包含,移除了部分插件的限制,增加了卡片、评论、列表等实用的视图插件。 你可以把 ZUI 看成是 Bootstrap 的补全完善版,如果认为Bootstrap 不能够很好的满足你,不妨试试这个。

20

Dojo


作者:Dylan Schiemann

官网:https://dojotoolkit.org/

Github:https://github.com/dojo/dojo
Star:957
最近更新:v1.12.1(2016.12.21)
介绍:这是一款针对企业级应用的前端框架,目前已应用于IBM等大企业,主要分为dojo,dijit,dojox三个大模块,前者包括oop模拟,各种常用功能的处理,如:declare.js lang, request等;中间是ui层各种组件的实现,如:边框容器,时间日期等;后者是常用组件功能的扩展,如:列表table,图表等;也正是因为他的企业级属性,所以过于“厚重”。