Ember 最佳实践

用 Go 写的发布系统前端用的是 ember 做的,之所以用 ember 是因为三年前用 ember 实现了一套做 CMS 的框架,ember-semantci-uiember-easy-orm,两个东东几乎涵盖了做 CMS 需要的方方面面:数据加载层、loading和消息管理、各种 ui、form 管理等等,其实这几年由于 react 和 vue 发展迅猛,基于 react 和 vue 的 cms 系统已经有不少了,比如 ant design 等,之所以还用 ember 有几个原因:

第一,我是个后端程序员对前端不是特别熟悉,从头开始学习 react 以及 vue 并且做能够做出非常复杂的应用而且可维护性也非常好,时间来不及。

第二,对于前端的东西,我其实很想做到方方面面都能控制到才行,由于之前用 ember 写过 ui 层和 model 层的组件,对数据加载、状态管理、消息管理、form 管理等已经形成了非常成熟的方案,于是就很懒的在替换了。

当然如果有着非常成熟的 react 之流的现成方案能用,还是用 react 吧,阿里最近出的 fusion 就很不错。

先简单聊一下 ember

Ember 这个框架非常的复杂,东西很多,但是文档写的又比较抽象,不太好懂,新版本比之前简化了太多东西,但是还是比较复杂,由于 ember 已经规定好了 route,template,component,controller等应该怎么写,所以一旦懂了之后,基本上就是按部就班实现,而且 ember 自身的规范可以说就是团队的规范,不需要再去另寻最佳实践了。

Ember 周边的 plugin 应该没有 react 多,但是由于 Ember 是基于 jQuery 的,所以 jQuery 的插件基本都能用,这是一个优势。

框架和库

从头开发一个完整的 APP 费时费力,ember 有很多第三方的 plugin 非常好用,提供了一系列的功能

借助这些第三方框架能够非常快速的实现各种功能

loading 和网络状态响应

Ember 支持在 route 层的 model 解析前后 beforeModel 和 afterModel 挂载 loading hook,也支持全局 route 和各个子 route 挂载自定义 loading,可以说是毫不费力就就可以实现各种 loading,但是一个体验真正好用的 loading 需要能够覆盖数据加载的各个阶段:准备网络请求,发起网络请求,等待响应,解析结果等等,loading 和 加载提示几乎是无缝结合的,loading 结束的时候提示应该根据当前请求的状态立马出来,这样才能给用户以平滑的体验,让整个 APP 显示出活的状态。

为此在 ember-easy-orm 通过暴露 ajax 请求阶段的各种 hook 来实现 loading 的 start 和 stop 以及消息的及时响应。

记录问题解决的方案

Ember 是大而全的框架,而且受众比较小,一旦出现问题真的就是考验解决问题的能力,因此一旦解决了某个问题,最好立马记录下来,以防下次的时候遗忘。

我在 https://github.com/wecatch/emberjs-guide/ 写了一个 guide 用来记录 ember 开发的方方面面,感兴趣的可以参考一下。

理解 component 的生命周期

维护性好的 ember APP 大量的逻辑实现都是封装在 component 中,因此理解 component 的整个生命周期并且能在各个阶段正确实现业务逻辑是 component 可维护性高的一个重要前提。

官方 guide 对 component lifecycle 有详细说明 https://guides.emberjs.com/release/components/the-component-lifecycle/

做好 model 状态管理

如果 APP form 很多,非常容易变得混乱,所以最好能对每个 form 都显示定义,并且通过 model 和 form 一一映射起来,需要变更更改 model 和 对应的 form 文件即可。

让后端 APP 支持 ember 的路由

Ember 的路由实现是在前端做的,也就是说所有路由规则是 JavaScript 做的拦截,后端应用并没有定义这些路由,如果后端发生 404 需要保证 404 的页面渲染能进入 ember APP 的页面,这样才能触发前端的路由,所以不论你的后端是 Python 还是 Go 都需要做好 404 状态的渲染。

三月沙 wechat
扫描关注 wecatch 的公众号