前端框架React 與 Vue 比較選擇

Vue優勢：

1.模板和渲染函式的彈性選擇

2.簡單的語法及專案建立

3.更快的渲染速度和更小的體積

1.Vue應用的預設選項是把markup放入HTML檔案中。資料繫結表示式使用的是與Angular相似的雙大括號（moustache）語法，而指令（特殊的HTML屬性）則用於向模板中新增功能。React應用則與之相反，不使用模板，而是要求開發者藉助JSX在JavaScript中建立DOM。

2. 一個簡單的Vue專案能不需要轉譯直接使用在瀏覽器中，這使得在專案中使用Vue可以像使用jQuery一樣容易。當然這對於React來說在技術上也是可行的，但典型的React程式碼是更多地依賴於JSX和諸如class等ES6特性的。而Vue的簡單則是更深層地源於其設計的。React裡的狀態（state）是不可變（immutable）的，因此你不能直接地改變它，而是要用setState API方法。React是通過比較當前狀態和前一個狀態的區別來決定何時及如何重新渲染DOM的內容，因此需要使用不可變的狀態。而與此相反的是，Vue中的資料是可變的（mutated），所以同樣的資料變數可以用簡潔得多的方式修改。

3.當應用程式的狀態改變時，React和Vue都會構建一個虛擬DOM並同步到真實DOM中。兩者都有它們各自的優化這個過程的方式。Vue的核心開發者提供了一個benchmark測試，來表明Vue的渲染系統比React的更快，具體基準的設定以及同其他框架的比較詳見vuejs.org。從實用的角度來看，這種benchmark只跟邊緣情況有關，而大部分應用程式中不會經常進行這種操作，所以這不應該被視作一個重要的比較點。但是，頁面大小則是與所有專案有關的，這方面Vue又一次優於React，它目前的版本壓縮後只有25.6KB。要用React實現同樣的功能，你需要React DOM（37.4KB）和React withAddon庫（11.4KB），共計44.8KB，幾乎是Vue的兩倍大。雖然從React你的確會得到更豐富的API，但雙倍的體積並不能帶來雙倍的功能。

React優勢：

1.更適用於大型應用和更好的可測試性

2.同時適用於Web端和原生App

3.更大的生態圈帶來的更多支援和工具

1.用Vue和React實現的簡單應用程式來比較兩者，可能會讓一個開發者從一開始就更傾向於Vue。這是因為基於模板的應用程式乍看上去更易理解，而且能很快地寫好並跑起來。但是這些最初的便利會引入技術債並阻礙應用擴充套件到更大的規模。模板容易出現難以注意到的執行時錯誤，同時也不易於測試，重構和分解。相比之下，Javascript模板可以組織成經過良好分解，且使用DRY（don't repeat yourself - 避免重複程式碼）原則的程式碼的元件，因而具有更強的可重用性和可測試性。Vue也有元件系統和渲染函式，但React的渲染系統可配置性更強，幷包含如shallow rendering這樣的特性，可結合React的測試工具一起使用，從而大為提高程式碼的可測試性及可維護性。雖然React的不可變（immutable）應用狀態寫起來可能不夠Vue簡潔，但它在大型應用中仍會大放異彩，因為透明度和可測試性此時變得至關重要。

2.React Native是一個用於通過Javascript構建移動端原生應用程式的庫。它與React.js相同，只是不使用Web元件，而是使用原生元件。如果學過React.js，很快就能上手React Native，反之亦然。其意義在於，開發者只需要一套知識和工具就能開發Web應用和移動端原生應用。如果你想同時做Web端開發和移動端開發，選用React是相當划算的。阿里的Weex也是一個跨平臺UI專案，目前它以Vue為靈感，使用了許多相同的語法，並計劃未來實現完全整合Vue，不過整合的時間和具體細節還未確定。由於Vue的設計中將HTML模板作為其核心部分之一，並且現有特性不支援自定義渲染，因此以Vue.js目前的形態來說，很難看到Weex與之的關係將能像React和React Native一樣緊密。

