為什麼要使用前端框架? 選擇 React 的優點:前端技能樹的演進史

當你透過頁面的手指點擊滑鼠,進到這篇文章的這一瞬間,其實你已經完成了幾十年來網頁開發整個歷史洪流精鍊下,始終不變的終極目標 -「資訊傳播」。從每個滾動、點擊、拖曳的動作,到視覺上生動的圖表陳列、炫砲的動畫特效、優雅的 RWD 適性版型等,都是前端工程師所專注的程式美學。

是的,其實不太喜歡將前端工程師定調得太工程,畢竟網頁前端工程師的責任,就是要同時掌握頁面程式效能與頁面美感實現,甚至有時還隱含著理解使用者體驗的成分在其中。

從外部看來,前端工程師要能夠理解並優化客戶端在頁面操作上的使用體驗,並且要能掌握對畫面與資料流之間的拆解與聚合能力;而從內部看來,網頁前端工程師除了需要對頁面的流程、動態、資料狀態進行掌握外,更需要盡其所能地精通自由又奔放(你懂的)、任性又強大的 JavaScript,讓資料與畫面能夠美美地呈現在你那閃耀雙眸!

沒錯!這篇文章會點出過去到現在,前端 JavaScript 開發上的一些進程脈絡,並帶領各位理解現今網頁開發中很常聽到的「框架」概念;以及我們該如何看待各式前端框架的蓬勃發展?框架真有如聖經般那麼重要嗎?

成為前端工程師,3 分鐘小測驗,找到你的學習起點

有無框架,有什麼差?

我們可以用生活化的方式,來簡單瞭解框架的概念。

  • 高速公路這個框架,讓你省去理解各種大街小巷的舟車勞頓,而從台北順利地開車到高雄;
  • 汽車這個框架,讓你可以讓你不懂機械原理,卻能透過你熟悉的操作方法,載著你安全地快速移動!
  • 街上紅綠燈這個框架,讓妳可以減少交通上你不讓我、我不讓你的困擾,安安全全地從甲地到乙地。

在「生活中的框架」的輔助之下,我們可以不需要煩惱、處理生活上的各種麻煩,並且夠過理解使用上述這些框架的方法與守則,達成生活上的目標

傳統前端的麻煩點

我們可以將上述這些「麻煩點」,投射到傳統的前端開發上。

若我們需要在頁面上透過原生的 JavaScript 來繪製一個簡單的清單到畫面上時,程式碼可能會是如下:

<p>CODE:https://gist.github.com/wjyflh/7cc9c6d7e2e6a1612c1b18e89bd499cf.js</p>

從上述的程式碼可以看到,我們會先撰寫一定的程式架構(Design Pattern),並且做許多節點的宣告與定義。同時,還需要自行在清單的 forEach 邏輯中去綁定事件(addEventListener),也需要將資料與畫面的渲染做綁定,最終繪製出清單。

上述的程式碼,可以看成是一個簡易的傳統框架寫法。這樣的框架概念是不嚴謹、強烈客製化的。所以,可能會因為工程師或公司團隊的不同,而撰寫出不同的框架架構。又因為是原生的 JavaScript 撰寫,也可能會有許多效能、瀏覽器支援度等等的問題發生……

框架的出現

如果我們將上述的需求改用框架來實現,以 React 框架為例,程式碼可能會是如下:

<p>CODE:https://gist.github.com/wjyflh/00634b8d724233d5a841f051597a9a8e.js</p>

你是否已經清楚地看到框架的簡潔魅力?!從程式碼中你可以很清楚的看到資料的初始化,到後續的清單渲染脈絡。

其中「資料」與「畫面」可以透過框架的寫法清楚地被切割開來,並且透過框架的生命週期來自動帶動畫面的更新渲染。我們只需要在適當的時機點去對資料進行操作(useEffect),就能獲得對應的清單結果畫面!

因為框架有一定的撰寫手法,所以易讀性與維護性就能獲得保障!

正是因為框架有這樣的優勢,前端世界的強者們紛紛提出許多具有制度化的「框架」來加速開發,並針對許多開發上的困難點進行整合。很多大型公司也紛紛將這些框架開源出來,讓廣大的前端鄉民們共同維護與使用;而好的框架就會被慢慢推崇、傳播,成了現今大家常聽到的 React、Vue、Angular 等前端框架的崛起。

框架是什麼?

上面提到的這些「麻煩」,其實就是框架這個概念所關注的事情:

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

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

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

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

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

使用框架的好處

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

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

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

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

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

開源世界中,框架演進與開發者分享的正向循環

