The Art of Readable Code && High Performance Comments

在前一篇中,大致描述了「網路程式」裡的各部角色;現在來談常見的服務模式。

靜態網頁

最簡單的形式,伺服器上的檔案不帶運算,不常變動,因此 browser 送 request 出去, server 直接送 response 回來,超單純。透過 proxy 能夠縮短網路傳輸時間,並減低伺服器負載;靠著設定 dns 也能將流量分散到不同機器,或是離使用者更近的主機,因此也很容易擴展/除錯。

雖說現在靜態網頁退流行了,但是透過 CDN 來傳送靜態檔案如圖片、影像、js library ,也算是這類服務模式的後繼。

動態網頁 (CGI、Server-Side Script)

伺服器端接收 browser 送來的 request,以某些規則調用設計師所寫的程式,由該程式解析使用者傳入的參數,並決定要送出什麼內容作為 response。這十多年的 www 多半以這類運用為主,程式平台提供的功能也越來越多。

以當前的 PHP / Python 為例,這些語言除了常用的字串處理、數值運算、資料庫連線等功能,也提供介面讓設計師能以其他語言撰寫功能(函式),作為 extension 引入,進而加強語言的能力。若以上仍無法滿足需求,甚至可以從 script 裡執行程式。我之前做的某個專案就是由 PHP 呼叫 R 這套統計引擎,輸入其指令,解析結果,再轉換成 html 回傳到瀏覽器。

除了對語言本身擴充以外,這些語言也能夠寫成框架,整合一系列的功能便於設計師調用,以加快開發、除錯速度;或者是直接做成平台,讓使用者能透過管理界面,深入的控制平台本身的表現、行為。常見的框架有 RoR (最近很熱)、Code Igniter、FuelPHP (我個人愛用)、CakePHP、Symphony、Drupal 等等等。

以往這些語言要依存於 httpd 來運作,但現在 RoR、PHP (5.4) 與 Python 都已內建 httpd 功能。

客戶端語言 (Client-Side Scripting)

雖說在瀏覽器裡使用 js/vbs 來控制網頁結構,也有十幾年的歷史了;但直到最近數年才蓬勃發展。其主要原因可以歸為:

  • 眾多框架解決了瀏覽器、版本間的 js/DOM/CSS 相容性問題
  • 瀏覽器運行 js 的效率大幅提昇
  • Ajax 技術成熟,包含 js 端與 server 端的程式框架發展
  • DOM / CSS 規範落實

使用客戶端語言實現操作邏輯,比起交給伺服器端,具有下列優點:

  • 頁面無須完全重載
  • script 可以很好的控制頁面元件,包含頁面特效
  • script 能夠呼叫瀏覽器的 api 取得顯示頁面的資訊,伺服器端必須多一個 request 將這些資訊送到伺服器端處理
  • HTML5 大幅增強了 script 的能力,例如能做 3d 動畫 (WebGL)、執行緒 (worker)、2d 繪圖 (canvas)

大多數情況下,使用 js 建構操作邏輯時,伺服器端會由數個主頁面提供關鍵的版型;在刷新內容時,則透過 ajax 連到 server 的 api 抓取資料,並整理成適當的格式,塞入當前版型中。

行動 APP

ㄟ都,其實可以比照客戶端語言來看待。只是 APP 比起一般的瀏覽器,要更注意網路連線品質不佳、甚至是離線運作的需求。讓透過 API 去同步客戶端資料庫,並且 APP 針對資料庫內容進行運算/顯示,應該是服務建構的主流。

在 HTML5 普及之後,客戶端語言的網路程式設計應該也會向 行動 APP 的這點看齊。

難題

對於設計師來說,「運算該在資料鏈的哪一個環節處理」往往需要不少掙扎,甚至以往「能用資料庫算的東西,就不要拉到 script 裡」的原則,也開始有人試圖破除(DB server 是常見網站效能瓶頸)。這問題我猜永遠沒會有標準答案,必須靠著實測與需求來決定。

到最後,一切都要回歸下列四項的角力:功能需求開發時間執行效能程式碼品質;要如何取捨,就要考驗系統架構的智慧了。

 

2 Comments

  1. rein rein
    2012 年 10 月 26 日    

    為什麼看不到第 (1) 篇呢 ._.!?

    • clifflu clifflu
      2012 年 10 月 26 日    

      因為原本前兩篇是一起寫得,結果跟專案案主討論的時候,
      發現先把第二篇寫出來,可以回應他的問題,就這麼衝了 XD
      現在的話,發現太多內容跟網路上的其他東西雷同,很沒動力寫重複的東西 T_T

      等手上專案閒下來,再來回頭還債吧 XD

發表迴響

分類

%d 位部落客按了讚: