web經過近30年的發展,從web1.0時期進入了摸索階段的web3.0。在web時代每一次web技術的革新都在極大的影響着人們的生產與生活。
Web早期的靜態頁面
這個時期正處於web1.0階段,主要事件伴隨有瀏覽器的誕生、網站的出現以及W3C組織的成立。這個階段即是“主機-網站-瀏覽器”BS架構網站的開端,也是前端工程師早期工作的雛形。
網站呈現形式爲純靜態的只讀網頁。
Web動態頁面的興起
隨着javascript腳本語言的出現與瀏覽器的標準化發展,純靜態網頁的形式,已難以滿足網站的實際需求。於是,支持網站動態交互的技術開始出現,比如PHP、JSP和ASP爲代表的後端動態頁面技術的衍生,這也屬於動態頁面發展的一個開端,由服務器動態的向瀏覽器推送不同的頁面,再配合javascript腳本設計的一些動態特效,真正的實現了讓一個網站動起來。同樣,在這個時期,爲了更好的管理後端邏輯,於是,後端開始衍生MVC框架,這也是當前後端MVC框架的一個誕生之初。
Web Ajax的流行
動態頁面雖然在展現效果上得到了很大提升,但用戶體驗卻成了另外的問題,每一次的數據交互都需要刷新一次瀏覽器,每一次請求必須等待服務端響應完成之後,才能繼續操作。爲了增強用戶體現,於是Ajax技術衍生,實現異步HTTP請求,這讓頁面無需刷新就可以發起HTTP請求,用戶也不用專門等待請求的響應,而是可以繼續網頁的瀏覽或操作。
同時,Ajax也正式開啓了
web進入2.0的發展時期。
Web Javascript 的發展
隨着ajax的出現, javascript同時得到了更廣泛的應用,需求必然推動技術的前行,這個時候,最大的一個問題,是瀏覽器兼容性的處理。於是,類似jQuery的兼容性框架開始出現,同時,W3C爲了統一標準,一套新的標準規範衍生並開始應用,即HTML5與ECMAScript5的規範化應用,再加上chrome瀏覽器V8引擎的出現,使得web真正開始着力發展。web標準化的崗位,前端工程師由此興起,真正從早期的切圖師變成了web開發的前端工程師。
Web nodeJs的爆發
javascript這門腳本語言相較服務器語言,最大的弊端在於主機的訪問,由於客戶端安全性方面的限制,同樣也導致了javascript這門語言發展的侷限性。於是,服務器端的javascript誕生,即nodejs,使得前端開發人員可以利用javascript開發服務器端程序,並深受前端開發人員的喜愛,緊隨着,使用NPM包管理的nodeJS生態被建立,一躍成爲當前前端工程中不可或缺的模塊生態體系。
此外,Node.js也催生了node.webkit,Electron,nw.js等項目,使javascript具備了跨平臺開發桌面
軟件的能力。
WEB 前端的MVVM、MVC架構與單頁面應用的興起
隨着前端業務量與複雜度的極具提升,類似於後端業務架構的前端MV*框架成爲了近些年web前端的主流趨勢,基本應用在了各個領域的web產品中,自2010年出現的Backbone開始,Knockout、Anjular、Ember、Meteor、Vue、React相繼出現,特別是VUE、React、Angular,可以稱得上當前前端界的三架馬車,急速推動着webe前端技術的日新月異。
這些框架的運用,使得網站從Web Site進化成了Web App,開啓了網站應用的SPA(Single Page Application)的時代。
WEB移動端的出現
隨着智能手機的普及,web進入移動端領域,短短幾年時間,社會基本從web PC端過度到了移動端的適應,同時web也進入了一個新的發展時期,即多端融合的趨勢,於是類似jQuery Mobile、Sencha Touch、Framework7等混合應用開發的框架開始出現,同時包括angular 生態下的ionic、vue生態下的vux等移動端框架開始被廣泛應用。再加上三大框架體系下都擴展了原生桌面應用的開發能力,從而使javascript在編程領域的價值再度提升。
Web ECMAScript5 到 ECMASCript6
WEB 標準經過多年的發展,終於迎來的新的更新,即ECMAScript 6的發佈,這次發佈增加了很多新的語法,極大的拓展了javascript的開發潛力。在此期間,由於瀏覽器ES6語法的支持滯後,出現了Babel和TypeScript來把ES6代碼編譯成ES5等一系列編譯工具,還有webpack工程化構建的完善,使我們今天,前端進入了一個類似大前端的時期,集編碼、發佈、測試、工程化構建與一體的整體方案解決體系中,同時,對前端工作人員的技術要求,也更加的全面與深入。
WebAssembly
自從 JavaScript 誕生起到現在已經變成最流行的編程語言,這背後正是 Web發展所推動的。
web應用變得更多更復雜,但這也漸漸暴露出了 JavaScript 的問題:
語法太靈活導致開發大型 Web 項目困難;
性能不能滿足一些場景的需要。
針對以上兩點缺陷,近年來出現了一些 JS 的代替語言,例如:
微軟的TypeScript通過爲 JS 加入靜態類型檢查來改進 JS 鬆散的語法,提升代碼健壯性;
谷歌的Dart則是爲瀏覽器引入新的虛擬機去直接運行 Dart 程序以提升性能;
火狐的asm.js則是取 JS 的子集,JS 引擎針對 asm.js 做性能優化。
以上嘗試各有優缺點,其中:
TypeScript 只是解決了 JS 語法鬆散的問題,最後還是需要編譯成 JS 去運行,對性能沒有提升;
Dart 只能在 Chrome 預覽版中運行,無主流瀏覽器支持,用 Dart 開發的人不多;
asm.js 語法太簡單、有很大限制,開發效率低。
三大瀏覽器巨頭分別提出了自己的解決方案,互不兼容,這違背了 Web 的宗旨; 是技術的規範統一讓 Web 走到了今天,因此形成一套新的規範去解決 JS 所面臨的問題迫在眉睫。
於是 WebAssembly 誕生了,WebAssembly 是一種新的字節碼格式,主流瀏覽器都已經支持 WebAssembly。
WebAssembly/wasm WebAssembly 或者 wasm 是一個可移植、體積小、加載快並且兼容
web的全新格式
高效性
WebAssembly 有一套完整的語義,實際上 wasm 是體積小且加載快的二進制格式, 其目標就是充分發揮硬件能力以達到原生執行效率
開放性
WebAssembly 設計了一個非常規整的文本格式用來、調試、測試、實驗、優化、學習、教學或者編寫程序。可以以這種文本格式在web頁面上查看wasm模塊的源碼。
安全性
WebAssembly 運行在一個沙箱化的執行環境中,甚至可以在現有的 JavaScript 虛擬機中實現。在web環境中,WebAssembly將會嚴格遵守同源策略以及瀏覽器安全策略。
標準化
WebAssembly 在
web中被設計成無版本、特性可測試、向後兼容的。WebAssembly 可以被 JavaScript 調用,進入 JavaScript 上下文,也可以像 Web API 一樣調用瀏覽器的功能。當然,WebAssembly 不僅可以運行在瀏覽器上,也可以運行在非web環境下。
今天的前端
今天的前端技術已經形成了一個大的技術系統。以Github爲代表的代碼管理倉庫;NPM和Yarn爲代表的包管理工具;ES6及Babel和TypeScript構成的腳本體系;HTML5;CSS3和相應的處理技術;React、Vue、Angular爲代表的框架;Webpack爲代表的打包工具;Node.js爲基礎的Express和KOA後端框架;Hybrid技術。
隨着WebAssembly的快速發展與成熟應用,它會成爲
web技術的再一次革新嗎?我們拭目以待。