React Conf 2021 為 React 18 帶來了哪些新東西？

React Conf 2021 今天剛結束，除了許多今年稍早發布過的內容，像是之前在 concurrent mode 提過的 useDeferredValue，另外也介紹了全新的 react devtool timeline 功能、未來不必手動加上 memoize 的 React Forget project 等等，本文將以這次為了 react 18 所新發布的功能來做介紹。

React 18：新的 SSR 架構解決了什麼問題？

React 官方在前幾天（6/8）發表了新的文章 The Plan for React 18，新增了一些功能，像是 Automatic batching、startTransition 以及今天的主題 New Suspense SSR Architecture in React 18。

React 18 這次帶來了全新的 SSR 架構，本文節錄重點自該文章，並在文末附上我對這個架構的看法。

在 React 前端自動產生 GraphQL operation 的 type 達到更好的開發體驗

GraphQL 眾所皆知的就是會基於 schema 的定義自動產生文件，確保不會有開發者自寫文件，導致人為的失誤問題。但是在前端使用時還是必須手動標記 type，才能準確知道 response 的 type，而不是面對一個 any type 的 data object。

以 apollo-client 為例，透過 useQuery 的 generic 傳入定義的 data 及 variable type 後，就可以在開發時準確知道 data 的 type，也能檢查傳入的參數是否正確︰

使用 react-spring 打造流暢的使用者體驗

react-spring 是我在公司的 design system 內使用兩年以上的套件，其主要提供基於 React Hooks 的 API，取代 CSS 實作動態 UI，除此之外還完整支援 TypeScript。

個人認為 react-spring 在打造 UX 時的輕鬆程度遠大於 CSS，基於 requestAnimationFrame 所實作的動畫也不會像傳統 JavaScript 動畫套件拖垮效能。再加上社群人士的大力推薦，個人將此套件作為在 react 實作動畫的首選。

在 React.memo 實作 re-render 條件

幾週前 React 發佈了版本 16.6，一口氣推出了 lazy、memo 及 contextType 等新功能。而其中的 React.memo 就是過去 React.PureComponent 的 HOC 版本，比起過去改動成 PureComponent 要動到較大量的程式碼，如今只要套上 React.memo 即可。不過在 class component 可以寫 class method 自定 shouldComponentUpdate 的實作，function component 好像不能這樣搞？其實 memo 是有第二個參數可以使用的。

透過 apollo-server 在 10 分鐘內打造你的第一個 GraphQL server

在前些日子 GraphQL 界知名的 Apollo 發佈了 Apollo Server 2，這個版本其中一個特色就是加強了開發體驗。透過內建 server 減少開發上繁瑣的設定，比起前個版本，寫一個 hello world 的 demo 不再需要花費大量的時間。本文大部分內容都來自於官方的 Getting Started，經過整理與翻譯過後發布。

充分利用 lodash 讓你的程式碼更易讀及維護

一般在開發 JavaScript 的專案的時候，一定會大量的操作 Array / Object / String…等，但大部分人通常會使用 prototype fucntion，例如使用 Array.prototype.push、Array.prototype.map 等等，此文將會講解透過 lodash 所提供的方法，可以如何讓程式碼更佳的簡潔及好維護。

透過 namespacing 讓 Vuex 更結構化

去年底退伍之後進入新公司開始工作，近一年來都在 Vue / Vuex / Vue-Router 之間打滾，也寫出一些心得了，就在睽違一年多之後可以來寫新的東西了 XD。

大部分人透過 Vue 開發 SPA（Single Page Application）時通常都會搭配 Vuex 一起使用，如果不知道 Vuex 的作用的話那可以先去參考一下官方介紹。

在 OSX 使用 Fish shell 取代 bash/zsh

在 Mac 上用 zsh 已經有一陣子了，最讓我詬病的就是 zsh 的 auto suggestion 及 auto completion 速度相當慢，而且有一些很奇怪的問題（bugs?）。最近 fish 這個 shell 好像很紅，索性就把 zsh 換成 fish 了。

