参加D2 2017是怎样一种体验？

个人参加D2这次是第三次了，每次从上海出发到达杭州，前两次分别是14年和15年。D2大会见证了前端蓬勃发展，每年的话题各不一样，嘉宾演讲内容来源于当下的项目实践和思考，紧跟当前技术发展潮流。

现场体验

D2前端技术论坛是Designer & Developer Frontend Technology Forum的简称，从2007年由阿里巴巴举办第一届大会以来，陆续举办了十二届前端大会，今年是大会成立十周年。会议开场由淘宝几个伙伴组建的996乐队激情演绎了原创歌曲《孤独的心 孤独的路》，活跃了现场气氛。接着主持人推出生日蛋糕庆祝大会成立十周年，虽然现场没有响起未准备好的生日歌，但这个仪式已经足足表达了大会一路走来的历程。

大会结束两三天了，是时候总结这次参加大会的感受。

话题交流

今年D2主要参加的话题有：

• 上午场
  • 360奇舞团月影大大的《自我成长的多元化团队》
  • 阿里信息平台熟米的《阿里智慧园区平台前端与IoT结合技术实践》
  • 阿里盒马岑安的《愿⻛裁尘，以⼼御匠——前端作为技术⼈的思考》
• 下午场
  • 哔哩哔哩戴天宇的《现代前端对视觉和交互的探索》
  • 腾讯田淮仁的《PWA带来极速离线Web》
  • 360奇舞团胡尊杰的《H5-Video实践》
  • 阿里云剪巽的《Node.js微应用实践》
• 夜场
  • 阿里天猫舒文的《天猫前端圆桌交流会》

《自我成长的多元化团队》

看到这个演讲标题脑海中想到这是一个与管理、个人／团队成长相关的话题，一般这个话题都会比较抽象，但听完整个演讲后脑海中对在一个团队中如何成长、如何突破有了更加清晰的认识。

月影演讲一开始抛出了两个问题：作为一名技术管理者需要具备哪些能力？技术管理者的价值是什么？

带着这些疑问先从介绍奇舞团当前现状说起，奇舞团是一个全栈业务团队，涉猎的方向包含基础服务／技术研究、中台、产品线，一个团队会首先从产品线业务入手，逐渐剥离业务沉淀技术服务，才会出现中台、基础服务／技术研究的技术支撑业务。奇舞团是一个重组织轻管理的团队，由团队扩大成组织从而形成影响力，打造影响力闭环需要输入和输出，这些依赖众成翻译平台提供素材打造了奇舞周刊、图书翻译，从而形成影响力。

管理就等于“搞人”吗？团队会为高潜员工培养提供职业发展，会有泛前端分享会为新人培训。对于外部人员提供了星计划和特训营服务，形成校园合作。一个好的组织具有多维度成长空间，每个人总能从中找到自己感兴趣擅长的角色，随着技术和业务能力提升，组织会出现接口人、管理岗、技术骨干、出品人、面试官、导师、讲师、译者等角色。组织通过以人驱动技术革新、以技术革新改变工具、以工具创造平台、以平台服务产品来提升效能。团队的话语权来自于有效的合作、兑现承诺、专业产出、团队氛围、影响力和组织，而不是来自于职级和title、以上压下、强势及抢占、垄断资源。绩效管理应该服务于团队，而不是让团队去服务于KPI。团队往往会出现积极派和保守派，都会认同人是技术进步的关键因素、建立组织能够提升效能，积极派认为技术是价值投资、新技术带来潜力、管理的价值在于承担风险，保守派则认为技术落地于产品、新技术带来风险、管理的价值在于规避风险。

月影的“懒人管理”模式是不干涉技术选型、不限制技术栈、鼓励尝新、鼓励“不务正业”、鼓励交流和个人成长，具备对技术发展了如指掌、对所选技术栈深度了解、技术兜底把控风险、提升效率重视结果产出、技术晋升的要求等能力，这些能力培养来源于关注周刊和众成翻译、好奇心钻研精神、时间管理专业能力培养、分享会个人影响力管理。持久地对技术进行投资，面向框架／库、工具／服务、技术产品以及业务支持。

