前端技术分享大纲
2023-09-20 18:03:04 0 举报AI智能生成
前端技术分享大纲
作者其他创作
大纲/内容
开场
主持人开场
介绍本次分享主题及分享人
本次分享的目的
了解其他前端项目架构、研发流程，对比是否能可以学习借鉴或者给予该项目提升的好的意见或建议
可以对现在项目的难点的解决方案给出更好的解决方案
百花项目所产出的组件化、服务化能力是否可以复用，减少重复造轮子
百花项目以比较简单的方式讲解一个前端架构的基本思想，希望通过本次分享帮助大家更好的设计前端架构
新人介绍
刘传明自我介绍
骆彬彬自我介绍
百花前端分享
项目背景介绍
随着5G，5.5G的落地和普及，视屏类应用应用的场景越来越多，为减少各个业务投入探索成本，提供通用视频级数字人形象能力
展示应用效果图，3张核心页面图即可
根据业务架构图，讲解业务架构现状
百花本身就是一个平台，同时也会作为saas化产品供给三方使用
介绍提供了一整套带接口的组件能力
介绍抽象封装了底层能力
简单介绍自定义素材-noCode平台
前端架构解析
需求分析
针对业务的特点（平台化、saas化），相应做好技术选型以保证业务的实现和拓展
遵循集团和OBU的技术规范，选择vue+element-ui的前端框架
前后端分离项目配合集团质效平台提供的ipipeline确定以nginx作为webService
为最大化提高代码复用率，减少维护成本，封装视频编辑器、形象管理等业务自定义组件，同时供给百花平台和其他项目接入使用
这里增加互动：针对开放接口统一封装了@baihua/haihua-http，讨论接口和组件绑定在一起还是拆开哪个更好？
详细讲解百花前端现架构
端：浏览器
服务层：nginx
视图层
业务模块
自定义开放组件
Vue Router
Vuex
UI组件库
网络层
底层库：axios
封装@baohua/baihua-http
脚手架
简单介绍一下环境和脚手架
开发流程
讲解一下现在开发流程
着重说明目前为了降低一次性提测带来的稳定性、如期交付等风险，采用局部提测的流程
简单提一下目前的发布都给予集团的质效平台完成CI/CD
技术设计要点
针对百花项目中前端遇到的比较复杂的多功能富文本编辑器实现方式
简要说明导致该难点要实现的业务需求
针对该解决方案给出设计思想
展示效果-视频展示（节约时间）
部分代码展示
直接打开工程进行核心能力讲解
增加互动：大家针对该解决方案进行问答，有没有更好的实现方案或者其他意见建议
总结与展望
对百花前端提供的能力进行总结，强调这些组件大家可以复用
noCode平台生成图片能力
多功能富文本编辑器
视频编辑器能力
形象管理开放组件
对目前项目存在的问题制定下一阶段目标
Q&A
针对本次百花项目前端技术架构，大家有没有什么想问的
讨论前端架构设计遇到的问题
大家有没有做过前端架构设计
有没有哪些疑问
如果针对性开一场如何做前端架构设计及文档的分享，是否愿意听？
总结
感谢分享人的准备和大家抽出宝贵的时间参与
后续也希望大家可以多以该方式做前端沉淀，相互了解
提高自己的能力
丰富自己的多维度解决方案
提高前端的口碑和影响力
收藏
收藏
0 条评论
下一页
