十大新兴前端框架大盘点

www.jswusn.com Other 2020-01-11 16:33:07 3493次浏览


  2019年在整体上,前端的主流框架没有太大的变化,业务代码仍由三大框架(React、Vue、Angular)所主宰着,打包工具一般仍使用webpack、Rollup.js,状态管理器还是Redux、MobX。

  但随着这两年崛起的新框架与类库,一些细微之处悄悄地起变化了,这些变量可能在未来推动着前端的发展。因此本文为大家介绍国产十大新兴前端框架,毕竟开发者对一项技术的关注,是技术发展的动力。


ramda

  近几年来,前端面试的难度上了一个档次,我们前端工程师要刷LeetCode,要手写一大堆工具函数:函数节流、防抖、数组去重、扁平化,对象深拷贝等。

  这些方法大家可以从网上搜,但代码质量可能不太好,可能面试官不认可你的实现,因此更好的学习方法是从Underscore.js抽取出来学习。

  国外开发者Underscore.js,推出另一个高性能版本叫Lodash,但是方法间互相调用,盘根错节,使用起来较麻烦。

  自从Redux将函数式编程带火后,Underscore.js又有一个函数式版本,就是ramda,其代码清晰易懂,且可以让我们学到更多函数式编程技巧。


  官网:https://ramdajs.com/

  GitHub Star:17.8k


WeUI

  WeUI原来是微信官方团队为微信Web开发打造的一个样式库,类似于Bootstrap,但它只是运行于浏览器端。微信小程序在CSS与浏览器有许多出入,如不能使用标签选择器、ID选择器与众多伪类,因此在微信小程序火起来后,官方又将这个库兼容到小程序上。


1578731002699622.png


  官网:https://github.com/Tencent/weui

  GitHub Star:23.9k


ColorUI

  ColorUI是小程序组件库,但不是纯样式库。由于WeUI有些淡雅,可能不合某些时尚公司的风格,因此ColorUI也有庞大的追捧者。

  ColorUI的两大特点:

  1、颜色鲜艳饱满;

  2、基于uni-app开发,可运行于多种小程序中。未来跨端开发将成为前端的主流工作方式,打通更多分销渠道是必然趋势。而跨端转译框架只用编写一份代码,就能跑N个平台,能变相提高产能,降低成本,深得大家的好评。


1578731068322483.png


  官网: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复杂的转译,简单易懂。


1578731170318455.png


  2、Omi是国内最先实践Web Component的框架,Web Component有个明显的优势是易于调试,对比同样开发TodoApp,Omi和React渲染完的DOM结构如下:


1578731193518109.png


  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有以下特点:

  1、公司投入的研发资源较多,据了解,目前有7、8个不同事业部的团队介入这框架的开发,共同解决很多问题,包括小程序转H5、小程序转RN、小程序转其他小程序等。

  2、拥有微信小程序原生转Taro代码的工具,这样可以吸引那些已经用微信原生代码写好小程序的公司转换代码,方便他们更一步布局更多小程序平台。

  3、Taro迁移了Redux、MobX、Router、UI库这整套全家桶都移植过来,是vue系不可比拟的。

  4、Taro的社区运营得非常好,单拿GitHub上的issue运营来说,有机器人自动回复提问者,并且把过往已经解决的同型问题的链接给他们,没有搞定则上报到专门的团队。

  每周都有周报,统计一共关了多少issue,解决了多少问题,添加了多少新特性,让大家用得非常安心。更不用说其官方运营的社区,http://taro-club.jd.com/,可见官方在这方面投入非常大。

  5、Taro拥有一个物料市场,号称“让每一个轮子产生价值”。物料就是一些组件,如果单纯让官方来做,肯定无法考虑到那么巨细。太多垂直领域待覆盖,由专门领域的人来写的组件更有说服力。

  6、Taro支持转RN是一个非常亮眼的特性,超出目前所有的小程序转译框架。这也只有京东这种深耕RN多年的大公司才有能力适配。京东早些年就实现了自己的RN-WEB与RN转微信小程序框架(Alita)。

  这几年,国内各大企业对小程序的投入非常大,除了Taro,还有去哪儿网的nanachi、网易的megalo,滴滴的Chameleon,百度的Okam,不一而足。


  官网:https://taro-docs.jd.com/taro/docs/README.html

  GitHub Star:23.5k


