SegmentFault 专访 | AlloyTeam 2015 前端技术大会讲师圆桌

导读

继采访 AC 2015 讲师高工晓思之后，我们又访问了 AC 2015 的另外三位讲师：来自 AlloyTeam 的工程师郭碧青、潘佳韩和王斌，整理成这篇讲师访谈圆桌。

下面是三位讲师的简单介绍。

郭碧青：我是 2011 年加入腾讯 AlloyTeam，先后开发过 WebQQ，Q+，QQ 互联，兴趣部落。曾参与春节兴趣部落红包项目，成功应对每秒 50 万的并发。现在主要的精力还是在业务产品上，最近应用 React 的方案实践兴趣部落 PC 版 web 的优化。

潘佳韩：我是 2012 年加入的 AlloyTeam，这之前也参与过兴趣部落、群活动等项目的开发。目前是手机 QQ 家校群项目的前端主要负责人，包括制定家校群移动端详情页功能、题库功能、PC 家校群功能的交互及技术方案，保证家校群功能的稳定上线，以及对内推广 React + Redux 技术等。

王斌：我也是 2012 年加入腾讯 AlloyTeam 的，先后开发过 Q+ 互联，兴趣部落，基于个人兴趣，也开发过定位于专业图像处理的前端引擎 AlloyImage，前端辅助工具 AlloyDesigner, AlloyImage, AlloyPhoto 等有趣的设计、图像处理开源项目。重点还是放在 Abstract 框架上，开发 Abstract 框架并将其应用到兴趣部落、群活动和群通知等项目中，同时开发 SodaRender 模板引擎，替换了部落中老旧的 ejs 模板语法形式。

下面的访谈主要内容是围绕他们个人的经历及本次 AlloyTeam 2015 前端技术大会上他们所要讲的主题的简单分享。

AC 2015 剧透

AC 2015 是 AlloyTeam 首届技术分享大会，你们围绕性能、框架、交互三大前端领域进行分享，能分别剧透一下你们的分享吗？

郭碧青：我在 AC 2015 主要的着墨点是性能的一个关注重点——首屏时间的优化。应编者邀请，我会结合一下知乎上有关 QQ 空间性能的热点谈谈自己的看法。Web 性能一直是我的关注焦点，因为自己平时对浏览页面的要求非常高，糟糕的 Web 性能对用户和产品都是一种伤害，我不希望这种事情会发生自己负责的产品上。

Web 性能主要集中体现在两个环节：加载过程和运行时间。然而一个网页给用户的印象，往往在加载过程中就能得出优劣的判断，原因是一般情况下，网页运行时并没有明显的瓶颈，只有加载时的白屏等待时间、页面各个模块逐渐呈现的过程，是有明显感知的。因此，BAT 的前端工程师们，都会在加载性能上做很多监控和优化。

QQ 空间的性能讨论我也看了一些，很多 QQ 空间的开发者们都已经分析总结了不少内容，我就简单分享几个看法好了。

1. 万变不离其宗。其实 Web 加载性能的优化，讲来讲去，并没有比 Yahoo 总结 n 条优化军规超越多少，因为很多耗时环节在于 Web 页面赖以生存的 HTTP 协议与浏览器。所以在缓存利用、请求合并上，只要做到合理，大家就没有太多可挑战的地方。

2. 项目迭代之殇。任何单一的技术点讲起来都很简单，然而在瞬息万变的 Web 世界，一切都变化的太快：需求在变、人员在变、技术在变，很有可能你的代码明天就被其他人改了，也有可能你接手了某个已离职人员的代码，所以优化的工作会周期性进行，只要产品还在发展，这项工作就永远不会结束。

3. 系统方案思考。QQ 空间是有着近 10 年历史的产品，过程中虽有过几次大的重构，但毕竟是有历史包袱的。如果一个新的产品，没有那些历史包袱，若能存活 10 年，是否在 10 年后，也能顺应期间的变化，保持性能无人能挑剔呢？我想这也是很多团队可能正在总结的内容，而我们团队也希望在这个方向，能利用组件模块化、工程化等框架／工具，整合出一套解决方案来。

