VueConf 感想與總結

時間 2019-11-16

標籤 vueconf 感想總結简体版

原文原文鏈接

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

能把本身的第一次獻給Vue的第一次簡直棒！

今天一天的會議下來，對於剛剛涉足前端領域的我來講收穫頗豐，因而將本身的感悟總結在這裏與廣大的Vue愛好者以及尤大大的粉絲們分享！html

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開頭的一部動畫，可是尤大大不肯透露更多的細節。vue

好多本身求之不得的公司啊！！！

定位

Just a View Layer Libraryjava

最先只想解決一些視圖層的問題，並無徹底服務於大型業務的功能。可是隨着 Vue 的發展開始增長輔助工具，例如 vue-router, vue-loader, vuexreact

The Progress Frameworkwebpack

不須要徹底的全家桶，而是能夠漸進式的根據需求一點點增長業務複雜度。這樣易於上手，也能夠更快的應用在老業務上，比侵入式框架易於上手。git

現狀

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)github

服務器端渲染：在存在代碼分割的狀況下，經過分析 Webpack 服務端和客戶端的構建信息，自動推導須要在客戶端預加載的文件，生成最優的 <script>和 <link re="preload/prefetch">web

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 種模板初始化方式：
一、官方
二、本地
三、線上其餘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，小程序。而後讓目標驅使本身去主動地獲取知識。（與此同時，也要注意紮實的基礎知識的掌握。）