前端網頁開發通常包含HTML、CSS、JavaScript,可是單靠三者從頭打造一個現代網頁就是重複發明輪子,自己發明的輪子還可能跟別人車子不合用,因此有許多套件可以減輕開發工作,最後還需要一個打包工具將套件與網頁打包起來,成為可以放上伺服器的產品,本文以React為例依序介紹一些常用的工具,希望在實際開始學習之前先通過本篇簡介進行初步的理解,那麼實際開始學習時就能更加快速進入狀況。

我也有寫另一篇文章:一個腳本快速使用Parcel建立React、Router、Redux、Bootstrap立刻進行前端網頁開發,提供快速配置資料夾與檔案,迅速開始開發的方法。

網頁開發三大基礎

HTML與CSS

前端網頁分為三大區塊,分別是HTML、CSS與JavaScript。其中HTML掌管網頁結構與內容,CSS掌管網頁呈現出來的樣式,例如HTML紀錄網頁有導覽列、標題列、內文的相對位置與內容,而CSS則決定導覽列、標題列、內文的實際位置與樣式,近年的CSS還可以產生動畫效果。

JavaScript

在最陽春的情況下,只要有HTML就可以有一個能傳達訊息的網頁了,加上CSS就可以有一個美觀的網頁。HTML是一種標記語言,CSS是樣式表,兩者讓網頁瀏覽器(例如Chrome、FireFox、Safari)知道該怎麼讓渲染引擎產生出網頁內容,而JavaScript的是一種程式語言,而JavaScript則是添增了更多可能性,以下介紹的許多套件通常也是由JavaScript開發,提供給JavaScript使用的套件。

NPM簡介

NPM是Node Package Manager的簡稱,直譯為Node套件管理器,提供與管理NodeJS的套件。在傳統MVC開發時,許多的JavaScript套件都需要從HTML裡面載入,例如<script src="jquery.min.js"></script>這樣的語句。載入的數量多的時候需要寫一堆script標籤,不同script的載入可能會有順序的問題,載入不同版本的JavaScript套件時還可能對另一個套件發生版本衝突,因此透過NPM可以解決很多麻煩事情。

npm init     # 初始化專案,會建立package.json檔案
npm install  # 安裝全部需要的套件,需要安裝什麼寫在package.json檔案內
             # 通常出現奇怪的錯誤時,將node_module資料夾刪除,再執行這個指令重新安裝套件會有用
npm i {name}         # 安裝指定套件(使用i或install都可以),套件名稱會自動寫入package.json檔案
npm i -D {name}      # 安裝指定套件,但只用於開發,打包時會排除
npm uninstall {name} # 移除指定套件,套件名稱會自動package.json檔案移除
npm start      # 啟動NodeJS伺服器執行專案
npm run {name} # 執行腳本,例如 run build 通常代表打包專案
               # 具體有哪些腳本寫在package.json檔案內,可以自行新增

Parcel簡介

npm i -D parcel

使用NPM進行套件管理之後,輸出成要實際使用的網頁需要經過打包,通常打包的過程會有一些特定的需求。在以前使用Webpack進行打包,需要重複設定許多設定,比如要指定哪些資料夾與檔案要被打包、將SCSS解析為CSS、將CSS與JavaScript程式碼最佳化、增加Hash數值避免瀏覽器快取影響重新整理、壓縮圖片等,更進階的還有協助管理Service Worker和manifest.webmanifest等功能(有機會來寫一篇教學)。以上每個功能都需要個別設定,甚至需要另外下載一些NPM套件來協助設置,增加許多開發初期的麻煩。因此出現了新的打包工具Parcel,主打零配置的網頁打包工具,需要比較客製化的需求也只需要新增一點點設定工作而已,比起使用Webpack會省下許多時間。

需要注意,平常NPM的套件會有一個程式進入點,寫在package.json檔案內。但是Parcel的程式進入點是index.html,然後由Parcel自己判斷有哪些Script與CSS,所以要把package.json檔案內的 "main": "index.js," 這行文字刪除。而搜尋Parcel的資料時要注意是第一版還是第二版的,目前透過指令 npm i -D parcel 安裝的時候是安裝第二版的Parcel。在NPM上安裝的套件不指定版本時都是安裝最新的穩定版。

補充:JavaScript程式碼最佳化通常包含去掉多餘的空白、換行、註解、簡化變數名稱等工作。

React簡介

npm i react react-dom

React是由Facebook開發的前端網頁套件,雖然官方自稱是個Library,但我覺得稱為Framework(框架)也不為過。

目前前端三大框架(套件)分別是Google開發的Angular、Facebook開發的React、前Google工程師與社群開發的Vue.js,三者都有不少使用者。最一開始我是使用AngularJS,但後來Google將AngularJS的語言從JavaScript換成TypeScript語言,並且將AngularJS 2更名成Angular 2,做了大量不相容舊版的更新,因此我就改用React了。

