%E7%8E%8B%E9%80%B8%E5%A8%81—%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96new
2020-03-01 214浏览
- 1.从⼀一到⽆无穷⼤大： 前端⼯工程化中的实践与臆测 王逸威(夕山) 阿里巴巴 高级前端工程师
- 2.
- 3.
- 4.ABOUT ME 4 关于我 王逸威（夕⼭山） 阿⾥里里巴巴-CBU技术部-体验技术 CBU 技术部前端⼯工程负责⼈人 © 2019 前端⼯工程化 - By 夕⼭山 2011 2015 2017 进⼊入南开⼤大学 本科毕业 离开北北京去到杭州 主修计算机科学与技术 加⼊入去哪⼉儿⽹网 加⼊入阿⾥里里巴巴 辅修哲学 负责客栈⺠民宿业务和nodejs⼯工程化 负责B2B事业部前端⼯工程相关
- 5.ABOUT THE TOPIC 关于这个题⽬目 从⼀一到⽆无穷⼤大 科学中的事实与臆测 5
- 6.ABOUT THIS LECTURE 关于这次分享 前端及前端⼯工程演进阶段 前端演进不不同阶段的前端职责和开发⽅方式转变 阿⾥里里巴巴B类事业群前端⼯工程 演进过程 从⼯工具链时代，到平台化时代，再往云+端时代进发 前端⼯工程中的实践批判 ⼯工程未来的⼀一些臆测 在前端⼯工程设计中遇到的问题、思考的过程与最终的选择 前端⼯工程之于前端开发者，正如前端之于终端⽤用户 © 2019 前端⼯工程化 - By 夕⼭山 6
- 7.前端演进阶段 PC时代 终端⽤用户需要什什么？ 浏览⽹网⻚页、提交表单 前端需要⼲干什什么？ 切图、写⻚页⾯面、写样式、写交互 前端需要什什么⼯工程⼯工具？ - 前后端分离、建⽴立模块化规范 - 数据流框架、组件库 © 2019 前端⼯工程化 - By 夕⼭山 7
- 8.前端演进阶段 移动时代 终端⽤用户更更需要什什么？ 移动端H5/APP/⼩小程序为主，多端使⽤用体 验 前端需要多⼲干什什么？ 在不不同端上实现功能、聚焦在端容器器的尺⼨寸和兼容 前端需要什什么⼯工程升级？ - 多端部署、多端调试、跨端框架 - 快速迭代下的⾼高效承接能⼒力力 © 2019 前端⼯工程化 - By 夕⼭山 8
- 9.前端演进阶段 ⼤大前端时代 前端可以给终端⽤用户提供什什么？ 通过不不同端、各项技术达到最佳的交互体验 前端能⼲干什什么？ 跨端、BFF & Serveless、可视化、Iot、ect. 前端需要什什么⼯工程设施？ - 不不同场景下的开箱即⽤用⽅方案 - ⼀一站式开发体验 © 2019 前端⼯工程化 - By 夕⼭山 9
- 10.对应每次的前端演进阶段 10 我们的⼯工程演进阶段 ⼯工具链时代 平台化时代 云+端时代 To o l s Platform Unbounded © 2019 前端⼯工程化 - By 夕⼭山
- 11.我 们 的 ⼯工 程 演 进 阶 段 11 ⼯工具链时代 依托已有的⼯工具集 命令⾏行行处理理极⼤大简化 各类功能型命令⾏行行⼯工具百花⻬齐放 maven 、ant yargs、commander.js、inquirer.js too many… © 2019 前端⼯工程化 - By 夕⼭山
- 12.我 们 的 ⼯工 程 演 进 阶 段 12 平台化时代 脚⼿手架中⼼心 代码检查⼯工具 ⽆无线组件市场 收敛物料料 特定技术体系组件 ⾃自动化测试平台 M PC组件市场 静态资源发布 模版推送 收敛发布 版本号推送 CDN管理理 © 2019 前端⼯工程化 - By 夕⼭山 D 收敛质量量卡点 Q S CodeReview 打点/监控/性能平台 XXX 应⽤用搭建平台 收敛垂直场景 XX 业务管理理平台 XXX (技术栈) 统⼀一开发平台
- 13.云构建服务 13 云 端 上研发服务 上研发⼯工具 脚⼿手架 容器器服务 命令⾏行行CLI框架 代码检查服务 构建器器 存储服务 版本管理理中⼼心 WebUI/桌⾯面⼯工具 调试⼯工具 WebIDE 检查⼯工具 消息通知 静态资源部署 同构渲染部署 CDN源站服务 © 2019 前端⼯工程化 - By 夕⼭山 研发服务⽹网关 研发流程编排 发布⼯工具
- 14.Practical criticism 前端⼯工程中的实践批判 稳定VS⾼高效 标准VS定制 通⽤用VS易易⽤用 © 2019 前端⼯工程化 - By 夕⼭山 14
- 15.前 端 ⼯工 程 中 的 实 践 批 判 15 稳定 VS ⾼高效 稳定 最⼤大程度避免故障 © 2019 前端⼯工程化 - By 夕⼭山 ⾼高效 可以迅速迭代
- 16.稳定VS⾼高效 16 版本管理理设计 - 新版本可以快速到达，快速修复问题 - 避免⽼老老旧版本⻓长期存在 版本快速升级 锁版本 - 保持依赖稳定性，不不受错误版本影响 - 依赖及⼦子依赖版本语义化不不够安全 © 2019 前端⼯工程化 - By 夕⼭山
- 17.版 本 管 理理 设 计 依赖版本管理理实践 xxx-utils xxx-sdk 不不应该锁版本 xxx-app jsbundle 可以但应尽量量避锁版本 - 预发、正式 ⼀一次构建、两次发布 - 提供依赖升级的对⽐比记录 - 常态灰度、⾃自动化测试等 © 2019 前端⼯工程化 - By 夕⼭山 17
- 18.版 本 管 理理 设 计 CDN 上的资源版本号 1)https://b.alicdn.com/five/0.x/index.js2)https://b.alicdn.com/five/0.x/index.eb4be22e.js3)https://unpkg.com/five@0.8.0/index.js4)https://unpkg.com/five@0.x/index.js应当使⽤用⾮非覆盖式发布的锁定版本的 CDN 地址 © 2019 前端⼯工程化 - By 夕⼭山 18
- 19.19 版本语义化不不是银 弹，需要因地制宜 选择最合适的版本 管理理策略略。 © 2019 前端⼯工程化 - By 夕⼭山
- 20.稳定VS⾼高效 卡点设计 - 代码检查 - ⾃自动化测试 - 性能检查 - 覆盖率检查 - etc © 2019 前端⼯工程化 - By 夕⼭山 20
- 21.卡点设计 代码检查卡点 发布前触发检查 IDE Lint 插件 git 提交钩⼦子 © 2019 前端⼯工程化 - By 夕⼭山 21
- 22.卡点设计 代码检查卡点 检查代码中链接的合法性 语法检查 写法（代码⻛风格）检查 检查依赖的包及版本是否过时 检查构建后代码的兼容性 ….. © 2019 前端⼯工程化 - By 夕⼭山 22
- 23.23 作为卡点的代码 检查应当是不不可 跳过的、最⼩小可 ⽤用的。
- 24.前 端 ⼯工 程 中 的 实 践 批 判 24 标准 VS 定制 标准 前端⼯工程实施中定制的标准规范 © 2019 前端⼯工程化 - By 夕⼭山 定制 为不不同场景/技术栈的定制修订
- 25.标准 VS 定制 25 研发流程设计 UI 界⾯面完全可定制 迭代流程完全可定制 功能节点完全可定制 © 2019 前端⼯工程化 - By 夕⼭山
- 26.研发流程设计 26 UI界⾯面完全可定制 功能区域划分 模块化 可扩展的插槽 © 2019 前端⼯工程化 - By 夕⼭山
- 27.研发流程设计 迭代流程完全可定制 使⽤用 BPMN 2.0 规范来描述⼀一个迭代流程 © 2019 前端⼯工程化 - By 夕⼭山 27
- 28.研发流程设计 功能节点完全可定制 通过流程引擎触发 需要做到运⾏行行时隔离 构建/CDN部署/git 操作/代码检查… 统⼀一⽹网关层标准化调⽤用 ⽀支持实时的⽇日志展示 FAAS BAAS Function As A Service Backend As A Service 流程中的每个节点触发⼀一个Faas⽅方法，在其内使⽤用我们提供的基础Baas服务来完成节点动作 © 2019 前端⼯工程化 - By 夕⼭山 28
- 29.29 © 2019 前端⼯工程化 - By 夕⼭山
- 30.前 端 ⼯工 程 中 的 实 践 批 判 30 通⽤用 VS 易易⽤用 通⽤用 可以适应并⽀支持各种不不同场景 © 2019 前端⼯工程化 - By 夕⼭山 易易⽤用 在单个场景下可以迅速被上⼿手使⽤用
- 31.31 通 ⽤用 V S 易易 ⽤用 脚⼿手架设计 ⾼高级Webpack 配置⼯工程师 - 约定 VS 配置 约定 > 配置 - 零配置启动 开箱即⽤用 - 受控 VS 可编程 KISS 原则，尽可能受控 © 2019 前端⼯工程化 - By 夕⼭山
- 32.通 ⽤用 V S 易易 ⽤用 构建服务设计 80% npm Script 项⽬目⽬目录内指定 构建命令 单个项⽬目 15% ImageId 指定特定的镜像来完成构建 标准镜像 Dockerfile 5% 容器器服务 © 2019 前端⼯工程化 - By 夕⼭山 ⾃自⾏行行编写 Dockerfile 完全⾃自定义构建 32
- 33.33 既要开箱即⽤用， ⼜又能渐进式增强， 核⼼心在于分层 © 2019 前端⼯工程化 - By 夕⼭山
- 34.Speculation ⼯工程未来的⼀一些臆测 © 2019 前端⼯工程化 - By 夕⼭山 ⼤大问题域下⼩小问题域的 分形 34
- 35.35 前端集成开发环境 前端⼯工程 前端开发 ⽤用户交互界⾯面 终端⽤用户 © 2019 前端⼯工程化 - By 夕⼭山
- 36.36 稳定VS⾼高效 标准VS定制 通⽤用VS易易⽤用 © 2019 前端⼯工程化 - By 夕⼭山
- 37.37 云上 稳定 © 2019 前端⼯工程化 - By 夕⼭山 研发领域服务 标准 通⽤用 “ 为了了对抗不不断变化的前端开发需求，将前端的研发需求不不断抽象， 形成云上相对稳定的研发领域服务，标准化、通⽤用并且稳定 ”
- 38.38 端上 ⾼高效 © 2019 前端⼯工程化 - By 夕⼭山 研发闭环 定制 易易⽤用 “ 为了了迎合不不断升级的开发体验要求，前端开发动作在不不同场景和端上， 可以快速形成研发闭环，可定制、易易使⽤用并且⾼高效 ”
- 39.⼯工 程 未 来 的 ⼀一 些 臆 测 前端⼯工程进化之于交互领域 命令⾏行行 上BBS 浏览⽹网⻚页 交互的各种想象空间 你已经是个成熟的IDE了了 要学会⾃自⼰己写代码 命令⾏行行 开发 © 2019 前端⼯工程化 - By 夕⼭山 IDE/云平台 开发 可以怎样写代码呢？ 39
- 40.⼯工 程 未 来 的 ⼀一 些 臆 测 从⼀一到⽆无穷再到更更⼤大的⽆无穷 © 2019 前端⼯工程化 - By 夕⼭山 为了了解决越来越多的应⽤用问题，数学⼯工具在不不断演进； ⽽而为了了应对越来越多的研发场景，⼯工程⼯工具也在不不断进化。 从⼀一到⽆无穷，未来还有更更⼤大的⽆无穷。 40
- 41.THANKS THANKS！ THANKS！
- 42.
- 43.
- 44.Q&A 扫码加我微信～ 扫码关注我们团队~
