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
网友评论