前端連載

[前端連載] 買早餐也能了解前端 vs 後端?

簡介

上次講完了網路的架構,今天來談點前端後端的東西吧。我們常聽到的前端和後端(或者前台與後台),其實是一個簡稱。也就是說,這個世界上存在各式各樣不同的前端,就好像「韓信」之於「趙信」,以及「張飛」之於「岳飛」,雖然名相同,也都是帶兵打架的人物,但還是有稍稍的不一樣(廢話,他們根本就是不同人)。例如,以一個線上遊戲來說好了,前端負責的就是畫面顯示的部分,而後端則是處理各個玩家血量、裝備等資訊的伺服器。因此,嚴謹一點來說,這篇文章將要說的是「網頁」的前端和後端

開始囉!

先快把褲子穿上吧,多難看啊!
好啦,所以前端和後端的差別到底在哪?一直賣關子,很討厭耶……
別急,讓我先給你建個概念

吃早餐了嗎?先去買份早餐吧!

昨天下午,為了趕一份後天要交的人工智慧報告,你做在電腦前寫了10個小時的code。實在是太忙了,晚餐、宵夜都沒有吃,非常不像平常的你。肥宅如你,好不容易寫完了程式,你的程式也開始比較像人一點的時候,累爆的你,頭昏眼花倒頭就睡。

早上九點,鬧鐘響起,拖著疲憊的身軀和餓壞的肚子,你獨自一個人走到早餐店。

老闆,我要一份火腿三明治。

只見老闆娘兼主廚兼店小二兼房東慢條斯理的指著桌上的三明治,對著你微笑,說了一聲:

好吃喔,帥哥,要不要再來點紅茶?
那給我一杯紅茶,啊對了,我要再一碗鐵板麵。
好低,沒問題

老闆娘樂壞了,一大早就有同學買了一堆早餐,雖然這些早餐只佔她今天營業額的百分之一,她還是在煎台上幫你多打了顆蛋。打完蛋的她,馬上又跑到冰櫃去拿了冷凍的鐵板麵。拿完冷凍麵的她,又到飲料桶旁邊幫你裝了滿滿的紅茶。雖然那杯成本不到1元,但是她知道多幫你裝一些,你就會很開心的一直來光顧。

所以做網頁和買早餐到底有什麼關係?

別急別急,讓我繼續說下去,你可以繼續吸你的鐵板麵。

一般沒事在網路上閒逛的人,就是要買早餐的你。而在網路上看著這篇文章消磨大好青春的他們,就如你在買早餐一樣。昨天,你騎著小折(阿嬤也知道的Google Chrome,也就是上網的工具,屬於前端),來到巷口的早餐店(想要看的網址)。進到早餐店後,跟老闆娘(後端)點想要的早餐(資料or檔案)。如果老闆娘有聽到你的呼喊(request),那他就回給你一份早餐(response)。你開心的拿著早餐,坐在店裡慢慢吃,突然想到忘了點杯飲料(不要懷疑,也是資料or檔案),就再跟老闆娘叫了一杯。直到吃飽喝足了,便開心地離開早餐店(關掉網站)。

有稍微懂了嗎?上個圖吧。

frontend vs backend

前端就是你目前所看到的一切表象

當你進入任何網站的時候,會看到各式各樣的文字和花花綠綠的樣式。譬如某一個叫沒一村的傢伙又發了一篇無腦的文章,想要顯示給大家看,那他就要找前端工程師,因為前端工程師負責內容顯示。如果這個叫沒一村的傢伙,又想要讓他的文章有紅的喜氣,那這名可憐的前端工程師就要把他的文字上色。又譬如這個難搞的傢伙(我絕對沒有在指涉你老闆、你教授、你媽媽、你室友……)想要讓他的文章可以左右抖動,七進七出,那這個也是前端工程師所負責的。

所以你有沒有覺得前端工程師很可憐?

我好像大概懂前端該做些什麼了,那後端呢?

後端就是一家早餐店!還記得那些炫泡的文字和樣式嗎,存著這些文字和樣式的「檔案」全部都是「由後端給傳送給瀏覽器」的。也就是說,這些檔案是由前端工程師寫好,給後端工程師放在後端管理,而這個後端也就是俗稱的「網頁」伺服器(web server,加了一個網頁是要你記住「韓信」vs「趙信」,不過後面我都會簡稱伺服器,server)。

想像一下,如果這時你要登入信箱,去看看你的面試通知寄來了沒。你輸入了你的帳號密碼,誰來驗證你到底是不是真貨?辛苦的後端!

再想像一下,如果這時你登入了靠北交大,看到很多好笑的內容,這些資料存在哪裡?從哪裡來?辛苦的臉書後端!別忘了,小編只負責發文,這些資料最後存在辛苦的後端!

再想像一下,如果你覺得靠北交大非常好笑,像個屁孩一樣,在下面留言了很多「嘻嘻嘻、哈哈哈、哇哈哈、噗哈哈」,這些「哈哈」,由誰來存起來?辛苦的臉書後端!

所以你有沒有覺得後端工程師很可憐?

一下後端,一下前端,弄的我頭腦鈍鈍的。你可以再完整的告訴我,這一切的流程到底是怎麼一回事嗎?

好的,我也覺得你應該暈了。

當你連到google的時候,你看到的一切,帶有畫面和動畫的這些檔案,都是從伺服器傳送來的。不過,製作這些畫面的,都是前端工程師。70億人看到的,都會是同一個畫面,因為這些頁面都是前端工程師事先寫好的,該放什麼,大家都一樣,沒有任何不同。接著,你填入帳號密碼,按下發送,內容傳到伺服器。伺服器處理各個request和response,然後他會幫你做驗證,確定你可不可以登入。而這些工作,都是由後端工程師寫的程式執行的。回到主畫面,右上角寫著「嗨!XXX」,這個XXX叫什麼名字,也都是後端幫忙前端填上去的,而這些動態填上去的資料,都是存放在伺服器的資料庫(database)。

