前端技术栈

一下是关于每个工具上榜的理由，一些众所周知的理由这里就不重复了。

基础库：React

• 组件化的UI方便开发，测试以及管理
  
• JSX的语法能够在写html的时候最大程度上利用JS的优势
  
• 强大的开发community
  
• 摆脱了繁琐的two-way-binding
  
• 方便的server side rendering
  

架构：Redux

• 目前为止公认最好的flux implementation
  
• 语法简洁
  
• 丰富的文章，教程以及第三方工具(thunk, logger, dev-tool等等)
  
• Middleware大赞
  

语言：ES6/Babel

• ES6的时代正在来临，跟上节奏
  
• 前端的职位基本都已经把ES6放在了基本要求里
  
• 跟ES5相比有很多好用的新东西
  

格式：ESLint/AirBnb

半强制的让你写出所谓优雅的代码哈哈，没什么好说的，硅谷各大小公司前端通用规范

包管理：npm

没什么好说的，基本没有竞争者。这里有一点要强调下：请好好利用npm script

打包：webpack

• 组件化的管理
  
• 基本上可以load所有东西
  
• 只load你需要的东西
  
• 大规模项目必备，谁用谁知道
  

关于组件化管理：比如一个button组件，文件结构如下：

-- src
  -- components
    -- Button
      -- index.js
      -- index.css

index.js和index.css只包含关于这个button的东西.

index.js

import ‘./index.css‘;
...
...
render() {
    return (
        <button className=‘app-button‘>Click me</button>
    );
}

index.css

.app-button {
    color: black;
}

测试：Mocha + Chai + Sinon

没什么好说的，基本已成为行业标准

服务器：Sails.js

• MVC + Realtime
  
• 强大的预设和扩展性
  
• REST API自动生成
  
• 任务流水线

注意：Sail.js自带的ORM是waterline，自带的任务运行和打包工具是grunt。如果有需求的话自己花一两天研究下可以改成bookshelf和webpack.

http/https请求: fetch

• Firefox和chrome原生API，现在请用isomorphic-fetch来获得所有浏览器的支持
  
• 前后端通用
  
• Promise

ORM：bookshelf

后台与数据库交互的必备神器

Promise：Bluebird

如果你不想被callback搞得生活不能自理：

function isUserTooYoung(id, callback) {
    openDatabase(function(db) {
        getCollection(db, ‘users‘, function(col) {
            find(col, {‘id‘: id},function(result) {
                result.filter(function(user) {
                    callback(user.age < cutoffAge)
                })
            })
        })
    })
}

请用promise:

function isUserTooYoung(id) {
    return openDatabase(db)
        .then(getCollection)
        .then(find.bind(null, {‘id‘: id}))
        .then(function(user) {
            return user.age < cutoffAge;
        });
}

桌面应用：Electron

没什么好说的，这些软件都是用前端的技术和Electron写出来的:

• Atom
  
• https://slack.com/
  
• Visual Studio Code
  

其他: Lodash

（此处我在英文版里写的是utilities, 不知道中文到底应该翻成什么。。）

必备Lodash，除此之外貌似没有这么刚需的

最后想讲的是，需求驱使技术，技术提升需求。可以为了练习用这个东西来用这个东西，但是绝对不要为了用这个东西而用这个东西。永远把你的需求摆在第一位。对于连需求都没有的朋友们，希望先找到你们的需求。

• 我是新手，我现在的目标是学习javascript - 那就先别考虑什么react/meteor/vue
  
• 我需要做一个单页面应用 - 那就别把时间花在redux上，react自带的state可以满足你的所有需求
  
• 我的web app需要一个数据库，但是我从来没用过也不了解数据库 - 那就网上花半小时看看mongoose，别纠结那些mysql语法什么的

前端技术栈

原文：http://www.cnblogs.com/doit8791/p/5270921.html