iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 7
0
Modern Web

用 JavaScript 打造全端產品的入門學習筆記系列 第 7

全端開發者必懂的「產品搭建程序」

「站在巨人肩膀上,能幫助我們免去繁瑣細節,以專注在軟體開發上。」

接續上述在 前篇 提到的觀點,此筆記將提及打造產品的三個階段,以協助我們善用資源,並且為全端開發打好基礎,「讓每個人都能貢獻最獨特的自己」。而我認為這是在充滿開源文化的軟體科技領域,最核心的信念。

產品的地基、結構與建設

建築藍圖

建築藍圖 from UNDERSTAND BUILDING CONSTRUCTION

打造全端產品看似高深莫測,實際上每個細節一一探究,也確實博大精深;但經歷循序漸進的學習,我發現真的能夠在半年內迅速入門。本篇筆記歸納了打造全端產品的三大程序,接下來的所有實作、練習,以及未來自己的 side project,乃至成為軟體工程師,我想都可以依循的這套程序。

這套程序其實是借鑑「建築產業」歷久彌新的 SOP,至今房屋仍舊以此順序搭建。

地基

一切建築唯有穩固根基,才能長久屹立。在 Web Dev 領域,地基指的就是 伺服器的架設、路由系統規劃及資料庫操作 。而「語言框架 framework」就提供了上述所需的重要基礎。

結構

完整有序的結構,有助於格局與房屋的構築。在 Web Dev 領域,結構就是 程式碼及檔案的管理原則 。而「MVC 軟體設計原則」就提供了條理清晰的管理模式。

建設

當地基與結構完備後,就只欠東風了,那東風就是產品的核心價值—— 所有的功能 。而在開源科技領域以提供許多「工具包( Package, Module, Library)」以協助我們解決常見問題,將專注力留給核心功能。而核心功能通常圍繞「CRUD」四個面向。

 

用語言框架紮穩地基 Framework = Foundation

地基

各個熱門程式語言通常都有一套完整框架,如 Ruby on Rails、Python 的 Django、PHP 的 Laravel,及我們正要使用的 JavaScript 的 Express。

而 Express 協助我們能快速有效地搭建伺服器最核心的部分——路由系統,也就是管理所請求 req 與回應 res 的中樞。

Express 路由系統

路由設計示意圖

路由設計示意圖 from Alpha Camp's material

前篇 結尾提到打造網頁應用程式絕非單一頁面與檔案,所以需要路由系統來管理所有「URL 的處理程序」。也就是以某個「行動」處理從「URL」取得的「資源」。通常會如以下的模式:

router.get('/about', function (req, res) {
  // do something
})

RESTful 路由設計

在分工完善且不斷迭代的網路應用產品開發中,擁有一套一致的設計風格有助於前後端的互助合作。而目前業界採用的就是「REST(Representational State Transfer)」設計風格,而符合此風格的軟體架構我們稱 RESTful

RESTful 路由設計以「資源」為中心,搭配 HTTP method 的行動,以及 CRUD 的資料操作。

RESTful 路由設計

RESTful 路由設計 from Alpha Camp's material

也就是以GETPOSTPATCHPUTDELETE 等 HTTP method 來新增(create)、讀取(read)、更新(update)、刪除(delete)從對應的 URL 取得的資料。

想科普地理解細節可以看這篇《How I Explained REST to My Wife》

 

用設計原則打造結構 Principle = Structure

結構

當我們拆解一個完整的產品,會發現超多資料夾及各自關聯的程式碼;如果我們全都放在各一個 HTML、CSS 和 JS 中,動輒上千行的程式碼會非常難以閱讀、維護及更新。而一套職責清晰的原則能讓管理變得容易。

關注點分離

關注點分離 (separation of concerns, SOC) 就是我們在開發時的可被理解為北極星指標的一個設計原則。簡單來說,就是讓程式碼成為分工僅然有序的企業體,透過各部門的協作,達成健康的持續營運。

以 MVC 實作關注點分離

在業界實務上,通常採 MVC(Model-View-Controller)來落實關注點分離的設計原則。在 《全端開發者必懂的「網路觀念」》 中,我們已經有初步的認識,分別是資料中心(倉儲中心)、畫面中心(包裝中心)與管理中心(物流中心)。

Model

Model 負責調度資料庫的資料,存放所有與產品功能、市場規則、使用者需求等有關的「商業邏輯」,如:

  • 電商網站:會員折購、訂單免運門檻等。
  • 共享平台:提供者與需求者的配對範圍、提供者的服務時段等。
  • 社交謀體:朋友圈的關係網絡、貼文與回應的資訊等。
  • 影音串流:個人與家庭版會員權限、推薦的熱門影音等。

View

View 包辦所有的佈局及排版,透過樣板引擎(template engine)將規劃好的視覺設計,搭配由 Model 取出的資料,渲染為瀏覽器可讀取的網頁。

Controller

Controller 掌握與使用者互動邏輯,也就是負責處理所有 request/response 的工作程序。接收到 request 後,它會向 Model 取得資料,並提供給 view 以建立樣板,並回傳給客戶端。例如:

  • 哪些內容是登入後才能讀取?
  • 送出表單後是如何回應?
  • 資料更新後導向哪個頁面?

 

用完善功能構築建設 Fuction = Building

建設

所有產品的核心、應用程式的價值主張,都反映在功能上。這也是真正解決使用者問題、滿足顧客需求,創造商業價值的所在。透過工具包(JavaScript 中常稱為 package)能輔助我們處理常見問題,而 CRUD 則滿足大部分的主要操作。

套用 Packages 處理常見問題

Packages 提供了一切常見狀況的解決方案,就像我們建商蓋房子時不會自己辦法製造電梯,而會像電梯供應商取得符合標準的好用電梯。因為我們主要的目的是提供溫馨舒適的房子(滿足需求的產品)。

在過去我們運用以下 Packages,以快速滿足某些需求:

  • Bootstrap 快速搭建美觀介面
  • Font Awesome 提供 icon
  • Axios 串接 API

接下來我們還會使用幾個好用的 Packages,協助我們搭建應用程式:

  • Handlebars 協助我們建立樣板
  • Mongoose 幫助我們向資料庫溝通

聚焦 CRUD 打造功能

大部分的產品操作都聚焦在新增(create)、讀取(read)、更新(update)、刪除(delete)的核心功能。例如經典全端實務的 Todo List 就圍繞在各種代辦事項的管理。而細節的實作、踩過的坑、遇到的瓶頸,都將在後面的筆記一一揭露。

 


閱讀更多

Infinite Gamer
關於本系列更多內容及導讀,請閱讀作者於 Medium 個人專欄 【無限賽局玩家 Infinite Gamer | Publication – 】 上的文章 《用 JavaScript 打造全端產品的入門學習筆記》系列指南


上一篇
Node.js & nvm 初步上手——全端產品工具箱 IV
下一篇
用 Express 快速架設伺服器——全端實作體驗 I
系列文
用 JavaScript 打造全端產品的入門學習筆記30

尚未有邦友留言

立即登入留言