朱君标-Need for Speed：菜鸟技术全栈化之路-finally.key

Size: px

Start display at page:

Download "朱君标-Need for Speed：菜鸟技术全栈化之路-finally.key"

栖通
7 years ago
Views:

1 Need for Speed: 菜鸟技术全栈化 ( 开发全栈前端 ) 之路路朱君标 ( 银鹏 ) 阿里里巴巴高级前端技术专家

5 朱君标 ( 银鹏 ) 高级前端技术专家菜鸟网络前端团队负责人, 阿里里巴巴前端技术委员会核心组成员, 一直从事阿里里系一线前端团队的技术和管理理工作曾组建阿里里巴巴中文站前端团队和阿里里巴巴商家业务事业部前端团队, 在阿里里的 2B 业务领域摸爬滚打了了 10 年年, 在前端如何助力力2B 业务和技术还是有不不少心得体会目前的核心方向是前端技术中台化和推动后端开发全栈化

6 全栈化的背景意识形态的转变和决心全栈策略略标准化全副武装的全栈特战队员全栈技术学院全栈之后

7 全栈化的背景前端岗位的问题特别的开发群体 ( 形,D2) 前端招聘难价格贵资源瓶颈 ( 集中还是拆分 ) PC 没落和无线动态化美国海海豹特战队 7 人小分队, 全球打击 Salesforce Salesforce 硅谷的企业中台 2B 业务前端的疑惑你去菜鸟做什什么? 前端需要和开发走的更更近? 1:5 => 1:20+ => 1:50+? 全栈化 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 全栈多级支撑模式 DuanFang SmartBuilder Rookie React 技术栈 UI 组件库可灵活扩展的组件中心异步答疑 Walle DSL 简单的 SPA 框架丰富的全栈场景库 RookieUI 无缝接入同步答疑动态表单 Site 服务动态报表静态发布部署动态地图性能 & 稳定性保障可视化搭建全栈技术学院无缝对接 Rookie&Walle 同步答疑全栈工作流 (H5 Weex React Walle) 线上线下工程化集成

13 全栈技术分层业务层常规业务支撑业务平台化中台 & 业务对接 : 使用 & 反馈系统级对接编排 : 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 全栈研发平台规范化管控 : 构建编译打包部署检测服务内容

14 全栈化的背景意识形态的转变和决心全栈策略略和多级支撑模式标准化全副武装的全栈特战队员全栈技术学院全栈之后

15 标准化 Walle UI 标准化技术栈标准化研发流程标准化清晰, 高效, 统一, 美观业务抽象设计规范设计语言设计赋能产品和开发行行业标准化? 技术栈升级为 React 统一React 框架基于 React 且屏蔽 React 的 Walle 不不仅仅是框架, 还是全栈解决方案随性的前端不不能再感染纯洁的开发 web 研发全生命周期管理理打通线上线下工程化全栈质量量保障

16 全栈化的背景意识形态的转变和决心全栈策略略和多级支撑模式标准化全副武装的全栈特战队员全栈技术学院全栈之后

17 全副武装的全栈特战队员全栈研发平台 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.

18 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 上前屏右左后下

19 全栈选型 CUI (Jquery) Dva ( 原生 react) Walle (DSL) 追求功能灵活前端基础较差 X 有前端支持页面标准化程度页面复杂度较高业务比较紧急有前端工程化基去本地工程化对性能有极致要前端参与少 20% 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 大赛 ( 智能围栏 ) 创新突破云栖大会 IoT 大赛 JS 是 IoT 领域的四大开发言语之一 IoT 和前端并不不是风马牛不不相及自助式驿站用智能硬件解决用户体验上架效率提升 100%, 人力力成本大幅降低

29 Let's Full Stack! 全栈是一种创业精神!

05.（最终版）手机淘宝 H5 和 Weex 容器的构建实践-云栖-2016-鬼道.key

05.（最终版）手机淘宝 H5 和 Weex 容器的构建实践-云栖-2016-鬼道.key 手机淘宝 H5 和 Weex 容器的构建实践鬼道 ( 徐凯 ) 高级前端开发专家个人简介 2015, 手机淘宝 H5 和 Weex 容器器团队 2013, 天猫 Web 前端架构天猫 Pad 客户端 2011, 百度广告 / 统计 Native/H5 SDK 触发页面加载进度预加载 HTTP-DNS SPDY 渲染交互交互时 2014 下载时 2015 渲染时 2016 Hybrid