菜鸟网络 朱君标 - 菜鸟技术团队全栈化（开发全栈前端）之路

2020-02-27 1096浏览

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