从需求到网站:(四)技术架构

接前一篇:从需求到网站:(三)视觉设计

唔,耽误了一阵子,接着写~总算写到程序员可以发挥力量的地方了。不过写的太技术了,就无聊了。尝试写的好玩一点。

上古时代 1.0

上古时代做网站,这要数到上个世纪8、90年代。网站一开始的时候,仅仅是呈现一个文件,这个文件叫html。比如你在你的机器上打开一个word文档,看看写了些啥,那时候的网站就是这样的。只不过,这个html文档不是在你的电脑里,而是在别人的电脑里。例如我放置了一个叫做hello.html的文件在我的电脑上,然后我在我的电脑上安装一个叫Web服务器的软件,以及给我的电脑起个名字(域名)。这样,你就可以用浏览器通过http://www.xxx.com/hello.html 的方式来访问这个文件了。

为什么说这是上古时代呢?因为这个时候,仅仅是一个“静态”的文件。所谓静态,就是说,这个文件谁看起来都一样,我在实验室访问,你在家访问,他在寝室访问,这个文件都是这个样子的。静态文件直观上有两点缺陷: 1. 不能区分不同的用户,例如,如果这个页面内容要写hello, nius,所有人看到的这个文件都是hello, nius。显然,你不一定叫nius这个名字。 2. 网页难以维护。上新浪、淘宝,你会发现页面中很多地方都是一样的。但是,不同的页面,还是不同的文件呀。当我发布一个新的html文件的时候,我得把老的html文件拷贝一份,然后把不一样的地方换掉。例如我写这篇博客文章,其实只有标题、内容等几个地方不同,其他内容我就不希望管了。静态网页是做不到这点的。

这里有一个Web服务器的概念,服务器即可以指那台电脑硬件,也可以指软件。服务器其实和家用电脑没有太多不同,早期的服务器其实就是一台连着网线的家用电脑,上面安装了一个叫Web服务器的软件,一旦电脑关机了,网站就上不去了。直到现在你也可以这么干。当然,国内环境复杂,想这么干有接入网方式、行政因素来阻碍你。

暴发时代 2.0 后台模板架构

大家肯定觉得1.0的网站太无聊了,我连登录都登录不了。于是程序员们纷纷表示,放开html,让我来!于是各种语言开始实现web后台。例如PHP。PHP是专门为了写网页设计的程序语言。php能够在用户请求某个文件时(例如仍然是之前的html文件,但是后缀名改为php),把这个html文件中的一些内容替换掉。这样,页面中的广告就可以只在guanggao.php里写一次,当我请求一个index.php时候,直接把guanggao.php中的内容替换到相应的位置(相当于做了一个复制粘贴)。

这就是网页后台模板的概念。所谓模板嘛,就是可以动态的把其中的内容替换掉。

但这个时候,还是不能登录,因为用户名没法记录在php文件里呀。这时候,数据库就出现了。免费的数据库比较流行的是mysql。所谓的数据库,就是把你的用户名和密码存进去,这样,当你登录的时候,我比对一下密码对不对,对了,我就让你登录,在网页上显示 hello {你的名字}。

当然数据库能做的还有很多,例如这篇博客的标题、内容、标签,都存在数据库里。当你请求这篇博客的地址: http://nius.me/from-requirements-to-website-4/ 时,php语言判断出你请求的是哪一篇博客,再从数据库中取出博客的内容、标题等,拼装出一个html页面,返回给浏览器。这样,浏览器就可以显示html内容了。

很多人都听说过LAMP,也有很多培训班专门用来培训LAMP开发的,LAMP= linux + apache + mysql + php,linux是免费的操作系统,跟windows的角色类似,就是让电脑跑起来。由于免费、开源,定制性、稳定性极强,所以服务器市场上占了很大的份额。apache是之前提到的传说中的Web服务器,提供HTTP协议的实现。mysql是数据库,记录诸如用户信息、博客内容等。php则是动态语言,相当于把Web服务器和数据库连起来,从而实现动态网页。

但是,PHP并不是唯一的动态语言。Java也是很流行的后台语言。Java推出了J2EE等一些列方便程序员开发网页的类库,以及很多开源社区的框架,如著名的Struts+Sprint+Hibernate。这里要说一下框架是什么,框架就是避免程序员重复劳动的东西,因为web开发可以被抽象成MVC模式,所以可以根据这种抽象来把很多东西规范好,程序员只需要进行很少的开发,就能够完成很多内容。

