专题出品人: 于秋

美团点评 前端技术专家

专题:大前端(上午场)

随着大前端概念的升温,在了解现有的前端技术发展趋势的同时,在工程层面如何更好地攻城略地成为新的挑战,技术选型、性能优化等各种层出不穷的问题也成为了大家关注的焦点。

本专题下的议题

UI2CODE 图片识别自动生成代码
项振辉 闲鱼 前端专家
所属专题:大前端(上午场)

课程概要

案例背景简介:
基于 图片 如何精确识别我们定义的 基础UI控件、自定义UI控件、业务控件,并提高识别的准确率,并准确的提取出 对应控件的基础属性, 来保证代码还原的精确实现, 另外 关于 如何 基于静态的图片生成动态的flex 的精确布局,也是比较大的挑战。

解决思路/成功要点:
引入 tensflow 来建立对应的组件分类,另外 也引入了 一些图像理解的技术 来帮助识别并提取对应的属性,另外我们还实现了 基于 基础的组件信息和关系 去识别 该组件的语义信息,和后端的 VIEWMODEL 进行打通,在传统的前端基础的工程能力基础上 拓展了新的机器学习的思路和想法。

成果:
目前 我们基于精确度比较高的 图片 已经能比较好的产出对应的 UI还原界面, 目前我们支持了 weex和flutter和淘宝小程序 3种对应的实现,已经在闲鱼自己目前的工作环境里 对效率产生了比较大的提升。

听众收益

1. 拓宽下 传统前端的视角,了解下 机器学习和传统的开发技术 是否能有结合的部分
2. 对技术架构和业务架构在一个相对聚合的业务本身如何做取舍
3. 相对简单的了解下机器学习能干什么,和一些基本的工作方式

Serverless 带给 Node.js 开发模式的改变
龙佳文 美团 金融服务平台 技术专家
所属专题:大前端(上午场)

课程概要

【案例背景介绍】
团队大量使用 Node.js 开发前后端分离项目,包括服务端渲染、数据聚合处理、graphQL等场景 当前使用 Node.js 遇到的挑战 服务端编程成本,相对于浏览器端的 JavaScript 编程,服务端对开发者能力有更高的要求 - 需要对 Node.js 运行机制有一定了解 - 需要对引入的框架、SDK 组合的复杂系统有足够了解 服务运维成本,对于前端开发者,服务端运维更加是陌生的领域 - 引入 Node.js 后增加服务链路长度 - Node.js 服务的运维 - 服务器资源和基础运维 其中 Node.js 和系统运会维占用不少精力,并不是所有前端团队成员都有足够丰富服务端编程和运维经验,所以有能够隔离底层系统的维护成本、微服务化和轻量化的项目架构是我们一直期望的。

【解决思路/成功要点】
简单,统一 Nodejs 应用开发、部署、运维中的基础过程,降低 Nodejs 应用非开发成本 高效,通过动态分发、分布式集群处理的机制,实现按需弹性运行,减少占用服务器资源 函数执行,worker 基于 Node.js 的 thread_worker/ child_process 的实现线程/进程隔离的安全业务函数执行环境。 分布式,通过抽象 API Gateway、Worker 模块,API Gateway 接收请求,将请求上下文分发到相应 Worker 执行函数调用,实现动态、按需调用。 优化点: 冷启动问题 根据历史调用记录,对高频函数制定了函数的实例保留机制,尽可能让热点函数访问都来自热启动 函数体积优化 针对 Node.js 有好用但黑洞般的 node_modules 的实际场景,我们制定了在通过基础依赖复用机制来减少了函数包的体积,根据现有几种类型项目的制定基础依赖集合,在构建函数中排除基础依赖的打包,通过这个机制,函数包体积平均下降 70%,大多项目在 5 MB 以内。 函数监控 通过 hook node 运行时的相关原生 binding,实现 node 应用级别的数据指标采集,对函数的执行时长、执行异常、CPU 时间、内存占用、网络带宽、磁盘读写等实现了函数粒度的监控

【成果】
目前托管团队内多数的 node 项目,稳定性 99.99,具备异地多机房容灾能力。极大提升了项目开发效率,降低运维成本;节省了 70% VM/容器资源。

听众收益

1. 老项目如何迁移到 Serverless 中以及迁移过程中的常见问题
2. Node.js 项目如何更高效运行在 Serverless 架构中的几个优化动作
3. 我们在轻量化 Serverless 方案在优化冷启动、函数包大小、Node.js 函数状态监控的实现思路

小程序在同程艺龙的性能优化实践
牛提罚 同程艺龙 机票事业部 资深架构师
所属专题:大前端(上午场)

课程概要

【案例背景】
随着小程序不断发展,对我们产品前端的用户体验和性能要求越来越高。如何减少包大小?如何减少页面打开耗时?如何快速定位用户异常,帮助用户快速解决问题?如何不断提高小程序的开发质量和效率?等问题,都给我们前端带来很多的挑战,在实践中总结了一些经验。

【解决思路/成功要点】
结合微信小程序的提供的特性,深入理解小程序度层机制和原理,快速应用相关技术,如合理分包预加载;包大小严格控制、能小则小,减少包下载耗时,减少用户流量;底层基础框架统一,同时又要确保业务层根据业务特性能灵活应用和再次封装;充分利用组件化思想,提高代码复用性,减少代码大小;不断优化页面代码及前后端逻辑,提高页面渲染速度;加强小程序异常监控,及时进行预警,同时做好灾备降级方案,快速进行解决处理等。

【成果】
打开速度明显提升,异常数据持续下降,代码质量和效率进一步得到提升。随着业务的不断迭代,针对性能需要我们持续加强提升。

听众收益

1.小程序在项目中性能提升的实践经验,如合理分包预加载;底层框架统一;
2.组件化思想应用;
3.性能监控及预警;
4.灾备方案等的实践过程中的经验。

美团点评前端技术专家,曾先后负责部门基础技术服务和整个收单部门前端团队,9年工作经验,对前端工程化以及架构有自己独特的认识。乐于尝试各种新技术,结合业务场景,探索落地方案。业余时间喜欢在知乎上写写文章,潜水看看海底世界。

专题:大前端(上午场)

随着大前端概念的升温,在了解现有的前端技术发展趋势的同时,在工程层面如何更好地攻城略地成为新的挑战,技术选型、性能优化等各种层出不穷的问题也成为了大家关注的焦点。

其他相关专题

CopyRight © 2008-2019 Msup & 高可用架构