tabris.js+restify+码云打造个人APP

从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

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

mobile app development in JavaScript 官方的首页介绍说的非常明白，tabris.js是一款跨平台的移动端app开发框架，兼容ios，android和win phone。

首先它并不对你的javascript代码进行编译转换成native code，而是在app里直接执行你的javascript code，所以是支持允许热更新技术的 Patching a Tabris.js App。

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。

3，支持模块化开发，支持远程和本地编译，支持cordova插件（没有DOM的），支持本地的node_modules包（纯javascript的），支持canvas，支持fetch，xmlhttprequest，localStorage，fs，基本的ES6语法环境，支持ts还有jsx，支持对widget进行selector，总之非常的符合js程序员的思维。

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

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

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

二，tabris.js开发体验

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

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

然后可以跑几个他们官方的eclipsesource/tabris-js 完整例子和eclipsesource/tabris-js 代码片段，不过就我个人而言，这些demo都不是一个完整的APP开发案例，真的只是demo，所以下面我还是基于我自己实战开发的兔耳日记，来简单的讲解一下整个开发体验：

目录结构比较清晰，安装完成后入口文件是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类的文档。

init方法里就开始进行组件的绘制过程了，看起来非常的熟悉这不就是面向DOM编程咩？new 一个组件然后定义它的样式和属性最后再appendTo到父组件里，如果想实现居中X轴，Y轴居中偏移120，就定义centerX，centerY就可以了，非常方便。如果使用过YUI的同学会非常熟悉这种形式。如果需要给组件绑定事件，直接on就可以了，支持的事件非常丰富：Gesture and Touch Events

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

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

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

下面可以给大家看一个DEMO视频：

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

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这种属性支持汇总管理的，只不过我暂时还没用。

基本上缺陷比较少，如果做纯展示类的项目，开发速度扛扛的，当然如果很多空间都需要定制化开发，那么还是需要掌握native开发的，但是纯UI层面的开发就完全不必了，这里的layout方式和web也不太一样，参见：Layout - Tabris.js Documentation 个人来说感觉比web布局方便多了。。因为全部都是基于相对和视图位置来布局的，说实话我很烦浮动那种布局方式，也可能是我好久没写css了，我很喜欢目前这种layout方式。

三，使用restify开发API

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

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

所以大家如果对express比较熟悉，那么选择restfiy开发纯API服务还是比较靠谱的，上手也非常快，官方文档 Restify 。

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

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

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

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

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

四，使用码云管理完整的开发项目

上面介绍了开发APP客户端和服务端的一些代码片段，最后说一下项目管理和代码管理部分，因为github要收费，gitlab的速度我有点无法接受，正好有一次机缘巧合，朋友推荐我用一下这个国内的代码托管服务还不错，叫码云 码云 | 开源中国基于Git和SVN的代码托管和研发协作平台 。

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

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

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

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

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

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

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

最后是仓库的界面，用习惯了github切换到码云也没有什么特别的阻碍，设置好ssh公钥就ok了，而且码云也有对应的教程，码云平台帮助文档_V1.2

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

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

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

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

码云的项目地址：https://gitee.com/terj/tuerAPP

https://gitee.com/terj/tuerAPI

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