绑定完请刷新页面
取消
刷新

分享好友

×
取消 复制
基于云开发模式下的多端电商应用
2019-12-12 16:04:08

本文根据 钟鑫「2019 腾讯云 TECHO 开发者大会」分享的《基于云开发模式下的多端电商应用》讲稿整理而成。

自我介绍

大家好,我叫钟鑫,来自京东凹凸实验室,是 Taro 框架的的核心开发成员,同时也曾负责京东购物小程序首页与搜索的开发。

今天我要讲的是 基于云开发模式下的多端电商应用

我有一个朋友跟我说,他在创业公司,他们往往会开辟不同的项目,做不同端的发布,非常的繁琐,希望在低成本,尽量轻便的模式,去做一个项目的市场试水迭代。

那现在这个时候会出现什么问题呢?

零开始,多平台

零开始是什么?

在创业型的公司中,没有在大公司内的一些成熟体系让你直接接入。而是需要自己一步一步的去慢慢完善。在搭建一个完整的应用时,后台部署与运维都是一个让人脑壳痛的问题。

还有就是前端与后端开发直接的“摩擦”。 现在基本上都是一个前后端分离的开发模式,毕竟术业有专攻。

但同时也导致了一些问题。

前后端的一些职责划分, 沟通方式,以及接口的联调。 往往有一些临界的位置,前端可以做,后端也能做。这时候就很容易出现一些摩擦,然后沟通的时间就需要增多。 接口的联调这点我相信在座的应该都有体会,抛开环境复杂因素来说,就仅看数据与展示是否正常,异常临界点处理等等的问题,就需要一些时间。 你可能会说看接口文档,但并不是每一个开发都能做到把文档做到细致,更多的情况下是在沟通。

说完「零开始」,我们来看看「多平台」

如今的前端,仅仅开发的平台就包括 H5 ,各大小程序,比如:微信小程序、百度小程序、支付宝、QQ小程序、快应用等等。 除此之外,有的还会要求需要一点原生开发的知识,去开发 App。
这么多平台的开发,研发成本就上去了,同时不同的平台,代码也不一样,如果有新版本迭代,那每个地方都需要进行改动,维护起来比较困难。

那问题来了,我们如何去专注于业务本身,以及更加有效地维护各平台的代码?

一开始我说,一些创业型公司是希望在低成本,尽量轻便的模式,去做一个项目的市场试水迭代。

何为低成本

部署与运维,监控与告警,我们可以交由云开发去处理。

云开发为开发者提供完整的原生云端支持和微信服务支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。

如图所示,云开发更加的高效,只需要专注于业务的开发,而传统的开发除去业务,还有其他的事情需要处理,开发的效率就降低了。

云开发也提供了一定免费额度让我们使用,对比我们传统云主机的部署,减少了人力物力的投入。

除此之外还可以借助云开发的生态与底层资源的专业支持。

我们来对比一下传统开发模式和云开发模式:

在传统模式下,买好服务器配置环境这一步,就需要耗费一定时间,而云开发直接创建一个函数即可。

重要的是,云开发,可以使用 JavaScript 书写。

在这样的情况下,一个前端工程师,也可以变成一个 "全栈工程师"。

何为轻模式?

现在流行构建跨端应用,跨端应用就是希望用一套代码,通过某种方式,去适配到不同端都可以运行的代码。 如:H5、小程序、原生app 等等。

市面上现在很多的多端开发框架,如 Taro, Omi, uni-app, mpvue, wepy。

针对团队偏 React 技术栈的来说,用 Taro 是合适不过的了。

Taro 是什么? Taro 是多端统一开发框架

  • 语法风格
  • 多端运行
  • 组件化
  • *cript
  • 开发体验
  • 现代化的开发流程

那现在小程序以及 H5 已经成为一个项目的 "标配",怎样利用云开发与 Taro 进行一个多端项目开发呢?

以 「京喜」 为例 ( Tips: 京喜为京东旗下社交电商平台,点击 微信 - 发现 - 购物,即刻体验「京喜」~)

目前「京喜」是利用 Taro 开发,生成了 微信小程序端,H5 端,RN 端。这里要说明下, 图中的数据,是利用本地的云开发进行的 mock 数据,正式环境中不是。

要用云开发,首先我们需要创建一下,进入微信开发者工具,我们开通一下,就可以拥有。

云开发的控制台如图所示,可以显示你当前的免费资源额度用量,数据存储信息,以及你的相关后端业务逻辑的云函数。

现在的云开发,也提供了多端环境。

如图所示,只需要引入相关的SDK,即可以拥有云开发的多端能力。

使用 Taro 创建项目,也很简单。

全局安装一下 cli 工具,使用 taro init 。

npm i @tarojs/cli -g
taro init myApp
复制代码

就可以初始化一个 Taro 项目。接下来就是愉快的编写代码啦。

我们在项目全局的 app.js 入口文件,初始化云开发,只需要调用 Taro.cloud.init,传入云开发的环境ID 即可。 剩下的就是熟悉的 React 语法开发,如图所示。 之后我们需要任何调用的云开发的地方,就可以直接调用相关云函数了。

以上,借助云开发提供的一站式的开发服务,Taro 框架赋予的多端开发特性。我们可以非常迅速的开发出完善的多端应用。

One More Thing

后,One More Thing.

下一代的跨端解决方案

在 Taro 开源的一年多以来,一直保持超高的迭代速度,Taro 的整体架构设计没有发生太大变化,这让 Taro 在这个时刻在变化的时代稍显佛系,且对于一个时刻想要突破自己的技术团队来说,常规性质的维护工作,显然无法安抚我们躁动的心,所以我们决定启动一系列的颠覆式重构设计

下一代的 Taro,除了支持你用 React 语法去进行开发,也将支持 Vue ,Angular 以及其他你想用的框架。

敬请期待,谢谢大家。


欢迎关注凹凸实验室博客:aotu.io

或者关注凹凸实验室公众号(AOTULabs),不定时推送文章:

分享好友

分享这个小栈给你的朋友们,一起进步吧。

代码实验室
创建时间:2020-06-10 13:46:12
小栈里面各种代码实验的产物。看看各种内容放一起有什么反应吧
展开
订阅须知

• 所有用户可根据关注领域订阅专区或所有专区

• 付费订阅:虚拟交易,一经交易不退款;若特殊情况,可3日内客服咨询

• 专区发布评论属默认订阅所评论专区(除付费小栈外)

栈主、嘉宾

查看更多
  • emanda
    栈主

小栈成员

查看更多
  • 嗷嗷嗷安安
戳我,来吐槽~