給客戶端同窗的一份前端學習指南

時間 2019-11-05

標籤客戶端同窗一份前端學習指南简体版

原文原文鏈接

BeesHybrid

隨着ReactNative、Weex與Flutter等跨端框架的發展，大前端的概念也逐漸普及開來，純粹的Native開發相對變得比較少，前端也成爲了客戶端同窗必需要掌握的一門技術，可是客戶端同窗作的是跨端開發，在學習路線上和前端同窗又稍有不一樣，下面從客戶端同窗的視角去討論如何學習前端知識。javascript

這裏爲你們整理了一份跨端技術圖譜，這份圖譜並無去窮盡全部的前端技術，只是從客戶端開發的視角去梳理經常使用的技術點，幫助你們理清脈絡。php

更多關於跨端技術的討論能夠參見BeesHybrid項目。css

開發工具

IDE推薦VSCode，輕量級、插件豐富，經常使用插件以下所示：html

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等基礎知識，這部分的內容建議經過書籍來學習，一點一滴打撈基礎，要有耐心。vue

HTML

書籍：《HTML5權威指南》java

CSS

書籍：《CSS權威指南》、《精通CSS》node

JavaScript

書籍：《JavaScript高級程序設計》、《你不知道的Javascript》react

除了基礎的JavaScript知識，你還須要掌握ES6相關概念，這塊能夠參考ECMAScript 6 入門。webpack

NPM

咱們還須要瞭解NPM相關知識，NPM就像Android裏的Maven倉庫同樣，它是一個JavaScript倉庫。

Node.js的包管理工具。

前端框架

Vue

Vue.js（讀音 /vjuː/，相似於 view 的讀音）是一套構建用戶界面(user interface)的漸進式框架。

React

用於構建用戶界面的 JavaScript 庫。

跨端框架

從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會有更多的玩法。