WEB前端该学些什么？

Web开发这几年发生巨大的变化。从简单网页脚本开发语言到开始染指后端服务器开发，javascript生态圈群雄逐鹿，各种库插件多如牛毛，几乎无所不能，大有一统江湖的意味。

大牛Jose Aguinaga分享的在2016年如何学习JavaScript值得阅读理解https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.5zzf9ydlm，翻译版本（https://segmentfault.com/a/1190000007083024），本文将从本人的理解范畴，试图说明一些逐步深入学习JavaScript的学习路线的方案，当然如果你对html/css/javacript基础知识不够了解，那么你是路人甲，不属于本文要面对的范畴。本文将会涉及以下几个方面：

• Web应用开发的历史

• 一个现代的JavaScript Web应用会包含哪些部分

• 为什么不推荐使用jQuery？

• 为什么React是个不错的选择

• 为什么并不需要你首先学透JavaScript？

• 如何学习ES6语法

• 缘何与如何学习Redux?

• GraphQL到底解决了什么问题？

• 下一步又会走向何方

1 Web应用开发的历史

讲述javascript为什么要说web应用开发的历史呢？因为现代web开发，是基于移动端开发之后逐渐发展起来的。我们开始关程序叫App，有些网站称自己为Web App。08年谷歌发布了Chrome浏览器，几年之后Chrome成为了最为流行的浏览器之一。Chrome团队花费了大量精力在JavaScript上面，Web App也使用了大量的js代码，由于js历史的原因，它并不支持类/对象/模块这些现代编程语言所具有的优秀特征，这对于构建大型的复杂的Web App应用是个不小的挑战。于是就有了第三方机构和组织祭出了commonjs或amd大旗，前者是服务端规范，后者是前端规范。当然其他公司也在JavaScript投入了大量精力，现在它可以支持类和模块加载，如TypeScript，coffeeScript，flow等等可以编译为JavaScript运行，当然，未来随着浏览器对原生es6规范的支持，这些第三方语言编译的权重将会下降。

还记得 Swing、SWT 以及 wxWidget 这些东西吗？我们在浏览器上重新发明了它们，于是出现了一些新的 UI 编程模型，它们主要集中在组件化上。

我们必须想办法设计、构建和测试响应式 App，同时还要保持它们不会太臃肿，虽然人们人手一部手机，但流量并不宽裕。

于是组件框架出现了，谷歌的 Angular、Facebook 的 React 和来自开源社区的 Vue。

2007 年，Facebook 开始在美国雄起，到现在已经成为一个巨头公司。除了拥有大量的用户，Facebook 也是世界上拥有最多代码的公司之一。

Facebook 的开发团队开发了很多代码，并将它们开源。他们也有自己的开发者大会，叫作 F8。大部分巨头公司都有自己的开发者大会。

新的 App 需要越来越复杂的 UI 布局，所以 CSS 也需要有所变化。我们不再使用 table 元素来布局图像，iframe 元素也差不多销声匿迹了。我们建立了新的标准，比如 CSS Floats、Flexbox 和 CSS Grid。

人们不断地对这些标准进行迭代，开发出了各种框架，比如 Bootstrap、Foundation 等。我们还发明了一些语言，可以将它们编译成 CSS。它们弥补了 CSS 的一些不足，如变量和模块化，但还不够完美。

如果你感到疑惑，这是正常的，如果对这两年的js生态圈不够疑惑，说明，你离它太远，毕竟变化快，技术更新频繁已经是生态圈的常态了。

来，感受一下大前端。

2 一个现代的Web前端会包含哪些部分

1) css命令方案

最受欢迎的选择是 BEM ，其次是 CSS模块（CSS Modules），OOCSS和 SMACSS方案，这几种方案对css开发人员具有规范开发，指导开发的意义

2) 库和框架

js已经不是当年那个单纯的网页脚本语言了，越来越多的语言功能给赋给了js，它也能做越来越多的事情，大有统一前后端的趋势，同时由于诸如nodejs等后端平台的出现，单线程、异步I/O、事件驱动的高效方式，在一定程度上可以替代后端某些语言在多任务处理，多线程处理的优势。

