跟著小明一起搞懂技術名詞:MVC、SPA 與 SSR

第一幕:在很久很久以前…

別笑,這就是你年輕時會寫出來的東西

我到底寫了三小

第二幕:痛改前非

Eureka!

純屬範例,絕對沒辦法跑
PHP 的框架 CodeIgniter 寫出來的
  1. 為什麼要有 MVC?
  2. 有 MVC 跟沒有 MVC 的差別在哪?
  3. 所以 MVC 是什麼?

第三幕:毛很多的使用者

我每次留言之後頁面都會刷新,我家網速又慢,每次都要等個十幾秒,有沒有可能不要重新整理頁面?你看人家 Gmail,我寄完信它也沒有重新整理啊!人家做得到你應該也做得到吧

原本我新增留言之後重新整理頁面就可以看到新的留言了,因為 Server 會把最新的結果傳回去;可是我現在用 Ajax,我要怎麼在不刷新頁面的前提下在畫面上新增留言?

Ajax 送出資料之後利用 jQuery prepend 上去

很感謝你上次新增的功能,可是我有個疑問。我看 Gmail 無論做什麼操作都不會換頁,你的留言板也可以改成這樣嗎?這樣比較方便,謝謝。

此範例改自我學生 Kris 的作業,http://thinkr.tw/
利用 Ajax 跟 JavaScript 在前端新增留言
  1. 點擊刪除之後,利用 Form 表單 POST 資料去 /server/delete_email
  2. /server/delete_email 處理完之後 redirect 回去信件列表
  3. 瀏覽器重新載入信件列表(在載入之前你都會看到全白畫面)
  1. 點擊刪除之後,利用 Ajax POST 資料去 /server/api/delete_email
  2. /server/api/delete_email 處理完之後回傳 Response
  3. 利用 JavaScript 在前端把那封信的從畫面上移除

咦,如果我全部畫面都是由前端利用 JavaScript 動態產生的話,那我原本後端的 View 要幹嘛?

SPA 與 MPA 的對照
  1. 點進電影 A
  2. 快速按上一頁
  3. 快速點進電影 B

第四幕:行銷團隊的暴怒

Hey, thanks for building such a cool website, I really like it. Is there any premium plan? I am glad to pay for the additional features like custom domain or custom template.

你做了什麼?為什麼在搜尋引擎上面搜尋我們的網站,結果只會出現一大堆看不懂的程式碼?我們的網站 SEO 做的奇差無比你知道嗎?

幹我知道了!

第一個頁面由 Server side render,之後的操作還是由 Client side render

CSR vs SSR

最終幕:前端的未來

結語

  1. 為什麼要有 XXX?
  2. 沒有 XXX 跟有 XXX 的區別是什麼?
  3. 所以 XXX 是什麼?

--

--

--

重度拖延症患者,興趣是光想不做,有很多想做的事,卻一件都沒有執行。無聊的時候喜歡寫文章,發現自己好像有把事情講得比其他人清楚的能力。相信分享與交流可以讓世界更美好。Medium 文章列表請參考:https://aszx87410.github.io/blog/medium

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Huli

Huli

重度拖延症患者,興趣是光想不做,有很多想做的事,卻一件都沒有執行。無聊的時候喜歡寫文章,發現自己好像有把事情講得比其他人清楚的能力。相信分享與交流可以讓世界更美好。Medium 文章列表請參考:https://aszx87410.github.io/blog/medium

More from Medium

Interact with object

Higher-Order Component (HOC)

Add Husky + Lint-staged to React (with Typescript)