2024 WebConf 心得

12/27、12/28 這兩天是 2024 WebConf Taiwan，稍微記錄一下這兩天的心得與聽到的關鍵字們。

共筆

共筆

以下「重點」指的是：對我來說值得記錄下來的重點

12/27 (五)

有限狀態機與 RxJS - 奶綠茶

• PPT

重點

• 有限狀態機 (以紅綠燈為例)
  • 同一個時間點，只會存在一種狀態
  • 有限數量的狀態（State）：紅、黃、綠
  • 有限數量的事件（event）：一定時間內轉到下個狀態
  • 一個 initial state
  • 一個轉換函式 transition function，傳入當下的狀態及事件，會返回下一個狀態囚
  • n 個 final state
• 簡單的程式碼範例

  const createMachine = (machine) => {
      return {
          state: machine.initial,
          transition(state, action) {
              try {
                  return machine.states[state].on[action];
              } catch (err) {
                  console.error(err);
                  return undefined;
              }
          },
          send(action) {
              const nextState = this.transition(this.state, action);
              if (nextState) {
                  this.state = nextState;
              }
          },
      };
  };

  const service = createMachine(machine);
  
  const timerBtn = document.getElementById('timer-btn');
  const display = document.getElementById('display');
  
  const updateState = () => {
      display.style.backgroundColor = service.state;
  };
  updateState();
  
  timerBtn.addEventListener('click', () => {
      const nextState = service.transition(service.state, 'TIMER');
      console.log('nextState', nextState);
      service.send('TIMER');
      updateState();
  });

• 規格可能會改，例如：變成七彩霓虹燈
• 為了避免重複造輪子 + 統一規格，使用 xstate 這個 library
• 上面的程式碼就可以改成

  import { createMachine } from 'xstate';
  export const machine = createMachine({
    id: 'traffic',
    initial: 'GREEN',
    states: {
      GREEN: {
        on: {
          TIMER: { target: 'YELLOW' },
        },
      },
      YELLOW: {
        on: {
          TIMER: { target: 'RED' },
        },
      },
      RED: {
        on: {
          TIMER: { target: 'GREEN' },
        },
      },
    },
  })

  import { createActor } from 'xstate';
  import { machine } from './machine';
  const outputEL = document.querySelector('#output');
  
  // 把一個 machine 實例轉換成一個具有狀態的 actor
  const actor = createActor(machine);
  
  function render(state) {
      outputEL.innerHTML = JSON.stringify(state, null, 2);
  }
  
  actor.subscribe((state) => {
      render(state);
  });
  
  actor.start();
  
  nextBtn.addEventListener('click', () => {
      actor.send({ type: 'TIMER' });
  });

• xstate 優點
  • 有介面！
  • 根據流程圖可以幫助釐清思路，確保有考慮到所有狀況
  • 比較好交接
  • 有 VSCode Extension (XState VSCode)
    • 可以程式碼視覺化
• RxJS
  • 統一大家寫法
  • 遵循Functional Programing的精神

心得

• xstate 好讚，感覺說不定有些專案可以用到 (e.g. 繪製 ROI)
• RxJS 沒有很懂他的價值，或許目前公司專案還用不到

個人專案到產品：善用 AI 工具打造可盈利產品 - 王鵬傑 PJ Wang

• PPT

重點

• Side Project vs. Product
• 要找到專屬於自己的題目
• 別急著做開發
• 可行性驗證：本階段要做的事情
  • 我知道我的用戶大致的樣貌
  • 我能觸及到我的用戶，並知道他們在哪裡
  • 我能提供價值
  • 我能賺到第一個收入，雖然暫時無法規模化
  • 有足夠多的用戶願意買單
  • 我知道整個服務的提供的流程
• SaaS 產品
  • 第一版的功能，應該要在 2-3 天內完成
    • 只做最重要、最核心的功能
    • 避免拖延上線時間
  • 產品要能具體說明當前產品如何幫助用戶
  • 要有能讓用戶給予回饋的機制
  • 一定要收費 (即使只有 10 元)
    • 用戶動機更強
    • 初期建立收費習慣
  • 用戶能在幾分鐘以內獲得價值
  • 產品操作直觀,降低客服需求
  • 產品本身具有分享特性
  • 具有網絡效應
  • 服務器成本可控
• SaaS 產品行銷
  • 只有產品品質並不夠
  • 不要過度依賴口碑
  • 「發布」不僅是技術部署,更是一個完整的行銷活動

心得

• 公司的 SaaS 服務有好幾像沒做到
• 感覺找好題目的話，也可以簡單做一個來玩玩看
  • 但是金流的部分會是一個問題…