3. React目前比Vue要受歡迎許多——它在NPM上每個月的下載量約為250萬次，而Vue只有22.5萬次。人氣帶來的好處不僅是表面上的名聲，還意味著更多相關的技術文章，教程和更多Stack Overflow上的解答和幫助；以及有著更多的工具和外掛可以在專案中使用，開發者不用從零開始，可以省很多力氣。這兩個框架都是開源的，但是React誕生於Facebook，自帶給力的資助，它的開發者和Facebook都承諾會持續維護React。而Vue則是由獨立開發者尤雨溪創造，目前也只有他一名全職維護者。雖然也有一些公司資助Vue，但是規模和Facebook和Google沒得比。不過由於Vue的團隊的努力，它的小規模和獨立性並沒有成為劣勢。Vue有著固定的釋出週期，甚至更令人稱道的是，Github上Vue只有54個待解決問題（open issue），已關閉問題（closed issue）則有3456個；與之相比，React的已關閉問題數目相差不多（3447個），待解決問題卻有多達530個。

前端框架總結：

React和Vue都是非常優秀的框架，它們之間的相似之處多過不同之處，並且它們大部分最棒的功能是相通的。鑑於公司專案排程臺還有移動端模組，建議選用React框架，更能節省開發成本，對於日後的維護也比較方便。

-------------------------------------------------------------------------------------------

構建工具gulp、grunt

 gulp與grunt部署對比

1.上手難度：gulp實現包括require(引入模組)，gulp.task(定義任務名稱、任務執行)兩部分（上述配置檔案中的cb函式為連續任務時使用，單獨用clean可以忽略cb）；而grunt實現包括grunt.initConfig（任務執行）、grunt.loadNpmTasks（引入模組）、grunt.registerTask（定義任務名稱）三部分；所以gulp配置更容易掌握；

2.執行效率，gulp用了5.71ms， grunt使用時間也很快無法比較；

Gulp與grunt複製檔案

壓縮、合併指令碼（JS）檔案

兩者速度差不多，只不過gulp更為簡單。

壓縮樣式（CSS）檔案

用法、速度都同其他外掛差不多，主要是執行指令後的提示：

gulp 外掛還是統一的列出執行指令的時間（執行時系統時間、執行任務消耗時間）；

grunt 外掛的提示終於比gulp有了一些亮點，列出了壓縮前後的容量對比；

壓縮圖片

1.grunt外掛的舊版本有一些坑，具體來說就是相同的版本、相同的配置程式碼換一臺電腦執行的時會報錯（新版本已解決該bug, 建議使用最新版）；

2.最新版grunt外掛在執行以上任務時（壓縮307張圖片），速度上的劣勢就比較明顯了，等待的時間比較長一些；

3.壓縮出來的效果，本專案圖片都是PS批量另存為“web所用格式”過，所以gulp跟grunt壓縮後的容量幾乎沒變化；

HTML檔案壓縮、依賴載入替換

速度上gulp比grunt快一些（grunt主要卡在壓縮圖片）；

構建工具總結：

Gulp相比於grunt更簡潔，更容易上手。

-------------------------------------------------------------------------------------------

Css預處理LESS、SASS

Sass有很多可用的方法和邏輯。例如：條件和迴圈語句。LESS也可以做到，但不是很高效且不直觀。像LESS一樣，Sass也內建了一些非常友好的函式，像顏色，數字，還有變數列表。

Sass使用者可以使用功能強大的Compass庫。這些庫LESS使用者也可以用，但並不完全一樣，因為這是由一個龐大的社群來共同維護的。Compass有非常強大的特性，像自動生成圖片切片（CSS Sprites)，傳統瀏覽器支援，還有對CSS3的跨瀏覽器支援等。

Compass同樣允許你使用外部框架像Blueprint, Foundation 或 Bootstrap。這也意味著你可以非常容易的使用你喜歡的框架而不需要掌握各種不同的工具。

--------------------------------------------------------------------------------

Css模板

基礎功能

1.響應式網格系統

2.表格

3.表單

4.按鈕

5.圖片

佈局元件

1.下拉選單

2.導航元素

3.麵包屑導航

4.分頁

5.進度條

6.過度效果

7.模態框

8.下拉選單

9.標籤頁

10.提示框

11.警告框

12.彈出框

13.輪播

------------------------------------------------------------------------------------------------------------

常用JavaScript外掛

常用外掛

1.日期格式統一（例如：2017-06-12 09:59:12）

2.AJAX非同步請求

3.表單驗證

------------------------------------------------------------------------------------------------------------

前端專案構建

示意圖	描述
整個Web應用由頁面組成
頁面由元件組成
一個元件一個目錄，資源就近維護
元件可組合， 元件的JS可依賴其他JS模組， CSS可依賴其他CSS單元

