从路人甲到英雄无敌的前端开发指南

本文翻译整理自FreeCodeCamp的 From Zero to Frontend Hero 系列，归档于现代Web全栈开发与工程架构https://github.com/wx-chevalier/Web-Notes 系列。

从路人甲到英雄无敌的前端开发指南

记得那年，我初学前端，遇见了很多的文章，在浩瀚的知识海洋里我手足无措，不知从何开始。己所不欲，勿施于人。这篇文章就会帮你去遨游前端学习的海洋，主要包含了在我之前的学习过程中整理的一些资源和一些感悟。我打算将整篇文章切分为两部分，第一部分重温HTML与CSS的基本知识，第二部分概括JavaScript、前端框架与设计模式。

HTML与CSS基础

前端的领域里，任何东西都离不开HTML 与 CSS。HTML与CSS基本上控制了你看到的所有东西，HTML用来定义内容而CSS负责样式与布局。

首先从HTML 以及 CSS 开始，这里推荐的是MDN的官方指南。MDN对于重要的HTML与CSS内容进行了详细条理的阐述，除此之外，每一章都是单独的一页，提供了在CodePen与JSFiddle展示的Demo。看完了这些基础教程之后，可以来看看由CodeAcademy提供的tMake a Website系列课程。这个课程只要几个小时就能看完，如果你想要更多的锻炼，可以瞅瞅CSS Diner，这是一个CSS挑战的小游戏。最后，可以看看怎么使用 Google Fonts，参考下CSSTricks出的Basics of Google Font API。

国内用不了Google Fonts的话可以参考下FontAwesome，如果你要用中文字体的话建议参考FontSpider，请自行Github搜索。

Typography– 排版也是个构建界面时候很重要的部分，有时间的话推荐你看看Donny Truong写的Professional Web Typography这本书，它会教你基本上关于排版的所有东西。在学习这些的时候不要太担心自己会忘了，反正记不住。你应该着重于记录这些并且理解HTML和CSS是怎么工作的。

Practicing HTML and CSS Basics

到这里你应该已经明白了HTML与CSS的基本使用，下面我们要学以致用了。这一部分就设计了两个小实验来让你自己动手构建网站与界面。我是把它们形容成实验，所以不要害怕失败。

Experiment 1

第一个实验里，我们用的是CodePen，一个在线的HTML与CSS实验台。同时也提供了实时预览功能，一石二鸟呦。好了，下面我们要看看我们做的界面的原型了，转到 Dribbble吧,这嘎达可全是设计创意啊。我是看上了这个系列：1, 2, 3, 4,以及 5.。我选择了一个移动优先的设计是因为与桌面设计相比更简单一点，不过你也可以自己找一个。

在你选定了设计之后，就可以在CodePen上面开始动手了。你也可以看看其他人设计的Pen: pens on CodePen.另外，别忘了StackOverflow，这可是你的小伙伴呦。如果你最后实现的东西跟设计相去甚远，也不要灰心，不断尝试总会提高的。## Experiment 2经过实验一估计你已经有点自信了，在实验二里面我们将会先借鉴一些大公司的经典站点。有不少站点会用一些CSS框架或者混淆它们的CSS类名，这会让源代码的阅读比较麻烦，这嘎达我列举了几个源代码可读性比较好的：

Dropbox for Business: Try replicating their hero section
AirBnB: Try replicating their footer
PayPal: Try replicating their navigation bar
Invision: Try replicating their signup section at the bottom of the page
Stripe: Try replicating their payments section

再次强调下，实验二的目的并不是让你去重构整个页面，而是知道怎么去分割组件以及人家是怎么做的。如果你没有设计的背景，可能你要好好发掘下你的潜能了。一个优秀的前端开发者要能够辨别好的设计然后完美地重现它们，可以参考下我的这篇文章：develop your design eye.

你可以选择在线编程：CodePen 或者直接本地开发。如果你选择本地做，那你可以使用这个模板项目。我推荐是使用Atom 或者Sublime这样的编辑器。另外，对于Firefox或者Chrome自带的控制台与开发者工具也要好好瞅瞅。

HTML and CSS Best Practices

