Qwik

簡報內容皆擷取自官方課程 (免費)

• [1] Why Qwik?
• [2] What is Qwik?
• [3] DEMO

[1] Why Qwik?

• 網頁歷史
• 未來趨勢

主講人認為使用 Qwik 的推力

• 使用者體驗 (UX)
• 開發者體驗 (DX)

影響 使用者體驗 (UX) 的因素

1. 等待讀取時間
2. 等待回應時間 (加入購物車後等待加入的時間)
3. 重複執行的事情所花費的時間 (重複填相同的表單，因為它沒有記住之前的記錄)

影響 開發者體驗 (DX) 的因素

1. 結構
2. 做越少的事情越好
3. 工具很容易理解

從網頁歷史推測下階段的發展

前五十的電商網站的表現

Amazon

世界最大的電商網站

下一階段？

未來趨勢 1 : App 越來越大

未來趨勢 2 : edge 技術

讓 app 更接近使用者

網頁效能影響收益

毫秒的讀取時間即可影響收益

Core Web Vitals (Google)

reference

LCP (Largest Contentful Paint)

渲染內容時間

• google: 少於 2.5 秒

• 解決方案

  1. 圖片最佳化
  2. 下載更少的程式碼
  3. 讀取時執行更少的 JavaScript
  4. SSR
  5. "EDGE" caching & executing

FID (First Input Delay)

網頁回應使用者行為(點按鈕之類的)的時間

• google: 少於 0.1 秒

• 解決方案

  1. 下載更少的檔案
  2. 執行更少的 JavaScript

CLS (Cumulative Layout Shift)

網頁內容偏移量

• google: 少於 0.1 (偏移量)

• 解決方案

  1. 下載更少的檔案
  2. 執行更少的 JavaScript

why Qwik?

• Google - Wiz (frontend + backend), but not open source
• 現在的框架著重於渲染，但 Qwik 更近一步處理讀取表現

[2] What is Qwik?

哪些強大的功能？

SPA (Single Page Application)

1. build
2. server
3. client

index.html 看起來是空白的

讀取完 js 之後才可以跟網頁互動

SSR + Hydration

由伺服器用 JSX 來渲染 html 內容

hydration - 讓 html 變成可以互動的狀態

hydration 的問題

Lazy loading?

• hydration

問題點：

1. 要手動撰寫 lazy loading
2. 仍然需要執行花費高的 hydration

(主流框架目前遇到讀取問題而出現 lazy loading 的解決方案，並無法解決 hydration 帶來的問題)

Resumability

(JavaScript Streaming)

目前主流的前端框架都需要做 hydration (replay)，

但 qwik 的做法像是串流平台播放影片的方式，只是傳送的資料是 JS 檔案，只針對需要的檔案下載

Dynamic tree shaking

請求 JS，速度??

[3] DEMO

• Qwik vs hydration
  • 1:11 qwik (讀取時沒有請求 js，需要的時候從 worker 取出 JS 並執行)
  • 2:54 比較 (用 3g 網路 & 無痕模式，比較 "兩個" 主流框架與 qwik 的速度，讀取頁面時直接在 input 上面打數字，比較要花多久時間才能與應用程式互動)