vue-itHome.key

Size: px

Start display at page:

Download "vue-itHome.key"

絺元
5 years ago
Views:

1 VueJS : 前端框架的演進淺談 Kuro ithome Tech Talk

2 前言

3 每 18 至 24 個月, 前端都會難一倍赫门 2015 shenjs

5 為什什麼需要前端框架?

6 VueJS: 漸進式框架 Source: Vue.js: The Progressive Framework

7 How To Use

10 Vue-CLI / Vue-loader $ npm install -g vue-cli $ vue init webpack [project name] $ cd [project name] $ npm install $ npm run dev

11 模版渲染方式的差異異

12 指令式渲染如 jquery, 以操作 DOM Node 為基礎的開發模式開發方式直覺, 透過 Selector 取得 DOM 就開始操作一旦程式架構擴大複雜後, 程式碼混雜不易易維護

13 宣告式渲染以操作物件模型為基礎的開發模式關注點放在資料 ( Model ) 與狀狀態直接描述資料與 DOM 的映射關係, 而不是直接操作 DOM view = render(state), state 輸入, DOM 輸出

15 十個前端有十一個都討厭的表單驗證

17 SELECTORS HELL with jquery

19 關注點分離

20 MVVM ( Model-View-ViewModel )

22 Vue 實體概觀

23 指令 ( Directive ) Vue 指令就是一種由 Vue 所提供特殊的屬性, Vue 內建的指令通常會以 v- 作為開頭指令中的值通常用來來表示某個 JS 運算式而指令的作用, 是將某個運算式執行行後的結果回饋到對應的 DOM 上

24 事件綁定

25 組件系統

28 Header Main Block Aside

30 組件生命週期

31 組件生命週期

32 組件生命週期

34 Object.defineProperty 追蹤物件變化

35 資料的變動偵測

36 與其他主流框架的差異異 :Push & Pull 資料的變化偵測主要分為 Push 與 Pull Pull: 如 React 的 setstate Angular 的 dirty check 等 Push: 如 Vue 的響應式更更新 RxJS 的 observable 等不管是哪一種都會有對應的成本, 沒有絕對好或不好

37 Source: Reactivity in Frontend JavaScript Frameworks

38 Source: Reactivity in Frontend JavaScript Frameworks

39 Source: Reactivity in Frontend JavaScript Frameworks

40 Source: Reactivity in Frontend JavaScript Frameworks

41 組件之間的溝通

44 Emit events to update value

47 Event Bus

48 CSS 管理理方案與 JS 完全解耦, 透過命名規範來來管理理 : 如 BEM SMACSS OOCSS 等 CSS Modules, 透過 Webpack 編譯, 仍是 CSS 各種 CSS in JS ( React ) 寫在.vue 中的 CSS Angular 組件的 CSS

49 CSS in JS 限定 CSS 的有效範圍 (scope) Critical CSS (Server 端渲染 ) Atomic CSS 優化打包管理理, 方便便 re-use

50 Scoped CSS in Vue

51 Scoped CSS in Vue

52 組件狀狀態管理理 Vuex = VueJS + Flux / Redux 從事件對應至狀狀態的改變, 以及後續 UI 的變化等過程抽離出來來, 以提高可維護性同步元件間的狀狀態, 解決元件之間資料溝通的問題

53 單向資料流

54 SSOT 原則

56 前端路路由機制

57 Vue-router 路路由管理理

58 Path Component

59 最早提出前端 Routing 概念念的是 Ember.js 早期會用 # (URL hash) 來來模擬, 現今主流工具多以操作 History API 方式來來處理理路路由從組件出發來來思考 Routing 規則, 其實就是將 URL 對應至組件樹結構的過程從 URL 到組件映射的分歧點思考 : 以 URL 規則為主? 以組件的狀狀態為主?

60 SSR Pre-rending 與 SPA

61 雖然 Google 曾宣稱可以看懂 JS 渲染的結果

63 SSR 當網頁需要透過非同步方式 ( 如 JS) 來來渲染的區塊時, 大部分的搜尋引擎 bot 不會等待資料讀取完成, 此時就不利利 SEO 的運作 Vue SSR (server-side-renderer) 提供了了可讓後端同時編譯 Vue 元件並提前渲染的可能性, 達到前後端同構的好處換言之,SSR 只能在 node 環境上執行行

64 Pre-rending 如果後端語言非 node, 又不想多建置一個中間層, 特別適合採用 Pre-rending 的做法 Pre-rending 的概念念類似 cache, 將不常變動的網頁透過 wepback 預先編譯並生成靜態文件, 當然搜尋引擎的 bot 也可正確爬取網頁的內容 Vue 可搭配 prerender-spa-plugin 來來實作 Pre-rending

65 Prerender SPA Plugin

66 建構工具與 Vue 開發生態圈 Task 自動化開發體驗與效率 ( 如 : Hot-Reload 語法糖等 ) 打包與專案部署相關的需求編譯時的優化

68 Vue-CLI $ npm install -g vue-cli $ vue init webpack [project name] $ cd [project name] $ npm install $ npm run dev

69 Vue-loader

70 HTML Script Vue file Style

72 結語

73 每 18 至 24 個月, 前端都會難一倍赫门 2015 shenjs

75 反正 18 個月之後你又會想學新的了了, 要是覺得跟不上, 安心放生也無所謂

76 工具的過時?

77 為什什麼需要前端框架?

78 沒有最完美的方案, 只有當下相對適合的方案

79 不要只記得口訣, 最要緊是能打得到人電影葉問

80 VueJS 台灣社團

81 Kuro Hsu Thanks!

ii Vue Bootstrap 4 ES 6 Vue Vue Bootstrap 4 ES 6 Vue 2 vue html vue html vue Vue HTML 5 CSS ES 6 HTML 5 CSS Visual Studio Code h

ii Vue Bootstrap 4 ES 6 Vue Vue Bootstrap 4 ES 6 Vue 2 vue010101.html vue010104.html vue0101 01 04 Vue HTML 5 CSS ES 6 HTML 5 CSS Visual Studio Code https://code.visualstudio.com/ Chrome XAMP Visual Studio