【3】Web2.0：从网站到web应用程序

#翻译转载#Web应用101

原文链接

仅仅提供静态资源服务并不能满足人们的需求。所以从Web2.0开始（大概2004年出现），用户不仅可以读取内容，而且还可以创造内容，互联网上的内容开始变得多样和动态。还记得上面提到的HTTP请求方法吗？目前为止我们只用到了GET来读取内容，那么其他方法有什么功能吗？

随着互联网上内容管理系统的完善（比如wordpress这样的博客系统），一个Web服务器不仅能让用户看到内容，还能与之交互、修改内容。比如，一个博客系统一般包括登录，新建博客，上传博客，删除博客，登出等功能。对于这些任务，我们PHP（可以在服务器端的Web服务上编译）可以很好得胜任。

开发者可以在服务端的程序上操作用户的读写请求。例如，当一个用户想要创建一个博客（写操作）时，用户需要将他的博客写到浏览器上，然后点击“保存”按钮，这时一个请求就会发送到服务器上的程序中。程序检查用户的权限后，检查博客内容，然后将博客的内容写进数据库。为了保证数据库安全，这些验证操作不会在用户端进行。

如果我们有服务端路由，我们可以在用户成功创建博客将用户重定向到他最新发布的博客的页面。如果没有服务器路由，POST/PUT/DELETE请求通常也会导向新的页面。

当用户可以在互联网上创造内容时，我们就需要使用数据库来存放这些数据。数据库在Web2.0早期时常常是在和Web服务器同一个服务器上的，但现在业务场景中一般使用另外的专业数据库服务器来做存放数据。

当博客被上传到服务器上时，服务器一般会为这个博客创建唯一的标识符，这个标识符可以放到URL里用来将用户重定向到这个博客。当然，这一切是异步发生的。

现在新的博客已经创建了，但是我们不能用静态网站的方式来提供服务，因为它不是静态的HTML文件，而是存在数据库里的数据（可能以一个长字符串的形式）。我们可以使用服务端渲染（请不要把它和服务端路由混淆）的方式来展现。

Web1.0面向客户的网站和Web2.0面向内容生产者的网站都是向客户端发送html文件来提供服务的，用户通过访问URL来获取html。当然，对于Web2.0，向客户端发送的html文件并不一定真实存在与服务器上（不一定存在对于的.html文件），而将动态内容从数据库中取出来，以插入的形式放到html里。

下面以php为例：（译者：怎么这年头还有人用php啊！（恼））

<?php if ($expression == true): ?>
如果expression为真那么这段话就会显示
<?php else: ?>
不然这段话就会显示
<?php endif; ?>

不同的语言有不同的模板引擎（比如nodejs有Pug，PHP有Twig，Java有JSP，Python有Django），它们可以将HTML内容在被发送到客户端前，向其中插入动态数据，用服务端渲染将HTML重新编写。重新编写的html不会以文件的形式出现在服务器而是直接发送到客户端。用这种方法，当访问某个博客时，服务器返回的依然是html文件。

这样的网站还是网站吗？技术上来说，是的，不过这种使用web服务器或应用服务器及其数据库提供动态内容的东西应该叫web应用程序。不过两者之间界限并不明显。

2010年以来，由于Web2.0的普遍应用，不想刚开始那么新奇了，不过可以确定的是，它未来还会给我们带来更多的有趣的东西。

原文

WEB 2.0: FROM WEBSITE TO WEB APPLICATION

Eventually just serving static content from a web server wasn't enough. In Web 2.0 (around 2004), it became possible for users not only to read content, but also to create content; which led to dynamic content. Remember the HTTP methods from earlier? So far, we have only seen HTTP GET methods in action for reading resources, but what about the other HTTP methods?

With the rise of content management systems like Wordpress, a web server had to enable users to not only see resources, but also to manipulate them. For example, a user using a content management system must be able to log in, to create a blog post, to update a blog post, to delete a blog post, and to log out. At this time, the programming language PHP (which could be interpreted by a web server on the server-side) was the best fit for these kinds of dynamic websites.

【img】

