第一部分 引言

第一部分 引言

Web 在诞生之初,形态其实是比较简单的。这里的“诞生”指的是 20 世纪 90 年代初期,而“简单”指的是一个网站能把自己的入口放在雅虎导航页上,并且访问者计数器能在使用表格布局并且满屏 GIF 动图的网页底部不停地闪烁。

不过,这的确是那个年代你所需要的一切。只要你能给 webring1 带来流量,所有的网站管理员都会满意。那些网站管理员是谁呢?没错,其实他们就是那些域名的拥有者。那时,网站还是简单的存在,管理员就是它们的主人。这些人习惯性地使用混乱的 HTML,还搞不清楚到底是不是应该关注新出现的层叠样式表(CSS),甚至他们当中大多数人已经把 JavaScript 作为过时的东西抛弃了。

1webring,也称网络环,是相互连接的网站集合,通常主题是教育或社交,在 20 世纪 90 年代至 21 世纪初比较盛行,多数为非专业网站。——译者注

不过,正如所有的媒介一样,网站也会进化。JavaScript 仍然被广泛使用,CSS 也不仅仅用于设置页面的字体类型和字体颜色。网站的管理员最终发现,他们走到了一个十字路口。网站的流量在持续增长,Web 技术也在持续发展(比如透明 GIF 等)。有太多的新事物和新技术需要学习,有太多的工作要做。最后,网站管理员不得不把网站的建设进行分工。一方面,他们很喜欢“网站正在建设中”这个标志以及到处可见的 marquee 标签;另一方面,Perl 是世界上最好的语言,毫无疑问它能够让网站永葆生机。

当网站管理员聘请另一个人来维护他们珍贵的域名时,他们需要决定自己是继续做一个写各种 <blink> 标签的大师,然后雇用写 Perl 脚本的新手,还是自己去学习 Perl。

最终他们做出了决定,由此现代的 Web 开发团队开始成型,就像听到巨型海螺的召唤。早期的网站管理员在每一个阶段和十字路口,都会发现他们自己需要专注于开发过程中一个很小的部分。他们当中有些人会专注于服务器提供的文件服务,有些人想提高查询数据库的能力,而另外一些人则乐于创作各种图形和图像。

更新的、更专业的角色也吸引了其他人到这个行业,包括艺术家、作家、商业分析师、工程师、数学家等。随着这些角色的发展,以及相关的人员越来越成熟,Web 开发逐渐催生了一系列新的名称和新的分支学科。

那些决策者

在 Web 开发的早期,有些人认为网页中的文本内容跟设计、代码甚至搜索引擎优化(众所周知,搜索引擎就是抓取页面中的关键字)一样重要。在此之前,网页内容往往是被放到后面处理的。“先随便填一些 lorem ipsum2 字符到设计稿里,赶紧做后面的。”最终在网站上线之前,客户才会填上真实、优质、受启发的内容,并且一直以来都是如此。

2lorem ipsum,中文又称“乱数假文”,是指一篇常用于排版设计领域的拉丁文文章,主要的目的为测试文章或文字在不同字型、版型下的效果。——译者注

这些内容的拥护者,终于坚定直接地宣称 Web 的本质就是内容,因此网站内容值得我们花费时间和精力。尽管这是一场恶战,不过他们开始被邀请参加早期的规划会议,偶尔也被邀请参与编辑策略的制定。他们不断取得进展!虽然这个过程困难而且孤独,但是结果是值得的。

就这样,他们作为开拓者在孤独地前进。直到关键的一天,他们碰巧遇到另外一个同样拥护内容的人,才意识到原来他们不是在孤军作战。友谊的星火以燎原之势发展成方方面面的合作,最终他们成立了社区,继续致力于向人们宣传网站内容的重要性。

