ModernWeb'21 | 系列心得文(I) | 10 場 F2E 會有興趣的議程

前言

為期 13 天，多達 40 場以上的議程，ModernWeb’21 終於在今天圓滿落幕了! 因為疫情的關係，一直以來都是實體方式進行的 ModernWeb，從去年開始轉為線上的形式舉行。雖然比較難感受到大家齊聚一堂，熱情參與的盛況。不過經過這幾天的體驗下來，其實線上方式帶來許多的好處，像是－

• 實體方式通常會多軌進行，如果有兩場以上有興趣的議程，只能做割捨；不過線上方式是單軌，只需要看有興趣的議程是哪幾場，然後記住直播時程就好。
• 由於內容是採預錄，所以直播過程中有些講者也會上線參與。如果觀眾有什麼問題，或是講者有什麼補充的話，就能即時地問答互動。
• 由於可以匿名參與，觀眾可以盡情地在聊天室中可以更多互動，甚至有新的收穫。
• FREE! FREE! FREE! 很重要所以要說三次，雖然知識無價，不過現實面來說可以省掉幾千元的門票還有通勤成本，對於我們這種又窮又忙的小資族真的是天降甘霖🥺 這裡也特別感謝主辦單位的佛心!

接下來我想趁記憶鮮明的時候，整理出 10 場 F2E 可能會有興趣的議程，以及 5 場個人印象蠻深刻的議程分享給大家，有興趣的話可以接著看下去。

議程整理

從 React 到 React Native 到 React Native Web 開發與設計須知

• 講者: Caesar 大大
• 關鍵字: React Native, Mobile Web, Screen, React Navigation, ScrollView, dp(font size), ListView
• 心得: 由於今年開始碰 mobile app，所以對 React Native 的主題算是最有興趣的。講者列舉了幾種 UI 在 Web 和 mobile 的不同，以及在 mobile 開發上的最佳實現，收穫良多!

依照古法、純手工打造的視訊聊天網站，不純免錢！

• 講者: 高見龍 大大
• 關鍵字: Websocket, WebRTC, Signal Server, SDP, NAT, STUN, MediaDevices, Peer.js
• 心得: 只能說這個議程有滿滿的技術含量，但是講者又能用一些平易近人的比喻來解釋，以及最後的 DEMO，不靠任何 infra 就能簡單建立起視訊的聊天室，算是開眼界了，讚讚!

當原子設計遇上網頁建構器

• 講者: Kim 大大
• 關鍵字: 原子設計, Design System, 網頁建構器, UGC, 模組
• 心得: 之前就有瞄過相關的文章，當下覺得太神啦! 這次議程中，Kim 大大用衣櫃這個例子很清楚解釋原子設計，然後怎麼應用到網頁建構器中，讓我有新的收穫。

pxcode 前端工具的開發經驗分享

• 講者: Chris Chang 大大
• 關鍵字: pxcode, Posize, Fusion Flex, Resizing Contraints
• 心得: 聽完之後，只能說我之前太小看排版這件事。其實要做到完美的響應式設計真的沒那麼簡單，很多時候只是 designer 沒在跟你計較而已QQ 講者開源的 Posize 和 Fusion Flex 是我會再認真著墨的地方。如果可以的話，也會想試用 pxcode 看看!

Svelte - 如何在前端框架中脫穎而出

• 講者: 愷開 大大
• 關鍵字: Svelte, Reactivity, directive(描述符), 事先編譯
• 心得: 聽完之後除了可以了解 Svelte 想解決的問題和優點之外，我更想了解簡報是用什麼工具做的XD 希望有哪位善心人士可以跟我說，不然我就要鼓起勇氣直接詢問本人啦!

透過 Headless CMS 讓前端與行銷團隊高效合作

• 講者: Roy 大大
• 關鍵字: Headless CMS, directus, strapi
• 心得: 由於目前正在進行 wordpress 相關的專案，加上之前有負責過有關 CMS 的專案，所以對這個議程還蠻有興趣的。聽完之後也收穫滿滿，之後應該會玩玩看 Roy 大大推薦的 directus，以及在聊天室中有提到的 strapi。

JavaScript 概念三明治：基礎觀念、語法原理一次帶走！

