前端技术选型及项目构建流程

前端框架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复制文件

两者速度差不多，只不过gulp更为简单。

 

压缩、合并脚本（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);