從單體應用到微服務的監控演化淺談 - 在地上滾的工程師 Nic

• PPT

重點

• 不同時期的產品所合適的監控做法不同
  • Lv0 軟體草創初期
    • 監控就是你本人
  • Lv1 基本架構時期
    • 擅用免費資源,不斷輪替
  • Lv2 前後端分離時期
    • 付費使用資源,加組合技如 Slack
  • Lv3 微服務時期
    • 避免數據孤島,開始整合監控資源
    • 引入工具時用成本評估自架及託管的長期影響
• 有意識的知道自己正在軟體公司的哪一個時期
• 有意識的知道自己正在可觀測性道路上的哪一步

心得

• 總覺得我們還在 Lv0 ~ Lv1 來回擺盪，Lv0 的時間比較多
• 雖然不是這場的重點，但是沒想到 Reddis 在 Lv0 就有了，為啥我們公司現在沒有 (沒有需求?)，實作上該怎麼用?

十年回首：React 的過去、現在與未來發展 - Zet

• PPT

重點

• 再度(?)享受了一次 React 的入門教學，包含遇到什麼問題? React 如何解決?

心得

• 內容真的很好懂，對 React 外行人很友善

AI+商業思維：軟體工程師如何擁抱趨勢，提升職場價值 - 游舒帆

• PPT

重點

• 是否能走其他道路 (要不要試試別條路？)
• 機會多不如機會好。好機會需要自己創造。
• 工作策略
  • 極大化個人學習 (專注於高價值任務)
  • 用最少的時間做好 API (不追求 KPI 極大化，非交差了事但也非追求完美)
  • 做有熱情且能累積的事 (現在做的事能為未來增添價值)
• 我的工作策略
  • 清楚陳述自己的工作價值 (用他人理解的價值說明)
  • 主動投入在有價值的任務上 (別等別人安排無價值的事，識別價值主動認領)
  • Show, and tell. (做出成果後主動呈現，說出自己的價值)

心得

• 有幾個問題值得好好思考
• 我的優勢是什麼?
  • 學得快 –> 軟體需要快速學習的能力
  • 接觸範圍很廣：程式、生醫、化學、光學、許多實驗操作經驗，有沒有什麼情境需要他們之間的組合?
• 如何陳述自己的工作價值?
  • 影響力?
  • 這個問題與最近的績效考核相關，也跟履歷相關

12/28 (六)

在 AI 時代軟體工程師的持續升級？ - Mosky

• PPT

重點

• 程式的「可 AI 維護性」

心得

• 程式的「可 AI 維護性」這點挺有趣的，之前沒想過
  • 與保哥的 Github Copilot 課程中，建立清楚的規格，讓 AI 去實作的觀念是相似的
  • 共同點：多一點提示，少一點猜測，AI 產出的正確性就會高

ESLint One for All Made Easy - Anthony Fu

• PPT

心得

• 這個簡報工具 (Slidev) 真的很厲害，用 MarkDown 撰寫，但又充滿彈性，對程式碼的支援度超級高，一定要玩玩看！！！

Flex out！ CSS Grid 玩起來！ - 李建杭 Amos

心得

• CSS Grid 好像真的很好用，但是 Vuetify 似乎大多都還是用 flex，難道說應該要考慮放棄使用 v-row、v-col ?
• 好多範例的 CSS 用法都看不太懂，尤其是變數那部分

從零開始打造金融業的開發者平台 - 陳鋒逸（小風）

心得

• Backstage 看起來有很多好用的功能，但是需要一點時間研究一下
  • 整理文件
  • 可以設定要啟用哪些共用的基礎服務，然後自動化建置新服務

DevOps 與 GenAI：在人工智慧時代的未來之路 - 邱宏瑋

重點

• AI 是輔助學習不是拿來要答案
• AI 有訓練上的知識時間 cut off 問題，可能沒辦法回答最新的知識變動。

心得

• 沒啥特別的感觸
• AI 在 debug 還有進步空間

當 Vue 與 View 分手之後⋯ - Kuro Hsu

心得

• 不得不說，我沒想過這個範例會重新渲染 (導致顏色發生變化)
• 也深刻理解到，Vapor mode 沒有重新渲染

工程師成長之路：由時間管理到職涯規劃 - 李智樺 Ruddy

筆記

• 服務生效應（Zeigarnik effect）：相較於已經完成的工作，人們比較容易記得未完成的，或是被打斷的工作。

心得

• 有一些事情的做法值得參考一下
  • 養成下班紀錄隔天的 TODO List 習慣
  • 用番茄鐘的方式，定時確認當下的「最重要的五件事」 (TODO List)，並適時調整

    問自己：此時此刻，我的時間最好拿來做什麼