15年双11手淘前端技术巡演 - 前言

简介:

该文章来自阿里技术协会(ATA)优选文章。

15年双11刚落下帷幕。今年众所周知,是全面“无线化”的一年。数据上我就不说了,可以公开的数据我相信大家多多少少也从各方都了解到了。
在整个阿里体系内,无论技术还是业务,都会把每年的双11当作一个战场,同时也是一个“炼金石”。不管是技术还是业务,不经过双11的检验,似乎就没有资格真正的在阿里站得住脚。

此文作为今年双11手淘前端技术巡演的前言,注定会是一篇技术干货含金量偏少的一个引子。笔者也就着第一次作为双11手淘前端的PM的角色,聊一聊在今年双11,在我们所谓“前端”这个职能上,我看到的一些事情和感想。也为接下来即将“扑面而来”的一篇篇各个技术方向的含金量极高的总结和干货做个“抛砖引玉”的作用。

“前端”造的出P1以上的故障么?

或许很多同学会有些奇怪,为什么笔者第一个话题会说这个。
没错,笔者在码这些字的时候,想起了在双11备战期的某天晚饭时,笔者跟自己的老板-大家熟知的@寒冬winter 无意闲聊,大致的话题是说当今“前端”这个职能在阿里体系内,在如今全面“无线化”,“App化”的时代,到底有多大的价值?

没错,前端圈子的确风风火火,各种热闹,各种走在技术变革的最前沿。但是你看,至少在阿里,在手淘App内,我们一没承载主交易链路,二是双11压力最大的流量,服务,QPS抗压也通常不是前端这个“职能”干的。

没错,成熟的Hybrid体系下Web的开发模式的确是研发最快,成本最小的一种方式,今年双11里面大家从手淘手猫各种App访问到的90%以上的会场,活动,小游戏,也确实都是“前端”同学们做出来的。但是,就凭着这些“上层建筑”,就能完全判定前端的价值么?

然后,Winter笑嘻嘻的说,是呀,你可以去看看,历年来在双11的故障单里面,有没有“前端”造出来的P1以上的故障。

问题继续下去似乎没有什么意义,我想说的是,有时候“你能出多大的漏子,可能也意味这你有多大的价值”。

当然,大家可以有心的说,我一个前端bug可以把淘宝首页搞挂,我一个js错误可以把整个搜索搞挂,这样是不是也是巨大价值的体现?反过来说,如果在双11这样的完整的测试流程和发布流程里面,出这样的前端故障丝毫不能体现你的重要,只能暴露你就是个bug。

所以,在以往意义上的前端,不出故障仅仅只是一个60分,甚至不到的标准。更谈不上能出大故障是价值的体现。然而在今年双11这个节点上,终于可以很冠冕堂皇,很自豪的说,“前端”这个职能完全可以承担起一个差错就可能引起P1以上故障的巨大价值体现。
先卖个关子,详细待后面 @勾三股四 @阿里子之 给大家详述。

双11前端团队的PM角色是什么样的体验?

我们按知乎的常用提问模式来说这个话题。双11前端团队的PM这个角色,笔者今年第一次做,TA更偏向于资源和风险的管理,而不是项目的管理,我们单个的项目有对应的单项的技术PM,单个项目的PM可以来源于任何技术职能团队。而在这前端个团队资源PM的角色里,TA的主要的职责有以下几个:

  • 前端资源池的全局管理和分配,横向对接双11每个单项项目组
  • 应对双11随时可能突发的新的需求和紧急项目
  • 风险的把控,团队内资源的阶段性调配
  • 在资源调配和风控之外,还需要对于部分项目的技术方案进行讨论和决策

