VueConf 2017 大會現場筆記

陰明發表於2017-05-20
Vue筆記

活動很贊，人很多，氛圍非常好！

VueConf 2017 大會現場筆記

一、Vue 2017 現狀與發展

By 尤雨溪 Evan You @ Vue

VueConf 2017 大會現場筆記

起源

  • 2013 年 6 月：First Commit (Seed)
  • 2013 年 12 月：第一次將專案名字 Vue
  • 2014 年 2 月：第一次公開發布 Hacker News
  • 2014 年 11 月：0.11 版本（重寫）
  • 2015 年 4 月：Laravel 社群作者開始使用並宣傳
  • 2015 年 10 月：Vue.js 1.0 釋出
  • 2016 年 10 月：Vue.js 2.0 釋出（重寫 & 一定的向後相容）

定位

Just a View Layer Library

最早只想解決一些檢視層的問題，並沒有完全服務於大型業務的功能。但是隨著 Vue 的發展開始增加輔助工具，例如 vue-router, vue-loader, vuex

The Progress Framework

不需要完全的全家桶，而是可以漸進式的根據需求一點點增加業務複雜度。這樣易於上手，也可以更快的應用在老業務上，比侵入式框架易於上手。

VueConf 2017 大會現場筆記

現狀

  • GitHub 超過 53,986 個 Star 數，已經是歷史的 Top 10
  • 每月 55萬+ 次 NPM 下載（不算阿里爸爸 CNPM 映象）
  • Chrome DevTool 外掛 17.4 萬日活
  • 314 Contributors
  • 社群化的開源產品：NUXT.js，Quasar Framework（Ionic），Element，iView，Muse-UI，Vux，Vuetify，Vue Material
  • 與阿里合作的 Weex
  • Microsoft Build TypeScipt 老大作者 Anders Hejlsberg 在 Demo 中 Vue + VSCode 中可以推倒
  • Google I/O Addy Osmani 介紹 Vue + PWA

Vue 2.3

服務端渲染改進 ssr.vuejs.org

在存在程式碼分割的情況下，通過分析 Webpack 服務端和客戶端的構建資訊，自動推導需要在客戶端預載入的檔案，生成最優的 <script> 和 <link re="preload/prefetch"> 連結

非同步元件改進

Loading / Error / Timeout Fallback

函式式元件改進

  • 不再需要顯示式 props

其他

  • Passive 事件偵聽：@touchmove.passive
  • .sync 迴歸了

Vue 2.4（K__）

與 TypeScript 更好的整合

  • TypeScript 團隊 Type 宣告
  • VSCode 團隊最好的 IDE

SSR 效能進一步優化

通過編譯時優化獲得 2~8x 效能提升，通過字串實現效能優化，但是很多 2.0+ 都是用 render 實現的。現在是可以自動分析出來，非元件內容多的話，可以快速提升。

SSR + webpack code split 完美支援

不再侷限於路由

vue-cli 3.0

  • 配置依賴化 + 可組合（更新升級）
  • PWA by default
  • 一個模版，不同引數（--ts, --sr ...）
  • 更好的測試方案

長期展望

  • 單檔案元件 CSS 改進
  • 基於 Proxy 的響應式系統重構
    • 不再需要 Vue.set 或者 this.$set，直接 =
    • Lazy Observation，效能優化
    • 顯示構建響應式物件
  • HTML Modules：
    • 類似單檔案元件的新標準（由 Google 起草中）
  • 與 Web Components 的相容

二、Vue SSR 和 API Proxy 實踐

By i5ting（狼叔）@去哪兒

分析 Node.js 現狀，以及 2017 年趨勢預測

  1. 跨平臺
  2. Node 後端
  3. 前端
  4. 工具

非同步流程控制：

Callback => Thunk => Promise => Generator(yield) => Async(co)

流行趨勢：

  • PWA
  • SSR
  • API Proxy
  • Isomorphic

Vue SSR 原理

  • wepback 外掛內建
  • BundleRenderer：dev 狀態下的 hot-reload 和 source-map support
  • streaming/bigpipe：大檔案傳輸
  • cache：快取 lrc-cache 自動整合
  • 內建 service-worker：支援 PWA

模組系統

  • 開發環境 module loader：當使用者到某一個模組時，按需載入進來
  • 產品環境 module bundler：提前打包好各個包檔案，執行時各個包按需載入

打包演進

  • browserify
  • webpack 1
  • rollup：採用 ES6 模組
  • webpack 2：ES6 模組也跟進了 & 效能也優化了

Bigpipe：分塊載入技術

VueConf 2017 大會現場筆記

加快了 Time-to-Content 時間

距離並引出 Api 層諸多思考

當頁面裡有很多個業務需要載入的時候：

  1. 可選
  2. 可並行
  3. 先到先得：先到先顯示
  4. 容錯：有東西錯了，不能 block 其他操作

VueConf 2017 大會現場筆記

前端逐個模組渲染，或者是後端載入完整體輸出。

API 多的問題

  • 跨部門
  • 跨域
  • API 返回的資料對前端不友好
  • 改動多

API Proxy

  • 產品需求應變，後端不好變，前端更容易
  • 後端討厭（應付）前端，集中 API 都攔著根據 UI／UE 去定製，能偷懶偷懶

對後端業務、API 抽象出一個 Model Proxy 洗好介面，給前端業務輸出，到完整 Web 框架：

VueConf 2017 大會現場筆記

  1. Browser：雙向繫結元件化
  2. Node Proxy：API 代理給前端瀏覽器使用
  3. 服務組裝：連結後端微服務

Vue 與 API Proxy 如何完美結合

VueConf 2017 大會現場筆記

三、用比較性思維談工程化工具在 Vue.js 的優雅設計

by 小春 @ Ex-豌豆莢，Ex-滴滴，摩拜單車

Q：Vue.js 比 jQuery 好學嗎？

簡潔與簡單

腳手架工具

VueConf 2017 大會現場筆記

Alleviate the amount of copy & pasting you do between projects

重複的工作儘可能通過腳手架工具提高工作效率。

工具複雜度是為了處理內在複雜度所做的投資 -- Evan You，《Vue 2.0，漸進式前端解決方案》

Vue.js 腳手架

  • yeoman：通過 yo 命令在初始化專案
  • vue-cli：支援 vue init 按照制定模版，在制定目錄生成專案結構，也可以通過 vue list 列出線上 vuejs-template repo 支援的模版列表。如 webpack, webpack-simple, browserify, browserify-simple, simple.

React.js 腳手架

  • create-react-app：呼叫 react-scripts 裡的函式來實現腳手架功能

Angular.js 腳手架

  • angualr-cli：Angular 2.0 開始有的

vue-cli + vuex + vue-router

URL 根據 route 配置連線到相應的 Route Component 根據資料依賴 dispatch 資料到 Model 並根據業務訪問相應 Service。

本地開發

Express + 多箇中介軟體：

  • connect-history-api-fallback
  • webpack-hot-middleware
  • http-proxy-middleware：跨域請求，配反向代理 Nginx
  • express.static
  • friendly-errors-webpack-plugin：更友好的 webpack error messages 方法
  • webpack-sftp-client：webpack sftp Client

打包上線

  • webpack.optimize.UglifyJsPlugin
  • extract-text-webpack-plugin
  • optimize-css-assets-webpack-plugin
  • html-webpack-inline-source-plugin：載入時序問題被解決

相關文章