好了，现在你已经能够用HTML与CSS做一些简单的事情了，下面就要看看所谓的最佳实践了。最佳实践实际上就是一系列的在日常开发中总结出来的约定俗成的规范的集合，来让你更快地开发与构建更高质量的代码。

Semantic Markup:语义标记

HTML与CSS最佳实践中重要的一条就是怎么来写出有语义可读性的标记。好的语义即是你使用了合适的HTML标签与CSS的类名来传达出你想表达的结构含义。譬如*h1标签会告诉我们里面包裹的是一些很重要的标题信息，另一个例子就是footer *标签，会直截了当地跟你说，这里面是包含一些页脚信息。建议你阅读 A Look Into Proper HTML5 Semantics 以及CSSTricks的 What Makes For a Semantic Class Name。

CSS Naming Conventions

下面一个比较重要的事情就是怎么给你的CSS定一个合适的类名。好的命名习惯，譬如语义化的标记，可以更好地传达含义，让代码的可读性与可维护性大大增加。你可以瞅瞅OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?这篇文章里提及的CSS的一些命名的习惯。总体来说，我的建议是跟着你的直觉来确定命名习惯，随着时间的发展你会觉得这样看上去很舒服。如果你要看看大公司，譬如Medium是怎么实践BEM这样的命名规范的，可以阅读 Medium’s CSS is actually pretty f***ing good这篇文章，在这里你会学到怎么在一个快速迭代地情况下也维护你的有效地CSS命名习惯。

CSS Reset

不同的浏览器在譬如margin以及line-height这些小的样式点之间存在着一些不一致性，因此你要学会重置你的CSS环境。MeyerWeb 就是一个常见的重置手段，如果你想深入了解下，推荐你阅读 Create Your Own Simple Reset.css File这篇文章。

Cross Browser Support

跨浏览器支持意味着你的代码要去支持绝大部分的现代浏览器，一些常见的CSS属性，譬如transition需要 vendor prefixes 来运行在不同的浏览器中。你可以在 CSS Vendor Prefixes这篇文章里获取更多的知识。这就意味着你需要花费更多的时间来在不同的浏览器之间进行测试。

CSS Preprocessors and Postprocessors

翻开CSS的历史，自90年代以来，CSS走过了一段漫长而崎岖的道路。整个UI系统变得日益繁复，人们也会去选择使用一些预处理器或者后处理器来管理这种复杂性。CSS的预处理器或者CSS语言的扩展会在无声无息之间提供类似于变量、Mixins以及继承这些特性。最主要的两个CSS的预处理器就是Sass 与 Less。2016年中Sass被越发广泛地使用，著名的响应式框架BootStrap就是从Less迁移到了Sass。另外，很多人谈到SASS的时候也会提到Scss，你可以参考 whats-difference-sass-scss这篇文章。

CSS后处理器则对于手写的CSS文件或者经过预编译的CSS文件进行一些处理，以著名的PostCSS 为例，它有一个插件可以帮你自动地添加一些渲染前缀。当你接触过CSS的预处理与后处理器之后，你会把它们提升到日常伴侣的。不过，过犹不及，像变量和Mixins这些特性不能滥用啊，还是应该在合适的地方使用(译者注：此言非常有理)。还是推荐下Medium’s CSS is actually pretty f***ing good这篇文章。

Grid Systems and Responsiveness

网格系统即是用来水平或者垂直地排布元素的CSS架构。

著名的网格框架有Bootstrap, Skeleton,以及 Foundation，它们提供了用于在布局中进行行列管理的样式表。这些框架用起来很方便，不过我们也是要理解网格的工作原理，推荐看Understanding CSS Grid Systems 以及 Don’t Overthink Grids。网格系统另一个目标就是是你的网站具有响应式特性。响应式意味着你的网站可以根据屏幕的大小来动态调整你网站大小与布局。很多时候这个响应式特性都是基于CSS media queries,即根据不同的屏幕大小选用不同的CSS样式规则。

你可以看一下 Intro to Media Queries来了解更多。另外，因为我们正在进行一场所谓mobile-first变革，推荐你看下An Introduction to Mobile-First Media Queries。

Practicing HTML and CSS Best Practices

恭喜道友，筑基成功，你已经能够了解一些关于HTML与CSS的最佳实践了，下面又到了学以致用的时间。这里的两个实验主要是让你锻炼下编写整洁的代码和保证长期的可读性与可维护性。

