VueConf 感想與總結

嗶譜嗶譜發表於2017-05-27

Vue

第一次參加conf好激動的說。來，我們先放幾張照片！！

能把自己的第一次獻給Vue的第一次簡直棒！

今天一天的會議下來，對於剛剛涉足前端領域的我來說收穫頗豐，於是將自己的感悟總結在這裡與廣大的Vue愛好者以及尤大大的粉絲們分享！

Vue 2017 現狀與發展

By 尤雨溪 Evan You Vue.js作者

起源

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 釋出（代號：Evangelion，沒想到尤大大也喜歡福音戰士！好激動！！）
2016 年 10 月：Vue.js 2.0 釋出（對程式碼進行了重寫 & 一定的向後相容）

最後對於即將釋出的2.4版本，將是以K開頭的一部動畫，但是尤大大不願透露更多的細節。

好多自己夢寐以求的公司啊！！！

定位

Just a View Layer Library

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

The Progress Framework

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

現狀

GitHub 超過 53,986 個 Star 數，已經是所有型別專案的歷史的 Top 10
每月 55萬+ 次 NPM 下載（不算阿里爸爸 CNPM 映象,算了就是月破百萬的節奏XD）
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 （最佳IDE）
Google I/O Addy Osmani 介紹 Vue + PWA

SSR

Server-Side Rendering (ssr.vuejs.org)

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

SSR 效能進一步優化，通過編譯時優化獲得 2~8x 效能提升。（後面被陰明吐槽效能還是很差，必須在每一層都做快取）

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的小夥伴們一個個合影，不由得深感敬佩！近距離接觸尤大大，發現他特別平易近人，絲毫沒有大神的架子。瞭解到尤大大是86年出生的，13年（也就是27歲）寫出了第一版Vue。打算把尤大大作為自己的男神和榜樣，希望自己五年後也可以像尤大大一樣做出屬於自己的東西。（貌似有點不自量力23333，總之要加油！You can make it !!）

附上和尤大大的合照一枚！

Vue SSR 和API Proxy層深度實踐

By i5ting 桑世龍狼叔去哪網前端架構師

Vue本身是前端框架，它目前跟伺服器唯一的關聯就是SSR，基於Stream的Bigpipe實現，雖說是舊瓶裝新酒，但還是有很多人不瞭解其中原理。另外對於Vue專案來說，與後端Api對接、（Spa、大首頁）等有沒有更好的實踐呢？後端Api目前也極為混亂，各種語言、各種實現，真的適合前端麼？大家辛苦了，狼叔最懂你。

首先，狼叔分析 Node.js 現狀，並且預測了 2017 年趨勢。

流行趨勢

PWA
SSR
API Proxy
Isomorphic

Vue SSR 原理

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

API Proxy

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

個人感悟

狼叔還是很有個人魅力的，嗯。對SSR的原理有了一些基本的認識，知道了目前主流的打包工具為webpack 2，正好最近開始學習webpack，看來沒有學錯哈哈！狼叔還說如果你想晉升，那麼最好學學webpack，看來自己需要更加重視webpack的運用以及原理的學習。

談工程化在Vue.js的優雅設計

By 張耀春小春摩拜單車

前端框架的目的：alleviate the amount of copy & pasting you do between projects.

Pick the right tool for the job.

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

vue-cli

官方出品的命令列腳手架工具，支援：

（1）vue init 按照指定模板，在指定目錄生成專案結構

有 3 種模板初始化方式：
1、官方
2、本地
3、線上其他repo

（2）vue list 列出線上 vuejs-templates repo 支援的模板列表

其中大家用的最多的是webpack

create-react-app VS vue-cli

都是基於 webpack 構建。
create-react-app：更多封裝在了react-scripts 裡面，同時把它加到了初始專案的依賴裡面。
vue-cli：更為直接，把指令碼模板都直接放到build 資料夾中，開發者更容易修改。

webpack

和 Vue.js 結合最緊密的構建工具

配置分離

採用webpack-merge +webpack.base.conf.js + webpack.prod.conf.js

本地開發

需要 Express 和多箇中介軟體：

connect-history-api-fallback：在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設定為true，所有的跳轉將指向index.html
webpack-hot-middleware：熱更新，實現修改程式碼自動重新整理瀏覽器。
http-proxy-middleware：代理
express.static：託管靜態檔案

Webpack外掛

