北京网站定制价格表,怎样临沂网站建设,杭州百度公司在哪里,什么是门户网站简介#xff1a; 大前端团队如何选型技术#xff1f;如何快速上手#xff1f;如何高效协同#xff1f;让我们看看快成科技如何解决这一问题。 导言 从 2017 年开始#xff0c;GMTC“移动技术大会”就更名为“大前端技术大会”。发展至今#xff0c;混合开发、原生开发、前…简介 大前端团队如何选型技术如何快速上手如何高效协同让我们看看快成科技如何解决这一问题。 导言 从 2017 年开始GMTC“移动技术大会”就更名为“大前端技术大会”。发展至今混合开发、原生开发、前端开发等概念正在深度融合组成“大前端”团队。 大前端团队如何选型技术如何快速上手如何高效协同让我们看看快成科技如何解决这一问题。 缘起两地三团队
快成科技是网络货运领域的领军科技企业领域排名市场前三平台有 3w 大宗商品货主将货单发布到平台由 60w 的卡车司机接单承运每年产生 120亿 的运费交易额。 以司机端为例需要承载从发单抢单到从进出场管理从在途路径监控到金融白条加油加气等一系列相互强关联、流程链条长的业务。这些任务由两地三个研发团队共同分工协作完成。 在 7*24 小时不间断的客户服务和每月 2-3 次发版的高度迭代中技术框架瓶颈逐渐凸显具体包括
在系统框架方面初始框架是原生 AppHTML5传统 web 存在启动白屏和性能响应不流畅大大降低了用户体验在发版周期方面研发部门多产品链条长部分企业需要更多的个性定制化服务导致发版期待周期不一致频繁的发包更新不仅降低了运营效率也给客户带来了频繁更新的困扰在体验一致性方面原生开发依赖系统框架因为原生特性不同而导致各厂商多渠道平台中差异化凸显多平台性能、体验差别较大在多部门协作方面常用开发语言、前端 JavaScript 框架等不尽相同不能及时根据需求张弛和上线 DDL 来灵活调配技术人员协作开发。在快成科技业务持续高速发展的背景下优秀的技术架构是“提质增效”的保障系统重构势在必行。快成的小伙伴们开始寻觅优秀的架构解决场景问题。 选型四维度
快成小伙伴针对发现的问题讨论出四个选型维度
框架成熟度简单来说就是这个新技术是否靠谱百亿的业务压力没有太多的试错空间迁移成本如果想得到新技术带来的收益需要我们付出什么代价例如新技术的学习成本、原来架构的改造成本等社区氛围主要是看跟进这个技术的人够不够多、文档资料是否丰富、遇到问题能否得到帮助等考量基础上兼顾性能、跨平台和动态性。定好技术选型考量目标之后团队对常见的跨平台方案诸如 React Native、Weex、Flutter 和小程序进行了一系列的调研以及 Demo 制作横向比较如下 技术选型 调研结果 React Native 和 Weex 启动时间慢、帧率不如原生迁移成本较大开发者需封装一层较重的中间层对研发人员要求较高。 Flutter 性能和效率至上但是动态化能力非常有限。 小程序 本身并非一种跨平台开发方案无法利用自身 app 打开更看重渠道优势。 正在进入技术选型困境的时候快成物流科技偶然接触到了源自支付宝技术框架的mPaaS通过使用 mPaaS 小程序容器整合 mPaaS 框架、离线包和复用 h5 插件依托于性能强劲的 web 渲染引擎完美符合了我们对技术选型的期望与要求。 动手试试看
选定技术选型之后在重构初期针对项目工程建立以及划分上我们同事之间进行了一场激烈的头脑风暴最终选定了在多部门协作前提下进行轻量组件化并行开发多个小程序并进行动态下发的方案。 快成团队从协同、技术等多角度进行框架的逐步导入。 如需了解完整内容详情欢迎观看 CodeHub#5 全程回放 1. 多团队协同 2. 真实场景测试
真机预览与调试问题首先要设置好白名单设置方式可参考文档然后在原生端根据文档进行相应的配置和代码书写最后需要注意的是 IDE 生成的二维码需要使用我们 App 的扫码能力扫描可接入 mPaaS 的扫码组件用支付宝扫一扫是打不开的。
ScanService service LauncherApplicationAgent.getInstance().getMicroApplicationContext().findServiceByInterface(ScanService.class.getName());
ScanRequest scanRequest new ScanRequest();
scanRequest.setScanType(ScanRequest.ScanType.QRCODE);
service.scan(this, scanRequest, new ScanCallback() {Overridepublic void onScanResult(boolean success, Intent result) {if (result null || !success) {showScanError();return;}Uri uri result.getData();if (uri null) {showScanError();return;}// 启动预览或调试小程序第二个参数为小程序启动参数MPTinyHelper.getInstance().launchIdeQRCode(uri, new Bundle());}
}); 3. 核心问题解决
在同一小程序不同页面跳转传参的时候我们遇到了大参数传递被截断的问题。 经过分析是小程序对路由跳转 API 进行了参数携带长度的限制后来我们选择使用缓存 my.setStorage 来进行大批量参数的存取使用这里需要注意的是同一小程序缓存上限为 10MB在合适的地方使用 my.clearStorage 清除缓存尤为重要。 4. 优雅的交互提升
在 UI 开发上我们希望小程序页面更接近于原生所以我们进行了小程序的自定义导航栏的开发这部分是需要原生端来实现的建议下载官方 Demo 配合文档来进行开发。 我们还遇到过一个令人印象比较深刻的 UI 问题在 iOS 设备上进行表单类多 input 组件页面开发时会出现输入错行的情况 通过查阅文档发现这是个兼容性问题对于需要启动键盘的组件如 input、textarea 等目前默认使用的是原生键盘。 如果键盘和组件的交互存在异常可在组件中添加 enableNative{{false}} 属性即可恢复到使用 WKWebview 的键盘。 同时由于使用的是系统键盘也就不能使用 mPaaS 提供的数字键盘等键盘相关目前不再专门适配。 未来可期 使用 mPaaS 小程序容器下的「快成司机」界面预览 随着技术的不断演进和升级看似开发变得越来越简单便捷减少了重复无意义的工作实际反而特别考验开发人员分析定位解决问题的能力创新能力和学习能力。 但目前 mPaaS 小程序对比支付宝小程序还是存在一定的差距在兼容性和 H5 框架上还存在一些小问题也希望 mPaaS 及小程序框架能不断演进未来可期
原文链接
本文为阿里云原创内容未经允许不得转载。