很多年过去了,但是关于网站内容的争论远远没有结束。即使多一个设计师被要求在主页上“随便填充点内容”,我们也能马上听到远处抗议的呐喊声。2008 年 12 月 16 日,Kristina Halvorson 在 A List Apart 博客(http://alistapart.com/article/thedisciplineofcontentstrategy)上站出来发声,举起了内容策略的大旗。她要求我们传播这种理念,“要把网站内容作为一个值得做出战略规划和有投资价值的关键元素来对待”。其他内容策略的践行者们开始学习、使用和推广它,成为了内容策略师。由此,一个新的分支学科诞生了。

Kristina 的文章并不是最早提出内容策略这个概念的,却是最早定义出内容策略的核心、精神和目标的。一夜之间,内容拥护者们的共同诉求被赋予了一个名字。他们即将迎来一个新的时代,博客、播客和会议都围绕着一个简单的观点来讨论——“内容很重要”。

响应式Web的出现

与此同时,一个身着黑色高领毛衣的男人出现了,并且颠覆了人们对互联网接入设备的理解。在 Web 历史上,我们第一次被迫接受这么一个事实:人们并不是只有坐在舒适的办公室或起居室,使用高速的宽带网络,对着分辨率为 1024 像素×768 像素的电脑屏幕时,才会去浏览网站。iPhone 的出现,使人们迎来了一个多分辨率、多功能、连接速度不稳定以及多种输入模式的多终端时代。作为开发者,我们不能再对用户和他们用来浏览网站的设备做出任何假设。

为此,我们尝试过很多解决方法。我们尝试使用双指缩放、双击缩放、直接显示原网站,或者把移动设备重定向到一个精简的便于移动浏览的“m.dot”网站。然而,没有一个方案能够真正解决问题。双指缩放的操作不便于导航,尤其对于购买商品或注册服务,而且增加移动流量意味着损失收益。虽然 m. 网站对移动设备更加友好,但是这样就要求开发团队去维护两个独立的网站。

很多 m. 网站被冷落了,它们也很难和 PC 版主站保持同步更新,或者部分功能缺失而迫使用户切换到桌面设备,来做一些比获得指引或者打个电话更复杂的事情。我们必须做出一些改变。虽然有些人觉得 iPhone 已经过时,但是很明显,Web 世界的未来在移动设备上。

2010 年 5 月 25 日,iPhone 发布 3 年后,Ethan Marcotte 在 A List Apart 上发表了一篇题为“Responsive Web Design”的长文(http://alistapart.com/article/responsive-web-design)。这篇文章并没有介绍新的学科知识,也没有打出口号,让困境中的开发者聚集起来;而是描述了一种创建新型网站的方式,这些网站可以根据用户访问设备的尺寸来做出响应,并且调节自身大小来适配对应的视口。响应式 Web 设计(responsive Web design,RWD)不是一种新科技,而是现有工具和技术的一个集合,包括以下内容。

流式网格

  用基于百分比的宽度代替固定像素的尺寸。

自适应图片

  用 100% 宽度的图片填充它们的容器,并且随着视口大小的改变而改变。

媒体查询

  允许对不同的视口大小使用不同的样式,我们现在可以基于屏幕的大小来改变页面布局。

在 Ethan 发表这篇文章的几年之前,所有的这些技术其实早就可以在浏览器中使用。不过,正如 Kristina 为内容策略发起的号召,Ethan 对 RWD 的描述清晰地定义了每个人都在迫切寻找的解决方案。

一篇简单的文章,使 Web 开发这个行业发生了变化。

前端架构的种子

根据这段历史,我开始思考什么是前端架构。作为一个 Drupal 的前端开发人员 3,我对那些内容战略家过去所面临的窘境感同身受。编写前端样式总是作为延后的事情来考虑,它是在设计师和后端开发人员完成工作之后,再给默认的标记加上一层漂亮的外表。对于我们所面临的挑战,没有什么比不同角色进入项目的先后顺序更能说明问题。我见过一些项目在启动之后,先是讨论设计方案,然后开发功能,最后才把前端开发人员加入到项目中,让他们把设计师扔过来的各种设计实现成 CMS 输出的标记。

3Drupal 是一个由 Dries Buytaert 创立的自由开源的内容管理系统,用 PHP 语言写成。——译者注

经历了几次这样的流程之后,我知道当我尝试去解构那一堆移动端和桌面端的设计稿时,我将会非常痛苦。这样做的目标是把它们制作成一个主题,应用到 Drupal 输出的一堆 div 标签上。跟一些使用 Rails 的朋友谈及编写网站导航样式所面临的挑战时,我迫不及待地承认,“开发者不愿意对导航的标记进行哪怕是一点点的修改”,而事实的确如此!一旦这些标记被定下来,开发人员马上就会进入到下一个任务,这时候如果想修改一下 div、列表或者链接,那简直是痴心妄想。毫无疑问,这将会产生一些奇怪的 CSS hack 去实现某些设计,而这些设计往往都难以跟实际生产环境中的默认导航标记相匹配。

多年以来,前端开发人员的价值体现在创建弗兰肯斯坦风格的设计模式的能力上。“现在,如果我给第三层嵌套的 div 添加一个伪元素,并且给它设置一个雪碧图的背景图……”,这是我们的技术方案,它很糟糕。我们一直在填坑,还奢望能够赶在技术债务把我们拖垮之前把网站发布出去。

随着项目复杂性的增长,这样的流程不是长久之计。所以,我开始思考,如果不再使用传统的方式去开发(因为以前这种方法一直都是可行的),而是把前端开发当作“一个值得做出战略规划和有投资价值的关键元素”,会使项目产生什么样的变化。如果我们在 CSS 框架、文档工具、构建流程的命名规范,甚至标记本身这些方面拥有话语权会怎样?我开始思索如果是 UX 开发去主导后端开发,而不是反过来,那么一个大规模项目会变成什么样子。

这样能引起一场变革吗?其他人愿意跟随并开始“学习、使用和推广它”吗?在形成一股力量之前,我们需要了解目标。我们争取的是什么?我们怎样实现目标?我们会被赋予什么样的称呼?

前端架构师的含义

在后端开发领域,系统规划和可扩展性非常关键,因此软件架构师备受重视。早在开发工作启动之前,他们就被邀请加入到项目中,而且他们会跟客户讨论即将建成的平台的架构要求。他们将会使用什么技术栈?内容类型是什么?这些内容如何被创建、保存以及展示在屏幕上?软件架构师的职责就是要保证项目中每一步都在总体架构的指导下进行,而不会随机决定。

我意识到前端开发领域缺少的就是架构。我们总是被要求做一些零碎的工作,而且优先级也不高。我没用多长时间就从数据库和 Web 服务器切换到 Sass 文件夹结构和构建系统,因此前端架构师的头衔就这样诞生了。

现在,任何一个职位名称都需要一个职位描述。前端架构师是做什么的呢?如果有合适的机会,他们会对项目产生什么样的影响?这些思考促使我在公司年会上做了一场关于前端架构的简短演讲。另外,在 CSS 开发者大会上的发言机会也让我将想法认真总结成了一个精简的 45 分钟演示。

2014 年 10 月 13 日,在新奥尔良会议中心一个拥挤的房间里,“举起前端架构的旗帜”成了在一线奋斗着的开发者们共同的诉求。我希望他们知道,他们不是孤军作战,有很多人在支持他们。我跟项目经理、销售人员和开发者沟通,给他们描绘拥有良好前端架构的意义,以及它为团队和客户带来的价值。

在这次演讲之后,我听到了很多故事,都是关于那些终于弄清楚自身定位以及在公司中所扮演的角色的开发者们的。很多人现在才发现,其实他们一直扮演着前端架构师的角色,却从来没有拥有过这个头衔,或者没有足够的信心去争取这个职位所应具有的权力。在 CSS 开发者大会召开几周之后,我发现很多人把他们在 Twitter 上的个人简介改成了“前端架构师”。而我,作为他们中的一员,从那以后,就在这条路上坚定地走下去了。不管我现在的工作头衔是什么,我都是一名前端架构师。

目录