管理者应当做什么？对上管理、对下管理、协调资源、有效激励、后勤保障，建立有效的组织，认同技术是一种长线投资。管理者不应该限制团队的未来发展，而是让团队自己去选择，即使管理者离开这个团队，团队也能朝着前方奔跑。

个人归属于团队，但不依赖团队，能够找到自己的角色持久地对技术投资，提升各项能力形成个人影响力，支持技术产品和业务的发展。

《阿里智慧园区平台前端与IoT结合技术实践》

前端碰上物联网会产生怎样的火花？

首先介绍了物联网有芯有网的特点，物联网的整体技术结构，近年来物联网发展情况。IoT具有大、快、难的工程特点，面对传统嵌入式／系统集成开发偏低的开发效率与互联网行业高速的迭代需求之间的矛盾，然后引出了前端与IoT如何结合。具备技术栈优势、注重开发效率、有着完善的包管理与社区的前端在IoT时代能做些什么？可以做设备、服务和客户端。

设备开发，将前端开发模式搬到集成电路板上，阿里自研的RUFF类似jQuery语法面对设备编程。采用Node.js、serverless来进行服务开发，在更多样的载体上像非标设备、可穿戴设备、无屏设备开发更多样的功能。

介绍了天猫精灵的产品案例，通过语音路由命令驱动实现功能。然后以一个更加贴近实际办公生活的例子阿里智慧园区（IB）平台进一步阐述前端在物联网上的功能实现。IB的总体架构分为云端和前端，云端涌来存储设备数据和相关规则，前端通过ib-OS兼容各种设备自带的标准协议来控制海量终端。现在人工智能发展的概念越来越火，在实际中的应用案例也不少，这里列出了在车辆识别和人脸识别的扩展应用，使得日常的生活工作更加便利。

但是前端在物联网上出现了相应的转变和挑战，从“做页面”到“做服务”，从“面向数据库编程”到“面向数据编程”，从“增删改查”到“可视化”、“可操作化”以及系统集成部署问题。从做页面到做服务更多的是与数据打交道，开放数据、承载数据、在平台上提供一揽子服务。从面向数据库到面向数据需要实时数据和可控模型。从表单应用到可视化提供空间、数据以及流程的可视化。系统集成会遇到多种内网、分层网络环境带来的部署问题。

物联网在现实生活中越来越普及，服务多样化，小到一个芯片大到一个集成服务，在生活智能领域扮演了重要的角色，在这个演讲中分享了物联网开发特点和遇到的挑战，给这个领域的新人展示了一个独特的视角。

《愿⻛裁尘，以⼼御匠——前端作为技术⼈的思考》

演讲者是一个愿意去思考技术的无线研发工程师，前端技术会深入到某个技术点，也会横向扩展到工程、架构、性能领域，由前端延伸到各种无线终端实现，具备业务技术能力。整个演讲的思路是先介绍了前端发展的历程，回归技术人的本质；思考了技术为业务服务的“从点到线”的路径；总结了技术人成长的三个关键词；归纳了前端的核心竞争力，还原技术人的本质。

前端发展历程经历了Web 1.0、应用时代（MVC、SPA、MV**）以及云+端几个发展阶段，每一个阶段的出现都伴随着革新技术的出现，浏览器出现出现了各种技术规范引领Web 1.0时代，XMLHttpRequest出现使得前端进入到应用时代，Node.js出现前端应用扩展到云和终端。但每个阶段都会遇到许多问题和出现相应的解决方案。Web 1.0时代注重页面内容承载、排版、阅读体验，应用时代侧重框架、工程化、富交互与性能，云+端带来新的研发模式和面对新的业务场景。深入实践和思考形成大前端五大方向：企业中后台（组件、协议）、开发者服务、泛Node.js、端技术（Weex+Webview）和图形（可视化+互动能力）。

