《從零構建前後分離的web專案》準備 - 前端了解過關了嗎?

莊文達發表於2018-09-04

前端基礎架構和硬核介紹

《從零構建前後分離的web專案》準備 - 前端了解過關了嗎?

技術棧的選擇

首先我們構建前端架構需要對前端生態圈有一切瞭解,並且最好帶有一定的技術前瞻性,好的技術架構可能日後會方便的擴充套件,減少重構的次數,即使重構也不需要大動干戈,我通常選型技術棧會參考以下三點:

一、提出自身業務的需求

  • SEO 是否非常重要?
  • 主要面向:移動端還是 pc 端?
  • 是否有開發 app 的規劃?

有了這樣的問題我們可以帶著問題去重點選型一些這寫問題技術方案比較成熟的技術棧。

二、自身是否成熟,文件是否友好

這裡舉一個以前開發過程中實際遇到的,當時為了優化使用者體驗,節省開發效率 選型了一款 MVVM 輕量框架,可惜當時沒有決定權,CTO 選型了 avalon

當時之所以沒有選擇 backbone ,主要是因為沒有成熟的中文文件,考慮到團隊的流動性和上手性暫時沒做考慮,最終選擇了 司徒正美的 avalon 當時來說還是比較前衛的,也有一些以去哪網為首的大公司都在用。我們當時用的時候 avalon2 剛出不久,直接用的 2.0,使用過程也出現了一點問題:文件離散,這一塊那一塊,存在後置性,生態少,擴充套件價效比不高 ,有時候遇到匪夷所思的 bug 尋找原因翻了幾遍 demo 、文件 可能會找到答案,沒有重點標識。當然就當時來說確實是給我們提升了部分開發效率,但是我可能當時更偏向 Angular 或 vue 的。因為他們有無以倫比的生態圈和各種問題的技術方案以以及完善的開發者文件,值得一提的是 avalon 的作者是兼職維護的,如果全棧運營的話,我相信遠比現在更好,看一看 avalon 的原始碼也會對自己有不少的提升。對於生產的技術選型要更加謹慎。

三、瞭解其生態系統

上文提到了生態系統,以我比較常用的 vue 來舉例,vue 發展至今僅官方為我們提供了以 vuex、 vue-router、 vue-loader、 vue-cli、 vuepress、 vue-devtools、 vue-ssr 為首的 89 個開源專案,包括無數的 vue 相關的 UI 庫,vue 外掛 甚至是近兩年淘寶提供的 Hybridweex 的支援

截止今天 github 開源的 與 vue 相關的專案多達 167,752 個,與 angular 相關的多達 416,811 個,與 react 相關的 多達 594,272 個。

統計時間 2018-09-01

我想有了這樣的生態支援,完全可以滿足我們中小專案的 95% 以上的需求,至於比較哪個更強是沒有意義的 。

因為比較熟悉讓我斗膽私自選擇 vue 作為我們的 SPA 主架構

四、畫出我們期望的前端基礎架構模型

因為我們上一章選型了 Vue,如果只考慮前端我們最初的想法:技術棧大概是這樣的:

《從零構建前後分離的web專案》準備 - 前端了解過關了嗎?

通過 node 和 webpack 的支援 把 vue 元件 build 打包成傳統元素,釋出到 http 服務中,請求後端服務。

隨後可能是這樣的:

《從零構建前後分離的web專案》準備 - 前端了解過關了嗎?

隨著目前主流第三方庫的越來越多和技術的嚐鮮、客戶端的需求、或被動[不得不用]、或主動的去引用了 babel less sass *.loader 和 hybrid 等元件庫。

再後來的技術棧需要我們根據真正踩坑之後才會逐步完善

可能是 polyfill 懶載入 xss protobuf 等 針對 瀏覽器相容速度優化SEO通訊協議 等具體問題。所以,前期可以不用過多考慮,我們只要知道:這個問題我們是可以解決的,但是現在可以先不去考慮,有些同學,太過於“完美主義”以至於想法不錯,但動起手來做了幾天就不做了,完美主義害死人

瞭解 Webpack

WebPack 可以看做是模組打包機器,它可以分析你的專案結構,找到 JavaScript 模組以及其它的一些瀏覽器不能直接執行的擴充語言:Stylus、Scss、less、TypeScript、CoffeeScript 等,並將其轉換和打包為合適的格式供瀏覽器使用。比較常用的還可以通過 webpack-dev-server 進行開發模式的熱更新

WebPack 是一種模組化開發的方案

當 webpack 處理應用程式時,它會遞迴地構建一個依賴關係圖(dependency graph),其中包含應用程式需要的每個模組,然後將所有這些模組打包成一個或多個 bundle

