前端技術之大前端架構史話

在這裏插入圖片描述

昨天寫了第一篇博客,萬萬沒想到用了將近一個半小時,看來每天五篇的目標靠一晚上是不夠的,要完成目標就必須擠時間。2019年全年對於我個人而言在技術方面總體還是收入滿滿的,在接下來的幾篇文章中我將主要講一下在這一年裏我對前端知識的理解和認識。

大前端和全棧

在這裏插入圖片描述

在講解大前端的時候最容易和前端所謂的“全棧”混淆,包括知乎排名靠前的有關大前端的一些討論也是模棱兩可,不知所云,知乎有精品貼,我比較欣賞,但也有毫無價值的東西。這裏我將詳細講解下到底什麼是大前端,在理解大前端的時候首先要明確這個概念針對的是誰,不是前端工程師,而是後端開發者,大前端非“前端”,他出現的背景正是當下“一雲多端”的現狀,就像我在博客開始處貼的圖片,在CS時代,客戶端只有PC,在Web石器化時代前後端處於混沌狀態,前端只是藝術家創造個人藝術作品的形式,漸漸的出現了天生前後端分離的移動端,直到Web端也出現前後端分離,客戶端呈現出多樣化態勢,這時候後端開發人員可能針對不同的端開發大量具有冗餘業務的接口,後端開發人員面對的往往是Android,IOS,H5三方的開發人員,大前端的概念正是爲了解決這種狀況,所有的客戶端無論你是Android,IOS,還是WEB端,對於後端人員來說只有“大前端”,後端開人員無需針對特定的某一端進行開發,而僅僅是面向大前端進行開發。所以區別於“全棧”,大前端這個概念是針對後端開發人員的,全棧則不同,全棧指的是前端開發人員利用前端的編程語言進行後端,前端的開發設計。

前端架構演變史

在這裏插入圖片描述
前端架構的演變歷史我曾經在我的一篇聊前後端分離的博客中講到過,但有些技術細節沒有講到,接下來我將更詳細的對前端架構的演變進行描述:第一個階段石器時代,這個階段的前端就是靜態網頁,用我之前的話來說就是一個可以共享的幻燈片,我們通過html這種特殊的文本格式定義好圖文詳情,然後通過瀏覽器實現圖文資料的共享。第二個階段後端MVC階段:這個階段我以JavaWeb舉例就是servlet+jdbc+jsp的階段,伴隨着JavaWeb的發展出現了SSM,SSH,服務端模板也有了Velocity,FreeMark,Thymleaf等等,這個時候的前端是高度耦合在服務端模板中的。第三個階段前端半分離階段:這個階段往往瀏覽器首先請求CDN加載頁面元素,然後通過Ajax異步請求後端數據,根據請求結果異步渲染頁面,爲什麼叫辦分離階段呢?因爲這個時候不完全是SPA,還有其他的頁面的路由仍然在後端,且應用的部署是動靜分離式的部署方式,這個階段好處是前端開發可以通過mock數據獨立進行,缺點是不利於SEO以及移動端頁面渲染,還有首頁白屏問題。第四個階段完全分離階段:這個階段的標誌性事件就是Node.js的出現,這個時候後端路由交給Node.js來實現,後端只負責提供接口數據,既不參與頁面路由也不參與頁面數據渲染,Node.js負責從後端拿到數據,接着對數據進行整合處理(BFF),最後通過模板將數據對頁面填充,並根據瀏覽器的請求,將包含數據的頁面返還給瀏覽器,也就是我們熟知的“中途島”模式,至此前端邁向了步入全棧時代的堅實一步如上圖:

聊聊BFF

BFF指的是爲前端而存在的後端,需要特別強調的一點是這裏各個端的應用都是Web應用(PC端,移動端),和原生App沒有任何關係,BFF是連接後端和“大前端”的橋樑,對於後端而言BFF的出現使得後端業務下沉,接口複用性大大增強,後端的開發不用考慮前端適配,這樣後端開發者的工作重心便主要放在了基礎數據的業務邏輯實現上。對於前端開發來說,BFF由前端開發者獨立維護,BFF在設計開發上可以領先後端一個版本以上,直接實現MOCK數據,後續再交由後端實現MOCK數據的替換,這樣前端開發便不會受後端限制,形成前端拉動後端,及時滿足客戶需求的新的高效開發模式,總之BFF的出現完美的解決了Web多端的問題,是大前端開發最爲有效,實用的實現方式。
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章