VueConf 2017 大會現場筆記

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

一、Vue 2017 現狀與發展

By 尤雨溪 Evan You @ Vue

起源

• 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

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

現狀

• 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：分塊載入技術

加快了 Time-to-Content 時間

距離並引出 Api 層諸多思考

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

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

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

API 多的問題

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

API Proxy

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

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

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

Vue 與 API Proxy 如何完美結合

---

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

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

Q：Vue.js 比 jQuery 好學嗎？

簡潔與簡單

腳手架工具

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：載入時序問題被解決