Loading...

前端框架(framework)是什麼?

框架,會在框架的程式底層,去優化、封裝處理網頁開發上常碰到的的一些底層問題。也在這基礎上,提出一系列建構網頁的程式撰寫規範與方法,同時讓在使用框架的程式方法時,兼顧擴展性與維護性。

你可能會想說,那這跟套件 package 有什麼差別?沒錯!其實他們都是用原生的 JS 所構建起來,但是框架要解決的「問題格局」比套件大得多,它是一個更系統性、統包地解決前端程式問題上的一個概念。這就是框架最大的貢獻之處!

身為前端,如果有稍微看過各大框架的 Getting Started 文件(例:最新的 React 文件 Beta 版釋出),一定會看到框架會針對許多前端開發上的困難點,提出一套它們各自規定的撰寫規則。

只要照著這些規則撰寫頁面組件,前端開發者們便可以避開各種底層的支援度、或是效能問題,開發時間也能縮短許多(如下圖圖 1 所示)。

反之,如果你到 lodash 套件的官網上,你不會看到「如何寫出一個好網頁架構」的文件。因爲它的層級不到框架,只會關注在資料處理的局部面向上給予方法。

  1. 單看前端三大框架 React、Vue、Angular 的演進脈絡,他們都是建立在開源的社群中不斷被推廣與優化。這體現了開源精神,更是網際網路「分享」概念的延伸,也因為分享而讓前端技術不斷強大。
  2. 框架可能會引用其他套件進入他的生態圈。只要框架的生態完整、活躍,各界開發者也會因此願意為他們所開發的套件,提供對應的框架支援。而前端開發者們也會因為框架而受惠,能達成的技術需求更無可限量,產生一個在開發框架化與開發者間的正向循環。
  3. 前端框架也因為主流框架的帶動,讓更多新穎的框架被創造出來(如:Svelte)。框架因而百花齊放,框架與框架之間也會針對彼此的優點,進行繼承或優化

掌握框架,成為前端工程師,申請免費 5 天試讀

使用前端框架的好處

框架提升開發品質和拓展性

前端工程師使用了框架,會感受到框架提升所了開發品質。這個提升感,可從以下幾件開發體感來探討:

  1. 許多普遍的前端底層程式問題,其實開發中不希望遇到。框架的出現,讓我們不再煩惱。能減少犯錯機率,提升程式碼可靠性;也能在前端程式的撰寫,更關注與聚焦在更重要的、如建立商業邏輯上。
  2. 框架通常會有組件化的概念。這讓 UI 與程式的商業邏輯可以拆分、簡化,甚至被共用。因此,網頁的擴展性也能提升
  3. 畫面組件的概念,通常伴隨著組件的生命週期(Lifecycle)。這些生命週期提醒我們,在介面控制上,需要理解其其中的階段,並在適當的階段對組件做適當的操作(如下圖 2 所示)。就像你需要在適當的人生階段做對的事情一樣,你不會在你一歲的時候出去賺錢養家,而是好好長大。

框架是規範:有共同語彙,就好維護

  1. 以前我們是先有資料,才會實作畫面。而框架則是透過組件的概念,將資料與介面抽離開來,我們可以在組件中同時定義組件的 Template (HTML) 與處理資料的變化,更容易控制介面的顯示。
  2. 前端框架像是工程師「撰寫程式」上公認的「語彙」或「方法」,就像是一個規範。當工程師都照著這樣的規範來寫程式,便能夠在規範上做更高層次的程式優化。因為大家的語彙相同,就能避免在過去工程師需要重新理解客製化框架的困擾,因而提升維護性
  3. 框架讓更大的平台服務架構(SPA)能輕易地實現。通常框架會有完整的路由管理機制,讓各種頁面可以更輕易地被帶動、溝通。

學習路徑:從熟悉 JS 語言到建立框架

以現在職場需求、與市場許多以平台為基礎的架構來說,不管是 Junior、Mid,還是 Senior 前端工程師,都需要對框架有一定的掌握度。

網路上,有許多的框架教學;而主流的三大框架,更有詳細的官方資源與社群,讓學習者能自學。

如果你是處於使用原生 JS 或是 jQuery 來開發單一頁面活動頁的前端開發者,或許可以先考慮對程式架構進行更深入的琢磨,多去了解 JavaScript 撰寫上的一些 Design Patterns。畢竟框架本身也是原生 JavaScript 建立起來的,了解它的運作原理與架構,就能夠輕易地在框架中撰寫程式。

當經驗慢慢充足後,你可能會開始學習各種框架。而不同的框架都會有「共同的技術點」,只要能掌握,就能夠「更有框架地學習框架」。同時,你也更能對不同框架進行優缺點評判,並能針對專案規模來選用不同框架。

以下提供幾個框架的技術節點做為範例:

  • 路由機制(Router)
  • 如何建立組件(Component)
  • 組件的生命週期(Lifecycle)
  • 組件狀態的建立(State)
  • 事件綁定的方法(Event Binding)
  • 跨組件的狀態溝通(Emit, Redux, RxJS, MobX 等)
  • 直接操作 DOM 的方法(Refs)

學習建議:深耕一個框架

框架的選用有很多種,但不外乎 Angular, React, Vue 三大框架。它們歷經了一段時間的考驗,並且有一定的社群討論度,並且有完整的官方文件資源供你挖掘。

然而,不管選擇哪一種框架都好!重點是要深耕。這並不是因應職場的需求建議,而是深耕能讓你夠體會前端開發上的各種匠心磨練,每個介面的狀態控制、生命週期、資料流,都是需要慢慢內化的。

往後,再遇到任何需求時,都能快速想到在框架上要如何架構與實踐,即表示你對該框架有一定的掌握程度囉!

React 教學,系統性學習 React 的步驟