網頁程式設計教學:線上前端技術練習平台

PUBLISHED ON NOV 15, 2018 — WEB
FacebookTwitter LinkedIn LINE Skype EverNote GMail Yahoo Email

    免安裝的前端練習平台

    這幾年出現數個練習前端技術的線上平台,像是:

    • JSBin
    • JSFiddle
    • CodePen
    • Plunker

    這類平台的好處在於 (1) 不用建置環境,直接用瀏覽器即可練習寫前端程式,(2) 不用寫完整的網頁,可專注在撰寫特定的程式碼片段上。筆者以 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 等,這類語言的代碼的確會比較美觀,但無法直接套在現有專案上,有興趣的讀者可自嘗試。筆者以為接近原生語言的前置語言學習曲線會較平滑。

    Handlebars、SCSS、Babel 都可以在 CodePen 中直接選擇;而 EJS (Embedded JavaScript) 無法直接轉換,需要透過一些樣板 (boilerplate) 程式碼 (參考此範例)。

    TAGS: WEB