[Day3] - 前端,後端是在做什麽? --续 前端後端的历史及架构

其实每个时期程序流行的架构以及写法会略有不同,每个时期前端後端负责的范畴也不尽相同,我们无法知道我们会碰到什麽样的架构,也无法决定前人是如何设计,我们能做的只能增强自己的理解,让自己能够快速地理解架构并开发。我觉得了解不同架构之下的网站系统是如何运作的是一件很重要的事。就像是读书之前先看单元大纲,可以能抓住重点轮廓一般,在开发和沟通上,更了解架构时可以更快的进入状况~

  1. 网页时代
    还记得以前使用网路的情景吗?过去的网路是要用拨接的(可能有点久远....)
    网站的一开始其实业务逻辑极其的简单,就是基本的一个网页,使用者去到一个网址,服务器回传一个html网页给浏览器,单纯简单的美好,使人们开始可以透过网路取得资讯。但别小看这简单的静态网页,许多的官方网站,其实用静态的网页也是可以完成的~

https://ithelp.ithome.com.tw/upload/images/20210916/20140477nuGDfTSM8n.png

  1. 模板时代
    等到网际网路变得持续发达之後,人们开始把越来越多的事情在网路上实现,单纯的静态网页已经不够我们使用,人们使用程序设计出应用,像是部落格,搜寻引擎,购物车等等。
    一开始的网站应用,前端的部分主要是透过模板语言设计介面,此时还没有那麽明确定义区分前端後端,因为业务逻辑主要是在服务器处理。当我们收到一个请求,程序会在後端当中处理整合好之後,将档案,数据,整理成最终的样式,送给去给浏览器。以Django当作范例来看,我们见下图

https://ithelp.ithome.com.tw/upload/images/20210916/201404776d1uZDryP3.png

再来我们看看Template的程序码,以下范例在中,会把things项目里面的每一个项目的title , body 呈现在页面当中,如此可以在服务器端就生成完最後要呈现的版本,回传给前端。

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <title> Something </title>
</head>

<body>
    <div id="content">
        {% for thing in things %}
            <h2>{{ thing.title }}</h2>
            <p>{{ thing.body }}</p>
        {% endfor %}
    </div>

</body>
</html>

在此阶段没有明确的前後端定义,而通常采用这种开发方法的团队,满多会以功能来进行一条龙的开发,不一定会有明确的前後端分工。现在仍含有许多服务是用此架构开发完成的。
此种开发的优点:

  • 开发者皆会须熟悉整个网站的建置
  • 若是功能单纯的网站服务,又没太多的开发人员,以此方式开发是适合的情境

但其中问题包括

  • 若系统需要拓展,架构面上较难进行调整
  • 同时有多个工程师开发时,较难有效率地进行分配
  1. 前後端分离时代
    随着网页服务的需求越来越大,以及服务应用不仅止於电脑网页,有时候有行动装置,甚至是物联网装置,但如果是用过去的架构,三种服务就必须要开发三次。以及当需求越来越多元,以及流量越来越大,前後端分里的架构可以方便系统更加有弹性。而此阶段的前端就被独立了出来,网页的逻辑和介面由前端进行制作,而後端则专注於处理资料传递资料,在此架构中後端主要提供API供前端程序获得资讯。

https://ithelp.ithome.com.tw/upload/images/20210916/20140477GWgiEVQY8l.png

前後端分离的架构有许多的好处:

  • 前端後端的职责清楚,且能同时进行开发
  • 架构上的调整更为弹性

这系列的文章着重在後端API的开发,由於对於大家来说,後端是一个有点距离的名词,希望透过这篇说明大家能够更清楚的了解~


<<:  Day-2: Ruby on Rails 是什麽?

>>:  水深火热CSS Day 1

[Day 49] 留言板後台及前台(五) - 将留言板内容写进资料库

我们昨天做了错误处理, 今天才正式来处理写进资料库的内容, 我们先来做个范例, (我们不讨论CKEd...

D-13, Ruby 正规表达式(一) Regexp && Valid Palindrome

刚开始看不懂那些乱码时,真的很痛苦。 Regular Expression常简写regexp,也是R...

I Want To Know React - 中场休息

铁人炼成,回顾三十天 三十天过去了,没想到我竟然成功完成铁人赛了! 上次铁人赛完赛心得的第一句话是 ...

第十七天:TeamCity 通知机制

自从有了 TeamCity 後,很多原本需要人工操作的任务都可以交给 CI 主机做。因为它会在每一次...

Day28 测试写起乃 - Timecop

Timecop 可以帮助你在测试时将时间冻住,因为有些讯息中会带有时间,如果要确保时间一致就必须要将...