grace和wepy都是辅助小程序开发的开源库,本文对两者做个对比。

注:本文是作者本人的一些拙见,纯粹的技术讨论,不想引起技术信仰之争,欢迎积极、正向的讨论及建议。

如果你还不了解Grace, 请参考:微信小程序开发神器-Grace

Github: github.com/wendux/grac…

自小程序发布后,现在最著名的小程序开发框架就是wepy, 它借助一系列工具,通过预编译的手段实现了和Vue接近的开发风格,可以认为wepy更就是小程序的 vue(但还有一些不同,如布局模板),首先,必须承认wepy是一个好的框架,如果你是Vue开发者,如果要开发一些大的小程序项目,wepy应该是你的不二之选。但是我们换个角度,考虑下面两个问题:

小程序开发者来源

  1. 来自前端开发者

    目前来看,如果是一名前端,那么很可能用过Angular/React/Vue中的一个,首先,如果你没有用过Vue, 那么要使用wepy的学习成本接近于学习Vue的成本,这是第一点,学习成本会大一些。其次对于对Angular/React有强烈信仰的开发者来说,他们可能会问一声,小程序就小程序,为什么非得弄成Vue. 在web开发时正宗的Vue都不用,会为了开发小程序再去学习一下wepy?

  2. 非前端开发者

    在小程序发布后,想必大多数程序员都想尝尝,而并非只是前端程序员,对于这部分开发者来说,大都会采用小程序原生开发,他们基本不肯能再去学习一个像Vue同等规模的前端框架。

总结一下,站在开发者的角度,wepy 采用了类Vue的开发风格,即是优势,也是劣势。优势是可以让数量可观的Vue开发者轻松过渡,但缺点是提高了其它开发者的使用门槛。所以,一个轻巧易上手的帮助工具就很有必要,而grace就是这样的一个工具。

小程序定位

小程序的定位本身就是“触手可得,用完即走”, 解决想干个啥都得下个APP的历史现象。有了小程序后,不用装太多APP,只有在第一次用的时候花费少量流量下载即可。可以看到,小程序第一次使用时还是要下载,为了减少下载等待时间,节省用户流量,小程序对程序包的大小设置了上线4M, 这也为什么小程序中“小”的含义。 微信的这种限制决定了小程序一般只是用于实现核心功能,不会用作复杂功能。这也就决定了,在大多数小程序开发时,我们需要的并不是什么强拽炫酷吊炸天的大框架,而是一些简单的帮助工具,而grace的定位就是一个精巧的帮助工具。在笔者了解的很多小程序,甚至大都是用原生开发的。

下面总结一下主要区别:

  1. 定位不同;grace的定位是一个精巧、易用的小程序开发辅助库,而wepy是一个功能全面的类vue框架.

  2. grace使用简单易上手,wepy对不了解Vue的开发者有不小的学习成本,并且开发环境依赖多,配置比较复杂。

  3. grace更贴近于原生,wepy更贴近于web.

下面我们看看Grace都有哪些功能:

Grace可以干什么

我们看看grace的特点:

  1. 轻量、小巧、上手简单
  2. 支持和Vue一样优雅的数据响应式
  3. 支持数据自动更新、更改缓存、批量更新
  4. 强大的网络功能
  5. 支持全局事件总线
  6. 支持跨页面传值
  7. 支持mixins

主打是精巧,可以看到目前核心功能主要涉及三个方面:数据、网络、事件。

数据

小程序是数据与页面渲染分离的,所以在开发中会有大量的setData 操作,grace为了简化这大量的显式数据更新,实现了和Vue一致的数据响应式-可以通过赋值直接更新数据。与此同时,为了避免频繁setData 带来的性能消耗,grace不仅支持手动批量刷新而且grace可以自动跟踪页面前后台切换,如果页面切换到后台,则不会再去调用setData ,而是将变动先缓存,等到页面切换到前台,才会统一刷新,有效避免不必要的性能消耗。

网络

大多数小程序都需会和后台通过http进行通信,为此,grace提供了强大、灵活、良好的Promise API,同时支持全局请求配置、请求/响应拦截器等。更重要的是,Promise风格的API可以支持ES7的async/await。

事件

小程序原生在跨页面通信方面比较弱,为此,grace提供了一个全局事件总线,你可以在任何页面通过注册/触发事件来进行通信。 不仅如此, grace还在事件总线的基础上,实现了更友好的页面数据回传的回调。

除了这些,grace还支持 mixins,提供了一种扩展新功能的方式,它可以在全局给页面添加一些功能,开发者可以自己发挥。

