搜索
您的当前位置:首页正文

手把手教你使用 Tabris.js 搭建的日记客户端 TuerA

来源:二三娱乐

前言:

从9月初开始到现在,我一直在寻找一个适合自己的,可以跨平台的开发APP的js框架。

之前有接触过Weex,React Native,Flutter,NativeScript,Appjs。但是或多或少都提不起我个人的兴趣。原因可能是我不太喜欢RN的书写方式,不太想写css或者去写declarative形式的UI,更加的不喜欢去写html。还有就是难以接受的复杂的开发环境以及高成本的安装方式,调试形式,和乱七八糟的插件文档,总之我一直没去开始尝试,很大一部分是个人的喜好原因。

我其实一直想着能有一款框架只需要编写javascript,就可以完成APP的开发,比如之前我一直在关注的nodeapp,我觉得这才是理想中我想要的js开发者形式的框架,我就是想在app里快乐的书写js,只有js。

可以看出我非常偏执的喜欢js,能拿js干的事绝对不要别的乱七八糟的东西来辅助,直到有一天无意看到了tabris.js,简单阅读了一下文档,我发现这玩意简直就是为了我这种怪物量身打造的。

本文涉及内容分为四个部分,tabris的介绍和一些使用心得,使用nodejs开发简单的API范例,以及代码迁移到码云后,管理代码和项目的一些体验感受。

本文非常适合个人开发者,或者认同js天下无敌的人阅读。

一开始接触的时候,我本来也想着是不是能够吃现成的。看看有没有前辈也用过这个框架开发了什么好东西。但是经过长时间的搜索,发现在知乎,国内技术社区谈到tabris.js的文章简直可以说基本没有。已知的是2016年底infoq上有过一篇展望前端发展的文章里提了一句,网易前端技术部在16年底某篇BLOG下,有提到且并不是专门介绍tabris.js的。所以tabris基本可以说没有什么二手资料可以让你学习的,我也希望我这篇文章能够帮助大家快速的了解tabris.js到底是什么,好在哪里,如何使用。

tabris.js完全不需要依赖webview,就可以直接运行javascript代码来进行纯UI的编码,和进行原生代码功能的调用,在Android上使用了J2V8作为JS引擎方案,在iOS上使用系统自带的JSCore来完成javascript代码的执行。

简单的了解了tabris.js的原理后,我们再来看一下tabris的几个我觉得比较关键的点。

1,tabris.js是完全开源免费的,使用BSD 3-clause License。

2,安装和开发方式非常简单,只需要本地有nodejs,因为开发是基于它们的developer app来的,所有的开发过程都是在真机进行的调试开发,本地也不需要下载庞大的SDK。

4,内置部分cordova插件,如摄像头调用,扫码,陀螺仪,消息提醒等。也支持内置的一些实用widget,比如collectionView,scrollView,input,text,image等等。也支持扩展自己的widget和cordova插件。

5,如果你愿意,你完全可以只用javascript来编写你的APP,编写过程是基于事件驱动的,并且所有的常用UI都可以直接以类的形式继承到新类里直接使用,也可以自己使用canvas绘制UI和开发游戏,内置了丰富的动画效果库,当然也可以自己自定义。

6,文档写的非常好,编写文档和SDK的同学明显就是javascript工程师出身,非常符合我的胃口,社区响应速度很快,我提过的2个issues都在24小时之内回复和处理,官方非常活跃,开发和提交速度比较频繁,而且是团队开发的形式。

tabris.js我上手基本就是几个小时的事,安装方法官方非常简单,就不叙述,我这里以我自己的APP为基础进行讲解。

首先开发之前可以先扫一遍每一个widget的文档,知道都能做什么。

目录结构比较清晰,安装完成后入口文件是src下的app.js,然后就没了,其他目录结构自己可以随意定制,根据官方的例子我也没看出什么套路,所以我也干脆自己设计了一套结构和代码维护方式,我这里就拿登录退出这个流程来简单讲一下:

代码真的非常好理解,我在启动时对登录态做一个初始化判断, 然后检查登录态,如果登录了就进行tabs的视图调用,如果没登录就调用登录界面。

这里和web开发不太一样的是没有路由的概念,和开发游戏有点类似,app中我理解都是场景的转换,所以每个场景我都使用一个class来表示,这样方便复用,调用以及销毁注销,每个调用后的场景都是一个独立的实例,然后不同的实例之间用事件进行关联。

可能一直做前端开发的同学在这里需要绕一下,如果之前就开发过app的人可能上手就非常快了。

判断是否登录和正常的web开发也不一样,首先在app里是没有session的概念的,也没cookie,所以在这里我选择localStorage来进行状态的保存,使用方法就和平时没两样,jwt是大家平时通用的token验证形式,如果本地有并且解析完token没有过期,则返回true,如果解析完过期或者本地没有jwt token,则是没登录状态,jwt-decode是一个npm上的纯js包,在tabris里是都是可以直接安装调用的,这里开始写成异步的了,是因为可能后期还要加入刷新token的机制,刷新需要异步访问远程API的。

上面是一个login的部分代码,首先引入tabris的widget,比如Button,ImageView等,然后定义我们的登录类,初始化的时候我们保存了一个Composite到实例中,Composite大家可以理解成是一个图层,里面可以随意放置组件,然后还可以通过对这个Composite进行过滤删选组件,非常方便管理UI比较复杂的地方。