王斌：我会在 AC 2015 中重点介绍 Abstract 框架。这是兴趣部落移动端推行的一套开发框架。我会和大家讲一讲他的定位，发展方向，以及对比现在流行的 React、Angular 的优势。

Abstract 专注效率的提升，它定位在对逻辑层的抽象与封装，所以你的业务逻辑必然被它轻松抽象和封装（Abstract 抽象出了模型间关系，并且可以完备表述所有具象逻辑，并且是数学可证的），简单的几行代码就能完成具象的业务逻辑，这是Abstract的理念，也是他未来的发展方向。

可能大家第一眼看 Abstract，觉得没有太多的新鲜感在里面，不像 React 一样，会给你眼睛戳上一下。也没有像 Angular 一样，给你一种动态十足，很酷的感觉。但 Abstract 就像公司一贯的风格一样，低调、实在、踏实做事。Abstract 是兴趣部落的选择，支撑了兴趣部落亿万次的访问量，经过了千万客户端的检验，是一款方便、快速、稳定的前端框架。相比 React、AngularJS，最直白的不同点就在于 React、AngularJS 不会帮你写业务逻辑，而 Abstract 会，它可以处在 React、AngularJS 的上层，因为 Abstract 就是定位在逻辑层的抽象与提取。更详细的分析，React 和 Abstract 一样，都是基于状态管理的，React 的状态有多种，Abstract 的状态只有两种：激活态与非激活态（像2进制一样）。与 AngularJS 的相同点，就是借用了 AngularJS 的模板语法。

Abstract 的优势有很多，对比 React，它更加轻量；对比 Angular，它拥有更好的移动性能；对比使用单一的 Javascript 库，它能在几分钟内搞定一个需求或者页面，总之，使用 Abstract 会让你更好更快地完成你的开发任务。

潘佳韩：这次我的讲题是关于移动的交互。交互跟用户体验密切相联。工程师要做到极致的前端用户体验，其实是有诀窍的。

首先，我觉得最好在交互设计师把效果做出来之前，先跟他们做好沟通，看看他们的想法是否能很好地还原效果，这样能有效节约双方的时间。举个例子，之前在做手 Q 群活动的详情页的时候，有这么一个交互设计：顶部有一个大图背景，上面会有一些活动的地点、时间等基本介绍。当用户滚动的时候，这个大图背景高度随着滚动相应变小，活动的资料也会相应调整其位置。有经验的前端工程师一看，就会知道，由于某些设备的性能问题，没有可能 100% 还原这样的效果，当时交互居然还把交互动画做出来了。我看交互做得这么辛苦，把这个效果的实现分配给了新人，让他认真调研一下。最后只能用一个替代的方案，当滚动条到一定的位置的时候再触发大图背景的变化，而不是逐帧变化。类似的事情其实还发生过不少，交互设计总喜欢追求酷炫，而无视具体实现的效果。

其次，想做好交互，我觉得核心不是页面真的快，而是用户感觉快看起来快，有些事我们就躲在幕后默默帮用户做。做过前端项目的人都知道，很多时候，交互设计师只会给你一个设计图，虽然那样已经是非常仔细了，但总是会有很多交互并没有仔细规定，需要前端去拿捏，我们姑且称之为交互设计的灰色地带。最常见的就是加载状态，交互设计师并不会规定你什么时候需要加载，因为这涉及具体技术上的具体实现。

举个例子，家校群需要业务做一个叫做先锋教师的运营页面，用来吸引老师使用，页面包含加入页和成功页。如果你将两个功能放在拆成两页面，跳转的时候就需要加载，如果做成同一个页，但另一个页面的资源是按需拉取的，这也需要加载，只有一次加载好的技术实现，可以略去加载这一步。让页面加载，即是让用户等待，我们是希望尽量避免的，但有时候我们无可避免需要取舍，因为如果我们希望用一次加载完这种方案，可能会伤害首屏加载的体验。有时候用户抱怨页面加载太多，其实他们并不知道我们在实施这种方案后面的种种考量。

框架应用方面，据说家校群 PC 功能页面是手 Q 第一个实践 React + Redux 这套框架组合的业务，能不能和我们讲一讲用这套新组合的时候你们有什么考量？这套框架有什么优势呢？