当然除了jquery，还有越来越多的库被加入到当前的js的开发基础阵营之中，下图展示了多个正在前端开发中越来越重要库的占比

3) 前端打包

随着前端开发的复杂度越来越高，通过人工管理各个资源文件之间的依赖显得很不合时宜，于是出现了众多打包工具。根据Ashley Nolan 的前端问卷调查，得出来如下效果：

Gulp是最大的赢家，接近 44％ 的开发人员在使用。然而，更简单的 npm scripts 脚本在2016年增加了 23％ ，达到 26％ 。

愚人码头注：可以查看两篇文章：为什么我放弃 Gulp 和 Grunt 而使用 npm Scripts 和 为什么使用 npm Scripts 构建项目

Grunt 已经失去了优势，跌落到 12％。另外，9％ 的受访者选择了不使用任务运行器。

那些使用模块打包工具在2016年增加了 20％，达到 68％ 。 Webpack 是最为流行，占 31％ ，Browserify 为 11％ ，RequireJS 为 8％ 。

我很惊讶，“其他”模块打包工具占不到 4％，当有几个任务运行器插件可以更简单的管理依赖关系，例如 gulp-deporder 。也许因为每个开发人员都在使用JavaScript 转译器

这其中不包括es5/es6/coffescript/TypeScript等其他变异版本的js所使用的工具和特定方法，这些技术又会是另一个话题

4) 该学一些什么

实际上将前端工程分离出来成为一个独立的岗位，也是近年来的事情，在这之前应该称为大前端，因为不是说会写js，会切页面，会使用样式表就可以完成工作，毕竟之前的网页效果不像现在复杂多样，功能也没有现在纷繁复杂。目前来看，前后端分离对很多工作的细分确实提高了不小的工作效率，前端只负责页面，后台负责数据输出。这对协同工作带来的好处可能要多于从业者本身的受益。

如果你是一个想要继续前进的并且不想冒充UI工程师的前端开发者，那么你需要掌握的知识体系应该是大前端的知识体系。前端工程师，假使你不懂一些后端的知识，你永远写不出来高性能可扩展的前端代码。举个例子来说，如果你只会使用ajax请求数据，而不懂得ajax发送后数据是如何被传递出去的，是如何被加工的，是如何控制不同的数据填充的，是如何防范安全问题的等等，搞不明白这么些问题，应付简单业务尚可，处理高级应用，大规模任务将显得捉襟见肘。

那么我们该如何学习呢？学习什么技术呢？现在的前端已日臻复杂，下图是目前前端高阶阶段需要学习和掌握的一些方向，仅供参考，勿要模仿。大前端前端基础架构，如下图所示，

知识点太多，每一个展开说，将是无法完尽的篇幅，本文仅仅说一部分概览，详情请自行琢磨。

5) 前端技术概览

o 浏览器内核

♣ IE6/7/8/9/10/11 (Trident) / Edge (EdgeHTML)

♣ Firefox (Gecko)

♣ Chrome/Chromium (Blink)

♣ Safari (WebKit)

♣ Opera (Blink)

o 编程语言

♣ JavaScript/Node.js

♣ CoffeeScript

♣ TypeScript

o 页面布局编译

♣ HTML/HTML5

♣ CSS/CSS3

♣ Sass/LESS/Stylus/postCSS

♣ PhotoShop/Paint.net/Fireworks/GIMP/Sketch

o 开发工具

♣ 编辑器和IDE

♣ VIM/Sublime Text2

♣ Notepad++/EditPlus

♣ WebStorm

♣ Emacs EmacsWiki

♣ Brackets

♣ Atom

♣ Lime Text

♣ Light Table

♣ Codebox

♣ TextMate

♣ Neovim

♣ Komodo IDE / Edit

♣ Eclipse

♣ Visual Studio

♣ Visual Studio Code

♣ NetBeans

♣ Cloud9 IDE

♣ HBuilder

♣ Nuclide

♣ 调试工具

♣ Firebug/Firecookie

♣ YSlow

♣ IEDeveloperToolbar/IETester

♣ Fiddler

♣ Chrome Dev Tools

♣ Dragonfly

♣ DebugBar

♣ Venkman

♣ Charles

♣ 版本管理

♣ Git/SVN/Mercurial

