QCon2013上海站总结 -- 前端开发

选择这个专题开始主要有两个原因：一是这次会议关于前端开发的内容不多。二是我做过几年前端开发，这个专题对我来说会容易点：）

这次QCon上海关于前端开发有一个Keynote，一个Javascript专题。另外就是别的专题中顺带到的分享，如前端测试。具体链接如下：

• Javascript生态圈：http://www.qconshanghai.com/node/318
• 前端开发的Keynote：http://www.qconshanghai.com/node/410
• 前端测试：http://www.qconshanghai.com/node/347
• Javascript in Facebook (ReactJS): http://www.qconshanghai.com/node/345

我聆听了其中的部分，首先我要强烈推荐来自Facebook前端工程师Hedger Wang关于前端开发的Keynote。这位来自台湾的牛人先后在Yahoo、Google、Facebook工作过。他分享了自己对于Web App被Native App全面超越的看法，总结了目前Web App开发所面临的挑战。更重要的是他比较仔细的分析了Web App的未来趋势。个人觉得他的演讲是我在这次Qcon上所听到中最棒的。如果你对前端开发比较感兴趣，我强烈推荐你去看看的他的Slides，也可以联系我一块聊聊。这里，我把这个Keynote的要点总结如下：

• Web App主要职责：资料呈现和用户交互
• Web领域过去10多年最稳定的技术就是HTML（一直就那些标签而已），这背后主要的原因是HTML标准关注的语义描述，而不是具体实现，并且够简单够直接。
• Web App未来的趋势：
• 去框架化（或者叫标准化）：我们现在有太多的前端框架，如JQuery、YUI、ExtJs，而且它们都不相容，最关键的是它们做的很多事情都是类似。这给前端开发带来了很多不必要的麻烦和开发成本。其实Javascript标准ECMAScript已经升级到V6，里面已经标准化了很多框架做的事情（而且都是最佳实践），如继承。前端开发应该尽量去框架化并拥抱新的ECMAScript标准。面对现在主流浏览器都只支持ECMAScript V3的问题，你可以找到很多开源软件（如JSTransform, esprima, google traceur-compiler等）把你的JS Codes转化成现在浏览器所能支持的版本去运行。
• 组件化：我们应该学习HTML标准，把前端的组件逻辑，状态和它的具体绘制逻辑给分离开。在现在的前端开发中，我们经常用CSS来表示一个组件的状态（如用特定的CSS Class来表示一个Tabs组件当前Active Tab，这就是一种典型的利用下层绘制技术来表达组件状态的例子。这种方式让组件的逻辑层和它的实现层混合在一起，非常不利于开发，维护和跨平台。Facebook为此提出了一套自己的解决方案：ReactJs。你可以参考上面的链接了解更多细节。
• 自适应化：面对现在客户端的碎片化，前端开发面临的一个大挑战就是怎样在不同设备上呈现内容。目前普遍的做法就是针对每种终端重做一份。Hedger认为这种方案并不是最佳的（需要额外的开发人员，不同终端上的功能不同步），我们应该在组件化的基础上实现组件的自适应化。让各个不同终端共用统一组件逻辑，而让组件自身能够自适应它所运行的终端。现在Facebook已经开始这样做了。
• 声明化：声明化应该是针对传统我们的命令式编程方法而言。它强调的是对问题自身的描述，而不是怎样通过命令式的逻辑流去解决一个问题。SQL就是一种典型的声明式语言。这个应该是最近开发语言的一个主要发展方向（如函数编程）。关于它怎样运用到前端开发，本人还是理解不多~~
• 并行化：传统的浏览器一直是单线程模式，它极大的限制了Web App的表现能力。现在Google从WebKit中分支出自己的Blink项目，一个非常重要的功能就是给浏览器添加并行化运行的能力。一旦这个做成了（而且成功的可能性非常大，毕竟Google有自己的浏览器和牛逼的人），前端WebApp的表现能力将会有很大改善。

整体而言，Hedger还是非常看好前端的发展，并且认为前端开发正在进入一个新的崭新阶段。另外我非常佩服Hedger做技术讲座的能力，他能够把一个问题的前后逻辑用非常简单、直观的方式表现出来。等他的视频在QCon上面出来后建议大家去看看。这次QCon的一个感觉就是技术人员的技术表达能力有时候会比他的内容还重要。

 

另外，我听了两个关于Web前端测试的讲座。我选择这个领域是因为几年前我们做前端开发的时候，对于Web测试一直都没有很好的解决方案，尤其是Web前端测试的稳定性一直是困扰前端QA的头等麻烦。这两个讲座都是关于Web前端测试稳定性的内容，但侧重点有所不同。

• 顺势而为的Web自动化测试：这个讲座主要是关注怎样保证测试用例的稳定性。其基本思想是从用户的行为角度来设计测试用例，并用XML的方式表达它，然后利用专门的工具把XML测试用例翻译成可以在前端页面上运行的测试用例并运行。这样就隔离了测试用例和具体DOM Tree的实现，从而保证了测试用例的稳定性。
• totoro - 简单易用、稳定的前端单元测试工具：这个讲座主要是从测试环境的角度去保证测试的稳定和高效。该讲座分享了支付宝是怎样建立一个高效、稳定、支持多浏览器的测试环境。该环境大大提高了前端开发人员的效率并保证了前端的质量。个人觉得是一个不错的分享，值得前端团队学习一下。