前陣子看討論發現很多人放棄Angular的原因跟我一樣,但目前Angular從2到14都沒再發生將整個架構大改,導致程式碼完全不相容的狀況,因此目前使用Angular開發應該也是不錯的選擇。

而React使用比較彈性的方法更新,每次升級跟舊版不會差別太大。例如React 18新增了 ReactDOM.createRoot 來取代原本的建立Root節點的方法,可是在React 18使用舊方法時依然能運作,只是會在Conole多出警告要開發者要找時間更新。又或者React從16、17開始改成Function base的設計,雖然新功能都著重在Function base上,但依然保留Class base的模式可以正常運作。React也支援TypeScript,或是透過Visual Studio Code的JSDoc功能也在JavaScript模式下進行型別檢查,在開發時保留許多彈性。

講完React的優點,最後提一下React的缺點,就是React的許多功能是分開來的,可能是由React的開發團隊另外提供,也可能是第三方開發社群提供。因此同一個功能有時候會有好幾種解決方法,不同團隊或是不同時期開發的專案使用的工具可能會不太一樣。

React相關的工具簡介

React Router DOM

npm i react-router-dom

使用React或是另外兩個框架開發的網頁常常是單頁式應用程式(Single Page Application, SPA, 可參考維基百科)形式的,簡單介紹就是網站實際上只有一頁HTML,網站上不同頁面都是透過JavaScript動態產生的,使用者點選的超連結不是真的讓瀏覽器切換頁面,而是讓JavaScript切換頁面內容。好處是不會產生跳頁時的閃爍、前後端可以完全分離、換頁的載入速度更快速舒適、透過這種前端渲染技術也能降低伺服器的流量。這時候需要有前端路由功能來管理不同的虛擬頁面,React Router是個好選擇。

React Redux

npm i react-redux

Redux是React團隊提出的一種概念,這需要講解到React如何處理資料,在目前的簡介中只會先簡單的介紹它。簡單講Redux是管理React上的各種共用資料的套件,包含不同虛擬頁面上要共用的資料,以及後端伺服器傳過來的資料。

Redux會管理資料的儲存,當資料更新時會通知React頁面或區塊更新內容。React上的程式也可以主動呼叫Redux將資料新增、刪除、修改,完成後Redux又會將新版的資料自動推送給使用到相關資料的頁面或區塊。這是Redux取代單向綁定與雙向綁定等功能的方法。

值得注意的是React一開始只是提出Redux概念,因此需要另外安裝React Redux套件,但後來React本身提供了useContext + useReducer 兩個新功能,在比較簡易的需求中也可以考慮使用內建的,但更複雜的情況下我覺得React Redux還是比較好管理,因為下一章節要介紹方便React Redux使用的Tookit。

ReduxJS Toolkit

npm i @reduxjs/toolkit

使用React Redux的時候,需要建立store和一些相關的程式,Toolkit可以減少相關的工作。首先要有初始資料、要有Reducer處理資料、要有Action定義可以進行的操作、要有Thunk處理非同步的狀態,透過ReduxJS Toolkit可以一口氣定義好,透過一個Slice工具自動幫開發者拆出各個部分,簡化開發流程。

React Bootstrap

npm i react-bootstrap

Bootstrap是下一章節會介紹到的頁面設計套件,分為CSS與JavaScript兩個部分,React Bootstrap可以幫忙將Bootstrap融入React。基本上跟CSS相關的部分我還是習慣使用傳統方式操控Bootstrap,只是有一些需要使用到Bootstrap的JavaScript協助控制的功能,像是彈出式的Modal,這部分我會使用React Bootstrap提供的整合React的Bootstrap Modal。

其他相關工具

Bootstrap

npm i bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

Bootstrap是由Twitter開發的前端樣式套件,首先他提供一種方便的排版方案,可以簡便的開發出RWD的網頁,讓網頁能配合不同螢幕尺寸來改變網頁樣式。再來他提供一致的樣式,定義出primary、success、secondary、info、warning、danger各種情境該有的方格,讓網頁上的表格、按鈕、文字、背景等都有一致風格。然後提供各種額外套件,可以有漂亮的表格、表單、區塊、圖片、導覽列…等。

透過SASS/SCSS載入使用的話,可以再載入之前先設定變數名稱,來修改你需要的尺寸、顏色等各種設定,可以克制出你需要的、與眾不同的Bootstrap主題。

Bootstrap Icons

npm i bootstrap-icons
import 'bootstrap-icons/font/bootstrap-icons.css'

Bootstrap Icons是由Bootstrap提供的各種Icons,可以參考他們的網站 https://icons.getbootstrap.com/ ,這些icon使用向量繪製,因此放大縮小使用都不會失真,真是既佛心又好用。

