Need for Speed: 菜 鸟技术全栈化 ( 开发全栈前端 ) 之路路 朱君标 ( 银鹏 ) 阿 里里巴巴 高级前端技术专家
朱君标 ( 银鹏 ) 高级前端技术专家 菜 鸟 网络前端团队负责 人, 阿 里里巴巴前端技术委员会核 心组成员, 一直从事阿 里里系 一线前端团队的技术和管理理 工作 曾组建阿 里里巴巴中 文站前端团队和阿 里里巴巴商家业务事业部前端团队, 在阿 里里的 2B 业务领域摸爬滚打了了 10 年年, 在前端如何助 力力2B 业务和技术还是有不不少 心得体会 目前的核 心 方向是前端技术中台化和推动后端开发全栈化
全栈化的背景 意识形态的转变和决 心 全栈策略略 标准化 全副武装的全栈特战队员 全栈技术学院 全栈之后
全栈化的背景 前端岗位的问题 特别的开发群体 ( 形,D2) 前端招聘难价格贵资源瓶颈 ( 集中还是拆分 ) PC 没落和 无线动态化 美国海海豹特战队 7 人 小分队, 全球打击 Salesforce Salesforce 硅 谷的企业中台 2B 业务前端的疑惑 你去菜 鸟做什什么? 前端需要和开发 走的更更近? 1:5 => 1:20+ => 1:50+? 全栈化 2B 业务标准化, 研发流程标准化
全栈化的背景 意识形态的转变和决 心 全栈策略略和多级 支撑模式 标准化 全副武装的全栈特战队员 全栈技术学院 全栈之后
意识形态的转变和决 心 全栈的好处 ( 吸引 40% 的开发者 ) 现在 : 看得 见的成就感 ( 鼓励 ) 竞争 力力加码 ( 可以做的更更多 整体效率更更 高 ) 组织红利利 ( 树标杆 评奖 内 网头衔 晋升制度 ) 软硬皆施 不不会前端的设计师不不是好程序员! 未来 : 全栈 工程师更更吃 香 (NB 的前端技术都是全栈 工程搞出来 的, 前端待遇超越 大部分开发岗位 ) 全栈的决 心 ( 引导 30% 的开发者 ) 组织保障 : KPI 保障 严控设计 PD 比, 前端开发 比 断奶 组织提能 : 全栈培训 全栈认证
全栈化的背景 意识形态的转变和决 心 全栈策略略 标准化 全副武装的全栈特战队员 全栈技术学院 全栈之后
全栈 支撑策略略 业务 全栈业务 策略略 标准化全栈化可视化营销平台化动态化 RookieUI Walle Dva DSL Smart Builder 斑 马 Weex 平台 全栈研发 工作台 ( 端坊 ) 基础服务 Render CCloud Deploy 阿 里里集团底层技术 OSS CDN Gitlab Docker ODPS
全栈多级 支撑模式 DuanFang SmartBuilder Rookie React 技术栈 UI 组件库可灵活扩展的组件中 心异步答疑 Walle DSL 简单的 SPA 框架丰富的全栈场景库 RookieUI 无缝接 入同步答疑 动态表单 Site 服务 动态报表 静态发布部署 动态地图 性能 & 稳定性保障 可视化搭建 全栈技术学院 无缝对接 Rookie&Walle 同步答疑 全栈 工作流 (H5 Weex React Walle) 线上线下 工程化集成
全栈技术分层 业务层 常规业务 支撑 业务平台化 中台 & 业务对接 : 使 用 & 反馈 系统级对接 编排 : SaaS 层 服务编排 页 面内容编排 WebFlow 编排 灵活的系统组织 方式 技术化思考和产品化思维的结合 内容中间件 : 中间件层 HSF/Diamond/Notify/Link Form/Report/Map 垂直领域的内容模块化 智能搭建 : 品质 & 效率 & 动态化 语 言 & 框架层 WebX(Spring) => Pandora Boot(Spring Boot) BFF(Node) Rookie 3.0 Walle(React) 全栈核 心层 : 保持框架的先进性 打磨 解决推 广的滞后性 struggle 工程层 IDE IDE Plugin/CLI 线下 工程化 ( 框架层的辅助 ): 降低框架层的学习成本 提 高线下研发效率 运维层 Aone 全栈研发平台 规范化管控 : 构建 编译 打包 部署 检测 服务 内容
全栈化的背景 意识形态的转变和决 心 全栈策略略和多级 支撑模式 标准化 全副武装的全栈特战队员 全栈技术学院 全栈之后
标准化 Walle UI 标准化技术栈标准化研发流程标准化 清晰, 高效, 统 一, 美观业务抽象设计规范设计语 言设计赋能产品和开发 行行业标准化? 技术栈升级为 React 统 一React 框架基于 React 且屏蔽 React 的 Walle 不不仅仅是框架, 还是全栈解决 方案 随性 的前端不不能再感染 纯洁 的开发 web 研发全 生命周期管理理打通线上线下 工程化全栈质量量保障
全栈化的背景 意识形态的转变和决 心 全栈策略略和多级 支撑模式 标准化 全副武装的全栈特战队员 全栈技术学院 全栈之后
全副武装的全栈特战队员 全栈研发平台 Dva(React) 全栈技术学院 Rookie IDE 智能内容平台 DSL
Walle-DSL 数据驱动 (MDV) 去 线下 工程化 声明式编程 <Form field={this.field}> <CNAddressField name="address" label=" 选择地址 :" overseas={true} disabled={this.state.disabled} /> <Button onclick={this.handleclear}> 清空 </Button> <Button onclick={this.toggledisabled}> 禁 用 / 启 用 </Button> <Button onclick={this.settown}> 设置值为某街道 </Button> </Form> 核 心理理念 采 用声明式编程 专注于 做什什么 而不不是 如何去做 关 心的是 目标, 而不不是底层的实现过程 同时借助数据驱动的开发模式, 摒弃了了复杂的 dom 让 页 面研发变的更更简单 对 全局 内 Link 式 SPA 上 前 屏 右 左 后 下
全栈选型 CUI (Jquery) Dva ( 原 生 react) Walle (DSL) 追求功能灵活 前端基础较差 X 有前端 支持 页 面标准化程度 页 面复杂度较 高 业务 比较紧急 有前端 工程化基 去本地 工程化 对性能有极致要 前端参与少 20% 80%
SmartBuilder 2B 业务系统 后台类系统 80% 移动办公 70% 表单 列列表 地图 表单 报表 报表 形成更更 一致 高效 中 心化的企业级解决 方案 体验技术从做 UI 转型为做服务的综合型团队
SmartBuilder 业务场景抽象通 用内容场景个性化定制场景业务领域场景 运 行行沙箱 轻量量布点 schema 解析 & 渲染监控上报运 行行时 API 内容管理理 租户管理理实例例管理理组件扩展 Rookie 组件中 心 体验升级 多语 言多端内容编排 内容 生产 物料料配合 工具 支撑 组件体系模板体系数据接 入 可视编辑平台 理理论基础统 一交互规范极客化设计
全栈研发 工作台 收敛研发类型 将业务场景中典型的 几类应 用研发流程收敛为 几 大类, 从 而给开发者提供标准化的 工作流 一站式研发 专注解决 需求 - 设计 - 研发 - 运维 - 洞洞察 应 用研发 生命周期中的各类问题 研发类基础服务 围绕研发 支撑提供 一系列列轻量量级的研发类 Bass 服务, 让开发者可以专注于业务 团队协同 以团队为基础协作单元, 围绕团队成员 人的 生产 力力去设计服务, 强调成员的主动产出
全栈研发 工作台 收敛 几类典型的研发流程 每类研发流程中既有共性也有个性化节点 中后台产品研发流程 (Walle) 动态化产品研发流程 (Weex) 静态站点产品研发流程 (H5) 研发 ( 目前已完成 ) 需求 设计 项 目管理理代码托管迭代管理理构建 / 持续集成部署发布 运维与监控 数据与反馈 任务协同 (Task) ( 线下 工程化 ) 效果洞洞察 联调 设计协同 (Udemo) 工作流是对每个节点上进 行行 行行为 过程 结果的管理理, 是将全栈研发过程不不断产品化与标准化
全栈化的背景 意识形态的转变和决 心 全栈策略略和多级 支撑模式 标准化 全副武装的全栈特战队员 全栈技术学院 全栈之后
全栈技术学院 在线 学习 线下 培训 全栈认证考试平台 初级 中级 高级 全栈数据 大盘 人员 项 目 质量量 工具库 健康度检测平台 规范 雨燕 工单 全栈氛围 全栈快报 全栈周刊优秀项 目 全栈之星 PC 中台 无线 中台 FeedBack QA Bugfix Issues 全栈社区 赋能保障影响
全栈化的背景 意识形态的转变和决 心 全栈策略略和多级 支撑模式 标准化 全副武装的全栈特战队员 全栈技术学院 全栈之后
全栈之后 革命是蜕变的过程, 先把别 人做没了了, 最后把 自 己也做没了了! 前端全栈 中台技术 (PC 全栈到 无线全栈 ) 前端精细化领域 ( 实操 ) 图形领域 ( 地图 数据可视化 ) 开拓拓新 端,IoT
全栈之后 - 开拓拓新 端 阿 里里前端 IoT 大赛 ( 智能围栏 ) 创新突破 云栖 大会 IoT 大赛 JS 是 IoT 领域的四 大开发 言语之 一 IoT 和前端并不不是 风 马 牛不不相及 自助式驿站 用智能硬件解决 用户体验 上架效率提升 100%, 人 力力成本 大幅降低
Let's Full Stack! 全栈是 一种 创业 精神!