Experiment 3

实验3中，你需要选一个你之前自己做的项目并且用上文中提及的最佳实践去重构它们，从而保证你的代码更易读并且更简洁。掌握如何有效地重构代码是前端开发者的一个重要技能。当然，写出高质量的代码并非一蹴而就，而是需要一个长期的迭代过程，CSS Architectures: Refactor Your CSS这篇文章就是一个不错的学习起点。

当你决定要重构代码之前，你要先扪心自问以下几点

你的类名定义是不是模糊不清的，6个月之后你还能否明白你类名的意义。
你的HTML与CSS是否足够语义化，一眼望去是否就能明白你的代码架构与关系意义？
你是否N次的重复使用了相同的颜色代码，别忘了可以用Sass variable。
你的代码是否能够在Safari与Chrome都能正常运行？
能否用像Skeleton这样的网格框架来代替你自己的布局?
你是不是经常使用了!important?

Experiment 4

最后一个实验是一个大杂烩，把前面讲的所有知识都混杂起来。不过要知道的是，上面讲的很多最佳实践在一个草稿或者小型项目里难见分晓，只有在大项目里才能显露峥嵘。因此，最后一个项目我是建议建立一个自己的作品剪辑网站，作为一个前端开发者，个人网站就是自己的电子名片。这里会展示你的作品与项目的积累，也是一个回溯你发展的进程与开发履历的地方。

可以参考Adham Dannaway的文章 My (Simple) Workflow To Design And Develop A Portfolio Website来从零开始。

Stay current

当HTML与CSS已经是小菜一碟，你就算是进入了前端开发者的殿堂，一个不断发生改变的地方。

这里推荐一些博客或者期刊，你可以随时关注：

Learn by example

最后，一般来说，最好的学习方式呢就是跟着例子来，这里再安利一波别人家的公司的样式与命名规范。

Styleguides

Code Conventions

JavaScript Basics

作为目前最流行的跨平台语言之一，JavaScript几乎出现在了所有的地方，但是千里之行始于足下，我们还是要先来理解JavaScript的一些基础知识。

Language

在学习怎么将JavaScript应用到Web开发之前，我们还是要看下JavaScript的基本语法。推荐阅读Mozilla Developer Network的 Language basics crash course。本教程会导引学习譬如基本的变量、流程控制与函数等等语言基础部分。读完了这个，你就可以读MDN的 JavaScript guide中的剩余部分：

同样的，不要死记硬背，你可以在你记不住的时候多看看，当然，最好的是能形成你自己的阅读笔记或者知识体系框架，譬如这个。你应当专注于理解变量初始化、循环以及函数等等关键的知识点，譬如for-in、forEach、for-of的区别，this的N种绑定方法等。如果你实在觉得这货太单调了，那也能直接跳过，以后发现啥东西不理解的时候再滚回来瞅一眼。在实践中学习可能能让你理解地更好。读书读累了，那可以看看视频换个脑子，这个Codecademy提供的 JavaScript系列教程不错，可以随手看也很有意思。另一个，如果你还有时间，可以看看 Eloquent JavaScript 中的相关章节来加深你的记忆。Eloquent JavaScript是个非常优秀的在线的免费的JavaScript学习工具书。## Interactivity

到这一步你应该已经对JavaScript这门语言本身的基础知识有了了解，那么下一步就是学会如何应用到Web项目开发中。你首先需要来瞅几眼文档对象模型(DOM)来理解JavaScript是如何完成与网页的交互的。文档对象模型(DOM)是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。如果要做进一步了解的话推荐阅读CSSTricks出品的What is the DOM，它也提供了简单而直接的对于DOM的介绍。

好像刚才那段对DOM的介绍有点照本宣科，CSS Tricks里是这么说的，关于DOM与HTML的区别。可能你在HTML代码中写了个<table>元素，但是忘了写<tbody>，没关系，浏览器会自动帮你插入<tbody>到DOM中，你可以利用JavaScript来控制该节点并且赋予样式，尽管它从未出现在你的HTML中。

这里提供了一个简单的例子，通过JavaScript是如何改变某个DOM元素里的内容来展示基本的JavaScript与DOM树的交互，首先需要选择到对应DOM节点

