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

阳凯复

2017/12/18 发布于 技术 分类

ArchSummit全球架构师峰会是InfoQ中国团队推出的面向高端技术管理者、架构师的技术大会,参会者中超过50%拥有8年以上的工作经验。 ArchSummit秉承“实践第一、案例为主”的原则,展示新技术在行业应用中的最新实践,技术在企业转型中的加速作用,帮助企业技术管理者、CTO、架构师做好技术选型、技术团队组建与管理,并确立技术对于产品和业务的关键作用。

文字内容
1. Need for Speed: 菜⻦鸟技术全栈化(开发全栈前端)之路路 朱君标(银鹏) 阿⾥里里巴巴⾼高级前端技术专家
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! 全栈是⼀一种“创业”精神!