而站在一個網際網路的角度上,其實框架的出現也提醒了我們一些外在現象的變化:

  1. 科技始終來自於人性,有了需求才會促使科技進步。現今人們對網路平台服務的依賴性更高,框架的概念才能因此會被推崇、被看重。
  2. 單看前端三大框架 React、Vue、Angular 的演進脈絡,他們都是建立在開源的社群中不斷被推廣與優化。這體現了開源精神,更是網際網路「分享」概念的延伸,也因為分享而讓前端技術不斷強大。
  3. 框架可能會引用其他套件進入他的生態圈。只要框架的生態完整、活躍,各界開發者也會因此願意為他們所開發的套件,提供對應的框架支援。而前端開發者們也會因為框架而受惠,能達成的技術需求更無可限量,產生一個在開發框架化與開發者間的正向循環。
  4. 前端框架也因為主流框架的帶動,讓更多新穎的框架被創造出來(如:Svelte)。框架因而百花齊放,框架與框架之間也會針對彼此的優點,進行繼承或優化;或針對痛點,賦予創新的開發思維。前端在框架的選擇上更多元而不受限,並能因應不同的需求情境、開發環境、開發規模,來選擇適當的框架,解決前端開發上的困擾。

前端框架是什麼?了解Javascript框架的功能與優點

怎麼學習框架?為什麼選 React?

學習路徑:從熟悉 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 框架,列出 10 個優點:

  1. 每個組件都是以 Function 為基礎來建立,跟 JavaScript 的語彙相近,有親切感:

<p>CODE:https://gist.github.com/wjyflh/9ae1ff7513b46987e573bd3466550418.js</p>

  1. 如果你不喜歡 Functional 的概念,沒關係!你可以改回使用 Class component 來開發,有一定的撰寫自由度。
  2. React Hooks 的出現,讓組建的狀態控制、Lifecycle 的控制更新更純粹、更簡單 。 整體開發的感覺沒有太多的花式規則,開發體驗上是一種自由又不失專注、乾淨利落的感覺。

<p>CODE:https://gist.github.com/wjyflh/f684c298b1ca6b2a569d508e261220fb.js</p>

  1. 除了官方提供的幾個 Hooks 功能外,React 還可以讓你開發客製化的 Custom Hooks,可以將組件中較為複雜的、重複性的邏輯做 Custom Hooks 的封裝。而當需要使用到的組件,就可以直接引入使用。因此,在組件的生命週期管理上會更有系統性,對商業邏輯管理的可控性更高!
  2. styled-components 可以快速在 React 中引用,讓不同的 HTML 層級可以被命名與復用。這能使 CSS 的優先級問題獲得解決, HTML 結構也更為乾淨!而且,styled-components 的標籤也可以與組件中的變數邏輯做綁定,進而讓樣式可以被連動與切換唷!

<p>CODE:https://gist.github.com/wjyflh/ca4baca65bd250cd521de59b69b3b5b2.js</p>

  1. 相較其他框架,React 在組件中的 HTML/JS/CSS 的區塊切割感相對不強烈,所有的東西都可以被歸納為 JS 的 變數或是函式。所以在閱讀 React 組件的程式時,很像在閱讀原生的 JS 程式,由上而下地,脈絡很清楚。當然囉!這也比較偏向個人的感官問題,提供給各位參考。
  2. 站在 SEO 角度,有衍生框架 Next.js 來支撐,降低過去要 SPA 才能實現的後端選染頁面(SSR)的複雜度;並且,也框架化,更能與原本前端渲染頁面(CSR)的機制有好的資料串連能力。
  3. React 相關的套件資源非常大,各種前端疑難雜症基本上都有神人寫出套件讓 React 開發者使用。例如 Redux 對於 React 有很完整的支援,是 React 在跨組件溝通上一個很好的實現工具。當然,React 還有很多狀態管理工具可以選用,任君挑選。
  4. 近期 React 文件也做了 Beta 版的更新,對於 React 框架社群的推廣或是開發者的使用體驗上,打了一個很強的 We do care 強心針 。
  5. React 持續維護與更新,並且每次更新都有一定的向下支援度,讓舊專案的維護不會有太大的隱憂。

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

結語

「框架」其實不是什麼新語彙,早在程式語言出來的時候就有這樣的概念。

現今平台服務的需求,越來越龐大、邏輯複雜、與需要架構模組化。套件已不足以支撐開發需求,而且也需要更高層次的概念,來整合程式碼與各種套件。同時,也提出撰寫規範的需求,使得前端開發在「框架的使用」上,變成一個既定的技能基礎與技能貼標。

身為前端的我們,也需要跳脫過往的一頁 JS 寫到底的線性思維,躍升到多維的框架概念上來解決世間更多(險)元(惡)的前端需求。

科技始終來自於人性,沒有需求背景的改變,就不會有現今框架存在的意義。而我們,也需要透過框架,來站上巨人的肩膀,去簡化問題、討論、解決更深一層的問題!

前端工程師要會什麼?工作上會遇到什麼挑戰