从业务到技术的思考路径有以下几个阶段：（1）需求和项目分阶段，连成线来看;（2）从过去的状态和问题推导下一阶段业务方向；（3）从下一阶段的业务挑战推导技术挑战；（4）从技术挑战拆解技术项目。演讲者通过一线业务实践阐述了各个阶段的切身体会：技术为业务服务需要“从点到线”，技术架构和领域模型需要“从面到点”。

技术人成长的三个关键词：做（有目标的做，分阶段的做，做到极致），思考（核心，why有时候比how更重要），发声（执行的总结，思考的传达）。关于“思考”的两方面：人和事，思考自己、思考团队和业务节奏、技术拆解。关于“做”：往往一接到事情就埋头扎到“怎么做”这个维度上，可是比方案更重的是“why”和“目标”。这里举了“稳定性”的例子说明怎么样去做。关于“发声”：本质是思考的传达和帮助自我梳理总结。

前端的核心竞争力基于各种各样的知识和技能对于业务和团队问题的拆解并输出解决方案且落地的综合能力。

《现代前端对视觉和交互的探索》

现在前端的视觉越来越人性化、交互越来越炫酷流畅，那么B站都做了些什么尝试呢？

首先展现了B站与往年不太一样的大型活动一些探索。第一个场景是BML2017，为BML2017设计制作的主视
觉⻚⾯。运用了HTML5视频、Transition/SVG、Keyframes/ReactMotion、Canvas邀请函等技术实现动态效果。第二场景是Double;7，为七夕⽽制作的GalGame游戏。GalGame包含了纯剧情向，对话主导，场景、立绘、音乐和动画效果，内容包含舞台（图层）、虚拟话剧、剧本（DSL），技术亮点是二维大画布、分格随机位置大小、陀螺仪、弹幕推送。第三个场景是JingleBeats，一个为圣诞而制作的音游。采用了谱面解析、节奏序列和仲裁函数生成、时间控制画面、事件系统发布订阅模型、基于Shader的效果等技术实现。

接着引出了当下思考，现在前端在做什么。现在的大多页面由文本、图像和流媒体构成，交互基本上都是以点击和键盘输入，最多加上一些简单手势。网页可以展示的内容随着时间的前进，根植于不断提高的基础设施，越来越丰富，最终使其拥有了制作近似于桌面应用的SPA的能力。发展到SPA后，甚至有了Electron、RN等，有了能制作桌面应用的能力后，前端的下一步是什么？

然后嘉宾带着我们开阔眼界，走出Web领域看看其他领域的发展情况。前端领域在⼯程化、⼤前端⽅向基本搬来了整个传统领域的解决⽅案，那么在视觉和交互⽅向是不是也能有所借鉴？桌面领域OpenGL／DX渲染十分成熟，大型游戏和VR的基石；移动领域也有OpenGL-ES以及丰富的传感器设备；机器学习在某些领域能够解决一些经典方法难以解决的问题；艺术领域也在寻求新的媒体介，新媒体艺术越来越火。新的媒介不断发展，如3D扩展空间维度、VR带来沉浸式体验、AR增强现实。多种多样的交互输入，手机上已经具备GPS、陀螺仪、摄像头/麦克风、触控功能。机器学习不断深入实践，海量数据加工提取的价值越来越大。艺术近年也向新的媒介发出了探索，新媒体艺术的参与者越来越多。

