【TypeScript 小教室 04】 * * * ...當代 JavaScript 框架的問世，讓構建高度動態的互動式應用，變得簡單許多。框架是個針對軟體構建，提供完整解決方案的函式庫。這些選項能讓應用程式，開始能預測和同質化。可預測性讓軟體能擴展到巨大的規模時依舊能維護；可預測性和可維護性則對軟體的健康和長壽至關重要... --- developer.mozilla.org * * * 雖然 TypeScript 十分強大，但它畢竟只是一個語言，其編譯目標就是正規的 JavaScript 而已。如果要拿來做網站 (網路應用程式) 也不是不行，只是全部自己手刻會很辛苦。在這種時候，你就需要搭配 JavaScript 前端框架 (frontend framework) 來協助你簡化開發流程，而其打包工具能在開發完成後替你產生可部署的 JS 程式。 2010 年代初，有兩個新套件徹底改變了 JS 前端應用開發的面貌：來自 Google 的 AngularJS (2010) 以及臉書推出的 React (2013)。 AngularJS 以雙向資料綁定 (two way binding) 簡化了對網頁 DOM 物件的控制，你再也不需要撰寫複雜而難以除錯的 DOM 控制語法了。在 2016 年，它改版為更強大的 Angular，而且直接使用 TypeScript 為開發語言。React 則帶來了虛擬 DOM 和元件 (component)：一個元件代表一個 view，其資料會透過虛擬 DOM 來自動更新到 DOM 物件，並且使用 JSX 與法來融合 HTML 與 JavaScript。而受到臉書 Flux 啟發的 Redux (2015) 也很常用來搭配 React，提供 data store 資料管理功能。 Angular 與 React 推動現代前端 JS 框架成形，使之脫離 2010 年代前的傳統 MVC (Model-View-Controler) 架構、走向所謂的 MVVM (Model-View Model-Model) 架構。而在 2018 年，曾在 Google 工作的尤雨溪參考 AngularJS 的語法及 React 的虛擬 DOM，開發出了更小巧靈活的 Vue.js ──這使得 Angular、React 與 Vue.js 成為今日最多人使用的三大前端框架。 在《[TypeScript 邁向專家之路](https://www.flag.com.tw/books/product/F1485)》中，第三篇就完全是關於框架：書中首先展示如何用 TypeScript 和 JSX 語法手刻一個網站，讓你理解 Webpack 打包工具在開發階段與部署階段的運作方式，接著用 Angular、React 及 Vue.js 各示範一次製作相同的網站。你將會看到什麼是 Angular 的倚賴注入 (dependency injection)、什麼是 React Hook、以及 Vue.js 如何在前兩者的設計之間尋找平衡點。透過同一個應用專案的比較，你將發現三個框架擁有相近的基礎概念，但實作上又各有特色與長處。 （想動手玩玩看書中的範例嗎？我們部署了一個以 Vue.js 撰寫的版本，翻譯成中文並拿掉了後端 API：https://vueappdemo.vercel.app/products） 雖說 React 與 Vue.js 並不強制使用 TypeScript，但它們現在都已經能完整支援 TypeScript 語法。而且最棒的是：我們額外提供了一個章節，介紹如何用 TypeScript 與 Svelte/SvelteKit 這個全新超人氣框架來開發同樣一個範例。 [更多內容] 博客來79折優惠中 https://pse.is/3sv8j6 天瓏網路與《完全自學！Go 語言 (Golang) 實戰聖經》合購享75折! https://pse.is/3tfgpn