但随着这两年崛起的新框架与类库,一些细微之处悄悄地起变化了,这些变量可能在未来推动着前端的发展。因此本文为大家介绍国产十大新兴前端框架,毕竟开发者对一项技术的关注,是技术发展的动力。
ramda
近几年来,前端面试的难度上了一个档次,我们前端工程师要刷 LeetCode, 要手写一大堆工具函数:函数节流、防抖、数组去重、扁平化,对象深拷贝等。
这些方法大家可以从网上搜,但代码质量可能不太好,可能面试官不认可你的实现,因此更好的学习方法是从 Underscore.js 抽取出来学习。
国外开发者 Underscore.js ,推出另一个高性能版本叫 Lodash,但是方法间互相调用,盘根错节,使用起来较麻烦。
自从 Redux 将函数式编程带火后, Underscore.js 又有一个函数式版本,就是 ramda,其代码清晰易懂,且可以让我们学到更多函数式编程技巧。
官网: https://ramdajs.com/
GitHub Star:17.8k
WeUI
WeUI原来是微信官方团队为微信Web开发打造的一个样式库,类似于 Bootstrap,但它只是运行于浏览器端。微信小程序在CSS与浏览器有许多出入,如不能使用标签选择器、ID选择器与众多伪类,因此在微信小程序火起来后,官方又将这个库兼容到小程序上。
官网:https://github.com/Tencent/weui
GitHub Star:23.9k
ColorUI
ColorUI 是小程序组件库,但不是纯样式库。由于WeUI有些淡雅,可能不合某些时尚公司的风格,因此 ColorUI 也有庞大的追捧者。
ColorUI 的两大特点:
1、颜色鲜艳饱满;
2、基于uni-app 开发,可运行于多种小程序中。未来跨端开发将成为前端的主流工作方式,打通更多分销渠道是必然趋势。而跨端转译框架只用编写一份代码,就能跑N个平台,能变相提高产能,降低成本,深得大家的好评。
官网:https://github.com/weilanwl/ColorUI
GitHub Star:7.3k
Omi
腾讯出品的跨终端框架 Omi,它最初只是个模仿 Vue.js 的迷你框架。后来经过不断地技术升级,现在能支持微信小程序和 QQ 小程序,并且能与腾讯其他前端库相组合,可适用于更多场合(SVG、Markdown、SSR等)。
Omi 具备以下优点:
1、支持多种渲染引擎。支持JSX、Mustache模板技术、HTM(Hyperscript Tagged Markup)。Omi 最大的优势是不需要经过 Babel 复杂的转译,简单易懂。
3、Omi 是个跨平台框架,Omi 针对不同的平台,推出不同的渲染层,可以有效降低开发成本。
4、Omi 生态强大,有点像阿里的 KISSY,大多数是同事贡献代码,但是腾讯也好,阿里也好,他们的同事水平都是业务一流的,这就保证了生态圈内的插件不会参差不齐。
官网:http://tencent.github.io/omi/
GitHub Star:10.6k
Taro
与 Omi 的演化路线相反,京东出品的 Taro 一开始便支持跨平台。
Taro 是第二代转译框架,之前许多小程序框架都是走 vue 路线,在运行时处理小程序兼容问题。
但随着越来越多的小程序推出,如果要兼容3~5种小程序,前端工程师要在业务代码中加许多 if-else 分支,这些在当前平台上无效的代码也无法删除,徒然浪费资源。
Taro 使用 React 技术栈开发小程序,在编译期转换代码,删掉非本平台的代码,因此生成的代码更精练。
Taro 有以下特点:
这几年,国内各大企业对小程序的投入非常大,除了 Taro,还有去哪儿网的 nanachi、网易的 megalo,滴滴的 Chameleon, 百度的 Okam,不一而足。
官网:https://taro-docs.jd.com/taro/docs/README.html
GitHub Star:23.5k
Flutter
Flutter 是这两年来广受开发者热议的移动端跨平台开发工具。并且经过咸鱼与毒这两大标杆式 App 的引导,国内越来越多人投入 Flutter的开发行列。
Flutter 的优点:
5、当然它不是没有缺点,最大的诟病是它使用了 Dart,我认为如果是用 TypeScript 的话可能会更火,一些前端工程师为此放弃使用 Flutter。
其次,在编写界面时 Flutter 没有使用标签语言,工程师要费劲地用 Widget 类来堆砌,很易出现套嵌地狱,也不直观。现成的解决方案有两个,一是通过野生的 DSX, 二是官方的扩展函数。没有太大的硬伤,但小问题不断,需要时间来磨平。
官网:https://flutter.dev/
GitHub Star:84.1k
SpriteJS
SpriteJS 是由 360 奇舞团推出的跨终端 canvas 绘图框架,可以基于 canvas 快速绘制结构化 UI、动画和交互效果,是跨平台的 2D 绘图对象模型库,它能够支持 Web、Node.js、桌面应用和微信小程序的图形绘制和实现各种动画效果。对比业界有名的 ECharts,前者是侧重于企业级的图表绘制,SpriteJS 则倾向于动画与游戏。
SpriteJS 的优点有:
1、跨平台,支持服务端渲染、微信小程序。
2、对 D3、Matter-js、Proton 和其他第三方库友好。
3、性能卓越,主要是通过高性能的缓存机制,离屏 Canvas 与 WebWorker 多线程渲染这三大策略实现。最新的 SpriteJS 支持 WebGL,对于大数据量性能更佳。
官网:https://spritejs.org/
NestJS
而NestJS可划归为AngularJS社区的。它有 TypeScript、DI、DTO、Decorator,并提供了全套解决方案,包含了认证、数据库、上传文件、验证、缓存、序列化、记录器、安全、配置、压缩、请求等开箱即用的技术。不再像 KoaJS、Express 那样让用户自己找中间件。因此也有人称之为 Node.js 的 Spring。
从趋势来看, NestJS 在 GitHub 的关注人数仅用一年就超越了 Egg.js。目前仍在持续高速增长中,可见 Node.js 也厌恶了 KoaJS、Express 这样的迷你框架,在开发大型应用,必须有 Spring 级别的框架。
官网:https://nestjs.com/
GitHub Star:23k
DoKit
DoKit,全称为DoraemonKit, 是滴滴推出一个跨平台的功能集合面板,有点像 Windows 下的超级兔子或 360 管家。它的功能较完备,可直接看下面的截图:
官网:https://github.com/didi/DoraemonKit
imgcook
imgcook 是阿里出品的人工智能切图工具,但它不只是切图。我们可以上传 Sketch、PSD、静态图片等形式的视觉稿作,通过智能化技术一键生成可维护的前端代码,包含视图代码、数据字段绑定、组件代码、部分业务逻辑代码。在对设计稿轻约束的前提下实现高度还原,释放前端生产力,助力前端与设计师高效协作,让前端工程师关注更具挑战性的事情。
可能有人会质疑它生成的代码可读性,会拿之前的 Dreamweave 做比较,但是不要忘记,这是一个人工智能平台,它会不断进化的,机器的进化速度是人工的 1000 倍以上,这是对“页面仔”的暴击,因此前端工程师努力将自己转移到工具链开发这样高技术含量的活儿上。
官网:https://imgcook.taobao.org/
GitHub Star:561(刚开源)
盘点完这些新兴的前端框架,让人惊叹前端技术发展之快,如今优秀的前端工程师打造了很多十年前不可想象的开源项目。尤其是最后三个,可以说标志着前端可以与后端相鼎立的局面了。笔者相信在 2020 年,前端肯定会发展得更好!
作者简介:司徒正美,拥有十年纯前端经验,著有《JavaScript框架设计》一书,去哪儿网公共技术部前端架构师。爱好开源,拥有mass、Avalon、nanachi等前端框架。目前在主导公司的小程序、快应用的研发项目。
热 文 推 荐
☞在以太坊上开发 Dapp 的瓶颈和门槛有哪些?| 博文精选
文章评论