裝完後不只速度 ++，連 plugin / theme 的套件管理都有（fisherman），使用起來相當快速方便，要說缺點呢，就是與 bash 不相容，所以很常在寫 bash 的捧油只能看看囉。

告別 JavaScript 的 Promise！迎接 Async/Await 的到來

最近在做一個自己的 API boilerplate，選用了 koa 這個 library。而其中除了 stable 的 1.x 外，它還 release 2.x！有什麼不同呢？1.x 是用 generator 來實作，而到了 2.x 竟然是用 Async/Await！身為一個熱血碼農，怎能錯過這個進場 Async/Await 的大好機會 XD。

在 OSX 使用 Homebrew 打造精巧的 Laravel 開發環境

更新於 2017/1/10：Laravel 官方已推出 Laravel Valet，建議採用 Valet 方式進行安裝。

建議你熟悉 Terminal 的操作再參考本篇，否則容易把系統環境搞亂。

在開發 Laravel Application 時，新手可能使用 *AMP 的系統環境整合包，而大多數人會選擇官方所提供的 Homestead。但 Homestead 其實就是一包很大包的虛擬機再配上 Vargrant，曾幾何時我也是使用 Homestead，但是因為我的小 Macbook Air 實在是受不了虛擬機容量一大包，又吃一堆記憶體。

雖然標題是寫 Laravel，但是要應用在其他的 PHP Application 也是可行的。本篇就以 Homebrew 為主軸，打造 Laravel 的開發環境。

在 laravel 5 實作瀏覽器推播通知

更新於 2017/1/10：Laravel 官方已推出 Laravel Echo，可簡化整個建置流程，有興趣可前往參考。

今天在逛 PHPHub 時剛好看到這篇，想著之前也想做類似 Facebook 的通知服務，剛好之前也有碰過一陣子的 socket.io，所以就試著實做看看了。不過推播通知在手機上是相當常見的，但在 Web 上不知為何卻相當少見，也可能是我見識太淺了，看過的網站太少 XD。

本文的原始碼

在 OSX 的終端機正常瀏覽 PTT

在 OSX 的終端機連線至 PTT，會因為編碼問題而產生亂碼。

防止 SSH 因長時間未動作而斷線

在使用 SSH 連線到遠端主機時，常常因為一段時間未動作而逾時斷線。要避免這樣的情形發生， 只要設定自己的 SSH 設定即可。

在 iDevice 上執行 React Native（不需付費）

之前在練著寫 React Native 時詢問過開發 iOS 的朋友，能不能將 App 燒至自己的裝置上。當時好像因為 Apple 規範的關係，必須加入 Developer Program 並 年付 $99 取得憑證才行。而因為我沒有打算上架到 App Store 上所以只好放棄付錢作罷。

最近剛好想寫一些自己的工具，又試著上網找了一下資料，發現在 XCode 7 之後已經開放未付費也可以燒至裝置上了，因此紀錄一下。

Redux 起手式：Actions、Reducers 及 Store

真正開始寫 React 大概是這一兩個月的時間吧，印象中前幾個月正火紅的時候，觀望著開發架構，從 Facebook 剛開始的 Flux，一路看到 fluxxor、alt 這些 Library 等等，真的是多到爆，然後那個 Flux 的概念圖看了不下 N 次，但還是不得其門而入。

直到不久前出現了一個叫 Redux 的東西，剛好有新 project 要用 React 寫，看著各方大神推薦就順勢跳進 Redux 的世界了。最近也利用 Redux 寫了個 Proxy manager，趁最近期中考完，回頭寫一下 Redux 的核心概念。

在 Sublime Text 的 JSX 中使用 Emmet