除去PHP和Java,前几年流行Ruby、Python,这两年流行Node.js,都是相对成熟的可以用来开发Web的语言。但只要你把握住根本,其实Web后台开发就做了一件把数据变成html的事,就不难学会这些后台语言,至少很容易学会如何使用这些语言的Web框架。

来,一图抵千言。

后台模板架构

后现代派 2.1 前端模板架构

2005年左右,流行起一种Web开发方式成为AJAX。背后的概念比这个名词简单多了。上面说的,仍然是一个网页请求到后台,后台返回一个完整的网页。这样做的问题是,如果网速慢,网页又大,用户体验很不好。于是,可不可以就把网页变化的部分传过来呢?例如你正在看这篇博客,想看上一篇从需求到网站:(三)视觉设计,点击链接之后,仅仅刷新博客内容,其他东西都不用变,这样,网络传输的内容减少了,网站的响应速度提高了。

这个技术之前充其量是上面提到的后台模板架构的补充。直到他的膝盖中了一箭。

既然可以局部刷新网页,那为什么不干脆整个网站就一个页面,所有内容都进行局部的获取呢?Web先驱们早就想这么干了!Google的Gmail就是这样的,Gmail成功的使用制作网页的技术,做了一个能跟客户端程序媲美的Web应用程序。但是在Google做Gmail的时候,进行这种开发还是十分困难的,因为浏览器不够先进。现有的东西不够好,怎么办?程序员的思路当然是:自己做一个!于是Google就自己做了一个浏览器Chrome,一炮打响。

这里提到浏览器不够好,为什么浏览器不够好呢?这就涉及到Javascript和Html的问题。大量使用AJAX的网站,虽然减少了网络传输的带宽,但另外一件事必须得考虑,就是html文件不光在后台拼接了,还需要在浏览器里进行拼接。浏览器要把之前后台语言干的事接盘,自己来干。程序员把一种用Javascript这种语言写的代码,传输到浏览器里,让浏览器来对拼装html。这时浏览器就蛋疼了。本来我只要显示一下html就行了,这下倒好,我还得自己把html组装好,再来显示。特别是老旧的IE,性能跟不上啊,显示一个网页就把电脑给卡死了。不过新的IE9、10性能倒是蛮好的,微软还是挺厉害的。

在浏览器性能跟上之后,Web架构就可以放弃掉后台模板这种东西。Twitter就这么干了,做成了Single Page Application。就一个网页,网页内容全部通过Javascript根据后台传输的数据来生成。这样的好处是,网页显示extremely fast。但这带来的挑战是,前端Js的代码量大量增加,甚至赶上后台代码了。这下大家傻眼了,从前写网页前端没什么js代码,顶多几百行,基本想怎么写就怎写,这下要维护一不小心上万行的代码,怎搞?必须模块化,但是Js原生对模块化开发的支持并不好。于是开始有各种模块化标准和解决方案。

与此同时,前端的业务逻辑也十分复杂,模板这件事(就是动态的拼装html),也从后台转移到了前端,于是,前端开始出现了很多框架。还记得框架嘛?就是让程序员用很少的代码干更多事的东西。多到……上百种( ⊙ o ⊙ )!谈到Java,我们说SSH,谈到Ruby我们说Rails,谈到Python,我们说Django,谈到Javascript……简直太混乱啦!Backbone算是比较火的,但替代品一抓一大把,没有人敢说哪种最好。所以现在开发这种网站很头疼,选框架就让你选半天。

既然业务逻辑、模板都被前端做了,后台做什么呢?后台就只需要做数据持久化就行了。也就是说,后台其实就把前端传回的数据保存下来,当前端请求的时候返回过去,就OK啦。好幸福!后台人员再也不用学html了。返回的数据用JSON格式,你可以理解为key-value,就是什么键的值是什么,例如用户名-小明,就是一组key-value。如图~

前端模板架构

艾玛,还没讲CSS呢

Html是告诉浏览器,要显示哪些内容,而CSS则是告诉浏览器,显示哪些内容。例如,标题应该比正文大,段落之间应该空多少距离。CSS和Javascript在网站中都属于静态文件,还记得上文Web 1.0时代,静态html嘛?自从到Web 2.0,html就已经不是静态的了,是后台语言动态生产的,所以静态文件一般指Js、css、图片等等。你会发现,到最后,html文件没了,因为藏到前端模板(Js)里面去了。

之前就被骂写的太多了,感觉这篇文章又说多了。。。⊙﹏⊙b汗 各位海涵。

============ 本文是一个系列,其他已经写好的文章:

5 thoughts on “从需求到网站:(四)技术架构

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>