為什麼要有前端框架?

在前端框架蓬勃發展的這幾年以來，好像愈來越少聽到有人在討論這個問題，但是在開始我們還是不免俗地來說一下，還是那句老話現在網頁的應用程式越來越大也越來複雜越來越多互動，為了解決複雜應用產生的問題於是誕生了前端框架。至於問題是什麼呢?舉個簡單例子，假設有個功能是點擊下方按鈕上方數字就+1。

在過去使用Js或是jquery的時候，寫法可能會是這樣

<h2 id="val">0</h2>
<button id="btn">+1</button>

const btnEl = document.getElementById('btn');
const valEl = document.getElementById('val');
btnEl.addEventListener('click', () => {
  const val = parseInt(valEl.innerText);
  valEl.innerText = val + 1;
})

我們必須要拿到h2的值再進行計算，再將運算好的值塞回h2，要處理計算的值和更新畫面兩件事情，這種簡單的例子上可能看不出來在寫程式的時候會有什麼困擾，如果再更複雜的應用可能較比較能顯現得出來，但我們大概可以意會到的就是同步資料跟畫面很麻煩。

現今的前端框架提出了一個不同的概念，讓我們可以專注在資料的處理，畫面就交由框架幫我們自動更新來解決這個問題。

React第一個範例

相同的範例我們用React的function component可以這樣寫，減少了直接對話面的操作，讓我們專心在邏輯上。

import { useState } from "react";

function App(props) { // react傳進function component的值稱為props
  const [val, setVal] = useState(0); // react的狀態宣告
  const pulsOne = () => { // 自定義的程式內容
    setVal(val + 1);
  }
	// 呈現的畫面放在return
  return (
    <>
      <h2 id="val">{val}</h2>
      <button id="btn" onClick={pulsOne}>+1</button>
    </>
  )
}

export default App

個人使用經驗

我曾經使用過前端三本柱的Angular和React開發專案，後來公司轉換技術為React之後，就只專注在React上了。個人覺得在寫Angular的時候有點不像在寫Js，會有一些模板語法一開始不太上手，也可能是第一個接觸的前端框架還不太熟悉整個觀念，後來轉換為React，一開始用class component倒是也還熟悉，但有了hooks之後整個寫起來就是很順暢，component彼此比較水平，比較不會像class那時有HOC這類的嵌套。

還有另個議題也是我剛開始接觸前端框架不太習慣的，就是不管Angular或是React都會把綁定事件寫在HTML上不像過去都會用addEventListener，讓HTML能更簡潔和程式分開，尤其React的HTML和Js還是寫在一起的，這點可能很多能不太習慣(至少我一開始的時候)，後來對於React越深入了解也意會到這是關注點的不同，現在是以整個component視為一個關注點，方便component的重用隔離其他component，不像之前HTML、CSS、Js全分開的觀念。

另外，有次跟一位寫韌體相關的朋友聊到前端開發，我跟他說前端框架解決了過去更新畫面很麻煩的問題，他回我說”那這樣是優化開發者體驗而已嗎?對於使用者而言似乎體驗似乎沒有改變”。這個問題讓我思考了很久，這麼說似乎也對，但是現在想想前端框架讓我們產出更好維護更容易擴展的程式，更不容易出錯或者說更容易發現問題，讓使用者可以用到更好的產品，這或許也是對於只用者的體驗改善吧。另外，在複雜互動的應用上virtual dom的使用確實會有優化體驗的效果。

不知道大家對於前端框架有什麼想法，歡迎大家留言分享。