var container = document.getElementById(“container”);

然后使用该DOM节点的属性来改变其内容

container.innerHTML = 'New Content!';

这只是一个简单的例子，你还可以用JavaScript DOM API干更多的事情，你可以阅读以下的MDN的教程来进行了解, The Document Object Model.

老生常谈了，不能舍本逐末，还是要专注于理解概念而不是简单地表达式使用，要在心中默问自己几个问题：

DOM是什么鬼?
怎么查询元素?
怎么进行事件监听?
怎么改变DOM节点的属性?

对于常见的JavaScript与DOM之间的交互,可以参考PlainJS出品的 JavaScript Functions and Helpers。这个站点会给你提供很多的例子，譬如如何操作DOM元素样式或者怎么添加键盘事件响应等等。如果你希望再深入一点，同样推荐Eloquent JavaScript中的DOM介绍的章节。

Inspector

在浏览器中，我们可以用开发者工具来调试客户端运行的JavaScript代码，譬如Firefox的Firebug和Chrome的开发者工具，可以帮你审视网页源代码，追踪JavaScript的执行过程和结果，打印出调试语句，还能瞅瞅譬如网络请求、Cookie等等资源。这个 tutorial 是关于如何使用Chrome的开发者工具，如果你是火狐的话，瞅瞅这个 tutorial。

Practicing the basics

上面聊完了基础的语法和交互操作，但是对于不知道有多少个坑的JS而言不过沧海一粟，不过我把一些新的东西放到了最后一节介绍，这边先放松放松，做点小实验玩玩。

Experiment 1

实验1里让我们把目光投向 AirBnB,打开你浏览器的 page inspector,然后点击 console tab。这样你就可以在页面上执行一些JavaScript脚本了，你可以尝试着控制一些界面元素，改个字体样式啥的。

我选用airbnb的网站作为介绍是因为它的CSS类命名比较直接，并且没有被编译器混淆过，当然，你也可以看看百度啊之类的调试。

选择一个拥有唯一类名的header标签，改变其文字内容
移除页面上的随机一个元素
改变任意元素的CSS属性
将一块区域的高度减小250px
改变一个组件，譬如panel的可见性
定义一个叫做*doSomething *的函数，让它弹出 “Hello world”，并且执行它
为某个文本块添加一个点击响应事件

如果你在那边卡住了，别忘了去看看JavaScript Functions and Helpers 指南，我在这边也给一个小小的例子：

var header = document.querySelector(‘.text-branding’)
header.innerText = ‘Boop'

这个实验的主要目的就是回顾下你学到的JavaScript的基本语法以及一些DOM操作的知识。

Experiment 2

第二个实验使用 CodePen-JonathanZWhite编写一个较大较复杂的JavaScript交互项目，会用到一些programmatic logic。这个实验的关注点会综合你在前端攻略-从路人甲到英雄无敌中学到的关于HTML与CSS的知识，这边有几个参考项目：

More JavaScript

看过了基础知识，动手做了几个小实验，下面我们会进入一些更有难度的概念的学习。这边的列举的概念可能之间并么有什么必然的练习，不过我还是把它们放在了一起是因为它们能有助于你通往专家的道路，并且也能有助于你理解下面关于框架部分的讲解。

Language

实际上JavaScript并不是一门浅薄的语言，虽然它只用了短短一周时间就创建出来了，它包含了很多高级的概念与用法(并且因为历史版本问题存在着大量的Polyfill)。这里是列举出了常见的概念，同样地 Eloquent JavaScript也攘括了这些点：

Imperative vs. Declarative(命令式VS声明式)

就如同常见的两种编程方式，JavaScript与DOM交互的方式也分为命令式与声明式。一般来说，声明式编程关注于发生了啥，而命令式则同时关注与咋发生的。

var hero = document.querySelector('.hero')


hero.addEventListener(‘click’, function() {
  var newChild = document.createElement(‘p’)


  newChild.appendChild(document.createTextNode(‘Hello world!’))
  newChild.setAttribute(‘class’, ‘text’)
  newChild.setAttribute(‘data-info’, ‘header’)
  hero.appendChild(newChild)
 })
}

