w3ctech-豌豆荚前端技术专场总结

周六去了w3ctech举办的豌豆荚前端技术专场，一共听了3场演讲。http://www.w3ctech.com/event/33。

总体体会

之前也参加过其他公司比如腾讯、百度等举办的技术分享活动，但这次感觉是和前几次不一样。

之前的活动分享的多是他们自己开发的库，自己在开发中的解决思路以及对某个特定问题的研究等等，而豌豆荚并不是这样，他们非常崇尚效率。看下豌豆荚的项目可以发现，他们使用了各种开源库，研究了各种新的技术，并投入到生产中去，比如angular，backbone，recat，ploymer等都有在使用，还使用了各种开源或商业的服务。

豌豆荚和我们很多相似的地方，都是初创公司（其他他们也不小近300人了），他们的前端工程化解决方案和我们目前的几乎一致，但他们的更加完善，他们的 Windows 客户端也同样是 webkit + html 的 webapp 架构。因此觉得值得总结一下。

演讲内容

第一个是张耀春的《node实战和方法论》，主要讲的是怎么学习 node 和编写 node 模块的相关知识，感觉讲的不如他的 blog 精彩，有兴趣的可以看看他的blog关于js的研究。第三个是李晓鹏的《前端性能优化》，主要介绍了豌豆荚windows客户端中动画的优化，我们目前各个产品并没有太多的动画，在交互与设计上我们和豌豆荚差距真的很大。后面希望能多多实际到项目中去。

这里我主要分享下第二个演讲《自生长的前端研发环境》（http://slides.com/wangyezhao/rdenv/#/），开始我没理解这个‘自生长’是个啥意思，后来才明白，这是豌豆荚自己摸索出来的一套前端自动化解决方案，而且和我们的体系极其类似，但他们这套方案积累的时间更长，也因此更加完善。

前端开发环境的变化

十年前的前端开发，犹如上面的那一坨坨的电线，杂乱无章。虽然我没体验过10年前的开发，但是目前我们的官网和网页剪辑器的代码已经有这样的感觉，本身 JS 就是动态语言，灵活多变，各种东西（库，DOM，CSS，浏览器兼容性等等）混杂在一起，让人摸不着头绪，而且那时的前端更多的是展示数据，没有复杂的业务逻辑。

但是现在的随着前端技术的发展，各种前端 MVVM 框架的出现，以及 node 带来的前端构建上的变化，使前端开发变得井然有序，效率大大提高，同时更多的业务逻辑交给了前端。

豌豆夹的前端研发环境

豌豆荚的前端研发环境得益于上述的变化，他们摸索出一套适合自己的解决方案。他们这套解决方案由3部分组成：开发环境、运行环境和生产环境，和我们研发环境极其类似。

1.开发环境

豌豆荚的前端开发环境使用了 Jade + Sass + Grunt，这和我们目前的 Jade + Less + Gulp比应该说是大同小异，这里有几个地方我们并没有做，一是代码规范，豌豆荚有自己的一套前端代码规范，使用了jslint来规范js代码质量，我自己也在用jshint，目前我们的前端代码并没有一个规范（比如，tab和空格的统一，未使用分号的检查，变量重复的定义等等），二是测试，豌豆荚使用 Karmar Runner + Mocha 来进行测试，包括 Unit Test 和 UI Test，每个项目他们都写了不少的测试代码，三是他们用 Yo Generator 开发了自己的一键式开发环境，帮助新人分分钟内建立起一个开发环境，我们目前没有这那么多项目，人也不多倒是没有这个需求，该项目的地址https://github.com/wandoulabs/generator-wdj

2.运行环境

豌豆荚说的运行环境，也就是我们目前使用的 beta 环境，当然也是同样的作用：给相关人员（产品运营）测试，他们的流程基本和我们一致。

有几处不同点，使用了一个叫 travis的服务，当在运行环境上构建失败（服务器出错或者测试不通过）时，travis 会告诉开发人员，同时他们将这个部署功能做成了一个项目 Domino（ https://github.com/wandoulabs/Domino），用可视化的方式来进行项目的部署，当开发人员完成一个功能或修改后，使用 domino 来部署到远程服务器上去（目前我们beta上是自动部署，正式环境上是靠服务端部署），其他人也能在 Domino 上看到某个功能是否完成，是在 beta 上还是在生产环境上。