[心得] Vanilla 環境下使用MobX 與 Emotion

最近稍微回顧了下過去，想起幾年前在前端上主要使用 jQuery 而到今天漸漸習慣了前端框架的使用，不過 jQuery 已經漸漸離我遠去，當然也時常在想著不知道哪天會有更突破的架構或工具改變現狀。

我重新思考了下框架帶給我的是什麼？在我剛學前端框架時，我以為框架帶給我的是資料的綁定與方便的語法。

也許這些看法還是正確的，不過老實說也有不少工具雖然常配合框架，但也可以使用在原生之中，舉例來說像 Redux、MobX 這類狀態管理的工具都是可以配合原生使用。

現在想想我覺得前端框架不像當初那樣嚇人的方便或有趣了，也漸漸的改變了想法：

使用前端框架還是回歸了一個生態，給了套解決問題的思維、或生態系上豐富的工具和解答。

雖然在當下使用前端框架已幾乎是個必然，但偶而跳脫一下我認為還是挺不錯的。所以還是回歸主題吧，我想介紹兩個框架無關的工具 MobX 、Emotion 。

Emotion

Emotion 上我主要用到 @emotion/css ，它的使用方式基本上與 Sass 相同， 並且只要使用提供的 css 函數即可產生一個 hash 過的 className，像是這樣的使用：

import { css } from "@emotion/css";
document.body.innerHTML = `
  <button class="btn">Button</button>
`;
const button = document.querySelector(".btn");
const cssBaseBtn = css`
  cursor: pointer;
  padding: 10px;
  min-width: 140px;
  background-color: rgba(25, 118, 210, 1);
  color: #ffffff;
  font-weight: bold;
  font-size: 16px;
  border: none;
  border-radius: 4px;
&:hover {
    background-color: rgba(25, 118, 210, 0.8);
  }
&:active {
    background-color: rgba(25, 118, 210, 0.5);
  }
`;
button.classList.add(cssBaseBtn);

這基本上與寫 Scss 沒有什麼不同，只是這些都在 js 上完成了。而 Emotion 的好處不只如此，因為是 CSS-in-JS ，使用者可以使用更多 js 的工具來組織你的元件。

在這邊就再安裝個套件 color ，並且配合 Emotion Composition 的使用：

import { css } from "@emotion/css";
import Color from "color";
document.body.innerHTML = `
  <button class="btn">Button</button>
`;
const button = document.querySelector(".btn");
const backgroundColor = "#1976d2";
const primaryColor = new Color(backgroundColor);
const cssPrimaryColor = css`
  background-color: ${primaryColor.toString()};
&:hover {
    background-color: ${primaryColor.alpha(0.8).toString()};
  }
&:active {
    background-color: ${primaryColor.alpha(0.5).toString()};
  }
`;
const cssBaseBtn = css`
  cursor: pointer;
  padding: 10px;
  min-width: 140px;
  color: #ffffff;
  font-weight: bold;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  ${cssPrimaryColor};
`;
button.classList.add(cssBaseBtn);

可以看到我把 background-color的部分提取出來，因為這個樣式其實是同個顏色不同的透明度，那麼使用 color 這個套件就能夠快速的建立這個樣式的算法，這樣的話只要提供不同的色碼，將可以產生一組不同風格的 Button。

Emotion 我在 [筆記] 比較 CSS Modules 與 Emotion 中正好有比較下 Emotion 與 CSS Modules 的使用差異，可參考看看。

MobX

關於 MobX 部分則是狀態的部分了，雖然 MobX 的使用有他自己的方式，但簡單的使用上應該能很快速地上手。以我個人常使用的 React 來說，基本上只要上手 useState 與 useEffect 大多簡易的功能都能快速的完成，而這有部分也歸功於 React 使用 JSX 的語法幫我們簡化了許多資料綁定的事。

讓我修改部分內容看看：

...
import { observable, action, reaction } from "mobx";
const state = observable(
  {
    count: 0,
    addCount() {
      this.count++;
    }
  },
  {
    count: observable,
    addCount: action
  }
);
document.body.innerHTML = `
  
  <div >
    <label>count : <span class="count">${state.count}</span></label>
  </div>
  <p/>
  <button class="btn">Button</button>
`;
...
button.addEventListener("click", () => {
  state.addCount();
});
const countElement = document.querySelector(".count");
reaction(() => state.count, (nextCount) => {
  countElement.textContent = nextCount
})

在 Mobx 可以使用 observable 建立狀態，並且可以說明內部成員的性質，像是可以選擇成員只在 ref 更動的時候更新，或是說明成員是計算屬性，或說明是個 action 的方法。

而在下方我們把 addCount 的事件綁到按鈕上後，把要跟著 count 更新的元素抓出來，配合 reaction 在 count 更動的時候，修改元素的內容。

用這樣的方式，就建立了一個簡單的狀態與綁定。

總結以上的 Code 可以參考：

https://codesandbox.io/embed/mobx-with-emotion-tcquu?fontsize=14&hidenavigation=1&theme=dark

總結

今天的這篇文章只是記錄個簡單想法，我認為在配合 MobX 與 Emotion，可以在了解相對簡單的環境下，用些稍微新的概念打些東西。

我個人想說的是在這個當下，如果有認識的人想玩玩看前端，我也許會建議他可以嘗試些輕量的工具，打些玩具看看，我想若只從 js 的角度切入，應該也是不錯的（當然如果是求職的需求的話，不免還是會先從 jQuery 或框架著手）。