web發展史和對先後端分離的一些思考

1989年,在歐洲粒子物理實驗室的IT部門工做的Tim Berners-Lee向其領導提出了一項提議:使來自世界各地的遠程站點的研究人員可以組織和聚集信息,在我的計算機上訪問大量的科研文獻,並建議在文檔中連接其餘文檔,這就是Web的原型。1990年Tim以超文本語言HTML爲基礎在NeXT電腦上發明了最原始的Web瀏覽器。1994年末,由Tim牽頭的萬維網聯盟(World Wide Web Consortium)成立,這標誌着萬維網的正式誕生。咱們不難看出,因爲項目上線之初的目的是解決文獻的分享問題,因此早期的web是以HTML爲基礎的,純靜態的網頁,也就是說網頁不具有交互功能,咱們只能單方面的接受服務器提供給咱們的信息,咱們稱這之爲web 1.0時代。html

​ 因爲先天不足,靜態頁面慢慢的已經不能知足用戶的需求,動態頁面技術如PHP、JSP、ASP.NET相繼誕生。頁面今後能夠獲取服務器數據信息。這也催生了論壇和搜索引擎的大爆發,互聯網世界今後煥然一新。可是在Web的早期階段,前端頁面要想獲取後臺信息須要刷新整個頁面加之那個年代「使人捉雞」的網速,用戶體驗很是糟糕。對於開發者來講這一時間段的前端開發重度依賴開發環境,開發效率低。這種架構下的先後端協做有兩種模式:第一種是前端寫 DEMO,寫好後,讓後端去套模板。好處是 DEMO 能夠本地開發,很高效。不足是還須要後端套模板,有可能套錯,套完後還須要前端肯定,來回溝通調整的成本比較大; 第二種協做模式是前端負責瀏覽器端的全部開發和服務器端的 View 層模板開發。好處是 UI 相關的代碼都是前端去寫就好,後端不用太關注,不足就是前端開發重度綁定後端環境,環境成爲影響前端開發效率的重要因素。先後端職責糾纏不清也成爲了程序員們工做中各類矛盾的導火線。前端

​ 2005年,AJAX(Asynchronous JavaScript And XML,異步 JavaScript 和 XML) 被正式提出並開始使用。AJAX是一項革命性的技術,極大的提高了用戶體驗。隨着AJAX的流行,像Facebook這樣的社交網絡開始變得繁榮起來。隨着AJAX和CDN(Content Delivery Network 內容分發網絡) 的應用SPA(Single Page Application)單頁面應用時代的時代來臨了。SPA時代,先後端的分工一會兒變得很是明確,先後端的關鍵協做點是接口回過頭來看看的話,這與 JSP 時代區別不大。複雜度從服務端的 JSP 裏移到了瀏覽器的 JavaScript,瀏覽器端變得很複雜。相似 Spring MVC,這個時代開始出現瀏覽器端的分層架構。程序員

​ 隨着瀏覽器之間競爭的白熱化,各類瀏覽器你方唱罷我登場。市場的碎片化問題愈加嚴峻,不一樣瀏覽器的不一樣標準的適配浪費了開發人員的大量精力。爲了解決兼容性的問題,jQuery等前端框架迎來了長足的發展,尤爲是jQuery,一時間成爲了網站的標配。另外值得一提的是,在這一次的瀏覽器大戰中,各家瀏覽器廠商都在提高JavaScript的運行效率。而谷歌開發的chrome瀏覽器憑藉這其高效的JavaScript引擎V8脫穎而出。而正是得益於此,一年後事件循環的異步I/O框架—Node.js誕生。咱們迎來了NodeJS全棧時代,NodeJS的興起,JavaScript開始有能力運行在服務端。這意味着能夠有一種新的研發模式:web

  • Front-end UI layer 處理瀏覽器層的展示邏輯。經過 CSS 渲染樣式,經過 JavaScript 添加交互功能,HTML 的生成也能夠放在這層,具體看應用場景。
  • Back-end UI layer 處理路由、模板、數據獲取、Cookie 等。經過路由,前端終於能夠自主把控 URL Design,這樣不管是單頁面應用仍是多頁面應用,前端均可以自由調控。後端也終於能夠擺脫對展示的強關注,轉而能夠專心於業務邏輯層的開發。

先後端的職責很清晰。對前端來講,兩個 UI 層各司其職。經過 Node,Web Server 層也是 JavaScript 代碼,這意味着部分代碼可先後複用,須要 SEO 的場景能夠在服務端同步渲染,因爲異步請求太多致使的性能問題也能夠經過服務端來緩解。前一種模式的不足,經過這種模式幾乎都能完美解決掉。與 JSP 模式相比,全棧模式看起來是一種迴歸,也的確是一種向原始開發模式的迴歸,不過是一種螺旋上升式的迴歸(馬哲誠不我欺233)。固然基於 NodeJS 的全棧模式也不是完美的,他依舊面臨不少挑戰,好比:須要前端對服務端編程有更進一步的認識。好比TCP/IP等網絡知識的掌握。NodeJS 層與 Java 層的高效通訊。NodeJS 模式下,都在服務器端,RESTful HTTP 通訊未必高效,經過 SOAP 等方式通訊更高效。一切須要在驗證中前行。chrome

​ 前端代碼的日益複雜,開發者們也將一些後端開發的解決方法帶往前端,一時間大量的前端框架開始涌現,好比:AngularJS、React、Vue.js、EmberJS 等,這些框架總的原則是先按類型分層,好比 Templates、Controllers、Models,而後再在層內作切分。這樣子的優勢是先後端職責很清晰:前端工做在瀏覽器端,後端工做在服務端。清晰的分工,可讓開發並行,測試數據的模擬不難,前端能夠本地開發。後端則能夠專一於業務邏輯的處理,輸出 RESTful等接口。前端開發的複雜度可控:前端代碼很重,但合理的分層,讓前端代碼能各司其職。再就是部署相對獨立: 能夠快速改進產品體驗。至於缺點呢,代碼不能複用。好比後端依舊須要對數據作各類校驗,校驗邏輯沒法複用瀏覽器端的代碼。若是能夠複用,那麼後端的數據校驗能夠相對簡單化。全異步,對SEO(Search Engine Optimization:搜索引擎優化)不利,每每還須要服務端作同步渲染的降級方案。性能並不是最佳,特別是移動互聯網環境下。SPA 不能知足全部需求,依舊存在大量多頁面應用。URL Design 須要後端配合,前端沒法徹底掌控。
技術的發展迭代愈來愈快,web和他最初的樣子相比發生了巨大的變化。咱們的生活也與它的進步和迭代耦合的更加緊密。其實模式也好,技術也罷,沒有好壞優劣之分,只有適合不適合;先後分離的開發思想主要是基於SoC(關注度分離原則),上面種種模式,都是讓先後端的職責更清晰,分工更合理高效。做爲行業的一份子,我也對行業將來的發展拭目以待。編程

參考文章:http://www.360doc.com/content/17/0601/20/35378950_659102709.shtml 前端發展史
Wiki百科相關頁面後端

相關文章
相關標籤/搜索