购买 Live 请点 这里
以下都是我自己的理解，不是原话。
本文只列举和解释名词，想听大神的观点还是要买 Live 。
这篇文章主要是给两类人看：
买了 Live 但是没有听清里面的一些英文的人。
想买 Live，但是怕买了 Live 听不懂的人。
UDP
开场有一个 UDP 笑话。
很多前端听不懂这个笑话。这个笑话跟另一个笑话很像：
A:「我给大家讲一个笑话：从前有个太监。」
B: 下面呢？
A: 「下面没了」
B: 哈哈
那么这个 UDP 的笑话是什么意思？随便搜一下你就知道：因为UDP没有TCP那些可靠的机制，在数据传递时，如果网络质量不好，就会很容易丢包。
所以这个笑话是关于丢包的……
我这么严肃地解释笑话是不是很尴尬……
框架挑选
不谈场景论好坏都是耍流氓。
你要做的应该是该用 Vue 的时候用 Vue，该用 React 的时候用 React，该用 jQuery 的时候用 jQuery。
你一个都没学会？算我没说。
至于如何挑选框架，只有老司机会选，你首先要变成一个老司机。
组件
组件已经是各种框架的共识，你必须知道什么是组件。组件的定义就是……一个很抽象的东西。我的理解是变形金刚合体的时候，有人组成头部，有人组成裆部，这些人就是组件了。
每个组件可以由其他小组件组成。比如裆部可以分成柱状组件和两球状组件。
至于组件的严格定义，并没有。
组件的状态（state）
一个组件可以有多种形态，比如上面的柱状组件可以是硬直状态，也可以是疲软状态。（原谅我飙车了）。
组件的分类
展示型组件、接入型组件（如 container）、交互型组件（如 form）、功能型组件（如 router、transition）
JSX V.S. 模板
Tutorial: JSX
JavaScript Templating
JSX 适合逻辑多的场景，模板适合逻辑少的场景。
Colocation
把该放在一起的东西放在一起。
跟几年前的 HTML、CSS、JS 分离对应。
Separation Concerns
前端的关注点分离就是 HTML、CSS、JS 分离。
Declarative Programming 声明式编程
你说有啥，就有啥。
Imperative programming 命令式编程
你让我干啥，我就干啥。
意大利面条式编程
你觉得谁的代码烂，你就可以说谁的代码是意大利面条。
view = render(state)
给我一个 state（数据），我就造出一个 view（DOM）。
Virtual DOM
计算机科学领域的任何问题，都可以通过添加一个中间层来解决。
Virtual DOM 就是应用与 DOM API 之间的中间层。
Manual DOM manipulation is messy and keeping track of the previous DOM state is hard. A solution to this problem is to write your code as if you were recreating the entire DOM whenever state changes. Of course, if you actually recreated the entire DOM every time your application state changed, your app would be very slow and your input fields would lose focus.
virtual-dom is a collection of modules designed to provide a declarative way of representing the DOM for your app. So instead of updating the DOM when your application state changes, you simply create a virtual tree or VTree, which looks like the DOM state that you want. virtual-dom will then figure out how to make the DOM look like this efficiently without recreating all of the DOM nodes.
自己写一个 Virtual DOM 库并不难。
svelte
Change detection 变化侦测
监听一个对象，当对象变化时，你可以做一些事情。
详情看 Slides
- pull 方式：setState 和脏检查都是 pull，就是开发者告诉浏览器，数据变化了。
- push 方式：Vue 和 Rx.js 的方式。
Pure Component
一个 Pure Component 就是一个无副作用的函数。
onclick="clickHandler" 的问题
clickHandler 是全局变量，这很烦人。
全局变量借祸害。
状态管理
总得来说前端对状态管理还没有达成共识，但又没有特别大的分歧。
可以了解一下 Flux、Redux、MobX、Vuex 和 Rx.js（反正名字里都有一个 x）。
状态管理主要涉及 event、state 和 view 的变化的管理，主要分歧在于 event 与 state 变化的管理方式，各种方案皆有优劣，而且都没有对异步更新给出明确的范式。
Paradigm
由汤玛斯·孔恩提出。在1960年之后是指在科学领域和知识论行文中的思维的方式。
就是思维方式的意思。
Immutable
Rx.js
Cycle.js
Elm
路由
路由就是映射。给路由一个 url，路由就可以还你一个页面
Ember.js
Ember.js 是一个老牌的 JS 框架。
SPA
Hash 模式
History 模式
钩子
What is meant by the term “hook” in programming?
懒加载
Ionic
ionicframework.com 一个让你用 JS 写 App 的框架。
解耦
解耦就是不相关的东西不要放在一起。
耦合性)
耦合性低不一定就是好的，反例之一就是 dependency hell
BEM CSS
一种 CSS 命名方式，很容易被新手玩坏（不遵守规则）。
CSS modules
CSS Modules，新手也玩不坏。
CSS-in-JS
不写 CSS，写 JS，已经有几十种方案了，选择恐惧症的死讯。
Critical CSS
Run time
接下来是构建工具，请期待中篇和下篇。