Axios

npm i axios
import axios from 'axios'

Axios是提供JavaScript直接與後端伺服器交換資料的工具,也就是常聽到的AJAX。在最早以前需要AJAX必須透過JavaScript內建的XMLHttpRequest,使用起來相當不便,後來出現JQuery這個第三方套件,裡面的$.ajax將AJAX流程簡化許多。現代使用AJAX時通常會使用JavaScript新內建的Fetch API,如果需要更多額外功能,就會使用Axios。

我個人習慣使用Axios,他可以提供AJAX發起前的預處理、AJAX完畢前的預處理,然後可以建立許多Axios的instance針對不同需求建立好幾種預處理方式和設定值。

Sweet Alert

npm i sweetalert2
import Swal from 'sweetalert2'

在JavaScript中提供alertconfirmprompt等方法,可以在網頁上跳出小型視窗,用來提示使用者否些訊息,或是詢問使用者確認或取消,也可以要求使用者輸入一些訊息。但會有三個問題,第一個是這三個方法都是彈出瀏覽器原生的視窗,樣式通常很死板。第二個是進行詢問的時候JavaScript引擎往往會停止運作,直到小視窗關閉。第三個是這些小視窗是瀏覽器本身提供的,因此有一些In-App瀏覽器無法使用這些小型視窗,造成網頁根本無法提示、詢問使用者。

使用Sweet Alert可以解決這些問題,他提供漂亮的介面,而且使用的是HTML在網頁上產生重疊的內容,不用擔心一些In-App瀏覽器不提供alertconfirmprompt等方法。其他有趣功能可以參考官網介紹:https://sweetalert2.github.io/

傳統顯示方式
SweetAlert顯示方式

Moment

npm i moment
import moment from 'moment'

Moment是個優秀的時間處理套件,可以輸入文字、Unix Timestamp等各種內容,Moment會解析成Date物件。也可以將Date物件解析成人類閱讀的文字,也支援i18n可以處理多國語言。以下直接用一些程式範例來講解他的好用。其他方便的功能可以到官方網站觀看介紹:https://momentjs.com/

moment()                      // OK,建立當前日期
moment("2020-10-01")          // OK
moment("2020-10-01 08:00:00") // OK
moment("1 jan 22")            // OK
moment("1 Jan 2022")          // OK
moment(1659282975000)         // OK,但必須使用毫秒為單位

moment("2020-10-01").fromNow()          // 輸出:2 years ago
moment("2020-10-01").format("Y/MM/DD")  // 輸出:2020/10/01
moment().add(-1, 'days').fromNow()      // 輸出:a day ago

Animate.css

可以提供許多有趣的動畫效果,可以參考官方網站:https://animate.style/,有機會介紹如何使用React寫一個自動控制Animate.css的工具,可以順便理解React的Hook工作原理。

逐漸功成身退的工具

JQuery

JQuery是早期進行網頁開發常常會出現的JavaScript套件,十年前幾乎每個學習網頁的人都會學習JQuery,導致有些人誤以為JQuery跟JavaScript是兩個獨立的東西,但其實JQuery是使用JavaScript寫出來的JavaScript套件。

以前會需要JQuery有許多因素,例如透過JavaScript操控網頁上的內容時,要尋找網頁上的某個元素會很麻煩,JQuery可以提供像是CSS選擇器一樣的方式來尋找物件。現代的JavaScript已經添加了 document.querySelector 提供一樣的功能,而且使用React、Angular、Vue.js之後已經不太需要用這種方式控制物件了,因此JQuery的選擇器功能漸漸不再被使用。

JQuery還有提供許多動畫特效,但在CSS3開始也加入了許多Animate功能,這種「原生」的方式效能更好,也有透過CSS3開發的Animate.css套件可以提供很多動畫特效,因此JQuery的動畫功能也逐漸不再使用。

還有AJAX的部分,JQuery提供了$.ajax功能,比起早期的XMLHttpRequest來說,$.ajax方便很多,但現代JavaScript內建了Fetch功能,第三方套件也有更便利的Axios,因此許多人也不使用$.ajax了。

JQuery還有很多功能,但許多都跟上面一樣,有了許多更好的代替品,甚至是成為瀏覽器或是JavaScript原生功能,因此需要JQuery的需求變小了。如果只為了一點點JQuery功能就載入JQuery也不划算,因為JQuery的檔案太大了,會影響網頁仔入速度,需要JQuery的情況就更少了,就連Bootstrap也在第五代開始不再使用JQuery。這不代表JQuery不好,如果是開發傳統後端直接輸出的MVC網頁,JQuery還是能提供不少幫助,只是在新的開發方式中漸漸不需要JQuery了。

發佈留言