潘佳韩：这个业务目前由我来负责，尽管我并不会在 AC 2015 大会上分享，但私下可以跟我或者我的徒弟郭林烁一起交流。

首先，我们一直用着的那些框架在业务迅速扩张的情况下问题会越来越明显，比如扩展性变差、模块化的设计存在缺陷等。其次，这些框架用得太久了，我们想试用一些新的技术，来带动家校群项目组的技术提升。此外，因为我们的页面会嵌在 PCQQ 的页面框里，这个框自带 webkit 内核，这样我们完全可以忽略 IE8 或以下的浏览器，技术选型可以更大胆一些。

当时 Redux 已经诞生大半年了，技术也逾趋成熟，因此我们跳过了 Flux，Reflux 这些框架直接使用 Redux。由于家校群功能页面是一个中等规模的单面应用，因此用 React + Redux 的的优势会比较明显。功能页面分成作业列表、布置作业、作业详情、回答作业、作业分析等几大模块，我们主要使用 webpack 进行开发和编译，将不同模块分拆成不同大组件，大组件下面再细分小组件，组件在复用的时候大大减少了旧有模式的代码量和维护成本。在不同的模块进行交互、切换的时候，只需要发起一个动作 action 就可以进行，比旧的模式更能进行代码解藕和排查错误。

AlloyImage 的诞生及前端未来

下面，我们来聊聊天 AlloyTeam 的开源项目吧。AlloyTeam 成立以来贡献了许多优质的开源项目，其中王斌你主导开发的 AlloyImage 诞生之后反响很好，台湾的开源组织还想邀请你过去做分享。请问你是从哪里获得这个项目的灵感的？在开发过程中遇到哪些难题，又是怎么一一解决的？

王斌：AlloyTeam 能诞生不少优质开源项目，主要还是因为团队文化吧。AlloyTeam 非常鼓励成员除了完成产品需求之外，再开展一至两个自由项目。如果项目达到比较好的水准，就可以将它对外开源。尽管会非常忙碌，但痛苦并快着，在 AlloyTeam 工作的前两年我技术突飞猛进。

谈到 AlloyImage 的诞生，是因为接触 canvas 之后觉得 canvas 很好玩，可以做以前前端做不到的东西，于是有一些想法，可以尝试做一个图像处理应用，之后得到了涛哥，我们帅帅的 AlloyTeam 团队负责人的大力支持，就花几个月开发完成了 AlloyImage。

AlloyImage 在业界受到如此的关注，我觉得有三个原因。在我的调研里，使用 JS 写的前端图像处理引擎中，AlloyImage 是第一个使用图层来进行图像处理的 JS 库，这是第一个原因。AlloyImage 拥有 17 种完善的、与 PS 相对应图层混合模式，这为 AlloyImage 定位于专业级的图像处理奠定了很好的基础。PS 中图层与图层混合模式是非常基本的功能。AlloyImage 中的所有操作，都是依赖多图层的概念上展开的。看似一个很简单的复合图像处理效果，比如 LOMO 效果，实际上经过复制多个图层混合得到的效果。这也为得到更多的高级效果提供了很好的支持。第二个原因就是 AlloyImage 功能确实很强大、性能很好，是成熟的产品，可以应用到实际的产品中去。国内很多人会尝试写一些图像处理引擎，但很多都是用来练一练技术，应用到实际的项目时会发现缺更多的功能与操作能力，而 AlloyImage 中包含的亮度、饱和度和色相的调节，都是在图像处理中最基本的功能。另外，曲线这个锋利的调节工具，AlloyImage 是具有的。甚至在专业调节里面用到的可选颜色功能，在 AlloyImage 1.2 的开发版本中已经实现，为调出专业色调的照片做好的充分的准备。第三个原因是 AlloyImage 的 API 设计的很友好，很方便使用。

接下来说一下开发项目遇到的一些难题，首先是理论知识，要去学习图像处理的基本知识，这些知识都是晦涩、难懂的，与应用结合的数学与传统的理论数学还是有一些区别，而且离散数学体系与连续数学体系还是有一些差别的。但这些都不是问题，只要多看几遍就能学会，毕竟都是熟悉的符号和变换。

