[翻] 一个吃饭的时间搞清楚前端和后端

原文来自:Front End v. Back End Explained by Waiting Tables At A Restaurant
本文大部分是自己翻译,部分为机翻,单词来源与google,若有侵权,请与作者联系。

前言:如果你去过餐厅,那么你就可以了解在 web 开发过程中,前端与后端的区别。

当你打算开始学习 web 开发时,你会遭遇(encounter)一系列能把你搞晕的概念(concepts)。例如:
Databases? Servers? Client-side? Server-side? AJAX?
幸运的是,当你构建你的第一个项目时,你仅仅需要了解 HTML 和 CSS 的知识。你可以在你自己的电脑上完成。但是,如果你想知道你的网站是怎样在互联网上运行的,那么你就需要去理解前端与后端的知识。

这里有一个通用的理解方法,就好像是一个餐厅中的服务员和厨房员工。对于你的网站来说,前端和后端的也是依据于其功能将其分开。一个规范就是,每个
side 都是允许做自身擅长的那一部分。

对于厨房的员工来说,高效的做出高品质的饭菜是他们的天职。而服务员更擅长于接待顾客和给顾客带来一次好的体验。

restaurant cycle
restaurant cycle

在 web 开发中,前端被叫做客户端,后端被叫做服务器端。

在一个 web 应用中,他们扮演者不同的角色,如果要理解它们的不同,我们先去看看 HTML 和 CSS 的基础。

前端介绍

率先入场的是前端选手。
前端代码实现 用户界面(UI user interface),即游客与网站之间的交互。在我的例子中,餐厅中的桌子提供了让顾客与餐厅的工作人员交流的地方。所以,我认为,餐厅里的桌子就像一个 website。

image.png

用户(或者是顾客)需要一些能看的到的媒介,在餐厅中,这个媒介就是菜单(menu)。并且它应该很容易让顾客(或者是浏览它的人)去理解这些选项。
从前端开发者的角度,这类似于 上面说到的HTML 和 CSS 语言。这两种语言允许你去构建静态的内容。


但是,聪慧的你可能意思到了什么。你不能向这个菜单发火,并期待着什么事情发生!你需要一种方式去和厨房的人员交流 ...
这个时候,你肯定想到了站立在一旁的服务生,他们会帮助你去理解这个菜单,并能回到你的任何问题,最后把你的需求,传递给厨房的厨师。他们是交互性(interactivity)的专家 --- 完美的理解了你想要做些什么。这个,就是 JavaScirpt 做的事情。

作为一名开发者,JS(JavaScript 的简称)会帮助你达成多项成就。比如,JS可以给用户带来好的体验,帮助用户更快的去发现想要的信息。同时,JS 也是一门发送用户请求到后端的语言。换而言之,当你去写JS时,它不是自动的去联系,后端语言,而是取决于用户。JS 是前端的一部分,在不和后端联系的情况下,能解决大量的问题。

我将类比选择菜品与网站开发的关系。即,当用户开始浏览你的网站时,用户会有一个心理目标,你的代码需要帮助用户更快地达成目标。如下,

  1. 用户必须能够快速的看到你提供的东西;
  2. 用户必须能工快速的发现更多的方式去帮助他们做出决定(JavaScript);
  3. 在用户做出决定之后,引导用户去完毕这个goal。

后端介绍

你有没有去过餐厅的厨房?那是一个高压的环境,至少可以这么说。它是和顾客在外面看到的环境完全不同,你可以说服务员和菜单提供了一个友好的方式,高效的版本模式的厨房里的东西,但却从来没有透露(revealing)过进程。
在 web 应用开发中,后端和厨房是类似的。与前端不同,代码是运行在服务器端。就好像是厨房,服务器是和 UI 处在不同的位置,它使用不同的语言来交流(communicate)。

image.png
image.png

由于服务器是处在远程的计算机上,所以它具备的资源要远超于浏览器。就好像厨房,更多的关注点是高效和多产。

考虑到一个餐厅厨房的复杂性(complexity),需要在对的时间对的地点有足够的材料。聪明的员工都知道这份工作的的应该怎么做,且必须重复的生产出相同品质的膳食。与此相同,服务器必须准备好数据,为响应你的web app。

image.png

当一台服务器接收到请求的时候必须做出响应以回复。而对于餐厅来说,这个响应应该是,

  1. 食物
  2. 关于厨房缺货的通知
  3. 服务员没有询问的后续问题

这个响应是通过服务员交付给顾客,也可以是 JavaScript 代码。

为什么我们需要前端和后端

实际上是我们必须在不同的环境下运行不同的代码。所有的标准浏览器只能运行 HTML、CSS 和 JavaScript。且浏览器上不能运行服务端语言。

还有一些其他的因素,包括关注点分离,我们希望每一个端都能更加关注自身更擅长的挑战。你能想象让一个厨师去做 waiter ?这会使的顾客的体验相当糟糕。幸运的是,同时存在着客户端和服务器端。

严格的前端

想象一下你是一个实体花店的主人,你想通过线上去销售,但是却不得其法。一方面,你不需要后端,因为没有复杂的计算问题。你只是需要一名前端,网站上只是一个包含邮箱的联系我们表格。

换句话说,有些网站只是为了浏览,不需要任何操作。其实不是每个网站都需要后端。如果你不需要后端时,你能使用
Github Pages 把你的代码运行在互联网上。

文末

作者想让大家去标题网站留言。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容