D2前端技术沙龙(北京场)纪录

淘宝北京前端团队在此分享一下整场的精彩内容

本次北京会场由淘宝技术嘉年华与淘宝北京新业务前端团队共同组织协办，现场100多人，整个会场围绕着浓厚的技术氛围，技术牛人带动刚步入前端行业的新人共同畅言分享。
同时本次的技术交流会是淘宝北京前端团队第一次组织，有很多不尽人意的地方，譬如稍过形式化，重点没有放在交流讨论上等。
但是整个技术分享过程却非常有内容，有收获，让前端从业者又一次确立了自己的足够信心，更加坚定自己的行业发展方向。
并且本次交流会围绕着很多技术亮点展开，如多单元测试、自动化工具、编译平台、前端技术框架、前端团队定位、前端发展方向等等，太多吸引人的话题。

首届D2沙龙北京&杭州站主题演讲资料查看

拔赤杰作暖场视频，牵动很多人的心弦。9月25日D2沙龙暖场视频

一、首先是主持人(拔赤)开场分享

主持人开场分享了6届D2技术论坛的举办情况，及在前端业界的影响力及走向。每张ppt中选取经典的现场照片，勾起很多同学的记忆，让老人感慨前端的发展历程，让新人倍受鼓舞，让现场同学对前端行业更加充满热情。最后介绍了本次D2沙龙的流程及各环节介绍；微博直播，抽奖，互动送礼等内容；

二、接下来是嘉宾分享环节

本次D2有幸邀请到百度，新浪，豆瓣的前端资深人员为我们分享他们的技术及实战经验；

1、 第一个上台分享的是百度的李成银，带来题目是《编译平台》

李成银是百度空间的开发负责人，他谈到在前端的开发web的应用已经越来越复杂，前端开发的人员也越来越多，必然导致问题越来越多，包括人多并行开发时的冲突，人多了开发效率反而下降了等等混乱问题的不断产生，因此我们必须统一规范，这就出现了统一的执行脚本即前端编译平台，编译平台为我们实际解决了两大问题，一是统一编码规范，二是漏洞检查。

比如说xss安全问题，模块目录检查,统一的img文件夹，编码规范检查、html&css规范属性标签检查、模板语法、词法分析等如果发现错误，编译平台直接抛出错误提示，如果编译通过将压缩多个开发小文件并进行合并上线。

同时李成银还介绍了编译平台可以自动补全CSS3私有属性的功能，开发人员只需遵守一个浏览器的规范，其他浏览器的写法将自动通过编译平台补全，大大减少了开发时间及人力成本。

同时还有文件缓存方面的最佳实践方案，即使用文件名+MD5的方式，只是清除有变动的文件。css sprites等都有很好的支持。
总体总结编译平台就是让工程师减少犯错，提醒让工程师不要花太多时间解决小问题，提高效率，把更多注意力放在解决实际上的问题。

QA环节的问题

A:长久堆积的代码上线怎么判断？
答：编译平台完全可以处理，可以配置。

B:html动态标签怎么检查？
答：动态变量不好处理，除非后端异常，浏览器插件检测可以办到；

C:css sprites平铺质量下降怎么解决？
答：工具不能百分百解决问题，没有想到更好的问题的时候还需手工改动，代码编译上线前还需要测试的。

D:怎么看到上线时的代码？
答：开发的时候也可以手动去看效果，编译平台功能是模块化的，可以开关相应的功能模块。

E:怎么同步到工程师环境？
答：php的代码，采取下载编译平台，随时更新可以实时下载。
2、第二个分享人是来至新浪的钱宝坤，分享题目是《多浏览器的单元测试工具》

钱宝坤分享的多浏览器的单元测试工具实现采用Delphi+Qt+PHP+JS。本次分享的主要是产品的前期思考，继承多浏览器内核中的问题，及产品的优缺点，今后的扩展。

此产品是把内核继承在客户端，ie内核可以继承，其他浏览器内核都是开源的，可以将内集成在客户端；同一个客户端的各浏览器可以通信，操作浏览器对象通过api可以输入，都能明确的知道哪个浏览器出错误；同时可以多进程，解决多核并行开发。思路有了着手开发开始，采用什么语言，中途问题的解决到最终的实战，作者ppt里展示的非常详细。

同时现场做了实战演示，远程开启程序，并开启子进程，返回测试用例结果。

QA环节
F:听后感觉此产品很伟大，为什么不采用前人已经开发的很多框架如jsUnit、QUnit等？
答：因为已有的框架对浏览器支持并不全面，测试UI逻辑等不支持。并且通过java启动多浏览器，通过ajax到达目的，会出现一些问题，如果挂掉将影响非常大，接收不回数据，风险不能控制！

3、接下来是来至豆瓣张克军分享《前端基础架构的实践和思考》