• 講者: 木景 大大
• 關鍵字: 強制轉型, 物件型別, 原始型別, 執⾏環境, 執⾏堆疊, 非同步, Associativity(相依性), Event Queue
• 心得: 看過他寫的書的話，就可以知道他對知識的整理與視覺化非常厲害，很多用文字很難說清楚的概念，像是強制轉型、相依性等，都會透過循序漸進，簡單明瞭的圖示和程式碼呈現。這點也是我持續學習的地方。

誰說 SPA 無法做 SEO？加強 React SEO 的 N 種方式

• 講者: KK 大大
• 關鍵字: SPA, SEO, CSR, SSR, React, Web Rendering, FID(首次輸入延遲時間), Hybrid, next.js, gatsby, Pre-render, react-helmet, prerender.io , Pre-build
• 心得: 個人覺得 KK 大大的演講過程中很順暢，內容雖然簡潔，不過還是可以感受到滿滿的技術量。就算沒做過 SEO 的經驗，聽完之後也會對於之後實作方向相當明確。給推!

中台雲原生之 Micro Frontends

• 講者: 國泰世華銀行
• 關鍵字: Micro Frontends, single-spa
• 心得: 雖然前面在講銀行的系統架構的時候不是很懂，不過中後段的講解就還蠻淺顯易懂的，除了有講到Micro Frontends 跟 Monolithic Frontends 的不同處(業務邏輯 vs 數據邏輯)，還有Micro Frontends的優點以外，後面也有帶到用 single-spa 的 DEMO。以我來說的話，應該會觀察公司的後續發展，視情況列入想研究的主題之一。

API 開發、測試、除錯一次到位！使用 MSW 深入淺出 Mock API

• 講者: Yuri
• 關鍵字: API, Mock API, Service Worker, MSW, JavaScript
• 心得: YA! 請容我光明正大地偷渡自己的議程😉 還沒看過或是想再看一次的話，可以從 ModernWeb 官網下載簡報，或是直接去看文字版喔~

小結

不管是參加研討會，或是加入技術社群，看到一個嶄新或是陌生的技術出現在眼前，雖然當下覺得這東西好讚!學起來我就超強之類的。但下意識其實都有點恐慌，畢竟 Web 開發的領域變化的太快，加上有這麼多的強者不斷地造出強而有力的輪子出來，自己會有種不進則退、如履薄冰的緊張感。

如果跟我有同樣感受的話，建議首先要做的，就是找出適合自己的學習節奏，還有安排優先順序。舉上面這 10 場議程來說，假設對這些內容都不熟，是不是就要強迫自己每項都要學到透徹，才能算是一位稱職的 F2E 呢?

其實不是，首先要了解 F2E 的必修內容有哪些。例如: 如果你聽木景大大分享 JavaScript 的概念時，發現有一知半解的情況時，就會知道基礎不夠扎實。如果對 JavaScript 的基礎認識不夠，在之後吸收新技術時就會比較難融會貫通，對實務開發上就難有真正的加分。因此你該優先做的，就是看完木景大大出的書，以及 Yuri 即將要出的ECMAScript關鍵30天。

之後可以列出近期自己在實務開發上遇到的問題，或是想導入的解決方案。以我來說的話，可能有以下幾點－

• 在公司專案和 side project 上都會使用 React Native，那麼由 Caesar 大大分享的開發與設計須知對我來說就很有用，可以針對我還陌生的部分加以了解。
• 公司一直很想發展 CMS ，不過目前為止都沒有成功的解決方案，那麼由 Roy 大大分享的 Headless CMS 對我來說就值得深入研究並且嘗試。

藉由這樣的列表整理，並且安排學習計畫到開發日常中，就能更加地學以致用。

最後趁工作空檔時間，並且心有餘力的話，再來認識有興趣的主題。這時候的學習節奏就不用太快，也不用強迫自己一定要導入實務中。像是我對 Svelte 還蠻有興趣的，之後可能就會找時間了解它的語法結構和應用場景，然後再試著動手做出簡單的 project 出來，甚至跟同事進行分享等等。

雖然我也還在練習，不過參加研討會的目的並不是要包山包海地通學，而是一種能多開自己眼界的方式，讓自己可以有更多的選擇，共勉之😊