百度技术沙龙第 39 期回顾：前端快速开发实践（含资料下载）

在 6 月 30 日由 @百度主办、 @InfoQ 负责策划组织和实施的第39 期百度技术沙龙活动上，百度前端工程师、FIS 项目技术负责人张云龙和豆瓣前端团队负责人张克军分享了各自前端实践方面的经验，话题涉及“FIS 2.0 全新的百度前端解决方案”和“工程之美”等。本文将对他们各自的分享做下简单的回顾，同时提供相关资料的下载。

主题一：FIS 2.0 全新的百度前端解决方案 （下载讲稿）

百度前端工程师、 FIS 项目技术负责人张云龙首先为大家分享 FIS 的产生背景和架构，他谈到一个完整的互联网产品所具有的前端开发流程：

1. 规范定制
2. 技术选型
3. 自动化与分拆
4. 性能优化

为了让这个常规的流程更快捷、方便，百度在 2011 年组建了团队进行梳理，打造了 FIS。对于林林总总的前端实践，张云龙谈到前端开发需要其实只需要满足最小规则集合（三种语言能力）：

1. 资源定位：定位任何开发中所使用资源的线上路径；
2. 资源嵌入：把一个文件的内容（文本）或者 base64 编码（图片）嵌入到另一个文件中；
3. 依赖声明：在一个文本文件内标记对其他资源的依赖关系；

为了实现这个集合，工具需要具备如下的能力：

1. 有效的分离开发路径与部署路径之间的关系
2. 代码具有很强的可移植性
3. 轻松实现 md5、域名等添加功能

在 HTML、CSS、JavaScript 中，FIS 能够通过如下的一些方式满足这些需求：

• 声明依赖： CSS 、 HTML 、 JavaScript
• 定位资源： CSS 、 HTML 、 JavaScript
• 嵌入资源： CSS 、 HTML 、 JavaScript

并且 FIS 能够把相应的映射记录都保存在 map.json 中，方便维护和调试。然后他推荐了在前端开发的过程中的一些最佳实践，例如：使用 widget 来模块化设计等。对于 FIS 的易用性，张云龙提到“三条命令满足所有的开发需求”：

1. fix release ： 编译发布你的项目；
2. fis install：安装 fis 仓库提供的各种组件、框架、库、样例项目；
3. fis server：启动一个 1.8M 大小的内置调试服务器，采用的 php-java-bridge 技术实现，依赖 java、php-cgi 外部环境，可以完美支持运行 php 程序；

最后，他对着三种工作模式的原理以及其他的可选项进行了详细的介绍。

主题二：工程之美（下载讲稿、 Web 版本）

来自豆瓣的前端负责人张克军接下来为大家分享他所认识到的前端开发的“工程之美”，他认为：

前端开发 80％是工程问题，20％是技术问题。工程师更喜欢谈论技术问题，而忽视工程问题。在充斥各种新技术、新标准、新工具的今天，如果欠缺一条工程需求的主线，就不能更好把它们串连起来，产生更大的作用。提高开发的效率，实际上就是一个工程问题。以此为出发点，讨论工作流和工具链的设计，才能在实际项目中真正发挥作用。

他提到类豆瓣前端开发的一些数据：

未登录首页有 2 个版本、登录首页最多时有 6 个版本、小组首页最多时 5 个版本、广播的类型全集有 195 中、提醒的全集有 67 中……而几乎所有的新功能都要灰度上线，同时还要考虑移动化的需求

而这些状况所产生的工程问题：

• 新旧代码并存时，代码冗余问题、静态文件管理
• 业务逻辑复杂时，通用和业务代码的分离、复杂度控制（代码架构问题）
• 需求变化时，大而全的通用组件无用武之地，轻量的、功能单一的更便于复用
• 迭代快速时，对代码复用、模块化组织要求越高
• 如何设计有效的工具链
• 团队协作模式
• ……

把这些具体的问题抽象以后，他发现豆瓣所面临的是一些诸如：静态文件管理、代码应用架构、代码测试等的工程“支柱”问题，而这些问题利用工程开发的经验来解决。

随后他以“在豆瓣的全站导航上加入一个消息提醒”的解决方案为例，再次重申了自己的看法：

前端开发 80％是工程问题，20％是技术问题。

对于其中 20% 的技术问题，张克军认为可以通过学习标准技术来提高自己的技术能力、借鉴有效的解决方案。对于，工程问题和技术问题二者的关系，他认为：

• 技术准备是创造力的基础
• 技术准备为（更完美）解决具体问题提供更丰富的选择
• 工程问题具有正对性，工程经验具有普适性

随后他谈到了工程师四个阶段的修炼：知识积累、扩展视野、工程经验、建立新标准。同时，他分享了自己的一些经验：

• 模块要完全独立
• 通用代码中绝不能混杂业务逻辑
• 业务逻辑复杂时，应该按业务类型划分，不是按照展现形式划分
• 从实际的开发中积累形成的生态体系
• 技术问题上开放，工程问题上保守
• 原研哉的 Exformation 哲学，受用！
• 更多的时间做有趣的事情！

然后他以豆瓣的图片上传为例对这些注意事项进行了详细的说明。

Open Space（开放式讨论环节）

为了促进参会者与我们每期的嘉宾以及讲师近距离交流，深入探讨在演讲过程中的疑问，本次活动依然设置了 Open Space（开放式讨论）环节。

在 Open Space 的总结环节，几位话题小组长分别对讨论的内容进行了总结。

张云龙：我们讨论了如何使用 FIS 提高大家的生产力，同时希望大家在使用 FIS 的代码时借鉴我们的设计思路；

张克军：主要讨论工程师的个人能力，如何制定成长路径；同时还讨论了目前大家在工具流中遇到的问题；

聂微东：主要讨论了网页在跨平台以及移动设备的适配问题等；

参会者：我们的话题比较偏，主要是回顾了前几期的百度技术沙龙的内容和话题；

会后，一些参会者也通过新浪微博分享了他们的参会感受：

Yourtion ：fis 前端集成解决方案，前端静态资源加载优化、页面运行性能优化、基础编译环境、运行环境模拟、js 与 CSS 组件化等等的功能，你激动了么？快快使用 fis 吧！

刘聪不少于 4 个字符：到北京后也算听过不少技术讲座了，不得不说，百度技术沙龙是最有营养的一个。每一次不仅知识上收获颇丰，而且还有书拿～这么好的活动，赞一个啦。

程国亮 de ：好的工程师都有点哲学家气质，豆瓣前端工程师果然是极其靠谱的！

东郭泥：在前几期的百度技术沙龙主题中就有了解过百度前端的 FIS 解决方案，但那时候 FIS 还没有公开和开源，不过现在已经开源了，而且这次沙龙有专门介绍，太棒了~！

Hellena ：今天的两位嘉宾非常有意思，一位来自百度，讲前端工业化，一位来自豆瓣，讲工程。分别听两位聊了主要的想法，工业化更像建立流水线，工程化更像不断探索思考问题的渠道。我个人体会，百度技术工程师范儿，豆瓣人文工程师范儿。

有关百度技术沙龙的更多信息，可以通过新浪微博关注 @百度技术沙龙，或者关注 InfoQ 官方微信：infoqchina，InfoQ 上也总结了过往 37 期所有百度技术沙龙的演讲视频和资料等，感兴趣的读者可以直接浏览内容。

特别提示：第40 期百度技术沙龙将在7 月21 日，在北京贝塔咖啡举行，欢迎关注 @InfoQ 、 @百度技术沙龙获取后续的活动信息。