在此引用克军原话：
“前端技术架构是我一直思考的问题，4年前我在淘宝分享过一个基于ant的静态文件编译系统，那个时候对基础架构没有全局的认识，在实际开发的过程中没有更好的推广应用，我们只当最单纯的工具应用！两年前才意识到基础架构的意义，更好的组织应用，前端团队高速运转的基础。

我是02年毕业参与前端开发10年开发，前端团队的职能的很大转变，制作到开发，网页到实践，到桌面应用的转变。实际上很少团队真正转变过来，很多团队还停留在是否高效把页面做出来作为质量衡量标准。现在开发只是人多了，很多公司团队就是一条流水线，在他得岗位没有发挥空间，实际前端作用没有更好发挥出来。所以我感觉对于想创业的公司，他们不需要技术大牛，他们更需要是一个团队！前端工程师比设计师更明白原理，所以看到雅虎大牛到国外去聘请工程师，但实际上不了解中国特色。前端开发不能脱离整个技术体系，在产品设计上需要环节越来越多更好，后续环节应该越少越好。前端开发早期是放在设计部门，我感觉前端应该放在技术部门，到了豆瓣后，在部门的调整上，想放到设计部门UED，现在时放到技术部门！

让前后端技术结合在一起才更大发挥作用。不能片面的做一件事情，作用是有限的，应该从大局出发才能应用到实际中。基础架构的构建像一颗树，枝叶茂盛，工具规范系统。基础大架构更像一个发芽的种子，整个技术部门的所有智慧构建。工具最需要注意的是规范跟品质来定义的，建立一套有秩序的开发工具，找到更高品质的优秀体验，不要把事情做得偏离初衷。”

可见js框架的重要性，克军接下来分享了实际应用的规范及工具系统，包括代码管理的编译系统、js引用的规范、编译后打包上线、css oo抽象化、代码资源的重复利用、html5应用的开发框架、自动化工具、技术文档跟培训等等非常多得经验内容，同样在ppt中都有很详细的阐述。

更详细的描述可看克军真迹

QA环节
G：作为一个新入门的前端开发人员怎么快速成长？
答：从背景出发，对自己格局有个大规划，前端基础js css html必须掌握！在学习采取正确学习方法，多看大家推荐经典的书，不要什么书去看，多看国外网站。在此之后丰富自己知识体系，丰富性能调试，新技术的增加！技能是必要的，知识的丰富是后期需关注的。需要判断性的学习，不应该忽视基础！

三、招聘环节

豆瓣、遨游、网易、新浪微博、百度空间纷纷上台介绍公司的特点及对人才的迫切需求。最后低调的作为主办方的淘宝北京前端团队负责人一舟上台介绍了淘宝网的工作环境。

四、茶休时间，准备了很多零食跟茶水，很多人进行交流分享，结交新朋友，重聚老朋友，微博大屏幕与杭州同步直播滚动。

五、分组讨论 & 抽奖

三位嘉宾坐在台上与现场同学共同进行讨论

Q：工作很有限，很多人只会css，流水线的工作方式，但是我会感觉他学得不精,这种流水线方式是否可行？
克军：很多大公司需要大量生产静态页面，为了快速提高产物，网络重构阶段遗留下来的问题，从公司及个人的发展都不是很好，有的人会认为这很好。但是这个想法需要去批判的，这样个人的职业方向很受限制，这是公司没有给到个人足够的空间导致的。所以前端工程师应该具备多种能力，被拴在岗位上5 6年，被公司所毁！流水线方式只在公司的角度考虑，很不负责任，是一个稳定的方式不是最好的方式，需要改变的，改变要付出代价的。不鼓励在推自己公司的时候不要推只有在一家公司独有的技术，前端开发没有特别多可研发的技术，只要把基础做好就可以，对个人成长有好处。

W：我不同意克军的观点，我曾查看各家网站的代码，并不是很好，可能是遗留的问题，而大公司有很好的流程需要大家学习，很多网站没有学习，比如说腾讯的网站多去看，实际上看出来的东西很乱，看不到好的东西，考验基本功的东西都没坐好。还不如流水线的方式，只做好一项工作，肯定不会出现此类问题。再看个人发展的东西，流水线上的工作其实可以接受，一个人可以在多个岗位工作。这样同样可以让自己成长.其次如果按流水线上工作不需要跟人打交道，沟通上就不会浪费时间，只要做好工程图。

主持人：如果把每个人当成钉子可能会阻碍个人发展；但是流水线工作可以减少沟通,这需要公司去衡量权重的。

克军：流水线是一个流程，很多公司可以去沿用传统的流水线工作，只需改造以下便可以两者兼备。