上面这个小例子就是典型的命令式编程，我们手动地查找到某个元素，然后将UI状态存储在DOM中，换言之，就是关注于如何达成某个目标。命令式编程的优势在于很直观，不过缺点也很明显，整个程序的健壮性很差，也不易于扩展。譬如如果某人把那个元素的类名从hero变成了villain，那么事件监听器就永远不会被调用了。声明式编程可以较好地解决这个问题，刚才提到的比较麻烦的元素选择这个动作可以交托给框架或者库区处理，这样就能让开发者专注于发生了啥，这里推荐一波 The State Of JavaScript — A Shift From Imperative To Declarative 与 Three D’s of Web Development #1: Declarative vs. Imperative。本指南并没有一上来先给你看Angular或者React的HelloWord，而是告诉你命令式的做法和声明式的区别在哪，这样你就能更好地理解为啥我们会需要框架。

响应式与声明式也可以看看笔者在我的前端之路里面提到的从以DOM操作为核心到数据流驱动的页面，关注发生了啥本质上就是关注状态与数据，而不是额外的操作。

Ajax

虽然已经有了很多关于Ajax的教程指南，还是建议你阅读下官方的Ajax 介绍。Ajax即是一个允许Web页面通过JavaScript与服务端完成交互的技术，Ajax也是前后端分离的一个基石。

譬如，如果你要去提交一个表单，那么就要先收集下输入的内容然后通过HTTP请求发送到服务端。你在发Twitter的时候，就是Twitter客户端发送HTTP请求到Twitter的服务器，然后根据服务端响应来修正页面状态。推荐阅读下 What is Ajax来深入理解Ajax，如果还是觉得有些疑惑，那可以看看 Explain it like i’m 5, what is Ajax，要是还不够，那就回到eloquentjavascript chapter 关于HTTP的章节吧。早期，笔者是习惯用jQuery的$.ajax来进行Ajax操作，不过现在已经慢慢统一到了标准的 Fetch，你可以看看由 Dan Walsh写的文章来多了解下Fetch，它涵盖了Fetch的工作原理与基本的用法。因为Fetch在部分低版本浏览器上还不能使用，因此我们会选择一些Fetch polyfill，文档是这里。

jQuery

一些jQuery使用技巧 > 也需要你压根用不到jQuery

到这里，咱们一直是用单纯的JavaScript来进行节点操作，怪麻烦的说，而且在不同的浏览器里还有写不同的Polyfill。实际上，已经有了大量的DOM节点的操作库来帮我们简化常用代码，其中最著名的就是jQuery，一个当年前端程序猿的标配。要记住，jQuery是一个典型的命令式的操作库，它编写与前端井喷之前，在那个年代有着无可比拟的先进行。虽然今天，我们应该用像Angular、React这样的声明式编程的框架来进行复杂UI界面的编写，但是仍然是推荐学习下jQuery，毕竟还有大量的项目仍然是基于jQuery的。

jQuery官方提供了一个Learning Center，是不错的基础学习的教程，它会一步一步带你学习重要的概念，譬如animations 与 event handling。如果你想要更多的学习资源，那么可以参考Codecademy的 jQuery course。不过一定要记住，jQuery并不是唯一的进行DOM操作的库，PlainJS 和 You Might Not Need jQuery 也提供了基于原本的JavaScript代码怎么实现常见的jQuery中的操作。

ES5 vs. ES6

在现代的前端开发中，另一个绕不过去的概念就是 ECMAScript。现在主要有两个常用的JavaScript版本，分布是ES5和ES6，它们呢都是JavaScript使用的ECMAScript标准。你可以把它们看做不同版本的JavaScript，ES5是在2009年定稿，然后使用至今。而ES6,也叫作ES2015，是一个新的标准，它提供了很多譬如常量, 类,以及模板字符串等等特性。ES6是兼容ES5的，不像Python3和Python2，并且很多ES6带来的语法特性都是在ES5的封装的基础上，譬如ES6中的类是基于JavaScript prototypal inheritance的syntactical sugar。这里推荐一个不错的ES6的教程ES5, ES6, ES2016, ES.Next: What’s going on with JavaScript versioning 以及Dan Wahlin的Getting Started with ES6 — The Next Version of JavaScript.。看完了这些，你也可以看看ES5和ES6特性的详细列表: ES6 Features以及 Github repository。

