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

蘇策發表於2019-03-04
客戶端前端

BeesX BeesHybrid

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

這裡為大家整理了一份跨端技術圖譜，這份圖譜並沒有去窮盡所有的前端技術，只是從客戶端開發的視角去梳理常用的技術點，幫助大家理清脈絡。

更多關於跨端技術的討論可以參見BeesHybrid專案。

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

開發工具

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 庫。

跨端框架

從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。

事實上，小程式承載的更多是業務形態，我們從業務開發角度對小程式的前端架構做個總結。

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

微信小程式

小程式是一種新的開放能力，開發者可以快速地開發一個小程式。小程式可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。

支付寶小程式

支付寶小程式是一種全新的開放模式，它執行在支付寶客戶端，可以被便捷地獲取和傳播，為終端使用者提供更優的使用者體驗.

快應用

快應用是基於手機硬體平臺的新型應用形態；標準是由主流手機廠商組成的快應用聯盟聯合制定；快應用標準的誕生將在研發介面、能力接入、開發者服務等層面建設標準平臺；以平臺化的生態模式對個人開發者和企業開發者全品類開放。

淘寶小程式

模組化

  • commonjs
  • AMD(CMD)
  • UMD
  • ES Module

工作管理員

  • npm scripts
  • grunt
  • gulp

模組打包工具

  • r.js
  • webpack
  • rollup
  • browserify

CSS前處理器

  • Sass
  • Less
  • Stylus
  • Postcss

靜態檢查器

  • flow
  • typescript

測試工具

  • mocha
  • jasmine
  • jest
  • ava

程式碼檢測工具

  • eslint
  • jslint

附錄

資源

技術棧

前端技術從底層到頂層一共可以分為20個，如下所示：

  • 瀏覽器
  • 渲染引擎、JavaScript引擎
  • HTML/JavaScript/CSS三支柱
  • 編輯器
  • 編譯任務
  • 編譯工具
  • 打包、除錯、質量
  • 測試
  • JS基礎類庫
  • JS類庫
  • UI框架
  • CSS前處理器
  • 模板
  • 現代化
  • 安全/模式
  • 中間語言
  • 跨平臺解決方案

圖片來源

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

相關文章