Flutter

  Flutter是这两年来广受开发者热议的移动端跨平台开发工具。并且经过咸鱼与毒这两大标杆式App的引导,国内越来越多人投入Flutter的开发行列。

  Flutter的优点:

  1、跨全平台:移动端的两大平台、PC的三大操作系统以及Web端。

  2、性能卓越。Flutter和其他跨平台不同的是,它并不走JavaScript引擎,而是通过自己的Flutter Engine,然后通过skia绘制UI框架。skia是C++写的类似canvas 2D图形库。另外,在渲染时,Flutter借鉴React的虚拟DOM思想,在UI进行变化后,会进行diff算法。

  3、开发高效率。Flutter在开发时可以通过热重载,实现所见即所得的效果。用过webpack开发页面的同学都知道,在编辑器中保存后,界面立马就能看到变化。Flutter也是这样,当App在虚拟容器中或者真机设备中调试,保存后,App会立刻响应,节省了大量时间。

  4、Flutter SDK高度自由灵活,上层有丰富UI套件,除了Material Design的主题之外,还有一套iOS主题的配套组件。除此之外,对于复杂UI,可从底层canvas入手来绘制,灵活度堪比系统的SDK。

  5、当然它不是没有缺点,最大的诟病是它使用了Dart,我认为如果是用TypeScript的话可能会更火,一些前端工程师为此放弃使用Flutter。

  其次,在编写界面时Flutter没有使用标签语言,工程师要费劲地用Widget类来堆砌,很易出现套嵌地狱,也不直观。现成的解决方案有两个,一是通过野生的DSX,二是官方的扩展函数。没有太大的硬伤,但小问题不断,需要时间来磨平。


1578731312461839.png


  官网:https://flutter.dev/

  GitHub Star:84.1k


SpriteJS

  SpriteJS是由360奇舞团推出的跨终端canvas绘图框架,可以基于canvas快速绘制结构化UI、动画和交互效果,是跨平台的2D绘图对象模型库,它能够支持Web、Node.js、桌面应用和微信小程序的图形绘制和实现各种动画效果。对比业界有名的ECharts,前者是侧重于企业级的图表绘制,SpriteJS则倾向于动画与游戏。


1578731372672376.png


  SpriteJS的优点有:

  1、跨平台,支持服务端渲染、微信小程序。

  2、对D3、Matter-js、Proton和其他第三方库友好。

  3、性能卓越,主要是通过高性能的缓存机制,离屏Canvas与WebWorker多线程渲染这三大策略实现。最新的SpriteJS支持WebGL,对于大数据量性能更佳。


  官网:https://spritejs.org/

  GitHub Star:3.4k


NestJS

  可能大家听说过Next.js,这是在React团队早些年没推出后端渲染框架时,由第三方推出的Node.js框架。大家也可能听说过Nuxt.js,基于Vue.js的轻量级应用框架。

  而NestJS可划归为AngularJS社区的。它有TypeScript、DI、DTO、Decorator,并提供了全套解决方案,包含了认证、数据库、上传文件、验证、缓存、序列化、记录器、安全、配置、压缩、请求等开箱即用的技术。不再像KoaJS、Express那样让用户自己找中间件。因此也有人称之为Node.js的Spring。

  从趋势来看,NestJS在GitHub的关注人数仅用一年就超越了Egg.js。目前仍在持续高速增长中,可见Node.js也厌恶了KoaJS、Express这样的迷你框架,在开发大型应用,必须有Spring级别的框架。


1578731429160044.png


  官网:https://nestjs.com/

  GitHub Star:23k


DoKit

  DoKit,全称为DoraemonKit,是滴滴推出一个跨平台的功能集合面板,有点像Windows下的超级兔子或360管家。它的功能较完备,可直接看下面的截图:


1578731482428413.png


  官网:https://github.com/didi/DoraemonKit

  GitHub Star:12.8k


imgcook

  imgcook是阿里出品的人工智能切图工具,但它不只是切图。我们可以上传Sketch、PSD、静态图片等形式的视觉稿作,通过智能化技术一键生成可维护的前端代码,包含视图代码、数据字段绑定、组件代码、部分业务逻辑代码。在对设计稿轻约束的前提下实现高度还原,释放前端生产力,助力前端与设计师高效协作,让前端工程师关注更具挑战性的事情。

  可能有人会质疑它生成的代码可读性,会拿之前的Dreamweave做比较,但是不要忘记,这是一个人工智能平台,它会不断进化的,机器的进化速度是人工的1000倍以上,这是对“页面仔”的暴击,因此前端工程师努力将自己转移到工具链开发这样高技术含量的活儿上。


1578731537680526.png


  官网:https://imgcook.taobao.org/

  GitHub Star:561(刚开源)


  盘点完这些新兴的前端框架,让人惊叹前端技术发展之快,如今优秀的前端工程师打造了很多十年前不可想象的开源项目。尤其是最后三个,可以说标志着前端可以与后端相鼎立的局面了。笔者相信在2020年,前端肯定会发展得更好!

技术分享

苏南名片

  • 电话:152-1887-1916
  • 邮箱:message@jswusn.com
  • 地址:江苏省苏州市相城区

热门文章

Copyright © 2018-2024 jswusn.com 版权所有

技术支持:苏州网站建设  苏ICP备18036849号