在產品開發的世界裡，上線並不是結束，而是新的起點。 一個系統能否長久被使用，不僅取決於功能是否完整，還取決於它的 維護性、彈性，以及回應使用者需求的速度。這些因...
把腦中想像的育兒工具慢慢做成能用的平台，這一路上 AI 幫了我很多忙。 到目前為止，平台已經有 任務管理、每週報告、成就系統 以及其他更多核心功能，小孩能自己操...
在上一篇文章中，我透過 AI 的協助，把一個原本只是網頁型態的 PWA（Progressive Web App） 包裝成 Android App，並利用 TWA...
快速導覽 上一篇，我們介紹了: 為什麼會 撕裂（tearing），如何保證 tear-free 訂閱 keys 重掛 下如何避免殘留訂閱 / 計算節點 在 T...
本篇目標 理解為什麼會 撕裂（tearing），如何保證 tear-free 訂閱 keys 重掛 下如何避免殘留訂閱 / 計算節點 在 Transitio...
當網站正式上線的那一刻，我還蠻開心的，因為整個平台終於有了完整的樣子。但冷靜下來之後我又想，現在的網站其實有點空洞，整個網站看起來也要有「內容感」才行。畢竟使用...
快速回顧 這篇接續上一篇的結尾，讓我們來透過實際的範例，理解要怎麼互補使用。 Effect 清理策略 首先，我們先來釐清主要的概念： 我們的 effect（c...
從未消失的生命週期 從本系列的開頭講解，一直到現在的實作，都是圍繞著「資料層的生命週期」：資料如何被讀取、失效、重算、與何時觸發副作用。 這並不衝突於框架本身的...
到目前為止，平台的功能其實已經算是完整，我自己的孩子也都能獨立操作使用；也有邀請過幾位家長試用，得到了一些正面的回饋。對我來說，這已經算是一個重要的里程碑。 但...
本文目標 把前面實作過的 signals/computed 以 不撕裂（tear-free） 的方式接進 React 18 Concurrent 模式關鍵：快照...
因為這個平台希望能透過輕度遊戲化的方式幫助引導孩子完成每天的任務，例如收拾書包、刷牙、整理房間，讓「例行公事」變得更有趣、更具成就感。同時，因為家長是陪伴孩子的...
為什麼框架會影響你怎麼用 signals？ 簡單回答就是 生命週期，但在脆上有批 React 仔永遠當它不存在的在賣課，確實也蠻擔心的，但你深入到一定的程度，就...
在完成兒童任務管理平台的核心功能後，我又在 AI 的協作下，快速打造了「每週報告」：彙整任務完成率、活動紀錄與獎勵兌換等等；接著，我又想到的一個適合的常見功能&...
在前幾天的紀錄中，我分享了目前開發的兒童任務管理平台，已經具備了 基本任務管理、獎勵系統，還有 冒險地圖 與 成就抽獎 等趣味功能。這些設計的初衷，是希望孩子能...
引言 在上一篇中，我們拆解了 Dependency Tracking 的核心概念與執行原理，本篇將焦點放在 React 的 dependency 模型：它的特性...
前端 Reactivity 三路線，究竟差在哪？ 我們常在 Signal / Proxy / Virtual DOM 之間搖擺：哪個更快？哪個更好維護？ 如果把...
前情提要 接續前一篇的 Reactivity 核心概念講解內容，我們透過這一篇的內容帶大家釐清 Pull-based 與 Push-based 這兩個模式差異。...
承先啟後的發展 2010 年的 Knockout.js 首度將 Observable / Computed 帶進前端，讓「資料自己開口，UI 跟着動」成為可行路...
為何需要 Signal？ 有了第一篇的概念之後，相信大家都已經在心中埋下懷疑的種子，那我們來重新審視一下 React 是怎麼處理 state 的吧! 相信大家對...
引言 React 的核心設計，是建立在一個重要假設之上：「資料與元件狀態的變化無法事先預測」。基於這個假設，React 必須持續透過 Virtual DOM（虛...
Day 2: 1131229一、目標:設定好VS code環境，做好開發前準備二、預計使用工具:(一)Spring Initializr(二)VS code 三...
因為專題的前端要使用React的技術，不過在這之前好像只學過基本的HTML, CSS, JavaScript，所以想透過這次的鐵人賽好好的把React技術學好，...
每天強迫自己產出內容是一個很大的挑戰，但這種輸入與輸出的循環，對我幫助真的很多！在這次鐵人賽寫作挑戰中，發現了不少自己在知識點上的盲區，以為已經了解某些Reac...
鯨魚
‧
2024-10-15
今天是挑戰的最後一天，我們聊了許多關於React和比較常見的套件，以及最後實作了Gym Pro的專案，為什麼要做這個挑戰主要是我七年的開發經驗都圍繞在後端，這幾...
Redux 是一個狀態管理庫，主要用來管理應用中的全局狀態，特別是當應用變得複雜時。Redux Toolkit（RTK）是官方推薦的開發 Redux 應用的工具...
鯨魚
‧
2024-10-14
今天是我們實作的最後一天，我們要為系統做最後的收尾工作，確保它穩定、高效、安全，並且易於使用。 1. 全面測試 首先，我們要進行全面的系統測試，確保所有功能都能...
昨日說明了Redux的介紹，今天就要再來準備實作的操作，這次實作也是要把 Day18 的TodoList小作品做個重構，讓原先用 useState 改用成 R...
鯨魚
‧
2024-10-13
今天，我們要來為系統加入一些功能。這些功能可能不會直接被使用者看到，但它們對於系統的長期健康發展有關。 1. 實現插件系統 首先，我們來實現一個簡單的插件系統，...
useContext useContext 是 react 提供的一個 hook，可以讓我們透過讀取和訂閱元件中 context 共享元件之間的資料，主要是用來...
雖然我們功能已經差不多了但也僅此與前端的功能，若要變成更完整的一個專案可以再加入PWA、後端登入、將景點儲存在資料庫等等，又或是將地圖套件做得更完整，礙於時間限...
平凡工程師
LucianoLee
Moscle.dev
Ashley
ntuedtd113
iThome鐵人賽
看影片追技術