Having the logic on the server-side, developers are enabled to process reading and writing requests from their users. If a user wants to create a blog post (write operation), the user has to write the blog post in a browser and click a "Save" button to send the content to the server-side logic running on the web server. This logic verifies the user is authorized, validates the blog content, and writes the content in a database. All these permissions were not allowed to take place on a client, otherwise everyone would be able to manipulate the database unauthorized.

Since we still have server-side routing, the web server is able to redirect the user to a new page after the blog post has been created successfully. For example, the redirect could be to the newly published blog post. If there is no redirect, a HTTP POST/PUT/DELETE request usually leads to a page refresh/reload anyway.

【img】

Since users are able to create dynamic content now, we need to have a database to store this data. The database can be on the same physical server (computer) like the web server (most likely in the early days of Web 2.0) or on another remote computer (most likely in the modern era of web development).

【img】

Once the blog post is inserted in the database, an unique identifier may be generated for this blog post which can be used to redirect the user to the newly published blog post's URL. All of this still happens asynchronously.

【img】

Now, after a blog post has been created, how does a server send a HTML file for a blog post if the data for it isn't static, but instead stored in a database? That's where the principal of server-side rendering (not to mistake with server-side routing) comes into play.

Both Web 1.0 with consumer oriented websites (static content) and Web 2.0 with producer oriented websites (dynamic content) return HTML from the server. A user navigates to an URL in the browser and requests the HTML for it. However, for the dynamic content in Web 2.0, the HTML which is sent to the client isn't a static HTML file with static content anymore. Instead it gets interpolated with dynamic content from the database on the server:

<?php if ($expression == true): ?>
This will show if the expression is true.
<?php else: ?>
Otherwise this will show.
<?php endif; ?>

Templating engines for different programming languages (e.g. Pug for JavaScript on Node.js, Twig for PHP, JSP for Java, Django for Python) enable the interpolation of HTML and dynamic data before it's sent to the client. With the help of server-side rendering, user generated content can be served from a server to a client within HTML by creating the HTML on the fly when a client requests it.

Are we still dealing with a Website here? Technically yes, but websites which go beyond static content by serving dynamic content from a web server (or application server) with a database may be called web applications as well. The line between both types is blurry though.

The term Web 2.0 and its popularity waned around 2010 as the features of Web 2.0 became ubiquitous and lost their novelty.

生词

content

• *adj.*满足的，满意的，甘愿的
• *n.*目录；所含物，容纳的东西；（书、文章、演讲、电影等的）内容；含量；满足，满意；投赞成票的贵族院议员；网上信息，电子信息
• *v.*使满意，使满足

dynamic

• *adj.*充满活力的，精力充沛的；动态的，发展变化的；力的，动力的
• *n.*动力，活力；相互作用，动态；动力学

rice

• v.（数字、 数量、价值）增加，（质量）提高；升起，达到较高水平（或位置）；（尤指从坐姿）起身，站起；取得成功，（权力或地位）升高，提高；（建筑物或自然景观）耸立，矗立；（建筑物）被建起；（土地，地貌轮廓特征）隆起，（地面）升高，变陡；（海水、河水或其他水域）上涨，升高；（响亮得） 听得到；（声音）变响，提高；（声音）从......传来；（太阳、月亮）升起，在天空出现；（鱼）游上水面；（感情或情绪） 变得强烈，增强；（面包、蛋糕等）发酵；（尤指早上）起床；复活，再生；（议会）休会，闭会，（法庭）休庭；（风力）加强，增强；（河流）发源，起源；起义，反抗 ；奋起应付（难局），能应付（难局）；（人）怒斥，对......进行争辩；（脸色因窘迫或羞愧而）变红，涨红；摆脱，不受（约束性环境）的影响；高出，超越；（毛发）竖起，立起来；（肿块， 水疱，伤痕在皮肤上）出现，长出；（胃）感到恶心；（气压表或其他测量仪器）读数升；接近（某个年龄）
• n.（数字、 数量或价值的）增加，（质量）改善；<英>（工资的）上涨，增加；（地位的）升高，（优势、重要性、受欢迎程度等的）增强； 上升，升起；斜坡，小山丘，高地；（楼梯的）级高，（拱的）矢高，（斜坡的）垂直高度；（声音或声调的）提高；源头，起源；（运动或活动的）兴起，高涨

manipulate

