為什麼要使用框架開發網站

前端框架有很多種選擇（為了簡稱我們都統稱前端框架），但是原生JS可以做到的事情，為什麼我們要選擇使用框架呢？以下將會大概介紹一下

舉例

以Twitter來說，你或是你的朋友可以tweet文章並且做一些互動，例如：回覆, 喜歡……執行很多動作
如果你選擇使用Vanillajs來開發這個平台，會面臨到很多問題，包含開發時間成本與可維護性
儘管是一個簡單的小程式，你需要考量到如何設計狀態管理, 資料綁定, 事件處理……
能夠設計出來很厲害，但是時間就是金錢，以現實考量來說，他就是需要花費你更多的時間開發
更動DOM的內容，你可能會用到：createElement, querySelector, getElementById…

如果使用框架開發，如React，可以專注在設計UI互動邏輯上。因為畫面的互動時常與資料的更動息息相關。
透過React設計元件，可以開發出可維護性與可擴張性/彈性的頁面。
並且透過Virtual-DOM來更新UI，我認為你也可以稱他為UI-DOM或是元件DOM
因為它不像實體DOM一樣是元素的Tree，而是以元件/UI為主體生成的Tree

vanilla.js為例

Vanilla是香草，也就是原味的意思，原味的JavaScript，沒有使用任何外部的library開發。
拿一個簡單的input表單來說，如果我們以vanilla.js來開發，會怎麼設計呢：

<div id="app">
  <input type="text">
  <p>You entered: <span>An incorrect value!</span></p>
</div>

#app {
  text-align: center;
}

p {
  font-weight: bold;
}

我們會需要自己撰寫selector來選取特定的DOM更動內部的相關屬性

var input = document.querySelector('input');
var output = document.querySelector('p span');

function updateOutput(event) {
  var val = event.target.value;
  if (val.trim() === '') {
    output.textContent = 'An incorrect value!'
    output.style.color = 'red';
    return;
  }
  output.textContent = val;
  output.style.color = 'black';
}

input.addEventListener('input', updateOutput);

React.js為例

基本上HTML與CSS的部分跟vanilla.js差不多，不過需要把HTML改成JSX的樣子

export default function App() {
  return (
    <div id="app">
      <input
        type="text"
      />
      <p>
        You entered:
      </p>
    </div>
  );
}

再來要加入的東西就是輸入與顯示，第一個想到的就是使用setState
並寫加入事件處理：

export default function App() {
  const [content, setContent] = useState("");
  return (
    <div id="app">
      <input
        type="text"
        value={content}
        onChange={(event) => setContent(event.target.value)}
      />
      <p>
        You entered:
        <span>{content || "An incorrect value!"}</span>
      </p>
    </div>
  );
}

你會發現使用React不用額外寫你要選取的DOM與EventListener
因為你在開發JSX的同時，已經在做這件事情了，程式邏輯也一目了然

Vue.js為例

Vue具備template與資料雙向綁定特性，輕量簡單易使用
這也是為什麼被大家稱為beginner friendly

要做到同樣的功能，就如同剛剛所講的手牽手雙向綁定
template與data綁在一起即可

<template>
  <div id="root" class="box">
    <input class="input is-medium" type="text" id="input" v-model="message" />
    <p class="input-value">
      input: <span class="highlight">{{ message }}</span>
    </p>
  </div>
</template>

<script>
export default {
  name: "App",
  el: "#root",
  data() {
    return {
      message: "type here",
    };
  },
};
</script>

這樣就完成了

Angular為例

Angular是一個強大的前端開發框架，你要什麼都幫你準備好了，整合度非常好。
它不像其他前端框架，你想要做什麼東西就需要額外安裝其他相依套件。

to be continue…

React和Angular比較

事實上我不太喜歡這個問題，因為這兩個的解決方案是不一樣的
真的要比較其實沒有什麼太大的意義，本質應該回到需要解決什麼問題才對
不過Angular要追溯由來的話，可以從以前的Angular.js開始說起，在當時是一個被大量討論的框架
我們可以從圖片看出當時Angularjs的使用者其實蠻多的

如果要問的是為什麼大家普遍喜歡使用React而不是Angular
主要是因為React是library而不是framework，使它開發上比較彈性
另外一點是資料綁定，React是單向資料綁定，這點和Angular與Vue的綁定方式不同，單向綁定可以更靈活的操作資料
Angular也有自己的syntax，所以學習門檻上也比較高一些，
不過Angular如上面提到的，它具有完整的功能，包含UI與工具。
在Angular，你可以用RxJS來操作資料流，React可以選擇如Redux的方式進行狀態管理

參考資料

ANGULAR VS REACT: A COMPARISON OF BOTH FRAMEWORKS

Comment