購買 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
接下來是構建工具，請期待中篇和下篇。