《张硕-58同城本地服务基于Web Components的前端工程实践.pdf》由会员分享,可在线阅读,更多相关《张硕-58同城本地服务基于Web Components的前端工程实践.pdf(46页珍藏版)》请在三个皮匠报告上搜索。
1、58本地服务基于Web Components的前端工程实践主讲人:张硕演讲嘉宾介绍张硕58本地服务技术部 增长前端负责人(搬家、保洁、保姆月嫂等本地服务,58同城、58到家等App、PC、M及小程序)工作经历:15年加入58,曾就职于完美世界、百度彩票等 兴趣爱好:惯孩子、文案输出 个人专长:烤串、写复盘文档CONTENT目录2023K+01业务背景及主要瓶颈Web Components基于Web Components的升级改造方案0203展望及规划04Part 01业务背景及主要瓶颈业务背景-祖传的江山眼睁睁的看着你,却无能为力想得却不可得,你奈人生何组件化对内高内聚,对外低耦合阻碍前端组件
2、化的因素疫情恢复期,不花钱的流量才是好流量业务背景及瓶颈下需要的方案 需满足SEO诉求 需解决跨框架组件使用 需解决现有Java模版调试问题Part 02Web Components什么是 Web Components?是一套不同的技术,允许我们创建可重用的定制元素(它们的功能封装在代码之外)并且在我们的 web 应用中使用它们。https:/developer.mozilla.org/en-US/docs/Web/API/Web_componentsWeb Components就在身边Web Components怎么看?Web Components 技术构成Web Components Sh
3、adow Dom图片来源:MDN Shadow DOMWeb Components 优缺点Web Components的兼容构成的三个技术兼容性基本在95%+Web Components 使用趋势数据来源:https:/ Components的应用场景Web Components、微前端、模块联邦Web Components 总结 SEO诉求 跨框架组件使用 Java模版天然适配Part 03基于Web Components的升级改造方案项目研发流程现状Java服务工程Velocity模版CSSJSJava工程前端工程Java工程部署前端发版页面html模版资源文件1、耗时体现在开发过程-前后
4、端未分离2、问题修复(模版语法操作错误,逻辑错误,RD代码错误)-调试成本高3、问题修复(JS,CSS)-全靠代理4、无法实现ui+逻辑方式同时又满足SEO的模块化开发思想-业务收敛难本地开发页面输出构建部署Java模板调试处理Jar包输出准备安装Java JDK、Maven创建解析工具文件pom配置文件trans.java解析模板引擎文件模版根目录编译输出位置模版入口htmlmock.json模板解析参数jar包webpack构建文件webpack构建transhtml loader处理html文件调用Java Jar包处理Java模板引擎文件命令调用业务mock.json文件输出位置web
5、pack入口文件Java模版根目录Java模版引擎用户访问页面打包后渲染mock数据的html文件启动http-server服务打包Webpack处理模板引擎用户启动服务 页面 逻辑流量自定义 标签 l 插入 ompo t i 主站 Web Components 改造思路Web Components 处理SEOSeo优化Web ComponentsWCsBase页面搜索页面关键词检索TKD语义化标签优化网站内容内部链接优化外部链接优化关键词图片、链接等Slot插入普通、具名处理组件内容布局样式、事件逻辑等渐进式 Web Components 演进-原生组件webpack 自研plugin组件A
6、index.scsstemplate.jsindex.js组件C插入引入模版组装业务逻辑组件B入口JS构建产出.业务代码组件包jspolyfill.js原生 Web Components 问题原生Wcs组件写法偏向操作DOM,仿佛回到了Jq时代styleloader 无法编译原生组件scss样式,扩展webpack plugin从所有js中获取指定css插入标识($),遍历替换查找1.scss-css2.css-autoprix-添加前缀3.css-cssno-压缩替换scss-plugin业务代码目标目录css文件写入模板shadow-rootWeb Components-电话弹窗组件$po
7、pup.show(title:拨打电话,template:,/弹出层面板内容htmlconfirm:()=,/确认按钮事件opened:()=/弹出层打开后事件,beforeClose:()=/弹出层打开前事件,closed:()=/关闭弹出层事件)调用renderTemp将template模版内容插入到shadowDom中template.js声明renderTemp(params)方法创建template dom元素yp-popup组件样式定义自定义元素 yp-popup监听并派发自定义事件this.dispatchEvent(newCustomEvent(clickOverlay)点击遮
8、罩 clickOverlay 点击确认按钮 confirm点击取消按钮 cancel 点击关闭按钮 closeconfirm、opened、beforeClose、closed.index.scssindex.jsyp-popuppopupCall.js 封装使用生成comp-popup导出方法绑定透传事件处理参数optionspopup.jspopup.show(options)popup.close()根据options为组件添加属性和值用于传递参数渐进式Web Components演进-Vue构建Webpack core业务使用组件A.vue组件B.vue组件X.vueindex.js打
9、包产出组件包.jspolyfills.jsothers.jsvueindex.js运行时依赖二次开发扩展增强版web-component-wrapper-vue官方组件包核心转化包渐进式Web Components演进-Vue组件异同二者一致二者一致导入对应lib到项目中,在页面中引入需要使用的组件使用web-component-wrapper注册为Web Components组件混合使用二者一致二者一致导入对应lib到项目中,在页面中引入需要使用的组件无注册or install注册仅供Vue工程开发注册引入使用Vue Web Components Vue渐进式Web Components演进
10、-Vue代码异同Vue Web Components VueWeb Components改造方案-混合项目结构Source codeUsageWeb Components Libraryyp-detail-boxyp-server-listVueyp-detail-boxyp-server-list原生Web ComponentLibraryWeb Components改造方案-混合打包模式Web ComponentsLibraryWrap.vue.js.scssVue.js.scss原生BuildWebpackWeb Components改造方案-基本业务流程LocalPublish模板Ve
11、locity mock datalib npmBase(utils)其他底层支撑web组件Vue原生VueSEO非SEO页 面jsWeb Components升级改造现阶段的问题基于业务项目产出的Web Components组件如何有效管理如何更好的复用组件Part 04展望及规划规划-生成流程Web ComponentsUsed everywhereSource code manageYour RepoGit Labmanage with NpmButtonCard-BoxOthersWeb Components长期规划全景图组件生产使用物料市场Lit、Stencil未来框架原生Vue React物料市场仓库在线编辑物料导出WEB其他低代码抛弃Java,拥抱Node SSR?矛盾的世界具体问题具体分析抛个开放性问题Web Components 会不会取代目前的MV*框架?THANKS