開放原始碼技術文件網 練習前端技術的線上平台

最後修改日期為 MAY 16, 2019

免安裝的前端技術練習平台

以前要練習網頁時,要在自己的電腦上建置環境才行。這幾年出現數個練習前端技術的線上平台,像是:

這類平台的好處在於:

  • 不用建置環境,直接用瀏覽器即可練習寫前端程式
  • 不用寫完整的網頁,可專注在撰寫特定的程式碼片段上。

在本文,筆者以 CodePen 為例,說明怎麼使用這類線上平台。

動手做時間:使用 CodePen 練習前端技術

首先,連線到 CodePen,可看到以下畫面:

CodePen 的首頁

雖然不註冊也可以直接使用,建議註冊一個帳號,該帳號可用來管理自己寫的範例,這部分請讀者自行完成。

在 CodePen 中的單一範例程式稱為 pen,以下是 pen 的編輯畫面:

在 CodePen 中編輯 Pen 的編輯器

以本圖為例,上方三個區塊分別是撰寫 HTML、CSS、JavaScript 的地方,下方是輸出的頁面。以 console.log 輸出的訊息會出現在 Console 視窗中。View 有三種版面,可自行調整,選自己用得順手的即可。

除了使用原生語言外,這三項技術也可以分別用其前置語言來寫,CodePen 會自動幫我們轉為相對應的原生語言,不用自己寫設定檔來串接。

雖然市面上大部分的網頁程式學習書籍只介紹原生語言,我們會建議讀者在學一小段時間的原生語言後,就改用前置語言來寫網頁程式。這些前置語言的目的不在於取代原生語言,但這些技術的確可以讓開發網頁程式的過程更省力、更有效率。

註:在 CodePen 中選取特定的 preprocessor 即可。

有時候我們需要在站台中加人第三方 CSS 或 JavaScript 函式庫或框架,這時候不需自己手動下載和上傳,透過第三方 CDN (content distribution network) 直接引入這些第三方資源即可。CDN 本來的用意是為了降低傳輸資料的延遲時間,對於常見的靜態資源來說,可省掉重覆下載的時間。參考以下附圖:

在 CodePen 中選擇相關的 JavaScript 技術

在本例中,我們使用 Babel 做為 JavaScript 的前置語言,並引用 jQuery。

選用前端前置語言

HTML、CSS、JavaScript 各自有自己的前置語言:

  • 使用模板語言 (template languages) 取代 HTML
  • 使用 CSS 前置處理器 (preprocessor) 取代 CSS
  • 使用 JavaScript 轉譯器 (trans-compiler 或 transpiler) 取代 JavaScript

HTML 和 CSS 本身是靜態的代碼,沒有程式邏輯的概念;JavaScript 雖是完整的程式語言,但本身有一些缺陷 (參考這裡)。前端前置語言的出現,就是在保留現有前端技術的前提下,使用更好的語言來改善前端程式的開發過程。由於瀏覽器並不支援這類前置語言所寫的代碼,程式要執行時仍會轉回等效的原生程式碼。

前端前置語言沒有原生語言的包袱,只要開發團隊有心,都有機會可以開發出新的前置語言。因此,這類語言的選擇可說是相當多。雖然這種百花齊放的態勢看起來很嚇人,其實只要選定一兩種自己喜歡的或是團隊指定的語言即可;其他的語言隨需要再學即可,不用貪多也不用過度學習。

筆者目前建議以下幾種前置語言:

筆者選擇前置語言最重要的準則是和原生語言相容,其他的語法特性再慢慢選即可。若前置語言和原生語言相容的話,不僅可以用在新專案,也可直接套在現有專案後進行重構。筆者手頭上一些舊專案就是藉由引入這些前置語言來翻新程式碼。

有些程式人喜歡 Ruby 風格的前置語言,像是 Jade、Sass、CoffeeScript 等,這類語言的代碼的確會比較美觀,但無法直接套在現有專案上,有興趣的讀者可自行嘗試。筆者以為接近原生語言的前置語言學習曲線會較平滑。

我們在 CodePen 寫了一個短例,這個短例使用了數個前置語言。Handlebars、SCSS、Babel 都可以在 CodePen 中直接選擇;而 EJS (Embedded JavaScript) 無法直接轉換,需要透過一些樣板 (boilerplate) 程式碼 (範例連結)。

分享本文
Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Yahoo
追蹤本站
Facebook Facebook Twitter