就以上几个职责,有几个关键性的事情,

  1. 首先需要全局的了解双11相关的所有和前端团队相关的需求和项目,双11的业务基线在哪?需求层面,来源于产品,营销,互动,技术基础的项目各自有哪些?分别的工作量大概是怎么样?是否依赖客户端的双11新增功能或者版本?想要了解这些问题,意味着在双11需求搜集阶段,可能就会很忙碌,几乎要尽可能参加所有和前端资源相关的需求评审和方案确定。因为你必须要知道有多少事情之后,才有可能知道在这些事情下,在团队这么多资源的情况下,怎么去合理的分配。在资源极其紧张的情况下,前期漏掉一个都可能在后面的研发阶段引起极大的风险。
  2. 在有了全局的项目和需求梳理之后,一定还必须对团队的同学们的能力和擅长的方向有明确的认知和把握。因地制宜,合适的同学放到合适的位置。有同学适合做互动类的小游戏,有同学适合模块化的分工,做会场,也有同学适合做技术基础铺垫,横向的推动。对于同学们的技能点了解不算是难事,但是不是合适的人刚刚好就能完全对应上所有的事情的。互动和会场每年一定是需求量和工作量最大的两件事,如果匹配的资源不够,人的调配将会是一个头疼的问题。
  3. 当你好不容易紧紧巴巴把人挨个排到了对应的事情之后,一定记得回过头来看看,整个资源池子里,还有buffer和backup么... 在双11这样的事情上面,永远没有所谓的“意外”这一说。哪怕到了中后期,老板或者集团层面的一个决策随时可能催发新的重要的项目。如果没有提前把这件事情考虑进去,当问题来临的时候,才不至于束手无策。你自己也可以是一个buffer,但是一定不能仅仅是你自己一个。
  4. 以上还是前端团队内部的资源协调,对于手淘,手猫的版本控制,功能集成,发版规划是什么样的同样需要有明确的了解和认知。必须得知道在什么时间会发布什么版本,集成什么功能,有没有依赖这个功能上线的项目。强依赖Native新集成功能的项目和H5独立能承载的项目需要分为两个类别的来考虑,这跟项目时间上的优先级有直接关系,这种分阶段的调配对于一个同学需要支持多个项目的时候尤为重要。
  5. 当前期一切安排部署妥当之后,按部就班走到研发阶段的时候,PM的职责会略微转变,更多要从一个“班长”的角色变为一个“生活委员”和“劳动委员”。尤其是当你自己没有进入具体项目研发的时候,这个阶段你的精力会稍微多一些,服务好辛苦的,各种加班的同学,会是研发期间非常非常重要的事情。你必须要让大家知道大家的辛苦都是被你看在眼里的,同时在服务大家的时候,也能更好的监察各个项目的进度,发掘项目里优秀和大压力的同学。“适时和合理的激励”非常重要。
  6. 当整个研发阶段进入到中后期,你要着重关注的方向又会发生一些变化。需求变更和新增的需求一定是不可能杜绝的,尤其是在双11这样事情上。但是中后期的新增需求和变更往往又是风险最大的。尤其是是随着双11时间的临近,大家的关注度越来越升高,经常会冒出新的项目,而且都是默认自带“老板”属性的。这时候必须要亮起火眼金睛,“老板”属性的的需求也是有优先级的,而且是真是假是要通过一些原则来走的。就算是马总,逍遥子下来的需求,一线执行层也有权利一定到看到亲自的邮件批复或者签字才动工的 。这是对于项目和事情的谨慎和尊重。

所以总结下来,针对双11的前端团队的PM角色,是这样的体验:

  • 前期为了概览全局,需要参加各种评审会议和方案讨论,感觉被全世界需要。
  • 核心研发阶段是一个优秀的生活委员的体验,PM并不是指挥官。
  • 中后期是一个不断和人打交道,辩驳和确认紧急需求的体验,懂得有原则,有纪律的拒绝与接受。

以上,是笔者今年双11手淘前端团队PM的体验,大多数时候,这并不是一个技术活,却必须要担起让众多技术活顺利往前走的责任。

今年双11,手淘前端在技术层面有哪些关键词

本文作为今年双11无线前端技术巡演的引子,在最后一个部分最终会落到技术关键词这个部分,后面紧接而来的各种干货将围绕这些关键词全面展开。

关键词一:性能

从App端侧全面解决“顿”,“卡”,“慢”的问题。在今年双11前夕提出了“521法则” 。

  • App内存节省50%
  • 绘制帧率,滑动体验提升20%
  • App全链路实现 1S 法则
    • 强网(4G/Wifi)实现1S首屏(包括图片)加载
    • 3G 1S首包返回
    • 2G 1S建连,并且实现高复用 从底层到前端,我们做了哪些事情,最终拿到了什么样的结果,将为大家揭开神秘的面纱。

关键词二: Native化

用Web的开发模式,打造完全Native的体验,在ReactNative之前全面实现三端同构打通,在今年双11会场上大放异彩。我们有什么样的技术大杀器,静待娓娓道来。

关键词三:ES6, 面向未来

在babel的支持下,ES6的盛宴提前展开,手淘无线前端在ES6,甚至ES7的优秀特性上深度实践,有哪些值得一谈,将和大家一一分享。

关键词四:面向社区,Vue & React

将为大家详细阐述手淘无线前端团队在不同业务上针对Vue和React的深度实践,怎么完整的打通开发链路,创造面向团队内的Vue或者React的最佳开发实践。

关键词五:全栈

前端从纯UI层面走到了强交互,富逻辑,再发展到前后端分层,而更进一步,手淘前端团队到今天为止已经有了完整的全栈的能力,以前跟前端不沾边的“集群管理”,“QPS”,“CDN回源策略”等词汇,也都一一的成为了今年双11前端团队服务和系统的事实指标。在全栈这条路上,有太多话可以说。

此外,还有更多的“前端安全”,“UI测试和集成” 等关键词五,关键词六... 
在笔者这篇“抛砖引玉”的引言之后,将会一一展开和大家分享和讨论。

请大家拭目以待!

目录
相关文章
|
21小时前
|
存储 JavaScript 前端开发
使用Vue.js构建交互式前端的技术探索
【5月更文挑战第12天】Vue.js是渐进式前端框架,以其简洁和强大的特性深受开发者喜爱。它聚焦视图层,采用MVVM模式实现数据与视图的双向绑定,简化开发。核心特性包括响应式数据绑定、组件化、模板系统和虚拟DOM。通过创建Vue实例、编写模板及定义方法,可以构建交互式前端,如计数器应用。Vue.js让复杂、交互式的前端开发变得更加高效和易维护。
|
12天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
12天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
12天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。
|
12天前
|
移动开发 前端开发 UED
【专栏:HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
【4月更文挑战第30天】前端开发中的渐进式增强和优雅降级是确保跨浏览器、跨设备良好用户体验的关键策略。渐进式增强是从基础功能开始,逐步增加高级特性,保证所有用户能访问基本内容;而优雅降级则是从完整版本出发,向下兼容,确保低版本浏览器仍能使用基本功能。实践中,遵循HTML5/CSS3规范,使用流式布局和响应式设计,检测浏览器特性,并提供备选方案,都是实现这两种策略的有效方法。选择合适策略优化网站,提升用户体验。
|
12天前
|
前端开发 开发者 UED
【专栏:HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
【4月更文挑战第30天】本文对比了CSS Grid和Flexbox两种布局工具。Flexbox擅长一维布局,简单易用,适合导航栏和列表;CSS Grid则适用于二维布局,能创建复杂结构,适用于整个页面布局。两者各有优势,在响应式设计中都占有一席之地。随着Web标准发展,它们的结合使用将成为趋势,开发者需掌握两者以应对多样化需求。
|
12天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
12天前
|
前端开发 JavaScript 安全
【TypeScript技术专栏】TypeScript在微前端架构中的应用
【4月更文挑战第30天】微前端架构通过拆分应用提升开发效率和降低维护成本,TypeScript作为静态类型语言,以其类型安全、代码智能提示和重构支持强化这一架构。在实践中,TypeScript定义公共接口确保跨微前端通信一致性,用于编写微前端以保证代码质量,且能无缝集成到构建流程中。在微前端架构中,TypeScript是保障正确性和可维护性的有力工具。
|
13天前
|
缓存 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 前端路由实现原理
【4月更文挑战第30天】本文探讨了JavaScript前端路由在SPA中的重要性,阐述了其基本原理和实现方式,包括Hash路由和History路由。前端路由通过监听URL变化、匹配规则来动态切换内容,提升用户体验和交互性。同时,文章也提到了面临的SEO和页面缓存挑战,并通过电商应用案例分析实际应用。理解并掌握前端路由能助开发者打造更流畅的单页应用。
|
13天前
|
Dart 前端开发 测试技术
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
【4月更文挑战第30天】随着Flutter在跨平台开发的普及,保证代码质量成为开发者关注的重点。优质代码能确保应用性能与稳定性,提高开发效率。关键策略包括遵循最佳实践,编写可读性强的代码,实施代码审查和自动化测试。重构实践在项目扩展时尤为重要,适时重构能优化结构,降低维护成本。开发者应重视代码质量和重构,以促进项目成功。
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践