♣ Github/GitLab/Bitbucket/Gitorious/GNU Savannah/Launchpad/SourceForge/TeamForge

o 代码质量

♣ Coding style

♣ JSLint/JSHint/jscs/ESLint

♣ CSSLint

♣ Markup Validation Service

♣ HTML Validators

♣ 单元测试

♣ QUnit/Jasmine

♣ Mocha/Should/Chai/Expect

♣ Unit JS

♣ 自动化测试

♣ WebDriver/Protractor/Karma Runner/Sahi

♣ phantomjs

♣ SourceLabs/BrowserStack

o 前端库/框架

♣ jQuery/Underscore/Mootools/Prototype.js

♣ YUI3/Dojo/ExtJS/KISSY

♣ Backbone/KnockoutJS/Emberjs

♣ AngularJS

♣ Batarang

♣ Bootstrap

♣ Semantic UI

♣ Juice UI

♣ Web Atoms

♣ Polymer

♣ Dhtmlx

♣ qooxdoo

♣ React

♣ Brick

♣ vue.js

o 前端标准/规范

♣ HTTP/1.1: RFCs 7230-7235

♣ HTTP/2

♣ ECMAScript3/5

♣ ECMAScript6

♣ W3C: DOM/BOM/XHTML/XML/JSON/JSONP/...

♣ CommonJS Modules/AMD

♣ HTML5/CSS3

♣ Semantic Web

♣ MicroData

♣ RDFa

♣ Web Accessibility

♣ WCAG

♣ Role Attribute

♣ WAI-ARIA

o 性能

♣ JSPerf

♣ YSlow 35 rules

♣ PageSpeed

♣ HTTPWatch

♣ DynaTrace's Ajax

♣ 高性能JavaScript

o SEO

o 编程知识储备

♣ 数据结构

♣ OOP/AOP

♣ 原型链/作用域链

♣ 闭包

♣ 编程范型

♣ 设计模式

♣ Javascript Tips

o 部署流程

♣ 压缩合并

♣ YUI Compressor

♣ Google Clousure Complier

♣ UglifyJS

♣ CleanCSS

♣ 文档输出

♣ JSDoc

♣ Dox/Doxmate/Grunt-Doxmate

♣ 项目构建工具

♣ make/Ant

♣ GYP

♣ Grunt

♣ Gulp

♣ Yeoman

♣ FIS

♣ Mod

♣ ES6＋ 转换器

♣ Traceur

♣ Babel

o 代码组织

♣ 类库模块化

♣ CommonJS/AMD

♣ YUI3模块

♣ webpack

♣ 业务逻辑模块化

♣ bower/component

♣ 文件加载

♣ LABjs

♣ SeaJS/Require.js

♣ 模块化预处理器

♣ Browserify

o 安全

♣ CSRF/XSS

♣ CSP

♣ Same-origin policy

♣ ADsafe/Caja/Sandbox

o 移动Web

♣ HTML5/CSS3

♣ 响应式网页设计

♣ Zeptojs/iScroll

♣ V5/Sencha Touch

♣ PhoneGap/Cordova

♣ jQuery Mobile

♣ W3C Mobile Web Initiative

♣ W3C mobileOK Checker

♣ Open Mobile Alliance

♣ React Native

♣ ionic

o 前沿技术社区/会议

♣ D2/WebRebuild

♣ NodeParty/W3CTech/HTML5梦工厂

♣ JSConf/沪JS(JSConf.cn)

♣ QCon/Velocity/SDCC

♣ JSConf/NodeConf

♣ CSSConf

♣ YDN/YUIConf

♣ HybridApp

♣ WHATWG

♣ MDN

♣ codepen

♣ w3cplus

♣ CNode

o 计算机知识储备

♣ 编译原理

♣ 计算机网络

♣ 操作系统

♣ 算法原理

♣ 软件工程/软件测试原理

o 软技能

♣ 知识管理/总结分享

♣ 沟通技巧/团队协作

♣ 需求管理/PM

♣ 交互设计/可用性/可访问性知识

o 可视化

♣ SVG/Canvas/VML

♣ SVG: D3/Raphaël/Snap.svg/DataV

♣ Canvas: CreateJS/KineticJS

♣ WebGL/Three.JS