JavaScript 是一種動態腳本語言,1995 年由 Brendan Eich 在 Netscape 公司首次推出,之後一路成為網頁開發的核心技術之一。網際網路快速發展,JavaScript 的應用範圍也跟著擴大。從最早簡單的互動效果,到現在複雜的單頁應用(Single Page Application, SPA),它負責的事情越來越多。推動這段轉變的一大力量,就是 JavaScript 框架的興起。
早期的JavaScript框架
JavaScript 剛出現的那幾年,開發者大多直接用原生 JavaScript 來做網頁的互動效果。可是需求一多,原生 JavaScript 的限制就慢慢浮現。為了解決這些問題,開發者開始自己做各種工具和函式庫,讓開發輕鬆一點。最早期的 JavaScript 框架之一是 jQuery,2006 年由 John Resig 推出。有了 jQuery,DOM 操作、事件處理和 AJAX 請求都簡單很多,開發者寫程式碼的效率也明顯提高。
jQuery 的成功也帶動了 Prototype、MooTools 等其他 JavaScript 函式庫和框架的誕生。不過這些早期框架多半只針對特定問題,並沒有提供完整的應用開發方案。網頁應用越做越複雜,開發者需要更強的工具來管理應用的狀態、路由,以及進行元件化開發。
現代JavaScript框架的崛起
到了 2010 年代,JavaScript 框架進入新的階段。這時期的框架不再只是工具庫,而是提供一整套應用開發的方案。代表性的有 Angular、React 和 Vue.js,它們很快就在全球流行起來。
Angular
Angular 最早由 Google 在 2010 年推出,當時叫做 AngularJS。AngularJS 是採用 MVC(Model-View-Controller)架構的框架,目的是讓單頁應用更好開發。它引進了雙向資料綁定、依賴注入和指令等概念,讓開發者能更有效率地建構、維護複雜的應用。
不過時間一久,AngularJS 的設計缺陷開始浮現。Google 在 2016 年推出全新的 Angular(也稱為 Angular 2+)來解決這些問題。這是一個以 TypeScript 完全重寫的框架,引入了模組化、元件化和更強的依賴注入機制,效能和可維護性也都明顯提升。
React
React 是 Facebook 在 2013 年推出的 JavaScript 函式庫,用來建構使用者介面。和 Angular 不同,React 只專注在視圖層,採用單向資料流和虛擬 DOM 的概念。虛擬 DOM 能把實際 DOM 操作的次數降到最低,應用的效能因此提高不少。
React 另一個重點是元件化開發。開發者可以把應用拆成一個個獨立的元件,再重複使用、自由組合,程式碼也就更好維護、更容易重用。這些特性讓 React 很快成為前端開發的主流選擇之一。
Vue.js
Vue.js 是尤雨溪(Evan You)在 2014 年創建的漸進式 JavaScript 框架。它的設計靈感來自 Angular 和 React,但更輕量、更有彈性。Vue.js 的核心函式庫專注在視圖層,上手門檻低,所以短時間內就吸引了大量開發者。
Vue.js 另一個優點是漸進式架構。開發者可以依需求挑選要加入的功能,像是路由、狀態管理等。這讓 Vue.js 小型專案用得了,大型應用也應付得來。
JavaScript框架的未來
技術持續進步,JavaScript 框架也一直在變。現在的框架不只用來解決前端問題,也開始往全端開發發展。像 Next.js 和 Nuxt.js,分別是以 React 和 Vue.js 為基礎的全端框架,提供伺服器端渲染(Server-Side Rendering, SSR)和靜態網站生成(Static Site Generation, SSG)等功能,讓開發者更容易做出高效能的應用。
另一方面,WebAssembly(Wasm)逐漸興起,JavaScript 框架也在嘗試和其他語言互通。WebAssembly 是一種二進位指令格式,能在瀏覽器中高效執行,也支援多種程式語言。這代表未來的 JavaScript 框架可能會和 WebAssembly 更緊密地結合,帶來更好的效能和更多功能。
從框架的演進可以看出,技術選擇會直接影響網站日後的維護成本與效能。企業規劃新網站時,與其追逐熱門框架,不如先釐清內容規模與更新頻率,再和熟悉前端技術的高雄網頁設計公司討論合適的架構,網站長期經營起來會比較穩。