VueConf 2017 大會現場筆記

活動很贊，人不少，氛圍很是好！

1、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 的兼容

---

2、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 如何完美結合

---

3、用比較性思惟談工程化工具在 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：加載時序問題被解決