D2技术嘉年华分享：前端基础架构的实践和思考

D2技术嘉年华分享：前端基础架构的实践和思考

九月 25th, 2011 § 0 comments

这个话题是我一直以来思考的问题。其实4年前我在淘宝分享过一个基于ant的静态文件编译系统，但那时候对基础架构的全局还没有一个总体思路，现在 看来它没有充分用在开发中，不是它本身做的不够好，而是因为它没有完全植入到整个技术体系中，只是一个单纯的工具，这样它发挥的作用始终是有限的。2年前 我才真正意识到前端基础架构的意义，它是把技术更好的吸收、组合、应用出来的基础，也是一个足够专业的前端团队高效运转的基础。

我一直以来在追求前端团队职能价值的最大化。那么首先回顾一下前端职能经历了什么样的转变。我相信这些转变不需要过多解释，大家都能理解。但是又有多少团队真正转变过来了。职能和价值更多还是停留在页面是否高效的实现上。

区别只是人多了，分工过细，人被局限在一条流水线的各个环节上，被当成工具使用，没有发挥余地，也没有成长空间。前端工程师实际上沦为苦逼的‘码 农’。所以需要一个更好的体制和环境把前端开发的职能作用充分发挥出来，创造更大的价值。同时，对于想上市或想创造奇迹的互联网公司们需要的也不是一两个 技术牛人，而是一个更加专业的团队

首先角色定位必须清晰。前端工程师比设计师更懂得界面和交互的实现原理，所以要能弥补设计师或产品经理在技术理解上的不足，这是中国特色。开发的工 程特点上跟后端开发非常接近，所以不能脱离整个技术体系，要尽量减少中间环节，共用开发环境，共用系统。前端开发在设计部门是过去时，现在更适合在技术部 门。2是打造专业团队，这种专业性不是一两个牛人带来的，而是体制和长时间的技术积淀带来的。3也是通过深厚的技术基础和敏捷的开发方式带动团队高效运 转，而不是通过行政管理手段。这个技术基础就是一个不断完善的向前演变的技术平台。最后是结果，带来技术上的持续创新。

今天要谈论的“前端基础架构”就是这个技术平台中的重要内容。什么是 “前端基础架构”？它应当具有这些特点和作用。要先做技术的布局，才能从大格局出发指导用什么和怎么用技术。细节可以先不够好，但整体要有，要能发挥作 用。所有人不是机械的完成项目开发需求，而是创造性的应用技术，并且做好技术回收，有意识的积累下来。3是它有团结的作用，内聚所有人的智慧，调剂技术的 活跃度，探索新领域。4是从体制上做到技术的大融合，让前后端开发无缝结合在一起。

总结我之前的经验教训，用这个故事可以很好的说明。不是片面做一个局部或放大局部的作用，比如做好一个工具或一个代码库，它的作用都是有限的。而要从大格局出发。所以，我整理了一张图。

这张图从下向上看，它就像一颗树，不断滋生枝干。基础架构的建设正是如些，也是一个不断生长的过程。其中主要的结点构成前端技术的大格局。最下面的是它的根结点，后面会逐一分解。

去年我在另一个活动上分享过同样的话题，不过那时候只做了2成，一年过去了，现在可以说做到4成。它就像一颗种子，需要所有工程师智慧的培育，才能长成大树。

工具、规范和系统看起来是独立的三大块，但它们之间是相互作用，紧密联系的。工具是为落实规范、保证品质定制的，系统又把工具有效的串联起来，建立 一套有秩序的开发环境。mission是为了打造高品质的产品使用体验。工具体系由这些部分组成。代码管理是为了代码的模块化组织、提高重用、化繁为简的 预处理，从而达到更高的可维护性和灵活性。品质检验的目的是保证代码符合我们约定的统一的代码Guidelines的要求。测试是为了避免异常，规避风 险。上线后的运行监测是为了运营过程中的服务品质的持续性。这块是我们正准备做的。

我们在服务器端对无论是内联还是外联的js和css代码进行模块化的组织。使用这种@import的编译语法，在开发环境中看起来是这样的。上线后会将编译后的文件再部署到CDN

css文件除了支持@import编译语法外，还会支持SCSS语法，并且引入Compass的CSS3 Mixin Library，简化开发，使CSS开发更像语言那样去组织，提高开发效率。除此以外，我们还会进一步引入OOCSS概念，称之为Douban-UI，它 是对通用信息元素进行对象化的抽象，建立的一套基本样式库。

库和框架是工具中的重要分支。它的根本目的是为了代码资源的重复利用。从格局出发拥抱开源技术，从项目开发中回收技术，结合自主开发弥补空白。除了 建立丰富的通用功能库外，同样会重视应用架构的设计，比如应用框架这个分支包括模板系统、前端MVC框架等。在移动开发方面，因为其性能敏感等特殊性，我 们会组成更合理的方案，比如用Zepto代替jQuery。在桌面开发上，有洪强宁(豆瓣的首席构架师)开发的onering，它是基于webkit，支 持html5的桌面应用开发框架

规范仍然是最最基础的。规范应当具备可操作性，同时要有配套的检验工具。测试部门帮我们在CI中集成了Douban-JSLint，这是根据我们的 规范要求定制后的JSLint，同时，我们也会把它植入到开发环境中，很方便的自检。技术文档的积累也是不能忽略的，它是重要的学习资源，结合培训，帮助 新同学尽快溶入到团队中。同时，我们也欢迎后端工程师写前端代码，正如我们也会涉足后端一样。这种技能上的重叠，会让协作更默契。我们也正在努力通过规范 和工具降低门槛、扫除障碍

我们有三种开发环境，前后端在同一环境下协作开发，尽量减少中间环节。开发前，参与的前后端工程师一起制订一份开发文档，内容主要是URL和对应模 板的规划，Ajax的接囗的说明等等。然后，前端部分直接开发出最终的模板和实现交互，用假数据摸拟输出，不好实现的接囗会利用诸如Charles此类工 具映射到本地的数据文件上。前后端开发是非常平行的。在项目管理上，也尽量用工具辅助，避免囗头提需求，而是以Ticket的形式启动后面的开发流程，这 个过程是简捷而默契的

开发流程追求的是敏捷高效。为了保证最终产品的品质，该有的环节还是不能缺的。所以好的流程是将工具、系统和各种子系统完美的串起来，自动化程度高，同时又操作性强。

正好昨天有人在知乎上邀请我回答一个问题。可见团队大了，技术应用复杂了，要提升它的职能作用，建设前端基础技术架构，是一件非常有意义的事情。

slides: http://www.slideshare.net/kejun/ss-9413262

posted on 2011-09-26 02:33 之乎者也2011 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.geek-share.com/detail/2527975580.html

• 点赞
• 收藏
• 分享
• 文章举报

ddl_2014 发布了0 篇原创文章 · 获赞 0 · 访问量 276 私信 关注