【Day 27】爽爽放連假的期間，我收到了資遣通知~

爽爽放連假的期間，我收到了資遣通知~

出社會後，一切都很順利嗎？
不，其實並沒有。

那一年 228 連假，正當我放假放得正爽，電話突然響起。

「Ray，下個月我們團隊被裁員了，有空來公司整理一下吧。」
主管的語氣冷靜到不可思議，像是在告知一件例行公事。

電話掛斷後，我忍不住苦笑 ——
原來所謂的「資遣通知」，其實就是一種免費的職涯轉職提醒。

同事們陸續收到通知，在群組裡瘋狂咒罵，而我只淡淡回了一句：
「對啊，真麻煩，現在要開始準備履歷跟面試了 QQ」

在被資遣後，我就把心思全放在前端技術上，先把 JavaScript 課程上完，還反覆練習了三、四次，才硬著頭皮去碰 Vue.js。

結果第一感想只有一個：
「哇靠，怎麼到處都是新名詞！」
什麼元件化、單向資料流、生命週期 ……
每一個聽起來都像是 RPG 技能樹，結果我又回到新手村了。

要說它像魔法嗎？
當時我真的這麼覺得 —— 只要寫上短短幾行程式碼，就能產生出炫酷的效果。

就像下面這個簡單的 Vue 元件：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">點我改變訊息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    updateMessage() {
      this.message = '你點了我！';
    }
  }
};
</script>

如果是用純 JavaScript 來實現這個功能，可能需要寫上好幾十行程式碼，還要處理事件綁定、DOM 操作等，但使用 Vue.js 就可以輕鬆地達成這個效果。

前後我大概準備了半年左右，最終用 Vue.js 製作出了一個「RagnarokShop」的電商練習網站

通過了當時課程老師給予的 Code Review 後，我才開始準備投遞前端工程師的工作。

那時候我投遞的職位是 「Junior Frontend Engineer」 ，畢竟沒有實際的前端工作經驗，只能比較認命地先從 Junior 開始。

在面試過程中，有幾個題目讓我印象非常深刻：

面試官問了我幾個問題：
「JavaScript 是直譯語言還是編譯語言？」還有「什麼是 Framework？什麼是 Library？」

老實說，這些問題我當時並不清楚，與其硬掰答案，不如直接誠實回應：

「ㄜ…這個我不太確定，因為我沒有特別去了解過。」

「難道 PHP 沒有用 Framework 嗎？」你可能會這樣問我

的確，我在寫 PHP 時，大部分時間也都是用 Framework。
但那時候的我，根本沒想過什麼 Framework 跟 Library 的差別，反正照著官方文件抄一抄就能跑就好。

至於差異？呵呵，當時的我只想著：
「能跑就好啦，管它叫什麼！」

在整個面試過程中，其實被問了不少問題，但唯獨這幾題我沒能答出來，不過面試官在最後還特地幫我解釋了一遍，這也讓我留下了非常深刻的印象。

直譯語言與編譯語言

在程式語言的世界中，有區分為兩種主要類型，分別是直譯語言（Interpreted Language）與編譯語言（Compiled Language）。

那麼這兩個分類有什麼差呢？這邊讓我們來認識一下彼此的差異：

• 直譯語言(Interpreted Language)： 程式碼不需要經過編譯，而是透過一個直譯器（Interpreter）針對每一行程式碼進行解釋並執行，以前面章節所介紹的 JavaScript 就是屬於直譯語言的範疇。
• 編譯語言(Compiled Language)： 程式碼一率都是需要經過編譯，先轉換成機器碼（Machine Code），再去執行。所謂的機器碼就是電腦能夠直接理解的二進位碼，像是 C 語言就是屬於編譯語言的範疇。

這之間，我們也可以比較一下兩者之間的執行過程

直譯語言流程：

你撰寫的程式碼（Source Code） -> 直譯器（Interpreter） -> 即時執行（Runtime）

編譯語言流程：

你撰寫的程式碼（Source Code） -> 編譯器（Compiler） -> 機器碼（Machine Code） -> 執行（Execution）

從這執行流程我們可以看彼此之間的優缺點：

• 直譯語言：
  • 優點：開發速度快，因為不需要編譯過程，可以即時執行程式碼。
  • 缺點：執行速度較慢，因為每次執行都需要解釋程式碼。
• 編譯語言：
  • 優點：執行速度較快，因為程式碼已經被轉換成機器碼。
  • 缺點：開發速度較慢，因為需要經過編譯過程才能執行程式碼。

所以前面章節所介紹到的 JavaScript、PHP 都是屬於直譯語言的範疇，而 C 語言則是屬於編譯語言的範疇。