R:你预计在豆瓣的前端规范框架什么时候完成？在实现过程中用什么手段推广？制度规范与开发项目存在矛盾怎么解决？
克军：永远没有做完的一天，需求来自开发，而不是很理想的去创作，确实是从产品的开发特点及过程遇到的问题才产生的此图。豆瓣是创业公司，看重项目实现，提出技术回收的观念，很多积累是从实践中提炼的，我们也要考虑加不加单元测试，但是变化是好是坏我们需要看需求，技术架构很艰难，但是需要坚持的。我两年前在豆瓣的时候，没有前端很多东西都是后端写的，全站是统一的一个js所有的代码耦合性太强，现在这个问题任然存在，我们集中所有前端工程师，每个人都去裁这个东西，但是我们不会去这么坐，我们回去想写个工具，建个架构，在后端编译，之后把东西逐步裁出来，一是完善了基础的架构，二是可以逐步改善。

C:淘宝页面右边登陆，之前用css sprites实现的，但是之后又改了为什么呢？
主持人：这是具体应用时的实际实现考虑的，规范并不一定要死遵守，要看实际情况。

D:百度空间的编译平台能不能开源，能否推广出来？
李成银：都是基于第三方开发的，但是整体没有开源，包括编码规范公司有差异，不可能迁移过来，大家就算去用很多也要花很长时间；

D:有没有官方开发技术思路？
李成银：目前没有，但是会足部维护上，怎么做之后都会更新好。

F：前端工程师学习是个阶梯状的发现自己很努力但是成果很少，怎么转换平稳度过？
李成银：本身不是此专业，是后端php，发现前端可以应用，发现框架方面的东西很多不足。之后经常去逛论坛，去看网站，看网站订阅，经过一段时间会发现有方向。

F:怎么不落伍，又跟得上新技术？
李成银：一个人精力有限，现在有个大前端的模式，很多东西我们都要去坐，但是技能是必须掌握，但是知识是可有可无。知识丰富的话机会就会很多，因此很重要的项目需要性能优化的时候，你就会能用的上把知识转换为技能。

钱宝坤：技术淘汰遇到很多，新技术很多需要去思考，很多都是新瓶装旧酒，很多东西只需要简单看看就可以，需要基础扎实；

主持人：前端技术看起来很浅，新人很迷茫，我是不是干了几年还切页面，会意识到怎么突破自己的瓶颈，就看你的基础，数据结构，这些如果搞的好，会发现很多可以发挥的东西，新人好的师兄很重要，他会给你更多的指点，有人带动会更好。

G:流程开发很多过程化，各环节估测时间出现问题，有没有更好的方法？
克军：很多公司的创业都是从基础的地方，产品设计上阶段越多越好，开始环节越少越好，产品设计应该有工程概念在里面，设计出来的方案有工业思想在里，这样开发过程中会有基础信息库的时候，在得出的方案会更合理，他得prd线框图出来，后期就可以很容易构建出来，UI出来后考虑到UI的灵活性稍微改动就能满足。前端后端效率非常高，最根源的是，设计方案得出，设计师脑海里应该有工程开发的观念，让设计师弄脏自己的手；很多设计师排斥这种东西，我们要推动他改善，所有角色的人都要有工程的观念；

主持人：产品经理不会去考虑，前端需要做到把这些空缺补上。
H:window清缓存问题？前端跟后端问题的经验？豆瓣为什么没有游戏？

主持人：缓存遵循http协议；浏览器自动缓存页面，缓存的时间跟http header的设置很有关系，告诉客户端是否缓存页面，通过http协议来设置缓存，LastModified等方法在服务器匹配，不想让浏览器缓存可以在服务器端设置，使用cache-Control来控制，不发起请求；弱缓存发送服务器端返回是否需要清缓存。等设置都可以实现，或是最长见的时间戳等等，可以在网上找到很多解决方案。

克军：产品的开发可以适当前端牵制后端来做，你应该给他们提要求。

克军：看书，听音乐，都是围绕生活话题，游戏不会跟生活并列；

H:程序集成测试是否有经验？
钱宝坤：目前没有很好的解决方案；

克军：需求经常变化，我们的自动化测试，已小组的话题形式提交；

主持人：目前淘宝也只有kissy用到单元测试，测试用例，测试框架，当有核心内容改变时，应用之前的用例跑一边就可以了。

L:css测试，浏览器兼容工作是否有必要？
钱宝坤：简单应该和css盒模型匹配是否能测试到，视觉观看没有差异，但是自动化工具会抛问题，这个我们不需要测试。没有必要报视觉css问题。

K:js单元测试怎么做？
钱宝坤：js单元测试并不适用于所有团队，如果对代码库要求不高，其实不需要应该，我们做这个东西的目的是做一个方法，用一个比较懒的方式去解决问题；

六、最后的合影，组织AA腐败，所有人都满载而归！