再一个比较头疼的问题是怎么去设计 API。解决这个问题就是你做第一个使用者。很多人在设计库或框架的时候，只是单纯设计库或框架，并没有实际的产品。为了使 AlloyImage 库的 API 设计的更合理，我开发了 AlloyPhoto 来做为 AlloyImage 第一个使用者产品，不断调整 AlloyImage 的接口，使得它更符合实际应用的接口设计。

早前，前端工程师徐飞在 GitHub 上面对前端的十年发展变化发表了一家之言，请问 AlloyTeam 内部有对前端技术的发展有过讨论么，有没有什么结论可以分享给大家。

郭碧青：我简单谈谈吧。前端这几年真的发展非常快，偶尔会听到同事开玩笑，戏称已经跟不上时代节奏了。确实有些爆发性的发展，从早前的浏览器兼容、jQuery、雅虎十四条，到工程化思想、ES 2015、Node.js，可以说在短短几年时间，前端领域迅速地补齐了很多早期缺失的能力。

至于前端的变化，我觉得大概可以归类到三个层面：

1. 平台延伸

Node.js 的出现，不但让前端在服务端有所作为，还在构建、工具、甚至桌面客户端，都有不俗的表现；同时，随着移动大潮的兴起，移动设备的普及，Web 页面也在社交网络中承担着重要角色。也就是说，前端开发可以触及的领域更多了，可以在浏览器之外做更多提升用户体验，以及开发效率的事情。

2. 语言增强

HTML5、CSS3，这些语言层面的标准规范升级，也给前端带来更多的生机。除了以往的 DOM 操作、简单样式，我们可以利用 Canvas 做游戏、骨骼动画，用 Websocket 更优雅地实现实时场景需求，用 CSS 实现圆角、渐变、阴影等效果，还有 Web worker、LocalStorage、WebGL、离线缓存等丰富的 API 可以使用。不久前，ES 2015 也定稿了，JS 这门脚本语言本身，也在紧随发展增强，弥补之前所缺失的一些语言特性，同时提升代码的书写效率。

3. 理念更新

首先是开发理念，早期的页面逻辑相对简单，对 DOM 的操作也相对粗暴，导致的结果就是维护性很差。在改进的过程中，涌现了不少 MVC 库，在此之上又出现了以 AngularJS 为代表的 MVVM 框架，近期开始流行组件化开发的 React.js 等，这些开发框架/库只是结果，其背后都有着明确的开发理念作为动机，本质上都是维护性与开发效率之间的平衡，而性能对比则是其次的事情（大家通常会过于纠结性能的论）。

其次是工程理念，由于前端代码是不经编译就能运行的，所以以前并不受大家关注。随着 Node.js 的出现，涌现了一批模块化、预处理的工具，又是让大家眼前一亮，很多性能、维护性的问题迎刃而解。同时，随着页面复杂度的提升，人们对真正意义的组件化开发模式呼声更高了，而这些都是需要优良的工程方案作为其中的粘合剂的。

除了技术方向的变化，整个业界环境也在改变。随着 GitHub 的流行，程序员之间的交流早已消除了国籍界限，新技术、新名词传播的特别快，大家也更乐于开源项目代码，或者是贡献代码。总之，现在一名合格的前端开发人员，已经不再是那个被困在浏览器的页面仔，而是一个被赋予了更多能力和工具，给用户带来更好体验的工程师。

AlloyTeam 2015 前端技术大会

首届 AC 2015 大会即将于 2015 年 12 月 12 日在深圳腾讯大厦总部举行。这是 AlloyTeam 沉寂一年来首次对外举行的一次技术分享。AlloyTeam 前身是负责 WebQQ、Q+ 互联的腾讯前端团队，最近又历经了兴趣部落、群开外、家校群等一连串 QQ 拳头项目的洗礼，积淀了不少技术知识，希望借着一年一度的技术分享会对外展示我们一年以来的技术成果。届时，亦会有神秘 web 游戏项目对外公布。

AlloyTeam 2015 前端技术大会：http://segmentfault.com/e/1160000004119995