Grace今后的发展

笔者觉得小程序的量级一般都不会太大,为了避免过度设计,grace会一直保持精巧而易用的原则,不会添加太多使用频率比较小的功能。如果大家有什么好建议,或者希望grace添加什么新功能,都可以在github提issue.

最后,贴出Github地址,如果觉得对你有用,欢迎star, 如果有什么建议,欢迎issue。

Grace项目地址:github.com/wendux/grac…

作者:wendux
链接:https://juejin.im/post/5aa0e45af265da23a404635a
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 
您可能感兴趣的

微信小程序开发库grace vs wepy的更多相关文章

  1. 微信小程序开发06-一个业务页面的完成

    前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...

  2. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  3. 微信小程序开发中的二三事之网易云信IMSDK DEMO

    本文由作者邹永胜授权网易云社区发布. 简介 为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...

  4. 微信小程序开发日记——高仿知乎日报(中)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教 ...

  5. 微信小程序开发 -- 02

    微信小程序开发 --02 微信小程序在开发中,难度系数不是很大,其中应用的技术也是web开发中常用的技术,虽然在微信开发者工具中的叫法与常见的web开发的叫法不太一样. 首先,在微信小程序开发中,代码 ...

  6. 微信小程序开发05-日历组件的实现

    接上文:微信小程序开发04-打造自己的UI库 github地址:https://github.com/yexiaochai/wxdemo 我们这里继续实现我们的日历组件,这个日历组件稍微有点特殊,算是 ...

  7. 微信小程序开发03-这是一个组件

    编写组件 基本结构 接上文:微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...

  8. 微信小程序开发教程 #043 - 在小程序开发中使用 npm

    本文介绍了如何在微信小程序开发中使用 npm 中包的功能,大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新. 微信小程序在发布之初没有对 npm 的支持功能,这也是目前很多前端开发 ...

  9. 微信小程序开发(3) 热门电影

    在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发热门电影及预览功能. 本文主要分为两个部分,小程序主体部分及电影主页和详情页页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成, ...

随机推荐

  1. some phrase for oral english

    依我看,在我看来 I suppose that, ... As far as i'm concerned, ... As i see it, ... It seems to me that ... 1 ...

  2. [转].NET程序破解仅需三步

    近期开发公司商城,为了简化开发用了V5Shop网店程序.本来预计一个月完工,哪知道出现一堆问题大大增加了我的工作量(早知道还不如全部自己写了). 破V5Shop真不地道,说是免费的,结果程序一大堆问题 ...

  3. JNI设置C++与java的结合(2)

    我们可以看到其中有四个函数声明, Java_完整类名_方法名, 完整类名包括了包名, 例如demo.Sample1是完整类名, 对应的这里就是demo_Sample1. 在注释中我们可以看到这样一个东 ...

  4. Android 自定义标题栏

    开发 Android APP 经常会用到自定义标题栏,而有多级页面的情况下还需要给自定义标题栏传递数据. 本文要点: 自定义标题填充不完整 自定义标题栏返回按钮的点击事件 一.代码 这里先介绍一下流程 ...

  5. GRUB与Linux系统修复(第二版)

    GRUB配置解析 配置文件保存在 /boot/grub/grub.conf[/boot分区最好应该单独划分出来] 软链接保存在 /etc/grub.conf 1.grub.conf文件分析 defau ...

  6. iOS中获取本地通讯录联系人以及汉字首字母排序

    iOS中获取手机通讯录中的联系人信息: /*** 加载本地联系人*/ - (void)loadLocalContacts { //新建一个通讯录类 ABAddressBookRef addressBo ...

  7. C语言删除字符串中重复的字符

    #include <stdio.h> #include <string.h> #define NR(x) sizeof(x)/sizeof(x[0]) int Del_char ...

  8. LeetCode(31)-Factorial Trailing Zeroes

    题目: Given an integer n, return the number of trailing zeroes in n!. Note: Your solution should be in ...

  9. nginx日志中添加请求的response日志

    换个新公司,做一些新鲜的事情,经过一天的琢磨,终于成功添加response日志 在nginx的日志中添加接口response的日志 由于此功能在nginx内置的功能中没有,需要安装第三方模块ngx_l ...

  10. 【React入门实例(运行于浏览器duan)】

    一.HTML模板 二.ReactDOM.render() ReactDOM.render是React的最基本方法,用于将模板转换为HTML语言,并插入指定的DOM节点. ReactReactDOM.r ...