再強調一次,那些大家看起來都一樣的,是事先寫好的,也就是已經刻在html檔(先記一下這個名詞,它管網頁的文字內容)上了。這是屬於前端的範疇。至於後端,則會根據不同的人,顯示不同的內容和資料。

我好像聽到了一個很關鍵的名詞——資料庫(database)

哈,果然還是被敏銳的你給發現了。我口有一點渴,可以把你那特大杯的紅茶分我喝嗎?

好啊儘管喝。雖然你說的很有道理,但是我發現我和阿嬤的筆電,在水果日報的專欄上都顯示一樣的內容耶,這也是前端工程師事先寫好在html檔上的嗎?我怎麼覺得怪怪的?

看來你很有天份喔,你說的沒錯,這些東西當然不可能事先寫好在html檔上。如果是這樣的話,豈不是每一篇新聞就要重新弄一個新的html檔?

在這個情況下,我們需要一個資料庫,它的功能就是存放各個新聞、誰又對誰按了讚、誰又去誰那留了言……等這些資料。前端工程師處理的,只是顯示這些內容的板型喔!

backend-news

還記得早餐故事嗎?當你來到一間早餐店,跟老闆娘要一個三明治,老闆娘指著桌上的三明治對你微笑。重點不是微笑!重點是這個放三明治的餐台,他就是一個資料庫。還記得冰櫃拿出的冷凍麵嗎?冰櫃也是個資料庫。這些食物放置點(資料庫),裡面有各式各樣的表格(table),而且一個表格內存放了同樣類型的東西,就好像餐台上的某一區都放著調味乳,某一區都放著三明治這種感覺。

回到資料庫本身,如果你是水果日報的後端工程師,那你的資料庫就要有一張table,裡面有一個欄(column)專門存放新聞。如果你要區分這個新聞是腥羶色或童叟皆宜,那你就還需要一欄,專門標示這則新聞的分類。資料庫裡的資料存放方式就和下圖大同小異。

sql-tables

酷,不過同一家早餐店為什麼要有不同的食物放置台?呃,我的意思是說,為什麼同一個伺服器要有不同的資料庫?

你找到早餐店模型的bug了!

沒錯,一般來說,一個伺服器,只會有一個資料庫,它存著所有這個網站所需要的資料。不過比較縝密的網站,會有多個資料庫。有的是跟在伺服器同一個主機上的,也有不少是備份在遠端的。就好像你媽媽在拿到你的成績單後,會先拿去影印個10份,是一樣的道理。這是為了防止資料庫出意外造成的損失,也是為了預防你對你的成績單做出不好的事。記住,資料庫出意外是非常嚴重的事!你的成績單出意外,也是非常嚴重的事!

真有趣,原來後端要處理這麼多事,那前端呢,他好像在旁邊涼很久了?

紅茶真好喝,我喝完了,杯子還你。

再讓我詳細說一次上網的過程,你就會清楚了。當瀏覽器連到一個網站,網站的後端便會傳給你一個html檔(此時後端可能已填好資料了,就像水果日報的新聞一樣)。再來,因為這個網站醜斃了,他需要一點裝飾,於是後台再給你一個css檔,免得被你嫌沒化妝不禮貌。如果你貪心一點,還需要一個js(javascript的簡稱,一個你以後會常看到的程式語言)檔來管理複雜的動畫和使用者互動,他也會給你一個。基本上是有求必應,你想要什麼,只要最先的html檔上有寫的,貼心的後端都會給你。以上這些後端給的東西,都是前端負責生出來的。

此外,因為我們的瀏覽器在一個視窗內只會有一份網頁內容,所以也只會有一份html檔。但是裝飾和動畫,都是想加多少就加多少的,所以後端傳來的css和js檔都可以超過一份。

動手操作一下
  1. 打開阿嬤筆電上的chrome
  2. 按下F12
  3. 點上標題的Network
  4. 隨意點一個你喜歡的網站
  5. 接著就會看到以下東西

chrome-dev-tool-network.png

由此我們可以知道html檔是最先載入的,這個檔寫著該導入哪個css和js檔。而之後的css js 圖片的載入順序則不一定,端視程式碼的先後順序而訂。此外,所有的resource都是同步載入(synchronous)的,也就是一個一個輪流載入的。

有興趣的話,也可以右鍵,按檢視原始碼,你應該會看到以下的東西,從這個我們可以看出瀏覽器會載入哪些css和js檔。

		<link rel="stylesheet" href="css/XXX.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
然後呢,前端工程師就這樣?

沒了,前端工程師「主要」的工作就是做出能夠互相搭配的html、css、js檔。

所以你有沒有覺得前後端工程師很涼?

不是吧?這樣說來當一個前端工程師也太簡單了吧?

當然不可能囉,前端工程師也是很忙的!所以囉,這次先給個前後端的基本概念,下次再跟你提一些網路發展的歷史,以及一些前後端的基本技術,這樣你就會更懂前端工程師這個行業是怎麼興起的囉!

那我這個前端工程師也要去忙了88

嘿!瞧你聽的津津有味的,怎麼吃的滿嘴都是肉醬!

粉絲專頁——沒一村端筆記

https://www.facebook.com/noootownnotes/

 

 

 

2 thoughts on “[前端連載] 買早餐也能了解前端 vs 後端?

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s