我们回来看看自身能做什么。Web基于浏览器可访问的资源构建起的应用系统。前端，本质实是⼀个“连接器”，利⽤可视化等技术，将⽤户⽆法理解的科技和内容⽤其可感知的⽅式呈现出来，即实现“⼈机接⼝”。Web前端，本质上是在浏览器这个平台上，实现⼈机接⼝的⼯程师。不断有新的基础设施落地，CSS3/WebGL、Sensors／WebRTC、GPU运算、工作于渲染线程之外的Workers。丰富的类库给开发门槛带来大幅下降，为复杂应用实现带来了极大便捷，比如Three.js使得3D图形开发门槛大幅下降，PIXI和Egret为2D复杂应用（游戏）带来了极大便捷，Babylonjs引擎让Web上的3D游戏成为可能，ReactVR降低了WebVR/AR门槛，deeplearn.js开启了前端机器学习的可能。Web形式不断演化，从单调展示、简单交互的静态页面发展到具有丰富视觉效果、丰富交互的SPA，进而进化到游戏形式，借助于wasm和asm.js当下一些著名游戏引擎（比如U3D、UE4）也逐渐支持渲染到WEB。

最后以一个复杂交互的DEMO（3D相册）将全场气氛带入了高潮。three.js实现场景渲染，光照、模型加载、阴影；physi.js实现物理引擎，raycaster实现捕获事件；WebVR标准实现VR模式，使用webvr-polyfill做兼容；PC（点击）、移动（触摸）、VR（陀螺仪）三级输入。

更多例子值得学习：

• http://www.ebay-report.de/ebay-in-zahlen/
• https://emmitfenn.com/
• https://noheroes.ghostrecon.com/
• https://controltheweather.geostorm.movie/
• http://2017.makemepulse.com/
• http://residente.com/
• https://my.pottermore.com/hogwarts
• ……

《PWA带来极速离线Web》

PWA即Progressive Web Apps的简写，是Google提出的用前沿的Web技术为网页提供App般使用体验的一系列方案。相关浏览器产商目前对这套方案支持程度不一，这两天看到新闻最新发布的Safari 46技术预览版里，将默认打开支持PWA功能Service Worker，这意味着苹果正在逐步接受PWA，我们将进入PWA的时代。

回到这个演讲正题，体会PWA实践，内容分为四大块，分别为PWA尝鲜、离线缓存、SW离线包策略、未来规划。

PWA尝鲜这部分包含了PWA技术涉及的基础内容。PWA是由一系列方案构成的，分别是Service Worker、CacheStorage、WebPush和Manifest。Service Worker运行PWA的骨架，基于worker；Push像APP一样实现推送；Cache替代以前的manifest，实现灵活缓存；Manifest用来生成桌面ICON。Service Worker类似于Fiddler用来监听页面请求，接受后台Push，管理离线Cache资源，新开／聚焦页面。Service Worker基于Worker的难点在于域名限制和生命周期控制（初始注册、脚本更新、终止生效）。

离线缓存总结实践过程中SW加载时延和离线包的对比。常用存储有CacheStorage、IndexDB、LocalStorage、WebSQL，其中比较安全的缓存是CacheStorage。CacheStorage只能在同域中读取，支持promise API风格，完美结合fetch。这种缓存并不是能够随意存储任何大小的内容，受到浏览器的限制，不同浏览器的共享空间不一样，可通过大小检测（Quota Management API）来查看各个内存使用分布。使用LRU或者淘汰策略来移除溢出的缓存。缓存策略分为三种，分别是persistent（基本不修改，随Service Worker一起更新）、seldom（很少修改，N+1更新）、often（经常修改，不缓存）。

Service Worker离线包策略结合多种离线数据库，制定离线策略方法和方案。针对实际的应用场景需要离线包，采用灰度、增量部署、Push下发的方式来更新离线包。而Service Worker离线与LocalStorage存储灰度List、HTTP Last-Modified/E-tag缓存头和Push Message有关。离线包与Service Worker在更新方式、更新大小、返回效率、离线资源控制方面相比，Service Worker更新速度快，离线包文件小但覆盖很慢。没有离线包技术可以试一试Service Worker。