專案搭建流程化(例)：

建立專案並初始化

$ mkdir webpack-react-demo

$ cd webpack-react-demo

$ npm init

$ touch .gitignore

$ touch webpack.config.js

其中.gitignore用於說明程式碼提交時忽略的檔案，可參考下面的常用配置

logs

*.log

.grunt

node_modules

bower_components

build

通過npm安裝專案所需的依賴包

webpack相關包

$ npm install webpack webpack-dev-server html-webpack-plugin--save-dev

css\scss樣式檔案，圖片檔案相關包

·         $ npm install css-loader style-loader sass-loader node-sass --save-dev

$ npm installfile-loader url-loader --save-dev

babel\react\es6支援包

·         $ npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

·         $ npm install jshint jshint-loader --save-dev

·         $ npm install react react-dom --save

$ npm install [email protected] --save-dev

bootstrap\jquery\moment支援包

·         $ npm install [email protected] --save-dev

$ npm install jquery moment --save-dev

 建立工程結構，目錄如下：

·        app/

o   index.jsx (程式入口)

o   components/ (元件資料夾)

§ plist.jsx （展示使用者列表）

§ search.jsx （搜尋框元件）

o   utils/ (工具類)

·        templates (模版資料夾)

o   index.html

o   mobile.html

·        package.json (專案及npm包版本資訊)

·        webpack.config.js (webpack配置檔案)

配置webpack

向webpack.config.js檔案寫入一下內容：

var path = require('path');

var webpack = require('webpack');

var HtmlwebpackPlugin = require('html-webpack-plugin');

var ROOT_PATH = path.resolve(__dirname);

var APP_PATH = path.resolve(ROOT_PATH, 'app');

var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

var TEM_PATH = path.resolve(ROOT_PATH, 'templates');

module.exports= {

  entry: {

    app: path.resolve(APP_PATH, 'index.jsx'),

    mobile: path.resolve(APP_PATH, 'mobile.jsx'),

    vendors: ['jquery', 'moment']

  },

  output: {

    path: BUILD_PATH,

    filename: '[name].js'

  },

  resolve: {

    extensions: ['', '.js', '.jsx']

  },

  devtool: 'eval-source-map',

//enable dev server

  devServer: {

    historyApiFallback: true,

    hot: true,

    inline: true,

    progress: true,

    proxy:{

'/api/*':{

        target: 'http://localhost:8080',

        secure: false

      }

    }

  },

module: {

    preLoaders: [

       {

         test: /\.jsx?$/,

         include: APP_PATH,

         loader: "jshint-loader"

       }

     ],

    loaders: [

      {

        test: /\.jsx?$/,

        loader: 'babel',

        include: APP_PATH,

        query: {

          presets: ['es2015', 'react']

        }

      },

      {

        test: /\.scss$/,

        loaders: ['style', 'css', 'sass']

      }

    ]

  },

// any jshint option http://www.jshint.com/docs/options/

   jshint: {

"esnext": true

   },

  plugins: [

new webpack.optimize.UglifyJsPlugin({minimize: true}),

new HtmlwebpackPlugin({

      title: 'My first react app',

      template: path.resolve(TEM_PATH, 'index.html'),

      filename: 'index.html',

      chunks: ['app', 'vendors'],

      inject: 'body'

    }),

new HtmlwebpackPlugin({

      title: 'Hello Mobile app',

      template: path.resolve(TEM_PATH, 'mobile.html'),

      filename: 'mobile.html'

    }),

new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')

  ]

}

npm中新增webpack啟動命令

在package.json檔案中新增：

  ...

"scripts": {

"dev": "webpack-dev-server --progress --profile --colors --hot --inline",

"build": "webpack --progress --profile --colors",

"test": "test",

  },

  ...

新增首頁

寫入index.jsx

import'../node_modules/bootstrap/scss/bootstrap.scss';

import React from'react';

import ReactDOM from'react-dom';

import $ from'jquery';

classAppextendsReact.Component{

constructor() {

super();

    }

    render() {

return (

<divclassName="container">

            <sectionclassName="jumbotron">

              <h3className="jumbotron-heading">Search Github Users</h3>

            </section>

          </div>

        )

    }

};

const app = document.createElement('div');

$('body').append(app);

ReactDOM.render(<App />, app);