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

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 出來,甚至跟同事進行分享等等。

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

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

https://yuri-journal.me/軟體開發/2021102816/

作者

Yuri Tsai

發表於

2021-10-28

更新於

2022-06-20

許可協議

評論