JSDC 2021 | 心得文 | 7 場印象深刻的議程

前言

今年是 JSDC 舉辦的第十年。雖然去年開始才關注到這個活動，不過這兩年的參與仍然是讓我學到很多，也同時感受到 JavaScript 各種的可能性。我一直以來只有專注在 Web 前端還有 mobile 上的開發，對於今年提到的區塊鏈、 Serverless 等主題其實很陌生。不過藉由幾場相關的議程分享，讓我至少可以對他們有基本的認識，這應該也是參加這種活動的好處吧!

接下來就整理幾場我印象比較深刻的議程，希望也能為你的開發日常帶來新的靈感與想法🙂

跨平台整合

The Future of React: 18 and Beyond

• 講者: C.T.Lin
• 關鍵字: React, Streaming Suspense SSR, inline script, Selective Hydration, Concurrent Features, Transition, SuspenseList, Server Components
• 心得: 透過清楚的流程圖示和簡易的範例程式，可以知道 React 18 之後帶來的重要 features 有哪些。統整這些 features，會發現大多都是給使用者更順暢和更快速的操作體驗。另外也給開發者更大的彈性，像是可以只在部分元件上進行 concurrent rendering，降低開發者在轉換過程中的門檻。

目前可以安裝 react 的 alpha 版試玩最新釋出的功能。

npm install react@alpha react-dom@alpha --save

# package.json
# "dependencies": {
#     "react": "^18.0.0-alpha-edfe50510-20210823",
#     "react-dom": "^18.0.0-alpha-edfe50510-20210823"
# }

從 React Native 跨屏開始的多領域開發歷程

• 講者: Sam Huang
• 關鍵字: React Native, 扁平架構, 軟體測試, 開源心態, Bottom Up
• 心得: 這場主要是講者透過豐富的實務經驗，分享軟硬體開發的心法。雖然沒有接觸軟硬體整合的領域，不過分享的內容也很適合純軟開發上。盡量扁平化資訊架構、善用測試驗證想法、以產出最小可行性的原則來技術選型，還有保持開源和分享的心態，開發者才能像是源源活水般持續往前等等。

最後的總結，其實很常聽到一位資深同事說－「同中取異，異中取同」。小到元件或函式庫開發，大到資訊架構的整合，如果能實踐這句話的精神，應該在開發的這條路上更能如魚得水吧!

區塊鏈應用

前端工程師也能搞得懂的區塊鏈

• 講者: Lucien Lee

• 關鍵字: BlockChain, P2P Network, Ledger Data Storage, Block Hash Chain, Mine, Decentralized, ETH, POW, Smart Contract, Dapps, Web3.js, RPC, TypeChain, solidity, Arbitrage, Pelith

• 心得: 這場議程算是區塊鏈中的通識課，就算沒有開發背景的人，也能從講者準備的內容了解區塊鏈的核心概念以及智能合約的生成機制。那麼 JavaScript 跟區塊鏈應用有什麼關係呢? 講者主要提了以下兩點－

  1. 對使用者來說，他們需要能將複雜的數據清楚呈現的介面，並提供良好的使用者體驗。
  2. 對開發單位來說，他們不希望將產生智能合約的邏輯和運算量統攬在後端上，造成龐大的負擔。因此希望使用者在前端上的互動過程中，就可以分擔部分的工作。

因此前端開發在區塊鏈應用的地位是很重要的，如果對區塊鏈有基本認識的前端工程師，也可以挑戰看看。據說目前這個市場還是很缺人，待遇應該可以談得不錯XD

JS在生成式、演算藝術與NFT的應用

