在 React.js 中打造原生級 Sheets 體驗，by Google IDX, Framer-motion & Redux By 范愷祐 / Kyo Fan

議題

在 React.js 中打造原生級 Sheets 體驗，by Google IDX, Framer-motion & Redux

TR214 [[ new Date( '2024-08-04 06:30:00+00:00' ).toLocaleDateString('ja', {year: 'numeric', month: '2-digit', day: '2-digit'}) ]] [[ new Date( '2024-08-04 06:30:00+00:00' ).toLocaleTimeString('zh-Hant', {hour12: false, hour: '2-digit', minute:'2-digit'}) ]] ~ [[ new Date( '2024-08-04 07:00:00+00:00' ).toLocaleTimeString('zh-Hant', {hour12: false, hour: '2-digit', minute:'2-digit'}) ]] 中文 Chinese

加入行事曆加入關注加入關注已關注

為了在自家的 PWA 追求與原生 App 類似的體驗，我們拆解 FramerMotion 的運作原理，實現連 Framer Motion 都做不到的響應式 & 多向拖曳 Bottom Sheet (Apple HIG 稱為 non-modal sheet)，讓 PWA 的 Sheet 也能有類原生App 體驗。

本次分享中將學到： - 為什麼一定要用 sheet？有什麼必要性？ - Framer Motion 的運作原理 - 開發小技巧！ DevMode 展示 - 視覺和介面設計上的理解 - 逐步拆解：到底怎麼做到？ - Google Project IDX 實例展示 - 解釋參數和他們的意義 - 上手體驗！

透過工程師的邏輯+ UI 設計師的經驗，終於攻克這個不可能的任務！

講者

范愷祐 / Kyo Fan

Open NCCU 非營利組織創辦人、 GDSC NCCU '22-'23 Lead (社群領袖)

講者

張淮竣 Huai-Chun Chang

Core Team Member @GDSC NCCU Tech Lead @ OpenNCCU

意外到量子計算學界打滾怕畢業即失業所以學了一點網頁前端

Student Education Track (SED) 學生 × 教育大亂鬥 ZKCLVD general (30mins)