Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[JSDC2017] 從 VueJS 看前端生態圈的發展變化

Kuro Hsu
November 05, 2017

[JSDC2017] 從 VueJS 看前端生態圈的發展變化

近年來前端工具的演進變化快速,這場分享將由 VueJS 出發,除了針對 VueJS 新特性的介紹外,也簡單分析現代前端框架與前端開發生態圈的變化與演進。希望透過這樣概觀性的介紹,能讓初入前端領域的朋友更快上手,不會感到迷惘。

Kuro Hsu

November 05, 2017
Tweet

More Decks by Kuro Hsu

Other Decks in Technology

Transcript

  1. 指令式渲染 • 如 jQuery,以操作 DOM Node 為基礎的開 發模式 • 開發⽅方式直覺,透過

    Selector 取得 DOM 就 開始操作 • 優點就是爽,但程式架構擴⼤大複雜後,程式 碼混雜不易易維護
  2. 宣告式渲染 • 以操作物件模型為基礎的開發模式。 • ⾏行行為關注點放在資料 ( Model ) 與狀狀態 •

    直接描述 狀狀態 與 DOM 的映射關係,⽽而不 是直接操作 DOM • view = render(state) 
 state 輸入, DOM 輸出。
  3. JSX

  4. 與其他主流框架的差異異:Push & Pull • 資料的變化偵測主要分為 Push 與 Pull • Pull:

    如 React 的 setState、Angular 的 dirty check • Push: 如 Vue 的響應式更更新、RxJS 的 observable • 不管哪⼀一種都會有對應的成本,沒有絕對好或不 好。
  5. • state: 存放資料的地⽅方,可視為 Vue 元件的 Data • getters: 由 state

    衍⽣生出來來的狀狀態,可視為 Vue 元 件的 Computed 屬性 • actions: ⽤用來來呼叫 mutations 的入⼝口,由於單⼀一資 料流的限制,不可從外部直接呼叫 mutations,與外部 的資料操作也在這裡完成 (非同步) • mutations: 更更改 state 的操作都會放在這裡 (同步)
  6. • 與 JS 完全解耦,透過命名規範來來管理理:如 BEM、SMACSS、OOCSS 等 • CSS Modules,透過 Webpack

    編譯 • 各種 CSS in JS 解決⽅方案 ( React ) • 寫在 .vue 中的 CSS 、 Angular 裝飾⼦子的 CSS
  7. CSS in JS • 限定 CSS 的有效範圍 (scope) • Critical

    CSS (⾸首屏 server 端渲染) • Atomic CSS 優化 • 打包管理理,⽅方便便 re-use
  8. • 最早提出前端 Routing 概念念的是 Ember.js • 早期會⽤用 # (URL hash)

    來來模擬,現今主流⼯工具多 以操作 History API ⽅方式來來處理理路路由 • 從組件出發來來思考 Routing 規則,其實就是將 URL 對應⾄至組件樹結構的過程 • 從 URL 到組件映射的分歧點思考:
 以 URL 規則為主? 或是以組件的狀狀態為主?
  9. 編譯時優化 • Treeshaking • webpack code-splitting • Prepack • SSR:

    inlining Critical CSS • Custom Modules for Vue Template Compiler Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p
  10. Custom Modules for Vue Template Compiler Compile-time Optimizations in JavaScript

    Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p
  11. Custom Modules for Vue Template Compiler Compile-time Optimizations in JavaScript

    Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p