More Practice

恭喜你，成功到达存档点，你已经学了不少关于JavaScript的知识了，下面让我们来温习一波。

## Experiment 3 Experiment 3着重于如何利用jQuery进行常见的DOM节点操作，本实验中，我们会以一种更加结构化的方式。我是选择了Flipboard的主页作为范本，你可以参考下Codecademy的Flipboard’s home page and add interactivity with JavaScript 教程。## Experiment 4

按照惯例，实验4呢又把你学过的HTML和CSS的知识跟JavaScript的知识混杂到了一起进行锻炼，这是一个关于钟的实验，各种各样的钟。在动手之前推荐你看看 Decoupling Your HTML, CSS, and JavaScript来了解下JavaScript混入的情况下基本的CSS类名命名规范。同样的，我也准备了一系列的CodePen来当做你的教材：

如果你要更多的例子，请在CodePen上搜索 clock。你可以选择先写基本的HTML与CSS样式然后再加上JavaScript逻辑，也可以先写JavaScript逻辑代码然后再放入到样式中。你可以选择用jQuery，不过尽量还是用纯粹的JavaScript代码吧。

JavaScript Frameworks

小怪清完了，下面开始刷BOSS了，拿起你的剑吧勇士，美丽的公主就在前方。我们在这一章节会开始介绍常用的JavaScript框架。我们不提倡重复造轮子，但是一定要理解轮子并且能给它上上油或者换换螺丝钉，这些JavaScript框架可以帮你更好地组织你的代码。它们为前端开发者提供了可复用的解决方案，就好像所谓的设计模式一样，它可以用来解决状态管理、路由以及性能优化等等，正是因为有了这些框架，我们才能更好地构建web apps。贪多嚼不烂，我不打算介绍所有的JavaScript框架，不过还是列个目录下来，这些框架包括但不限于 Angular, React + Flux, Ember, Aurelia,Vue,以及 Meteor。你并不需要学习所有的框架，选择一个然后深入，最合适自己的才是最好的。

便如译者在文首所说，我们并不能盲目地追赶框架，而是要理解框架背后的思想与原则。另一个在译者自己的实践中，会尽可能的基于ES6进行抽象，这样保证了即使换框架也能有很好地兼容于复用。

Architectural Patterns

在学习框架之前，首先要了解下常用的架构模式：

这些模式可以用来创建清晰的多层应用关注分离。关注分离是一个设计原则，即是讲一个巨石型应用切分到不同的领域专注层，譬如前面我们都是在HTML中保留应用状态，而你可以使用一个JavaScript对象，或者说是Model层来存储应用状态。如果你想要了解地更多，可以先看下Chrome Developers里对于MVC的讲解，然后阅读Understanding MVC And MVP (For JavaScript And Backbone Developers)。阅读这篇文章的时候不要在意有没有学过Backbone，只要关注MVC与MVP比较的部分。Addy Osman也写了另一篇关于MVVM的文章Understanding MVVM — A Guide For JavaScript Developers。如果你想了解MVC的源起，可以参考Martin Fowler的 GUI Architectures。最后，阅读这篇JavaScript MV* Patterns，Learning JavaScript Design Patterns也是个很不错的在线免费电子书。

Design Patterns

JavaScript的框架也并没有重复造轮子，很多还是基于已有的设计模式，你可以认为设计模式是在软件开发中用于解决通用问题的可复用的方法。尽管理解设计模式并不是学习一个框架的前提，不过我还是建议你可以先了解一些：

理解这些设计模式不仅会让你变成一个更好地设计师，也能有助于你更好地理解这些框架。

AngularJS

AngularJS是一个JavaScript MVC框架，不过有时候也是一个 MVVM框架。它由在2010年由Google进行维护并且迅速在社区刮起了一波浪潮。

Angular是一个典型的声明式框架，这里推荐一个阅读，可以帮你理解命令式编程到声明式编程的转变: How is AngularJS different from jQuery。如果你希望了解更多关于Angular的知识，可以参考Angulardocumentation。还有一个叫做 Angular Cat 的渐进教程。angular2-education 是一个由Tim Jacobi.整理的完整的关于angular2的教程，另外，还有John Papa编写的最佳实践指南。

