前端的一些比較流行的方案

CI / CD

持續集成(Continuous Integration)，持續集成指的是頻繁的將代碼集成到主幹，每次集成都經過自動化的構建（包括編譯、發佈、自動化測試）來驗證。持續部署(Continuous Delivery)，支持將持續集成的生成結果部署到對應的環境。
整個流程大概是這樣的：
push github => GitHub觸發CI構建 => 執行命令 => 部署 => 完成。

如今比較流行的CI是：Jenkins， GitLab CI（8.0版本開始），travis-ci

盜個圖, 流程大概就是這個樣子

yarn install

Yarn 是一個包管理器，在前端通常咱們使用npm做爲包管理器，可是npm的源常常加載插件會很慢，且會執行預測試一些插件的行爲使得在window安裝變得很是的困難。因此通常來講，yarn在window上會做爲一種替補方案用來安裝一些node_modules包。命令也是至關的簡單，yarn install 對標 npm install。好處呢，有這麼多：

vue 全家桶

• pug，參照這個文檔，領略一下pug的風采
• 好用的插件，參照這個文檔
• Vue代碼模塊定位插件vue-component-finder

npx

npm v5.2.0引入的一條命令（npx），引入這個命令的目的是爲了提高開發者使用包內提供的命令行工具的體驗。

1. npx http-server 
   複製代碼

   cd到項目文件夾，執行這條命令會幫你開啓一個靜態服務器

2. npx create-react-app my-app
   複製代碼

   這條命令會臨時安裝 create-react-app 包，命令完成後create-react-app 會刪掉，不會出如今 global 中

3. npx github:piuccio/cowsay hello
   複製代碼

   npx 甚至支持運行遠程倉庫的可執行文件

更多用法，能夠參考這份文檔

.editorconfig

項目下的編輯器格式化配置文件，管理項目的縮進、字符集等。能夠參考這個文檔，配合代碼檢查工具使用，好比說：ESLint和TSLint，統一代碼風格。demo以下：

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false
複製代碼

詳細的介紹，能夠參考這個文檔

數據可視化

echart、highchart，例如作數據鑽取功能，highchart這個官網是很是不錯的，參照文檔。可是，highchart只有在非商業用途免費，是國外的開源框架。

echart

ECharts開源來自百度商業前端數據可視化團隊，基於html5 Canvas，是一個純Javascript圖表庫，提供直觀，生動，可交互，可個性化定製的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大加強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。—— 大數據時代，從新定義數據圖表的時候到了。
ECharts，一個使用 JavaScript 實現的開源可視化庫，能夠流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定製的數據可視化圖表。

highchart

兼容 IE6+、完美支持移動端、圖表類型豐富、方便快捷的 HTML5 交互性圖表庫，大約200KB左右

動畫相關

網頁動畫技術大約有這麼幾種，css三、js幀、mp四、gif、apng、webgl、canvas、svg、flash（舊），介紹一下經常使用的庫好了

Velocity.js

不使用jQuery的方案，大概是這樣滴：

var Velocity = require("path/to/velocity.js");
// Optional: If you're using the UI pack, require it after Velocity. (You don't need to assign it to a variable.)
require("path/to/velocity.ui.js");
/* Your app code here. */
Velocity(document.body, { opacity: 0.5 });
複製代碼