drupal的前端表现为什么这么差(1) 前端工作流程的变革

本节前言

我已经开始写第七章了，但是其实第六章并没有完，前面十多节的内容都是在为后面做铺垫，只是每次临到准备下笔的时候，又退缩了，因为我要写的东西和中国drupal圈子的现状差距比较大，从前面章节的阅读数量来看，也证明了这一点。

正好最近有Drupal初学者在DC网站上问“drupal的前端表现页，为什么这么复杂差劲，为什么它不能像dede一样，用个htm模板，数据内容直接在htm模板中，用标签进行调用，这么直观地表现出来呢？”，其实类似的问题，很多人在很多场合里都有提过，每次遇到我总是一带而过了，简单的答案其实很有说服力，我自己觉得并不需要过多的解释，那就是：因为drupal不是dede。非要再多说几句的话：定位不一样，能干的活不一样，解决的问题不一样，决定了drupal的前端和dede不一样。然后一脸的欲言又止，意犹未尽，我知道，我知道，talk is alway cheap，有的时候呵呵更合适。（如果你满意这个答案的话，我建议就不必再看下面的内容了。）

再三犹豫之后，打算还是说点什么，权且当作一个延伸参考资料，不会有什么实质内容，却充斥着各种个人偏见和道听途说。各位看官喜欢听故事的可以继续看，期间如果说错了或者冒犯了谁，请不必过于认真；需要学习主题知识的可以跳过这里去看别的章节。第六章接下来的内容，如果有空的话，我还是会继续写。

大家都说水滴的logo，是代表前端开发者的眼泪。为何如此？要说清楚这个问题，我们要先回顾一下“历史”：

2008年 新的纪元

在08年之前的那段时光里，网页是用table做的，各种页面视觉要素都是用图片或者ie自带的某些奇葩方法实现的，如边框、圆角、阴影。那个时候写Javascript和ActionScript的人才被称为前端工开发程师。根据网页设计师设计的psd、jpg、pdf格式的设计图或者根据网站现有的基于table的页面写出基于div+css的页面的人被称为网页重构工程师。二者在后来被统称为前端开发工程师了。

• 那一年，div＋css并不吃香，因为新的技术总是带来新的学习成本——没有人愿意为这个成本买单，同时也带来了新的不确定性——页面兼容性问题被当作最好的抵制div＋css的借口。逻辑其实很简单，如果甲方不愿意多给钱，凭什么给他用div＋css去做页面？做完了还要自找麻烦去帮他调兼容性。于是，有那么一段不短的时间，天天都看到有人骂table，有人捧div＋css，但是偏偏做的网站大部分都还是table的。
• 那一年，div＋css就像刚刚出现在进化树上的哺乳动物一样，弱小，偏安一隅，等待着机会，把老大们都熬死了，老子就天下无敌。
• 那一年，中国Drupal圈子内的先行者们，已经开始先后接触这个令人着迷的CMS了。
• 那一年，iphone3G发布了，和之前的版本比，它支持3G网络，移动数据传输速度更快。从这个版本开始，人们逐渐接受了这样的一个概念：你真的需要花一台电脑的钱去买一个手机。
• 那一年，安卓手机发布第一款产品，使得更多的人可以通过智能手机使用互联网。

2009年 压死骆驼的最后一根稻草

网格这个东东其实一百年前就被欧美设计师拿来运用在各种媒介的版式设计的流程中了，但是，在网页设计中，在09年才被人们所熟知。960网格在09年推出的时候，没多久就红遍了全世界（除了中国和其他没有网络的国家和地区，比如非洲啦，朝鲜啦，下文中提到的所有内容，除非特殊说明，都与中国无关——这主要并不是因为中国很落后，而是因为我不太了解中国的情况）。

然后，类似的前端框架一个接一个的涌现出来，它们大多基于网格。这就是前端开发流程的第一次变革。以往，前端人员都是按照自己的喜好去写html和css，甚至有没有css其实也都是无所谓的事情，内容和表现混在一起是家常便饭，只要能实现设计图就可以了，没有人管你怎么写的。现在，有了框架，只要你使用框架提供的东西，你就能使用现成的解决方案去解决那些你曾经自已一遍又一遍靠手写代码解决的问题——毕竟在网页上就只有那些东西，比如菜单、导航条、轮播图、tab、列表、表单等。写来写去总有可以总结成框架的东西，为什么要天天自己写呢，用现成的是理所当然的事情。而且这些框架还在一定程度上帮你做好了浏览器兼容性调试工作，何乐而不为？

更重要的一点在于，网格框架给了设计师和前端工程师一个很好的沟通平台，他们可以各自按照框架事先规定好的原则去做设计和写代码，避免了天马行空和扯皮打架，减少了沟通成本。

对于设计师来说，唯一的要求就是，页面不是你想怎么设计就怎么设计，而要遵守一些规范——同样也没有设计师会抵制这个要求，因为他们最害怕的就是各种天马行空的设计需求，很多时候，规范是他们唯一的救命稻草。

对于前端来说，唯一的要求就是，前端不能自己去命名所有的class了，应该使用框架给你提供的class——对于这个要求，几乎没有前端会去抵制，因为，在IT届，命名这个工作从来都没有人喜欢做。

由于各种前端框架都是基于div＋css的，所以，基于table的页面也就这样自然而然的退出历史舞台了，而历史的车轮则继续滚滚向前。。。。

继续进化

随着智能手机和平板电脑的发布与普及，网页设计出现了前所未有的挑战和机遇，用户开始通过各种不同的设备访问互联网，人们开始意识到流式布局的优势以及访问设备多元化的趋势，而这个时期的前端框架也都开始投入“移动优先／响应式设计”的大怀抱。与此同时，网格凭借它自身的特点，再一次奠定了他在网页设计中朴实无华而又缺一不可的地位。

2010年：

• ipad1发布。
• 第一次出现“响应式设计”这个名词。
• 第一款被广泛使用的retina屏手机，iphone4发布。

2011年：

• 8月，Bootstrap1 发布。
• SMACSS理论正式提出

2012年：

• 1月,Bootstrap2 发布，添加响应式属性。
• 响应式设计成为当年.net杂志公布的网络流行趋势的第二名，第一名是渐进增强。

到了这个时候，设计师们突然发现他们挚爱的Photoshop好像不那么可爱了。因为响应式设计要求页面上的元素能够随着屏幕尺寸的变化而变化。而用Photoshop做设计，意味着你要为每一个屏幕尺寸设计一张图。于是包括Andy Budd在内的人，提出了“在浏览器中做设计”的说法，Stephen Hay也在“响应式设计流程”的演讲中明确反对为客户提供PSD文件。在我看来，这是前端开发流程的第二次变革，它要求设计师懂前端，前端人员懂设计，网页设计工作的最终结果不再是死板的PSD图，而应该是可以根据屏幕尺寸变化的响应式的原型页面。

紧接着，没过两年前端开发流程又发生了第三次变革，他的核心是“SMACSS”和“Style guide driven development”，前面我们已经讲过和SMACSS有关的东西了，Style guide则是整个第六章的压轴大戏，留待之后的章节来详细说明。