React + Flux

Angular帮助开发者解决了很多前端系统构建中遇到的问题，不过Angular 1存在着极大的性能问题。今年才出的Angular 2也是组件化思维，不过太过庞大。另一个常用的小而美的工具就是 React，专注于用户交互的构建。React可以认为是MVC层中的View层，React只是一个Library，通常与 Flux或者Redux一起结合起来使用。

Facebook最早设计React与Flux是为了解决MVC中的一些缺陷与扩展问题，可以参考著名的Hacker Way: Rethinking Web App Development at Facebook演讲，这里介绍了Flux的起源。首先，我们来学习React，推荐是直接看React官方文档，然后看看React.js Introduction For People Who Know Just Enough jQuery To Get By 来帮你从jQuery思维转移到React思维。

可以参照译者的React Introduction来获取更多关于React参考资料的东东

在你对React有了基本的了解之后，下面就可以开始学习Flux了，同样的首先推荐官方Flux文档。然后你可以看看Awesome React,这里包含了很多你可以慢慢咀嚼的内容。

Practicing with Frameworks

又到了实践环节了，现在你已经对于JavaScript框架与架构模式有了基本的了解，是时候带一波节奏了。在这两个实验中，注意体会架构设计的理念，首先要保证 DRY,然后有一个清晰的分层概念,最后要注意单一职责原则.

Experiment 5

实验5是不用框架重构著名的TodoMVC，换言之，就是用最基础的JavaScript代码来实现一个TodoMVC。本实验的目的就是为了向你展示在没有框架介入的情况下怎么构建一个完整的MVC应用

你可以参考 TodoMVC，第一步就是创建一个新的本地项目然后建立三个基本的组件，你可以参考Github repository这里的完整代码。如果你觉得现在的自己能力还不足以Hold住整个项目，表担心，先把它们下载下来，然后慢慢实践。

Experiment 6

Experiment 6就是跟着Scotch.io的教程来实现一个下面这样的站点:

Build an Etsy Clone with Angular and Stamplay 会教你怎么基于Angular来构建一个网站，提供APIs并且在一个大型的项目中进行架构组织。学完了这些之后，你要能理解以下这些问题：

啥是web app?
怎么用Angular实践MVC/MVVM?
API是啥，肿么用?
怎么组织与管理一个大型的CodeBase?
将一个UI切分为声明式组件的好处在哪?

如果这个教程还不够，那还可以看看Build a Real-Time Status Update App with AngularJS & Firebase。

Experiment 7

第7个实验是将React与Flux综合使用，即利用React来构建一个TODOMVC。你可以参考Facebook’s Flux documentation site这个教程，它会教你一步一步地从零开始构建界面然后将Flux应用到整个Web项目中。通过了第一关，就可以移步到怎么利用React、Redux与Immutable.js构建一个TodoMVC 以及利用Flux与React构建一个微博客。

Stay current

就像前端一样，JavaScript也永远不会停下前进的步伐。

下面列举了一系列博客，多读读，能够随时了解最新的发展与消息：

Learn by example

Styleguides

Codebases

最近更新于0001-01-01

从路人甲到英雄无敌的前端开发指南

从路人甲到英雄无敌的前端开发指南

HTML与CSS基础

Practicing HTML and CSS Basics

Experiment 1

HTML and CSS Best Practices

Semantic Markup:语义标记

CSS Naming Conventions

CSS Reset

Cross Browser Support

CSS Preprocessors and Postprocessors

Grid Systems and Responsiveness

Practicing HTML and CSS Best Practices

Experiment 3

Experiment 4

Stay current

Learn by example

Styleguides

Code Conventions

Further Reading

JavaScript Basics

Language

Inspector

Practicing the basics

Experiment 1

Experiment 2

More JavaScript

Language

Imperative vs. Declarative(命令式VS声明式)

Ajax

jQuery

ES5 vs. ES6

More Practice

JavaScript Frameworks

Architectural Patterns

Design Patterns

AngularJS

React + Flux

Practicing with Frameworks

Experiment 5

Experiment 6

Experiment 7

Stay current

Learn by example

Styleguides

Codebases