AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

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

  • 2013-07-02
  • 本文字数:2568 字

    阅读完需:约 8 分钟

在 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 能够通过如下的一些方式满足这些需求:

并且 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 @百度技术沙龙获取后续的活动信息。

2013-07-02 10:463596
用户头像

发布了 89 篇内容, 共 34.6 次阅读, 收获喜欢 4 次。

关注

评论

发布
暂无评论
发现更多内容

MetaForce佛萨奇系统开发技术流程(成熟代码)佛萨奇2.0源码部署教程

I8O28578624

1月书单 & 2月新书预告 | 百万册畅销书全新续作来啦!

图灵社区

书单推荐 新书

2023 年推荐这 10 个开发者工具

Liam

前端 后端 开发者工具 开发工具 程序员 java

从实测出发,掌握 NebulaGraph Exchange 性能最大化的秘密

NebulaGraph

数据导入

天穹:一站式BizDevOps平台介绍

哈哈哈

云原生 后端 链路追踪 压测 网关

软件质量因素的定义

JefferLiu

1 理解功能、业务功能和能力

涛哥 数字产品和业务架构

企业架构 业务架构 业务架构师

跨境电商“重新出发”,区块链赋能新玩法

旺链科技

区块链 区块链技术 区块链技术应用

零基础前端培训学习有用吗

小谷哥

图解华为云代码检查服务CodeArts Check

一文揭晓,我是如何在Linux中查找自如

C++后台开发

Linux 后端开发 linux开发 Linux服务器开发 C++开发

我在京东做研发 | 揭秘支撑京东万人规模技术人员协作的行云DevOps平台

京东科技开发者

随机高并发查询结果一致性设计实践

京东科技开发者

架构设计 并发 业务场景 企业号 2 月 PK 榜 京东物流

北京大数据培训中心怎么样

小谷哥

科班和培训出来的前端程序员的区别

小谷哥

软件测试/测试开发 | app自动化测试(Android)-- 特殊控件 Toast 识别

测试人

软件测试 自动化测试 测试开发 appium

龙蜥开发者说:6 年前打开的开源“潘多拉盲盒”,如今都解了哪些未知数 | 第 15 期

OpenAnolis小助手

开源 操作系统 龙蜥社区 龙蜥开发者说 联通

百度智能云助力自动驾驶全链路研发

Baidu AICLOUD

自动驾驶 全链路

开发小白的高光逆袭:竟然能一眼断定生产环境接口响应时间慢是磁盘性能问题引起的

KINDLING

Java 故障定位 ebpf 生产环境 排障

5大移动应用开发平台推荐

FN0

移动开发 移动开发平台 移动应用开发 移动端开发

如何使用自己的 SSL 证书登录堡垒机?

coxi_vv

前端培训学完课程后如何找工作?

小谷哥

智能合约MetaForce佛萨奇系统开发详细(技术解析)

I8O28578624

佛萨奇系统开发源码部署技术方案(MetaForce元宇宙)

I8O28578624

佛萨奇系统开发流程原理,2.0版?佛萨奇源码部署搭建方案程序解析

I8O28578624

StarRocks斩获「2022 掘金引力榜」年度技术品牌传播案例 Top 10!

StarRocks

数据库

天穹-gateway网关系列1:Tesla网关整体介绍

哈哈哈

开源 云原生 后端 网关 #java

软件测试/测试开发 | app自动化测试(Android)--显式等待机制

测试人

软件测试 自动化测试 测试开发 appium app自动化测试

java就业培训班怎么选?

小谷哥

1月书单 & 2月新书预告 | 百万册畅销书全新续作来啦!

图灵教育

书单推荐 科技书单 新书

百度技术沙龙第39期回顾:前端快速开发实践(含资料下载)_JavaScript_水羽哲_InfoQ精选文章