destory方法是提供给别人调用进行组件销毁用的,dispose是删除并销毁,对应还有方法可以删除不销毁,方便之后复用的,可以参见widget类的文档。

下面这里是对登录按钮进行了select事件的处理,然后简单的进行一下校验,最后再用我们对fetch封装后的post方法进行api接口调用,成功后对jwt值进行保存,然后调用自身的destory方法,再初始化登录后的实例。

下面对外进行了constant的管理,对外暴露init和destory方法,其实这部分后期是可以再抽象出来一个base类的,这里就简单的给大家演示下。

退出部分的代码也非常的简单,清楚本地ls,对实例进行切换。因为一个app其实主要的场景可能没几个,如果有的话也是以树形的形式一级一级向下维护的关系,所以最顶层我这里就设置了登录和未登录2个状态。

因为篇幅有限,代码等完整开发完毕后我会开源,其中的坑当然也有,我下面简单的总结一下:

1,collectionView中的cell无法绑定独立的事件,所以如果不是纯列表展示,建议用scrollView+Composite的方式来进行自定义列表的渲染。

2,collectionView不指定高度,渲染时会有重叠bug,已经提交给官方。

3,按钮,图片,文本,控件等支持的css样式比较可怜,所以建议都使用背景图或者图层叠加的方式实现设计。

4,input支持的多行形式比较傻,如果要做像知乎一样的APP端发布器肯定需要自己扩展,目前的形式加滚动条都要和scrollView配合使用,非常的反人类,不过后期我都打算自学写widget了。

5,调试很方便,打包速度也比较快,等我上架了应用后会简单提炼一个build的中文教程吧,包括内置apple pay和google pay等。

6,对使用者的js抽象能力要求较高,虽然支持jsx,但是我肯定是不会用的。。而且其实本身对样式的定义,widget就给了classList这种属性支持汇总管理的,只不过我暂时还没用。

基本上tabris的使用和体验就如上,后边说一下另外一个老牌nodejs框架restify,一个专门用来编写API的类express框架。

会用express的人太多了,因为类express,所以就简单说一下哪里和express不太一样吧,开发方式基本一致,主要是增加了N多的中间件配合restfulAPI的开发,而且增加了一些频率,网段,IP等限制节流的方法,又引入了API版本管理以及常见的API错误和常见错误号等。

下面还是拿登录接口做一个例子:

对所有请求做一次jwt的验证,这里使用了一个jwt的express插件叫jwtAuth,我看了下源码,如果header里没有token,则对query进行验证要自己做,做完补充后,我再手动挂到req的decoded字段中的,这里就完成了对所有api的jwt验证。

然后数据库orm用的mongoose,定义好user的model之后,api是这样写的:

对post过来的用户密码进行校验和md5加密,然后对数据库匹配,最后返回用户的非敏感信息,登录过期时间,然后返回jwt给客户端保存。

基本上这就和上面第二部分登录对应上了,使用nodejs开发API真的是非常的简单。

后来我就体验了一下非常的不错,这里也给大家安利一下吧。

首先码云提供的免费版相比github就已经足够个人开发者和小team使用了,5人成员上限,5G容量,单文件最大100M,单项目最大1G,社区与邮件支持,我就用的企业免费版,说一下感受吧。

首先注册完成后,我添加了2个项目,一个是客户端项目一个是API项目,在时间线上每次登陆都可以看到我的提交动态,包括成员任务的处理和状态,然后是支持非常方便的从其他地方导入项目,比如我就是从gitlab导入的码云的,不过其实对于大家来说直接设置一个新origin的remote地址就可以了。

整个企业版的完整功能,免费版是完全都解锁的。

比如文档协作,还有任务管理,开发量统计等,非常适合小型敏捷迭代的项目。

感觉比github的issues好用很多,而且同样是可以跟踪到人,非常方便,还有时间统计。

统计的维度有代码提交次数,新增任务量,任务完成量等。当然因为项目只有我一个人,所以我大部分都是拿码云来当托管仓用的,没有太多看这些时间相关的管理任务,因为怎么搞都是我自己一个人。。

在代码管理方面,码云延续了 Git 的优点,并增加了分支保护的功能,和更细粒度的权限管控,让团队协作更安心。

在任务管理方面,更轻、更灵活,支持关联任务和多层子任务,同时也具有任务多类型功能,可以让企业用户方便地维护自己的自定义类型以及自定义状态。无论拿来做需求管理还是 Bug 跟踪,都能够轻松实现。并且任务(Issue)直接关联到项目、到分支,并与 Pull Request 相关联,项目 → 任务 → 代码 完全一体,让开发前所未有地流畅、便捷。

另外码云的全自动仓库快照功能,也同时为企业代码安全保驾护航,个人十分推荐,虽然我还没有使用全面,但是给我的感觉很靠谱。

总的来说,使用tabris.js和restfiy的初衷就是选对一个适合符合自己的开发习惯和感受的框架,文中我也说明了,如果大家喜欢tabris和restfiy的话可以和我一起学习交流。

更多细节欢迎查看项目源码,文档正在慢慢补充ing,谢谢收看。

Top