2017年推荐使用的前端技术

https://www.tuicool.com/articles/IRjyaiv

若是项目要求支持低版本的 IE 的话（好比 IE7，8），就用较传统的jQuery，Bootstrap，jQuery插件/组件以及相似 Knockout.js 可以提供数据绑定的 JS 库，再加上 require.js + gulp 或者 fis3 作模块化和自动化构建。

若是不须要支持低版本 IE 的话，咱们主要使用 React：

1. React – 编写页面组件
2. Redux – 数据流和状态管理，通常结合 redux-saga 使用
3. React-router v4 – 前端路由管理（Note：dva 整合了 redux, redux-router 以及 redux-saga。在熟悉了基本的 Redux, Redux-saga, Redux-router 的使用以后，能够尝试用 dva 替代）
4. Webpack – 前端构建工具

前端开发我在用到的其余类库，技术选择和工具还包括：

1. SCSS – CSS 预处理，提供 Variables, Mix-in 等功能
2. ESLint – JavaScript 代码质量工具，以前使用 airbnb 配置方案，如今使用 standard 配合方案
3. StyleLint – CSS/SCSS/Less 代码质量工具
4. EditorConfig – 统一编辑器配置
5. git – 版本控制工具，结合 git-flow 作分支管理
6. oh-my-zsh – 提升终端操做效率
7. Ant Design – React 组件库，适合中后台应用开发，极大提升开发效率。另一个能够参考的是 Material UI，是 Google Material Design 的 React 实现。
8. Ant Design Pro – 基于 Ant Design 的中后台项目脚手架，提供了更高层的经常使用业务组件和最佳实践，大大减小重复性工做
9. Animate.css – 流行的动画样式库，实现了包括 Attention（吸睛？），Bouncing（弹跳），Fading（淡入/淡出），Flippers（翻转），Lightspeed（光速？），Rotating（旋转），Sliding（滑动），Zoom（缩放）等各类动效。
10. Alloy Touch – 丝般顺滑的触摸运动方案（官方原文），支持缓动效果，使用了 matrix-3D（transformjs），requestAnimationFrame 以及针对 touchmov 事件的优化（{ passive: false, …}），体验与原生很是接近。同时支持各类触控场景：2D/3D 旋转，翻页，步进。我还用它实现了无限滑动的效果。还有一个很是流行的 swiper（ nolimits4web/swiper ），可是我没有用过。不知道跟 Alloy touch 的区别。
11. AutoPrefixer – PostCSS 插件，构建时根据 caniuse-lite 数据库以及你设置的或者默认的浏览器列表（browserslist）给 CSS 属性自动增长浏览器厂商前缀。通常结合 gulp 或者 webpack 等 Task runner 使用。这样咱们写 CSS 样式的时候只须要写纯 CSS 而不须要考虑厂商前缀的问题。
12. Async Flow Control – JavaScript 的异步流程控制，大概经历了 callback -> Async.js -> Promise(bluebird -> 原生 Promise 支持) -> yield/generator -> async/await(ES7) 这样一个过程。推荐 async/await + promise 的解决方案，Node.js 如今(8+)也能够用 Util.promisify() 对原先的 callback API 进行封装成 Promise。
13. Axios – 基于 Promise 的 HTTP 客户端，能够运行于浏览器和 Node.js 环境。我主要是在 Node.js 中使用 Axios，替代了 request；浏览器中仍是使用 Fetch API，尚未在浏览器中尝试使用 Axios。
14. Babel + ES6/6+ – 现代 JavaScript 语法和编译器，Babel 可让你使用目前主流浏览器还没有全面支持的新的 JavaScript 语法来编写代码，同时帮你编译成现代浏览器都支持的 ES5 语法，还提供了一些 polyfill （经过 core.js）实现了浏览器不支持的 feature。
15. Ava, Chai.js, Jest, Enzyme, Headless Chrome – 测试框架，runner，断言库，单元测试，组件测试，端对端测试的一些工具。我用 Ava 替代了 Mocha 用来作测试框架和 Runner，Headless Chrome 替代了 PhantomJS 作端对端测试，断言主要用 Chai 里面的 expect 以及 jsonschema 等 Chaijs插件。
16. CSS Modules – CSS 模块化方案，避免全局做用域/冲突，实现显式依赖。暂时没有使用 css-in-js 方案。
17. Data Visualization – 数据可视化和一些图表工具，使用最多的仍是 ECharts，支持各类图表，交互和渲染模式，PC 端移动端通吃，文档很全，最近还成为了 Apache 孵化项目。另外还用过 g2，感受也不错，如今也能看到源码了。g2 是 grammer of graphic 的缩写，算是 g2 的理论基础。本身从基础作起的话，可使用 d3.js，提供了可视化的不少基础模块，基于 SVG。
18. Docker – 嗯，前端应用部署也可使用 docker，基于 Nginx image 或者 Node.js image。我之前写过一个构建 docker 的 shell 脚本： 分享一个自动构建 docker 并导出 image 的 shell 脚本
19. esprima, espree, acorn, babel-parser – 进行 JS/JSX 语法解析和句法分析的 JS 库。espree 是 ESLint 使用的 parser，最初 fork 自 Esprima，后来基于 Acorn。Esprima 是最老牌的 js parser，如今使用 TypeScript 实现；Acorn 使用 ES6，特色是模块化，可是 Esprima 的文档比 Acorn 相对要全一些。babel-parser 的解析器 fork 自 Acorn。
20. Express.js/Koa2/Egg.js/Strongloop – Express 和 Koa 都是 Node.js 的 Web 框架，主要用来实现 API 网关，也能够 serve 一些静态内容。我用过期间最长的是 Express, koa2 也在几个项目中用过，也了解过 loopback, hapi, kraken 等。推荐直接使用 Egg 或者 Strongloop 这种封装了最佳实践的企业级 Node.js 框架，而不是本身基于 express 或者 koa 攒一堆组件。
21. Functional Programming – 函数式编程，这个真的是前端流行… 还有纯函数，pure render, pure component，immutable 等概念。参考：lodash 中的 FP 实现。嫌 immutable.js 过重能够试试 immer。
22. GraphQL/thrift/RESTful API/OpenAPI – 各类接口方案。REST 有一种明日黄花的感受，虽然还在用，可是感受迟早被 GraphQL 等取代，毕竟咱们真的愈来愈不关心数据是如何获取的，而应该关注在 store 如何设计上，专一在领域分析上面。Thrif 支持跨语言 RPC 调用，好比跨 Node.js 和 Java 等。嗯，Thrif 支持自动生成桩代码，什么定接口、JSON、MOCK 就都是浮云了，不须要纠结是否符合 RESTful 规范了。NOTE：Github 提供的 API 以前是 RESTful 的，如今都是 GraphQL 了。
23. Homebrew – MAC 软件包管理工具，brew 至关于 Ubuntu 的 apt，RedHat/CentOS 的 yum。
24. lodash/moment.js – 最经常使用的两个 JS 库了，lodash 是一个现代、高效、模块化的 JS 功能包，moment.js 主要用来处理日期时间相关的操做。都是便可运行在浏览器环境，也能够运行在 Node.js 环境。
25. MongoDb/MySQL/Nginx/Redis – 这些都是经常使用的服务器应用。MongoDB 使用 mongoose，MySQL 使用 sequelizer（都是很是优秀的 Node.js 的 ORM 实现），Nginx 会配置反向代理，URL 重写，缓存设置等便可。
26. npm/yarn – 包管理工具。我倾向于仍是使用 npm，搞清楚 npm 的经常使用 script；搞清楚npm install 时候依赖安装的流程，以及 package-lock 的做用；能维护和发布本身的 npm 包；知道 npx 是干什么的就能够了。
27. Performance – 前端性能，善用 Chrome Devtool 中的各类功能，包括 lighthouse。
28. PostCSS – 自己是一个 CSS 的 parser，最先是从 AutoPrefixer 中抽取出来的，如今已是 CSS 的瑞士军刀了。能够结合 gulp, Webpack 等 task runner 使用，可以解析 CSS/SCSS/Less 等各类语法，提供了 AutoPrefixer（加浏览器前缀）, cssnano（各类严压缩，各类配置）, cssnext（用将来的 CSS 语法规范写当前浏览器支持的代码）, css moudles（模块化）,variables, mix-in（类 SCSS 的预处理支持）等各类丰富插件…没有你还能够本身写（提供插件 boilplate）！
29. React Native/Flutter – 跨端方案。最近关于 RN 是否凉了？如何评价 Flutter？的问答挺多的，我更关注的可能仍是了解他们是如何实现的，以及解决了什么问题吧
30. source maps – 了解 js、css 的 source maps 是如何生成的，相应的规范，在浏览器、生产环境调试、以及异常追踪系统里面的使用。
31. TypeScript – 用 TS 实现的项目愈来愈多了，特别是一些大型项目，流行程度也是愈来愈高
32. WebSocket – 须要长链接、实时通讯的场景
33. WebStorm/VS Code – IDE/编辑器，使用最多的就是用这两种了

另外，我以为你们关注讨论比较多的可是我本身尚未实践过的前端技术还包括：

1. rx.js
2. mobx
3. 小程序 – 包括 wepy, mpvue 等
4. rollup（侧重 JS library 的打包构建）
5. parcel（约定式的打包构建工具）
6. 服务端渲染（SSR）
7. 先后端同构
8. createReactApp – React 项目脚手架工具