給客戶端同學的一份前端學習指南
隨著ReactNative、Weex與Flutter等跨端框架的發展，大前端的概念也逐漸普及開來，純粹的Native開發相對變得比較少，前端也成為了客戶端同學必須要掌握的一門技術，但是客戶端同學做的是跨端開發，在學習路線上和前端同學又稍有不同，下面從客戶端同學的視角去討論如何學習前端知識。
這裡為大家整理了一份跨端技術圖譜，這份圖譜並沒有去窮盡所有的前端技術，只是從客戶端開發的視角去梳理常用的技術點，幫助大家理清脈絡。
更多關於跨端技術的討論可以參見 ofollow,noindex">BeesFrontEnd 專案。
開發工具
IDE推薦VSCode，輕量級、外掛豐富，常用外掛如下所示：
- Terminal：命令列工具。
- Git History：檢視單行提交記錄和檔案提交記錄。
- Git Project Manager：Git專案管理工具。
- Git Len：解決日常開發協作痛點，推薦安裝。
- vscode-icons：讓你的檔案都帶上好看的圖示。
- Path Intellisense：檔案路徑自動補全。
- Auto Close Tag：自動閉合HTML標籤。
- Baracket Pair Colorizer：成對括號分顏色顯示，方便區分。
- Settings Sync：同步你的配置和擴充套件，參見同步教程。
- VS Color Picker：取色器。
- ES7 React/Redux/GraphQL/React-Native snippets：React程式碼提示。
- Vue 2 Snippets：Vue2程式碼提示。
更多關於VSCode的使用技巧可以參見強大的VSCode。
前端基礎
對於客戶端同學來說，要想上手React、Vue這些框架，需要先掌握HTML、CSS與JavaScript等基礎知識，這部分的內容建議通過書籍來學習 ，一點一滴打撈基礎，要有耐心。
HTML
書籍：《HTML5權威指南》
CSS
書籍：《CSS權威指南》、《精通CSS》
JavaScript
書籍：《JavaScript高階程式設計》、《你不知道的Javascript》
除了基礎的JavaScript知識，你還需要掌握ES6相關概念，這塊可以參考ECMAScript 6 入門。
NPM
我們還需要了解NPM相關知識，NPM就像Android裡的Maven倉庫一樣，它是一個JavaScript倉庫。
Node.js的包管理工具。
前端框架
Vue
Vue.js（讀音 /vjuː/，類似於 view 的讀音）是一套構建使用者介面(user interface)的漸進式框架。
React
用於構建使用者介面的 JavaScript 庫。
- 官方文件
- React.js 小書
- React入門教程
- 揭祕react生態體系
- [譯] 從1.8萬篇文章中脫穎而出45個最棒的 React.js 學習指南（2018版）
- [譯] State of Vue.js report 2017 中文版
跨端框架
從PC時代開始，Native與Web就一直是相互競爭、相互融合的關係，我們先來簡單看看它們之間的優勢與劣勢。
| Native | Web | |
|---|---|---|
| 效能 | 高 | 低 |
| 使用者體驗 | 好 | 差 |
| 功能 | 可以充分利用平臺自身的能力 | 只有使用W3C的標準能力 |
| 迭代 | 週期長，需要釋出 | 週期短，隨時釋出 |
| 維護成本 | 高 | 低 |
| 跨平臺 | 差 | 好 |
| 執行緒 | 多執行緒 | 單執行緒 |
可以看出，Native與Web之間各有優劣，在移動網際網路發展的過程中，開發者們也一直在尋找融合雙方優勢的方案，經歷了以下四個階段的發展：
- Hybrid 1.0：為Web頁面提供Naive API的能力，也就是用JS Bridge去增強系統的WebView的功能。缺點是：體驗差，如滾動、動畫與互動等，穩定性差，如列表記憶體佔用大等。
- Hybrid 2.0：將Native元件覆蓋在WebView之上，例如微信的cover-view，提供更多的擴充套件能力。缺點是：使用者體驗融合性不好，如層級、事件、佈局等。
- Hybrid 3.0：前端DSL開發，Native渲染，例如React Native與Weex。缺點：對W3C標準能力支援有限，存在平臺差異，三端並不完全統一。
- Hybrid 4.0：百花齊放的小程式、快應用、輕應用方案，這個容器也有兩種：WebView容器與類ReatNative容器。技術方案上並沒有太多的花樣，這種方案的興起由微信帶起，本質上 還是源於各大公司對於流量入口和生態的競爭。後續我們會著重聊一下。
注：值得一提的是，同層渲染現在已經逐漸在Android和iOS平臺的WebView上實現，未來Hybrid會有更多的玩法。
ReactNative
使用JavaScript和React編寫原生移動應用.
Weex
Weex是一個基於現代web開發經驗構建高效能移動應用程式的框架。
Flutter
Flutter允許您通過一個程式碼庫在iOS和Android上構建漂亮的本地應用程式。
小程式
小程式也屬於跨端框架的範疇，但它與Weex這些框架不同，比起像ReactNative這種技術創新，它更像是一種商業創新，它源於各大巨頭對於流量與入口的競爭。詳情可參見 2018年上半年小程式生態白皮書 。
我們先就他們的技術方案做個簡單的對比，如下所示：
- 微信小程式：基於WebView渲染，自建的DSL，與Vue 1.0有點像，不是很好用，後續又出了WePY、mpVue、Taro等DSL。
- 支付寶小程式：基於WebView與ReactNative兩套容器渲染，自建了一套類React的DSL。
- 快應用：基於Native進行渲染，自己定義了一套類Vue的DSL。
- 淘寶輕應用：基於WebView與Weex兩套容器渲染，自建了一套類Vue的DSL。
事實上，小程式承載的更多是業務形態，我們從業務開發角度對小程式的前端架構做個總結。