DefinePlugin：動態的注入一些變數，比如一些版本、環境資訊等

friendly-errors-webpack-plugin：recognizes certain classes of webpackerrors and cleans, aggregates and prioritizes them to provide a betterDeveloper Experience.

webpack-sftp-client：開發過程中把本地資源 push 到開發機

html-webpack-inline-source-plugin ：html-webpack-plugin 的第三方擴充套件外掛，通過增加一個 {inlineSource: 'regex string'} 選項來內聯你的靜態檔案到 html 中。

Vue 元件編譯

vue-loader

Webpack 的外掛，處理 .vue 檔案中的三部分：

*、 template
*、 script
*、 styles複製程式碼

個人感悟

小春的演講誠意滿滿乾貨十足，由於講的太細還有點超時了。由於小春剛剛從滴滴跳槽到了，導致主辦方的關於小春的資訊還沒更新。自己回來之後重新學了一遍PPT，感覺很多vue的原理性的東西，收穫不少。

掘金Vue.js後端渲染及重構實踐

By 陰明掘金創始人

Vue核心檔案目錄

src/
├── api/              # 接入微服務的基礎 API
├── App/              # App Root Component
├── asset/            # 靜態檔案
├── business/         # 業務
├── component/        # 元件
├── const/            # 常量
├── event-bus/        # Event Bus 事件匯流排，類似 EventEmitter
├── global/           # 通用定義的 directive, mixin 還有繫結到 Vue.prototype 的函式
├── model/            # Model 抽象層
├── repository/       # 倉庫，接入 Vuex 中
├── router/           # 路由
├── service/          # 服務
├── state/            # Vuex 狀態管理
├── style/            # 樣式
├── util/             # 通用 utility functions
├── view/             # 各個頁面
├── client-entry.js   # 前端業務 & build
├── server-entry.js   # SSR業務 & build
├── ...
└── main.js           # Vue Object Initiation複製程式碼

基礎設施層
api/
util/複製程式碼

領域層 Domain
service/       % 各個 Domain 下的基礎功能業務
repository/    %某一個獨立 Domain 下的獲取資料的業務
model/         %資料抽象層複製程式碼

業務層
business/        % 各個 Domain 下的具體業務，會引用 service 和 repository 中定義的功能
validator/       %不同資料的 validation 過程複製程式碼

表現層
state/
router/
component/
view/            % Vue 下具體的互動展示層業務複製程式碼

Event Bus

類似於 Node 中的 EventEmitter
通過事件管理和監聽處理異常、Alert、Scroll 觸發等

404

需求：
不通過跳轉 URL 來顯示 Not Found

解決方案：

我們在路由表的最後配置了 404 路由，如果當前 URL 沒有匹配前面的任意一條規則
Vuex 狀態樹中有專門的 error module 儲存異常
然後 dispatch 一個 action 設定為 404 展示

SSR的應用

需求：
後端渲染解決效能問題

解決方案：

多層快取
資料層快取
元件層快取 lru-cache
頁面層快取 redis

資料一致性

需求：
前後端渲染資料一致性問題

解決方案：
通過某種事件廣播機制實現資料的最終一致性
Vuex 本身就有事件廣播模型，我們定義了 3 個 mutation 型別：

ENTITY_CREATED - 實體已建立
ENTITY_UPDATED - 實體已更新
ENTITY_DELETED - 實體已刪除

完全通過事件傳遞行為

略

情懷部分

我相信每一個新技術的出現的最終目的是創造價值
如果一個技術真的好
我就會推薦它，宣傳它，幫助它普及給更多的開發者
用開放的心態去嘗試、學習、接受新事物
這即是我做掘金的態度，也是我做技術的態度

個人感悟

陰明說這真的是他最後一次技術分享了，不知道大家信不信？我覺得陰明的這次演講還是很不錯的，既有乾貨又有情懷。在回答問題階段，陰明說他不是為了學前端而學的前端，他最開始學習的目的單純只是做自己的個人主頁來裝逼，因為想要給自己的主頁加上炫酷的效果，所以開始自學相關的知識。他認為，抱著一種解決問題的態度去學習知識是最有效率的。我十分認同。以後在自己學習前端的過程中，也要注意問題導向，專案驅動。自己給自己定個目標，例如做出自己的App，小程式。然後讓目標驅使自己去主動地獲取知識。（與此同時，也要注意紮實的基礎知識的掌握。）