未来规划谈到了SW离线库优化和便捷库的提供。iv-pwa提供现成Service Worker缓存策略和library，方便接入灵活处理。iv-pwa-plugin提供webpack-plugin插件，适用于webpack构建项目接入PWA。WebPush实现Push动态更新。

《H5-Video实践》

H5的Video实践，不就是一个Video标签用来展示视频内容吗？听完这场演讲后，从嘉宾的演讲内容会得到更多的答案。

首先介绍了Video标签基本应用。

<video src="//chimee.org/vod/1.mp4" controls>
  您的浏览器不支持Video标签。
</video>

H5视频容器支持的格式有好几种，MP4、OGG、WebM、M3U8等，但是它们在各浏览器上的支持程度不一样，MP4的支持程度较高。可以使用source标签来设置多个备用video源，根据容器类型兼容canPlayType判断浏览器是否支持某种格式及特定编码。

接着通过实例来展示Video的交互应用，可以通过JS API进行状态修改和事件监听响应状态的变化，配合FileReader播放本地文件、基于WebRTC播放摄像头视频流、基于getUserMedia API播放摄像头视频流、配合canvas实现人脸识别、配合MediaRecorder API实现视频录制、采用JS动态创建媒体源MediaSource，充分展示了Web前端可以做许多有趣的事情。

然而前端无法避免环境差异，在各环境中外观UI风格迥异、API实现参差不齐、事件交互表现各异、媒体解码能力莫衷一是。在实际媒体播放开发中也会遇到不能满足当前现状的种种问题：状态处理容易存在冲突、交互与层级管理的矛盾、日志收集上报易耦合。在这种现状下需要有一套更理想的解决方案来面向未来、最小化环境差异影响、兼容主流业务媒体资源，并且插件解耦与合理模块化，360前端团队产出了一套基于Video的可扩展的H5播放器解决方案Chimee奇米。

Chimee采用模块化分层设计，分别为Kernel层、dispatcher层、plugin层，其中Kernel为框架的底层用来解决各视频格式编码问题，dispatcher提供了一套事件处理方法，plugin用来为video自定义插件增加新的功能。可通过Chimee为业务做定制化开发，扩展Chimee插件增强业务功能。

《Node.js微应用实践》

这个话题围绕前端、Node.js，聊到前端的微应用开发体系的实践，包含这三个部分：什么是微应用？为什么微应用？怎么构建微应用？

通常把产品分割为多个小模块，切细了开发。一个微应用完成一个业务功能，几个微应用组合得到新产品。那为什么要微应用呢？一个产品是一座冰山，一个系统用户不可见部分多得多，除了用户业务，还有各种管控、数据报表，出现前台业务耗费大量精力，后台系统力不从心的现象。数据场景具有众多的计算引擎、服务众多、服务访问量不高但很重要、需求众多等特点。

前端的通常状况是怎样的呢？基于Node.js作为开发工具，实现模块化、数据mock、打包编译、集成后端服务……开发、联调、集成，全套流程繁琐。碰到各种如小工具、ab测试、抓数据、文档服务等服务需要考虑到机器、访问、运维等问题。加上前端人员紧缺，提高前端的效率，从侧面解决人手短缺。如何改变这种困局呢？可以采用构建Node服务开发体系、分割产品、构建为应用运维体系措施提高效率，管理好产品经理这基本是很难的。然后介绍了各个措施的基本思路。构建Node层开发体系：web层框架一体，抽取前端的组件包，抽取Node.js层包。分割产品：信息架构，业务架构，多应用。构建微应用运维体系：构建，发布，运维，监控，扩容。

阿里云的实践体系分为微应用体系和进程管理之外的部分。微应用体系由app运行托管服务、app开发框架、运维和开发工具构成。进程管理之外的部分由路由托管，高可用、版本无缝切换，便捷配置、运维管理，面向进程vs面向应用构成。微应用在效率（开发、测试、重构、复用）、解放前端劳动力、节约资源成本上具有优势。微应用与微服务的关系，正像java与javascript，雷锋与雷锋塔的关系。与微服务对比，微应用关注应用接入和访问，微服务则关注服务接入和消费。