*v.*操纵，摆布；操作，使用；正骨，推拿；篡改；巧妙地移动（某物），巧妙地处理（某事）；校正，转移（储存在计算机上的信息）

interpreted    *v.*解释，说明；口译；把……理解为；演绎（interpret 的过去式和过去分词）

developer    *n.*开发商，开发公司；开发者，研制者；显影剂，显色剂；（在特定时间或以特定速度）成长（或发育成熟）的人

process

• *n.*步骤，程序；（自然或偶然的）变化过程；（为达到某目标的）过程，进程；制作方法，加工方法；<法律>传票；（生，剖）端突，突起
• adj.（印刷）三原色的，三色版的； 经过特殊加工的；照相板的
• v.（用化学物品或机器）处理，加工；审核，受理（正式文件或请求）；（计算机）处理（数据）；冲洗（照片）；加工（食品）；<正式>列队行进；把（头发）弄成直发

post    帖子

verifies

• 证实
• 核实

authorized

• *adj.*经授权的；经认可的
• *v.*授权；批准；辩护（authorize 的过去分词）

validate

*v.*批准，确认……有效；证实，确认；使生效，使具有法律效力；证明有……价值，认可

otherwise

• *adv.*否则，不然；除此以外，在其他方面；不同地，另外地；以其他方式，用别的方法
• *adj.*不是那样的，另外情况下的

redirect

• v.（以新的方式或目的）重新使用；改寄，改变投递方向
• *n.*改寄；配置

store

• *n.*商店；仓库，储存处；（事物的）储存，储备；大量，丰富；储存的物品（stores）；军需品，补给品（stores）；<英>（计算机的）存储器；重视，注重；待育肥的小羊（或小公牛、小母牛、小猪）
• *v.*贮存，储藏；（在头脑或计算机中）储存（事实或信息）

era    *n.*时代，年代，纪元

unique

• **adj.**独一无二的，独特的；非常特别的，极不寻常的；（某人、地或事物）独具的，特有的
• n.<古>独一无二的人（或事）

identifier    n.标识符，认同者；检验人，鉴定人

generate    v.产生，引起

asynchronously    adv.异步地；不同时地

principal

• adj.最重要的，首要的；本金的，母金的
• n.<美>（美国公立中小学的）校长；<英>（英国的）大学校长，学院院长；（企业或机构的）负责人；（音乐会、戏剧、芭蕾舞剧、歌剧中的）主角演员；（管弦乐队每一乐器组的）首席演奏者；（有利息的）本金，资金；（法律和商业事务中的）当事人，委托人；关键人物；（某些行业）完全合格的开业者；<英>（负责某一部门的）高级公务员；主犯，首犯；<史>决斗者；（支撑檩的）主椽；（管风琴的）主音栓

consumer    n.消费者，顾客，用户；食用者，使用者，消耗者

orient

• v.朝向，面对，使适合；定向放置（某物）；确定方位，认识方向（orient oneself）；引导；使熟悉，帮助适应
• n.<旧>东方，东亚诸国（the Orient）；（优质珍珠的）光泽；优质珍珠
• adj.<文>东方的，东方国家的；（尤指宝石）光彩夺目的；（太阳等）冉冉上升的，（白昼的光亮等）渐渐变强的

interpolate

• vt.篡改；插入新语句
• vi.插入；篡改

templating     n.模板；制模；放样

within

• prep.在（某段时间）之内；在……限度内；在（某段距离）内；在（某区域或空间）里；在（群体或组织）内部；在自己内心，在心灵深处；接近，误差不到……
• adv.在里面，在内部；在内心深处，在思想上；在（某段时间）之内；（距离）在……之内；（某个地方）之内；在（群体或组织）内部；在……范围内，在……限度内；误差不到……
• n.里面，内部

deal with    处理；涉及；做生意

technically    adv.技术上；专门地；学术上；工艺上

blurry    adj.模糊不清的

wane

• v.（月亮）缺，亏；衰落，减少；消逝
• n.减弱，衰落（on the wane）；衰退期；（木板或木材的）缺棱，钝棱

ubiquitous    adj.普遍存在的，无所不在的

novelty

• n.新颖，新奇性；新奇的事物（或人、环境）；廉价小饰物，小玩意儿
• adj.新奇的，风格独特的