社区/文章分享/基于云开发的SaaS应用前端架构设计优化

基于云开发的SaaS应用前端架构设计优化

微盟小程序 SaaS 业务演进

小程序 SaaS 是什么?简单来说,就是微盟基于底层的技术能力,为企业提供不同场景下的智慧商业解决方案,让传统行业的客户不需要任何技术的投入,也能享受智能互联的便利。

以某零售客户为例,他仅仅只需要在微盟新云平台上创建店铺,选用模板页面或者进行一些可视化搭建,就可以快速生成一个在 C 端消费者的微信中显示的微信或小程序商城。C 端用户在小程序中可以浏览店铺、查看商品、下单购买、申请会员等,形成一个交易闭环。

自 2013 年成立之初,微盟在构建 SaaS 服务方面便投入了很多资源,推出了适用于不同行业的解决方案,随着业务的深入发展,越来越多的大客户、品牌客户入驻,客户的需求变得更加多样,一方面,体现在前端的展现形式和消费者使用体验上;另一方面客户需要智能的后台管理,提升运营效率。

虽然,各行各业的客户都有着不同的需求,但是我们发现在技术底层上有很多可以共享的能力。因此,基于在 SaaS 服务上积累的经验和新技术,2017 年微盟对旗下产品架构系统进行全新技术变革和战略升级,深化微盟软件产品的全行业平台能力,统一旗下用户、商户、服务商系统,构建线上线下融合、全渠道营销、开放互通的智慧商业服务生态体系。

微盟小程序 SaaS 在前端应用上的挑战

SaaS 前端应用,具有流量大且难预测、极致追求速度体验、自定义模板和功能需求强、多渠道等特点。微盟丰富的产品矩阵,如何能高效整合前端应用,快速满足客户的多元需求,提升小程序运行效率,成为微盟现阶段面对的挑战。

细分下来,在前端上,面临着 3 类挑战:

第一类挑战在 C 端,在确保高峰期流量稳定的同时,缩短页面加载时长,进一步优化用户体验。

第二类挑战在 B 端,B 端客户有着不同的需求,比如小程序有近 3000 多个页面,我们需要提升页面的复用率。

第三类挑战是多渠道,随着去中心平台的进一步发展,客户也将在不同的渠道展开商业布局,如何确保微盟小程序在不同的平台和渠道的适配性,提高效率,这也是微盟面临的重要挑战。

微盟 SaaS 前端应用优化实践

面对上面的问题,微盟是如何解决的呢?微盟在技术栈的选择上,侧重在稳定、成本、便捷、安全、服务等五个方面。基于此,微盟选择了微信和腾讯云联合推出的小程序·云开发。

1)基于云开发的架构优化

自云开发被集成于微盟 SaaS 系统中后,微盟的小程序 SaaS 接入微信的流程得到简化,可以免鉴权直接调用微信开发接口,并且实现云端解密。相比传统开发模式,“小程序·云开发”在登陆流程的终端性能提升 50%以上,效果明显。

第一是微信小程序的接口调用流程得到了优化。

举个再具体一点的例子,大家做微信开发很常见就是静默授权。

我们做了一个测试,使用了云开发中的云函数和没使用的,在性能上有 3 倍的差别。因为云开发的云函数和微信是一个整体,我可以把它合在一起看,他们只需要跟我们的后端进行一次交互就可以达到我们的目标了。但在之前,我们的微信客户端到我们的服务器,再到腾讯微信的服务器,有三次公网请求。我们通过接口减少和链路优化极大地减少这方面的性能损耗,所以终端的体验,从 1.15 秒直接降到 421 毫秒。

另外用户授权,我们也通过结合云开发中的云函数来做这个事情。从 1.17 秒降到 820 毫秒。

第二是云开发享有微信私有协议,能够帮助微盟的系统运营更加稳定。比如,基于云函数开发营销活动、节日大促等前端应用,技术人员可以专注于业务逻辑,不用操心运维和扩容方案,研发效率得到极大的提升。

再有,云开发提供更友好的开发体验,同时也支持微信第三方平台,这帮助微盟研发团队提升研发效率。

最后,是更安全。利用云函数,等于在微盟已有的安全防护体系外再进一步叠加腾讯云和微信的安全保障机制,微盟客户的小程序安全性将再提高一个台阶。

2)基于微盟微前端 Kraken 的优化

微盟 SaaS 软件目前给超过 300 万商户提供服务,除了对稳定性要求非常高之外,提高客户的操作效率也至关重要。因此,微盟内部对微前端进行升级和优化,以提高微盟的整体研发效率以及提升 B 端商户的操作体验,这个项目我们取名为 Kraken。

举个简单的例子,我们 B 端客户在新云平台做后端搭建的时候,往往需要做不同的创建动作,完成页面创建。我们通过微前端的建构帮助客户在一个页面停留时就能完成不同的操作需求,提升创建的流畅感,保证良好使用体验的同时,提高效率。具体来说,做一套微前端的架构有一下几个好处:

  • 无刷新,不同子应用之间路由跳转不需要 刷新整个页面,极大提高用户体;
  • 兼容多框架,各子应用不限制框架 ;
  • 独立部署,各子应用独立发布和部署,能适应不同团队,快速发布,快速回滚;
  • 海量页面,支持上千级别;
  • 页面的加载与渲染,无限扩容;
  • 快速响应,开发更灵活,能快速响应产品需求的迭代和变化。

3)监控优化

微盟开发了一套 APM 系统,我们称之为 HOUND,它能将消费前端与后台的数据进行融合,同时还能将不同端(小程序、H5)的数据结合在一起,实时监控。比如,我们能够准确、快速的查询到某个页面加载慢的原因以及给出解决办法。

通过 APM 系统,我们提高了研发效率,提升了项目质量。

未来,微盟在小程序的重心,将充分利用“小程序·云开发”的技术优势,把合适的前端应用迁移至云开发的云函数中,进一步提升微盟小程序产品的体验和服务质量。

分享嘉宾:微盟 CTO 黄骏伟

关于微盟:微盟成立于 2013 年,是中国领军的企业云端商业及营销解决方案提供商,致力于通过产品和服务,助力企业向数字化转型,通过科技驱动商业革新,让商业变得更智慧。

产品介绍

云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为开发者提供高可用、自动弹性扩缩的后端云服务,包含计算、存储、托管等 serverless 化能力,可用于云端一体化开发多种端应用(小程序,公众号,Web 应用,Flutter 客户端等),帮助开发者统一构建和管理后端服务和云资源,避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
开通云开发:https://console.cloud.tencent.com/tcb?tdl_anchor=techsite
产品文档:https://cloud.tencent.com/product/tcb?from=12763
技术文档:https://cloudbase.net?from=10004
技术交流加 Q 群:601134960
最新资讯关注微信公众号【腾讯云云开发】