iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
0
Modern Web

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

Node.js & nvm 初步上手——全端產品工具箱 IV

Node.js Logo

from wikipedia

WHY Node.js?

Node.js 是一個 JavaScript 執行環境(run-time environment),使 JS 在本地環境或雲端伺服器中也能夠運行。
- from Alpha Camp's material

原本 JavaScript 只能運行在瀏覽器上,也就無法脫離客戶端在其他環境運作。而 Node.js 的出現,讓 JavaScript 也能用來架設伺服器,使它成為唯一可用來開發全端(前/後端)的程式語言。

但能開發後端的語言比比皆是,資源社群豐富、被廣泛使用的 JAVA,歷史悠久的老牌語言 PHP,近期因為資料分析而快速竄紅的 Python 、MVC 架構扎實嚴謹的 Ruby 等。

究竟什麼特色,讓 Node.js 在某些領域中,脫穎而出?

Node.js 有什麼優勢?

當初 Node.js 的開發者 Ryan Dahl 在看到線上相簿網站 Flickr 極其耗費效能的進度條後,開始思考「如何提高瀏覽器與伺服器同步溝通的效能?」便嘗試利用 JavaScript 的特性,使用了當時性能卓越的 Google Chrome JavaScript 引擎 V8,打造了 Node.js。
- from Alpha Camp's material

13 Companies which use Node.js in production | Detailed Discussion

from <13 Companies which use Node.js in production | Detailed Discussion>

由於起初的設計目的聚焦在「提高瀏覽器與伺服器同步溝通的效能」,對於「資料運算密集、需要即時處理(DIRT,data-intensive real-time)」的應用程式,具有極大優勢。因而被許多跨國大企業大力引進,舉凡與「共享、串流、社群、電商、支付⋯⋯等」相關商業模式都在範疇中。

 

Node.js Server 快速上手

Node.js Server

from Build Node.js RESTful APIs in 10 Minutes

我在學習新東西時,習慣整理成自己能理解的流程或框架,這大幅增進了學習成效。而這段的學習核心在於:「能夠實作、理解並說明伺服器內部運作的細節。」而不只是背記語法或操作。

無論使用 Node.js 初次嘗試在本機環境下架設伺服器,或之後在 Express 框架所提供的基礎下設計路由,大致上都可以分成這三部分:

  • 載入框架、工具、模組並定義伺服器相關變數
  • 設定伺服器如何處理請求及回應
  • 啟動伺服器以監聽請求

其中需著墨最多的部分就在於 「載入哪些工具」以有效「處理請求及回應」

載入 HTTP 並定義伺服器相關變數

// Include module and define server related variables
const http = require('http')

const hostname = 'localhost'
const port = 3000

這部分的設定牽涉到伺服器的初始化,在 前篇 提及的 HTTP、host、port 都是在這個階段處理。

設定伺服器如何處理請求及回應

// Set server to handle request and response
const server = http.createServer((req, res) => {
  res.statusCode = 200
  res.setHeader('Content-Type', 'text/plain')
  res.end('This is my first server created in Node.js')
})

接著就是伺服器內部運作的重頭戲——處理請求 req 及回應 res

  • 設定 HTTP 狀態碼 statusCode
  • 回傳資源的格式 Content-Type
  • 傳送給客戶端的回應 res.end

啟動伺服器以監聽請求

// Start and listen the server
server.listen(port, hostname, () => {
  console.log(`The server is listening on http://${hostname}:${port}`)
})

最後階段就是啟動伺服器,並讓它監聽傳來的所有「請求 req」,監聽的來源就是一開始設定的 host 和 port 。

 

Node.js 刻意練習時的注意事項

現在開始新的工具模組、設計模式、抽象概念將排山倒海而來,就如我在 學習心法 中提到的,大量、不斷地刻意練習是必要的過程。

安裝須知

安裝細節在網路上或教材中都有詳細介紹,這裡不再贅述;但特別提及兩點重要觀念。

以 nvm 安裝

Node Version Manager
實務上通常使用 Node Version Manager (nvm) 來安裝 Node.js。它讓開發者可以在電腦上同時安裝不同版本的 Node.js,並且能快速切換使用。

採用 LTS (Long term support) 版本

Node.js release version

官方網站 上,或者可以在 Teminal 輸入 [~] $ nvm ls-remote,都能查看目前釋出的版本。除非專案有需求要使用最新的 JavaScript 功能,否則建議使用較穩定、官方持續維護的 Node.js 版本。

每次開啟都要 nvm use ${version number}

nvm use version number
每次開啟 Terminal 都要記得輸入 nvm use ${version number} ,否則會看到的錯誤通知:

-bash: node: command not found

每次存檔後都需重啟

每次修改並存檔後,都必須要在 Terminal 透過 Ctrl + C 把伺服器停掉,再以 node js檔案 這個指令重新啟動,才會執行更新的程式碼。

在後面的實作開發筆記,會介紹如何利用工具省去每次手動重啟的例行工作。

 

下一步:站在 Express 框架上開發 web app

Express JS
前篇 中提到我們所要開發的網頁應用程式(web application),絕對比單一頁面搭配一個 HTML 檔案的簡易網頁複雜得多!我們需要處理資料、設計路由、頁面渲染,並且包含眾多的檔案管理。

所以下個階段,我們會站在巨人肩膀上看世界,採用以 Node.js 為基礎搭建的 Express 框架來進行開發。它幫助我們免去伺服器內部設定的繁瑣細節,讓我們能專注在軟體開發上。

 


閱讀更多

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


上一篇
全端開發者必懂的「網路觀念」
下一篇
全端開發者必懂的「產品搭建程序」
系列文
用 JavaScript 打造全端產品的入門學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言