• 講者: 吳哲宇
• 關鍵字: 生成式藝術, p5.js, openprocessing, three.js, Pixi.js, Paper.js, Phasor.js, Artblocks, OSC, socket.io, IoT, Johnny-Five, Node-RED, MaxMSP, TensorFlow.js, ml5.js,
• 心得: 這個議程可以說是今年最令人耳目一新的主題，很難想像用 JavaScript 就能進行圖像創作，更難想像這種藝術還可以跟區塊鏈、IoT、機器學習等專業領域搭的上。或許我一輩子也用不到這些 skill sets，不過聽完這場議程還是很過癮，至少以後看到這種玩意兒不會被嚇到😆

最近因為玻璃心這首歌重新關注黃明志，最近他為了 NFT 寫了一首歌，而且只放在 NFT 平台上販售，藉此想挑戰傳統的YouTube等平台。為了表示決心，他還在影片中展示把原始的歌曲檔案移除(雖然還是可以救援回來XD)，真狂!

前端開發與框架

為什麼許多公司都願意導入 Next.js

• 講者: Leo
• 關鍵字: Next.js, CSR, second wave of indexing, SEO, SSR, 圖片載入優化, code-spliting, Hybrid, SSG, file-based routing, pre-rendering
• 心得: 我還蠻喜歡這個準備這個議程的內容與進行方式。我們或許都知道 CSR 有什麼缺點，導入像 Next.js 這種架構的話可以解決什麼問題等等。不過除此之外，講者也分享了適合應用的場景，還有風險考量等等，並不是要聽的人全盤接受。這種思維在其他語言或是框架的選擇上也很適用。

藉由這個議程可以認識 Next.js 幾個還蠻 strong 的features，像是優化圖片的載入和 file-based routing。雖然目前還沒有機會可以使用 Next.js，希望以後會有適合的專案來進一步熟悉它。

語言特性與後端技術

從前端邁向全端 - 前端開發者不該錯過的 Serverless 技術

• 講者: Kyle Mo(老莫)
• 關鍵字: Serverless, SSR, BFF, Microservice, API Gateway Pattern,
• 心得: 雖然還沒接觸過 Serverless，不過我的感受是，它很適合一些開發情境，像是－
  1. 單打獨鬥的前端開發者，可以在基礎建設的建置上不用踩太深的坑
  2. 想花最小的資源，建立 MVP 的產品或服務來試水溫
  3. 用最小的學習成本，體驗 cloud providers 帶來的便利與好處

Serverless 乍聽之下，好像是指可以把後端拋諸腦後，開心做前端就可以了，其實不是。Serverless 比較像是提供一個相對簡單的介面，去組合想要的後端架構與服務，所以對後端還是要有一定的的瞭解。

除了共筆以外，這篇文章也寫得蠻清楚的，讓第一次聽到 Serverless 的我也能熟悉相關的概念，推推!

Memory Leak 與你的距離

• 講者: Kuan
• 關鍵字: Memory leak, Heap, Stack, Garbage Collection, DevTool
• 心得: Memory leak 應該是不少人，包括我自己都有碰過的效能大boss之一😣 講者用程式碼加上流程圖示說明記憶體儲存資料的結構與機制，接著介紹在 V8 中的兩種 GC，之後 demo 如何透過測試工具找出可能會 Memory leak 的程式碼。整體來說可以幫助大家更了解底層的運作方式，覺得收穫滿滿!

另外我也有看了文字版的部分，講者以實務上遇到的問題，透過除錯和測試工具找出發生 Memory leak 的地方。看完之後除了可以具體了解找出問題的執行方式，也更有動力面對這個 Memory leak 大魔王啦!

小結

在整理這篇心得文的時候，其實很多地方都是透過共筆的內容去回憶的。參與共筆的人都超厲害，該筆記或該截圖的地方都有放上去，甚至有些議程的共筆還有逐字稿😲 真心感謝這些善心人士的貢獻，讓這篇文章不會難產太久😆

剩下不到一個月的時間就要迎接 2022 了。回過頭來看，今年可以說是我的社群元年，無論是過程中的付出或是收穫都是種新鮮的體驗。期待接下來還能出現更多的火花，為自己或為社群帶來些改變🎉