Sublime Text 除了有內建的標籤自動補齊，最有名的 pakcage 就是 Emmet 了。Emmet 一直以來是寫 HTML 的神器，除了原本支援 HTML 外，其實已經支援了 JSX。但在 Sublime Text 的 JSX 中不額外設定的話是無法正常使用的，其實只要修改一下 Key Binding 就可以了。

在 Mac 上使用 Homebrew 安裝 Docker

更新於 2017/1/10：Docker 官方已推出 Docker for Mac，若有需求請前往該站參考，本安裝方式已不適用。

本文建議了解 unix-like 基礎指令及 Docker 基本操作者閱讀。

雖然 Docker 官方推薦使用 Docker Toolbox，不過我個人很不喜歡這種一鍵安裝包，連啟動還要用 GUI。可是動手搜尋 docker via homebrew 之類的關鍵字，出來的結果都是使用舊的 boot2docker（目前為 docker-machine），所以找不到只好自己做個紀錄了。

JSDC 2015 會後筆記（Day 2）

本文延續 Day 1

第一天結束之後，晚上我去淡水我朋友借住一天。淡水跟南港展覽館格有夠遠...來回要一個小時多，所以二天早上八點出發，到會場已經九點半了，導致我第一個 topic 完全沒聽到，虧大了！

JavaScript 的 Object.assign 陷阱

以下開發情境為 ES2015（ES6）

一般在寫 React 的時候，通常會希望資料是 immutable（不可變的），讓開發時對資料的流向即處理更容易，所以通常會使用 Object.assign 來複制 object。但今天在寫時遇到一個問題，我一直以為 Object.assign 會連同子項目都複製，結果兩個不同的資料改 A 竟然連 B 都跟著動，就做個紀錄。

JSDC 2015 會後筆記（Day 1）

JSDC 全名是 JavaScript Developer Conference，是台灣所有 JavaScript 開發者的年度盛會。

今年 JSDC 的 Build anything with JavaScript 包含了 iOS App、Android App、Arduino...等等，涵蓋了各式各樣的議題，不僅僅侷限於 Web，會後也有 Lighting talk 這種有趣的活動，讓會眾也能參與議題分享，還有吃（X）。整體來說 JSDC 是每年吸收 JavaScript 新知的好活動。

使用 Docker 建置 Gitlab CE 的 Source Control 及 CI 環境

更新於 2017/1/10：此文年久失修，可能有許多情形與現實不符，請斟酌參考。

本文建議了解 unix-like 基礎指令及 Docker 基本操作者閱讀。

這幾天在我們的 imaclab 試著建置 CI 環境，順便就學了 Docker，發現 Docker 這東西真的非常方便，直接把環境都放進 container 裡，也不怕把環境搞爛。對環境建置的苦手真的是一番福音，網路上也很多關於 Docker 的文章，在這邊也不贅述了。 原本在架設的時候想使用 Gitlab + Jenkins，不過因專案的需求沒有需要 Jenkins 這麼開放客製化的 CI 工具（其實是我覺得很囉唆一堆東西要設定），剛好 Gitlab 也有提供 CI，需求上也符合，所以就決定使用 Gitlab + Gitlab CI。

在 Laravel 使用 Route Model Binding

本文適用於 Laravel 5.0 以上版本。

什麼是 Route Model Binding？

Laravel model binding provides a convenient way to inject class instances into your routes. For example, instead of injecting a user's ID, you can inject the entire User class instance that matches the given ID. Reference

在 Laravel 5 使用 PJAX 加快網頁載入速度

本文適用於 Laravel 5.0 以上版本。

什麼是 PJAX ？

簡單來說，以往使用的 AJAX 可以不重新載入網頁，異步載入伺服器的資料，並更新畫面。而 PJAX 則是加入了 HTML5 的 PushState 技術，在取得資料的同時改變 Url，可以保留瀏覽器上一頁的功能，而且不會從伺服器重新載入 js 及 css 之類的靜態檔案，加快網頁的載入速度。