為了解決這些問題，現在有些程式語言已經不再是單純的直譯語言或編譯語言，而是結合了兩者的優點。

以 JavaScript 為例，V8 引擎會先將程式碼編譯成 中間碼（Bytecode），再透過 JIT（Just-In-Time）編譯器把中間碼轉換成機器碼，讓程式在執行時能大幅提升速度。

這種模式被稱為 「混合語言（Hybrid Language）」。

這些編譯方式又可以細分為：

• AOT（Ahead-Of-Time）編譯：預先將直譯語言編譯成機器碼。
• JIT（Just-In-Time）編譯：主要將直譯語言以及編譯語言兩者的優勢結合再一起，這樣就可以在執行時提高速度。

所以，不管你選擇哪一種程式語言，最重要的是先了解它的特性與優缺點，
只有這樣，才能在開發過程中做出更好的判斷與選擇。

每種語言都有它的適用場景與優勢，而選擇合適的語言，往往能讓開發過程更加順利哩～

什麼是 Framework 與 Library？

在軟體開發的世界裡，Framework（框架） 和 Library（函式庫） 是兩個經常被提到的概念。

記得在我早期的一份工作中，就有前輩跟我說過一句話：

「如果你程式碼要學得好，我會建議你少用 Framework，多用 Library。」

當下的我其實並不太能理解這句話的意思，直到後來在工作與學習的過程中，才慢慢體會出 Framework 和 Library 之間的差異。

那麼，什麼是 Framework 與 Library 呢？我們來一一解釋：

• Library（函式庫）：是一組預先寫好的程式碼集合，提供特定功能或服務，讓開發者可以直接調用這些功能，而不需要從頭開始撰寫。
• Framework（框架）：是一個更為全面的解決方案，提供了一個結構化的開發環境，並規範了應用程式的整體架構與流程。

你可以把 Library 想像成一個工具箱，裡面有各種工具（函式）幫助你完成特定任務，它就像是提供了釘子、錘子這些工具，讓你自己決定怎麼用，但不會干涉你的工作流程。

相反地，Framework 比較像是一個完整的工作坊，裡面有一套固定的流程和規範，你必須按照它的規則來做事，Framework 不只提供工具，還會告訴你該怎麼做，並且替你建立好整體結構。

這兩個有它的好壞處：

• Library 的優點：
  • 靈活性高，可以自由選擇使用哪些函式（工具）。
  • 不會干涉你的工作流程，可以按照自己的方式來開發。
• Library 的缺點：
  • 需要自行管理程式碼的結構與流程，可能會增加開發的複雜度。
• Framework 的優點：
  • 提供了一個清晰的結構與規範，可以提高開發效率。
  • 內建許多功能，減少重複造輪子的機會。
• Framework 的缺點：
  • 學習曲線較陡，需要花時間熟悉框架的規範與用法。
  • 可能會限制開發者的自由度，必須遵循框架的設計理念。

「那麼我該選擇 Framework 還是 Library 呢？」這是許多初學者常常會問的問題。

其實兩者都行，重點還是看 專案需求跟個人習慣。

如果你今天要做的是一個 MVP 專案，或只是想快速驗證一個想法，那麼使用 Framework 會比較適合，因為它能幫你更快完成原型。

但如果你要建立的是一個大型系統，並且需要高度的可維護性與擴展性，那麼選擇 Library 可能更合適，因為它能提供你更大的靈活性來設計架構。

Note
MVP 是 Minimum Viable Product 的縮寫，意思是 「最小可行產品」 ，指的是一個具有最基本功能的產品，可以用來驗證市場需求與用戶反饋。

當然，這並不是說用 Framework 就學不好程式碼，或是用 Library 就一定比較好，最重要的還是先搞懂它們的 特性與優缺點。

像現在前端圈的 React、Vue、Angular，本質上都還是建立在 JavaScript 上的，所以與其糾結到底該選哪一個，不如先把 JavaScript 基礎練好。

畢竟 —— JS 沒學好，換幾個框架都只是換湯不換藥 。

結語

這是我第一次被資遣的經驗，雖然當下感到挫折，但也讓我有機會重新審視自己的職涯方向。

所以，其實反而要感謝公司裁員吧？！

同步更新

本文將同步更新至以下網站：

• 是 Ray 不是 Array
• Code Review 我的青春：從『嗶』聲開啟我的軟體工程師之路（佛心分享-IT 人自學之術）
• Threads - 時常會聊軟實力
• Facebook - 搞怪迷因分享
• Instagram - 搞怪迷因分享 + 軟實力
• Portaly - 入口主頁