随着水下冰山在壮大，产品数据化研发需求，前后端分离的架构模式形成，产品的规模不断扩大，尝试使用微应用来开发产品。未来的AI由智能，数据和App（外设：接收端和执行端）构成。

《天猫前端圆桌交流会》

整个圆桌交流会原定时长2个小时，活动组织者邀请了参加D2其中的三十来人参加此次交流会，大家的热心和激情交流会持续了3个小时，切身投入到这个交流会比白天听他人演说收获更加丰厚、更有针对性。

交流会分为上下场，上半场由天猫前端委员会主题舒文给大家分享了天猫前端相关话题，围绕着“天猫前端组织的运作方式”、“全栈技术体系在天猫的应用场景”话题进行细说，下半场大家互相讨论各自遇到的问题以及感兴趣的话题。

上半场首先介绍了天猫在整个阿里体系的地位，天猫涉及到的业务。目前整个天猫前端团队150人左右，分成了4个组，各个组的侧重点不一样，目标是一致的。以双十一项目展开，在人力不足的情况下如何按期高质完成任务。除了单纯靠人力去完成外，还会借助自研的工具去高效完成。磨刀不误砍柴工，在业务场景下产出高效率的工具，才能更好的应对各种挑战和源源不断的业务需求。接着谈到全栈技术这个概念，虽然在工作岗位上有各种title，实际上面对一些棘手的问题，需要自己跳出这个圈以更广阔的视角去考虑问题，才有可能很好的解决问题。这个以页面性能优化为例，如何减少首屏的白屏时间尽快看到页面内容，圈内流行的雅虎32条性能优化黄金法则往往有限，需要结合后端一起去探讨这个问题。

下半场讨论大大小小的问题有许多，主要集中在技术视野和基于业务场景解决问题的能力培养、造轮子与资源利用之间的关系、前端委员会服务型理念、跨端跨团队学习沟通等话题。这里我提出了一个问题是“如何在跨团队间高效率完成工作任务？”。穆宸给了我一个比较满意的答案：“首先各团队要有相应的流程规范，然后项目需要把接口明确，各自做好mock数据单元测试，出现问题和风险及时主动推动”，平时在工作中也有按照这种思路去解决问题，但要完完全全落实到项目中往往不到位，各种非技术风险没来得及提前规避，在以后更需要高效率沟通去推动团队间协作。

最后以穆宸的一段话来结束这场火爆的圆桌交流会，“前端不只是开发页面，前端是用来解决实际问题，思考解决执行效果”。

会后小结

这次大会一共有21场主题演讲，限于个人精力和场地因素，只能优先选择上面这些话题，当然其他火爆的话题有《打造高可靠与高性能的React同构解决方案》、《Microbenchmark for JavaScript》、《前端复杂应用构建技术探索实》、《把前端监控做到极致》、《QQ空间HTTP2加速实践》等，这些会后结合PPT与视频慢慢消化，后期再补上文章小结。

还记得毕业那年14年兴致勃勃地参加主题为《绽放》的大会，Node.js在生产中的大规模应用，将前端工程化实践引向了新的高度；移动互联网的发展，前端玩法异彩纷呈；用户体验的增强，前端富应用已然成熟。15年大会主题《融合》，探索从web到端的实践，Node.js加速网页渲染效率，组件化实践提升开发效率。这次大会主题《匠心》，前端话题显得更加多元化，开发涉及的端已经不止局限于PC端和移动端，最新的物联网领域前端开发在大会中首次露面，人工智能也有所提及；应用开发实践与体验优化占据了很大篇幅，日常工作中的重中之重；技术之外个人、团队成长的思考非常重要，如何保持在日常工作中得到快速成长是一门非常值得探索的学问。

日常工作中要善于去思考、去实践、去总结，收获会更多。