Cans

Newbee 内部中后台前端应用平台

Newbee 团队内部前端应用程序开发现状

  • 技术栈混乱
  • 构建工具/流程不统一
  • 大部分为内部使用的中后台应用
  • 业务与业务间在编写重复代码（页面布局、业务组件）
  • 运行时的通用逻辑不统一（时区处理、打点操作、i18n、错误处理）
  • 即使只是一个小功能模块，都需要很长开发链条

Cans 的理念

  • 统一前端技术栈
  • 减少（中后台）前端应用开发成本
  • 低成本跨业务开发
  • 重复的工作让平台去做
  • 成为 Newbee 团队内部大部分中后台应用的平台，「小程序」平台
  • 再小的应用都轻松获得一整套平台能力

生态

  • 每个用户都能在 Cans 上注册应用
  • 有统一的应用程序 Marketplace. 用户可以选择添加到自己的工作台中
  • 应用分为私有应用、公开应用
    • 私有应用只能由应用管理员手动指定应用能被哪些用户进入，并且不会出现在 Marketplace. 
    • 公开应用可以被任何人添加到工作台并使用

平台能力

  • BUC 用户体系
  • 用户配置，如国家线、时区
  • 统一的消息（报错）展示

运行时能力

  • 基于 jsonrpc (2.0) 的前后端通讯
    • ​在使用 sdk 提供的 RPC 请求方法时，sdk 会帮你处理好错误的收集（Sentry）、提示，开发者无须关心。
  • 内部业务接口的统一封闭，如（WA）统计打点、UAE 性能打点、UAE CDN (图片云) 上传等等
  • 基于 ant.design 的，高复用价值的业务组件
// app/rpc/user

module.exports = app => {
  return class User extends app.RPC {
    * list ({ page, pageSize }) {
      const users = yield api.user.list(page, pageSize)
      yield this.success(users)
    }
  }
}

Server side

Client side

import { rpc } from 'cans'

(async () => {
  const users = rpc.invoke('user.list', { page: 1, pageSize: 20 })
  // do sth...
})()

本地开发工具

  • 提供开发者无须干预的开发环境，一条命令即可启动预览环境 （`npm start`）
    • React Hot Reload
  • 提供项目初始的脚手架
  • 一条命令（`npm run deploy`）即可把前端程序部署到平台上，平台随时切换前端包版本（类似 UAE）

// Your code

npm start

http://localhost:1024

http://foo.cans.com

npm run deploy

运营数据能力

  • PV/UV/受访页 数据统计
  • 用户画像（性别、部门、国家线、浏览器、操作系统等）
  • 自定义数据统计（主动的 api, 被动的 component 埋点）
  • 数据可视化

目标

  • 接入信息流新增的运营需求
  • 接入推送后台
  • 以上两个系统都接入后，接入所有 Newbee 内部的中后台应用
  • 服务好 Newbee 内部后，推广到整个移动事业群

Cans

By Randy Lu

Made with Slides.com

Cans

  • 1,488

More from Randy Lu