《從零構建前後分離的web專案》準備 - 前端了解過關了嗎?

webpack 通過 loader 可以支援各種語言和前處理器編寫模組,最後打包為一個(或多個)瀏覽器可識別的 *JavaScript css * 檔案

目前支援的 loader 列表

瞭解 ES6

《從零構建前後分離的web專案》準備 - 前端了解過關了嗎?

官方說法

ECMAScript 6(簡稱ES6)是於2015年6月正式釋出的JavaScript語言的標準,正式名為ECMAScript 2015(ES2015)。它的目標是使得JavaScript語言可以用來編寫複雜的大型應用程式.

科普

很多人總是搞不清楚 ES 這些東西,這裡大白話講講: 他們的先後順序是:ES5、ES6(ES2015)、ES7、ES8

在 2015 年 6 月 ES6 的第一個版本釋出, 正式名稱就是 《ECMAScript 2015 標準》(簡稱 ES2015)算是 2011 年 ECMAScript 5.1 之後的 6.0版本 2016 年 6 月,小幅修訂的《ECMAScript 2016 標準》(簡稱 ES2016)[因為改動小,其實他是 6.1 版本,但總有人願意叫它 ES7 ,不標準的] 2017 年 6 月釋出 的《ECMAScript 2017 標準》(簡稱 ES2017) [因為改動小,其實他是 6.2 版本,但總有人願意叫它 ES8 ,不標準的]

就像 Kubernetes 人們開他起了一個 K8S 的名字 (KS 中間有 8 個單詞),他是不標準的

瞭解 Babel Traceur

《從零構建前後分離的web專案》準備 - 前端了解過關了嗎?

Babel、Traceur 是一個編譯JavaScript的平臺,它可以編譯程式碼幫你達到以下目的:

JavaScript.next-to-JavaScript-of-today compiler

今天就使用未來的 JavaScript

截止釋出日期 (2018-09-04) ,沒有一款完全支援ES6的JavaScript代理(無論是瀏覽器環境還是伺服器環境),所以熱衷於使用語言最新特性的開發者需要將ES6程式碼轉譯為ES5程式碼。

讓你能使用最新的JavaScript程式碼(ES6,ES7...),而不用管新標準是否被當前使用的瀏覽器完全支援;

ES7 作者完全沒精力看 ,不過 Bable 逐漸替代了 Google 的 Traceur 成為主流了,我是個俗人,所以我選 Bable

瞭解 Sass Less Stylus

《從零構建前後分離的web專案》準備 - 前端了解過關了嗎?

Sass 是不是違反了中國的廣告法了??

Sass 、Stylus 和 Less 之類的前處理器是對原生CSS的擴充,它們允許你使用類似於variables, nesting, mixins, inheritance等不存在於CSS中的特性來寫CSS,CSS前處理器可以這些特殊型別的語句轉化為瀏覽器可識別的CSS語句。

  • 一張表格對比三語言
語言 實現 特性 賦值 縮排
Sass Ruby 變數$開頭 $var: value 不需要
Less JavaSript 變數@開頭 @var: value 不需要
Stylus NodeJs 不能使用@開頭 var:10 都可以

你現在可能都已經熟悉了,上文講 WebPack 講過: webpack 裡使用相關 loaders 進行配置就可以使用了,以下是常用的CSS 處理loaders:

Less Loader Sass Loader Stylus Loader

自己去找:loader 列表

像:哪種語言更好、使用的更多、更簡單 容易引起爭議的 博主不想討論,看自己喜好

瞭解 Electron

《從零構建前後分離的web專案》準備 - 前端了解過關了嗎?

一個可以使用使用: JavaScript, HTML 和 CSS 構建跨平臺的桌面應用的框架,也算 hybrid 的一種,主要場景是 PC 端,沒啥好說的。

值得一提的是 Visual Studio Code 、Atom、GIthub Desktop 都是基於此構建的,有時候按 CMD + option + i 有驚喜哦

基於 Electron 開發的APP列表

總結

這些也就基本是前端比較常用的主流技術棧組成的骨架了,之後的各種 webpack 外掛,各種工具庫的選型隨著專案實戰引入更好,現在講大家也記不住。

別急實戰中的前端架構要比現在複雜得多,跟我一起循序漸進的的來。

下一章為大家實戰:《如何快速構建專案並升級為一個規範的前端骨架》

關於我

往期文章

《從零構建前後分離 WEB 專案》 序 - 開源的意義

《從零構建前後分離web專案》:開篇 - 縱觀WEB歷史演變

《從零構建前後分離web專案》探究 - 深入聊聊前後分離架構

《從零構建前後分離web專案》準備 - 前端了解過關了嗎?前端基礎架構和技術介紹

相關文章