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 201五、Node.js，能够说在短短几年时间，前端领域迅速地补齐了不少早期缺失的能力。

至于前端的变化，我以为大概能够归类到三个层面：

1. 平台延伸

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

2. 语言加强

HTML五、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