歡迎光臨
每天分享高質量文章

十年WEB技術發展歷程

作者:紅河小魚

網址:http://www.cnblogs.com/sussski/p/4634595.html

點選“閱讀原文”可檢視本文網頁版

一個小分享,知識有限,拋磚引玉。

ajax

03年的時候我上六年級,那時候網咖剛在小縣城的角落萌生。傳奇,大話西遊第一代網遊一時風靡。我抱著試一試的心態給了網咖老闆兩塊錢想申請個號玩玩,然後接下來的一個小時我一直在,註,冊,賬,號。

彼時網咖用的512k的頻寬,註冊的時候,填了一堆資訊,提交,頁面跳轉,嘣,”您填寫的資訊有誤,請重填”。然後跳轉回註冊頁面,以此迴圈。我現在時常想,如果當時ajax能普及開來,我就可以省2塊錢了。

那麼ajax是什麼?

首先ajax是一種技術。以往的網頁互動方式,使用者在點選一個按鈕後,比如提交按鈕,使用者就要等待漫長的資料和伺服器的互動,期間使用者無法進行任何操作,只能點根煙。而ajax所做的,就是在向伺服器傳送請求的時候,我們不必等待結果,而是可以同時做其他的事情,等到有了結果我們可以再來處理這個事

其實ajax技術早在1998年的時候就已經由微軟實現了,然而直到2005年2月,Adaptive Path公司的Jesse James Garrett發表文章“Ajax: A New Approach to Web Applications”,人們讀了後覺得哎喲不錯哦這個屌,這之後ajax才大規模普及開來。

ajax的出現,極大了提高了web的使用者體驗。時至今日,即使國內IT發展再怎麼落後,所有網站的登入註冊也已經實現了ajax互動。使用者點填寫完資訊後,頁面不用掃清就可以知道資訊提交成功與否,哪錯改哪。

另外ajax作為一種前後端分離的解決方案,也已經被國內大多數不很low的公司所採用,也間接導致了php等網頁尾本語言的衰落。(來辯)

JQUERY

早年的js程式設計,程式碼的效率是極其低下的,這點尤其體現在操作dom上,開發者想要給一個按鈕新增事件,要寫長長一大段重覆的程式碼去獲取到這個按鈕,再寫長長一大段重覆的程式碼去新增事件。儘管老油條會將常用的操作封裝起來,但是對於不會封裝的新手,這無疑是很痛苦的一件事,尤其再加上各種各樣的相容。

2006年,本著拯救菜鳥,讓他們do more的宗旨,jquery誕生。jQuery誕生的意義,一是對ie6 7 8 及各種割據一方的瀏覽器做好了相容,二是極大簡化了dom操作,使開發效率大大提升。jquery很火爆,火爆的有些前端只會寫jquery而不會寫原生js的程度。時至今日,說jquery write once,see everywhere已經不為過了。

jquery的另一個意義(我認為)在於,它催化了人們對前端的興趣與探索,相比linux,你用很低的成本,就可以寫出一個讓不懂程式設計的妹子說歐巴你碉堡了的效果,讓人們覺得哎喲(又)不錯哦這個屌。此後大量的類庫和基於jquey的外掛雨後春筍般誕生,前端行業歌舞昇平欣欣向榮,網頁開發進入一個新時代。

CHROME

天下武功出谷歌。在ie6,7,8的時代裡面,儘管Firefox也緩慢的挑戰ie的地位。但和2009年開始Google開始推廣的chrome瀏覽器產生的顛覆性影響比起來,遜色很多。Chrome使用Apple的開源核心webkit,良好的設計標準和市場反應;促進瀏覽器快速迭代,讓IE在windows10中徹底消失。

chrome瀏覽器的推出,將簡化前端的入門程度又推進了一步,其自帶的除錯工具好用又無腦,我們可以利用其輕鬆的檢視網路狀態,載入順序,進行斷點除錯等,同時谷歌的外掛功能,又給開發者提供了極大便利。

目前chrome最新版開始採用blink核心,測試版本中,已經可以對css3動畫進行追蹤和除錯。在我還沒有想象到的時候,chrome已經實現了它。

一句話,沒有chrome,就沒有新中國,就只能用firefox了。

GITHUB

隨著軟體專案的迭代加快,專案版本工具也不斷的演進,經歷CVS, SVN,GIT。到目前為止CVS差不多已經從網際網路行業慢慢消失,SVN作為檔案和檔案儲存存在,由linux核心發明人Linus建立的版本工具GIT現在作為程式碼版本標準。Github依賴於git成為開發人員團隊協作的社群!到2015年1月github上已註冊的開發人員超過一千萬,開源專案幾千萬。其中2014中國研發者在github上增⻓長最快。你幾乎可以在上面找到一切你想要的程式碼…比如username..password..

OAUTH

OAuth1或OAuth2與以往的授權方式不同之處是OAUTH的授權不會使第三方觸及到使用者的帳號資訊(如使用者名稱與密碼)。

產生背景:最常見的服務場景,使用者需要使用兩個不同企業的服務,登入驗證A企業,下載內容;然後登入驗證B企業,上傳內容到B企業服務,複雜又耗時。無論是使用者,還是A、B都會想要互通服務。這就產生了核實身份的需求。舊的使用者名稱、密碼機制會造成A/B企業有許可權檢視甚至修改對方的使用者資源。為了達到確認身份、服務互通,Google、Yahoo、Microsoft牽頭促使OAuth1.0產生。之後的OAuth2.0是各大網際網路企業基於https安全的一次新規劃。

目前最常見的應用場景主要在授權登入上,如微信,qq,微博等等

JSON

Json雖然是2001年就產生的標準,但被廣泛應用是在2008年之後各種Ajax應用、iPhone、Android裝置流行之後。舊的服務體系多是企業級,所以XML對java型的企業級服務定位有益。但對於流量限制,語意簡單的API服務來說,XML龐大、冗餘、不易學又佔頻寬。

去年我剛工作的時候,後臺給我傳回一個陣列,沒有發言權的我在是要遍歷這個陣列還是轉化為json格式之間糾結了很久。

Json的普及,從另一個角度體現了web開發的一個優勢,不管你後臺是java ruby php還是python,你只要給我一個json格式的介面,我就能撐起整個地球。

DJANGO&RAILS;

敏捷開發打破了專案研發樣式。在2010之後的WEB2.0時代,Html5盛行,前端工作被分離出去,PHP那種網頁尾本的優勢沒那麼明顯,雖然在CMS和論壇模板上依然有優勢。Django和Rails的最大優勢在於,他讓個人或兩三個的小團隊,實現整套產品成為可能。以Instagram為例,最初兩個python工程師用django快速實現了服務端的所有功能,在使用者增長時,再將大訪問量和大資料量的服務獨立出去。

儘管現實殘酷,rails每況日下,IE8和rails誰先消失只是先後問題,但其提供的解決方案還是被很多後生所效仿。人們都會記得這朵曇花。

Bootstrap

2011年Twitter開源的網頁端GUI框架。jquery相容了不同瀏覽器的js部分,bootstrap則相容了不同瀏覽器的css部分。甚至於說,作為一個後端開發,你無需瞭解css,無需前端,無需設計師,只要看一看bootstrap的檔案,就可以搭起一個美觀大方的後臺管理系統。常見類似的GUI框架還有zurb的foundation,google的materialize,百度也曾出過一個名為GMU的移動端框架。

就我個人來說,我並不喜歡這些gui框架,儘管他們簡化了css,實現了一些很炫酷的效果,儘管我在專案中也用到過這些,儘管我不想承認我是綠茶。這些框架最大的缺點就是,千篇一律,所有的頁面都是一個樣子,一樣的nav,一樣的sidebar,一樣的表單,連滑鼠點上去放個光都一模一樣。就像我如果長了三條腿(雖然確實長了三條腿)別人會說我很別緻讓他們眼前一亮,但如果所有人都長了三條腿,web也就失去其魅力了。另一個缺點是臃腫,一個css就走100多k的流量,其js外掛又大都依賴jquery,忍心麼。

當然,其為瞭解決響應式提出的柵格化html的思想還是很值得借鑒的。

IOS & ANDROID系統的普及

2009年之後IOS和Android的快速發展,導致WEB開發發生以下改變:

1. html5在移動瀏覽器上優先實現,Android和IOS裝置全面支援html5、CSS3,加速了IE消失

2. 上網隨時隨地發生。滑鼠點選、內容繁複的網頁越來越簡潔,響應式設計快速流行。

3. APP和伺服器互動大部分和網頁一樣基於HTTP協議,webapp,hybrid app的概念被提出。

關於webapp,這裡簡單說下web相比原生的優勢

  • 跨平臺:常說的一次編譯,到處執行
  • 免安裝:開啟瀏覽器,就能使用
  • 快速部署:升級只需在伺服器更新程式碼,而不像客戶端需要更新版本
  • 超連結:可以與其他網站互連,可以被搜尋引擎檢索

聽起來刁刁的,這些優勢卻經不住推敲。首先,不同系統的使用者使用習慣是不同的,ios使用者傳回按鈕習慣在左上角,而安卓使用者卻習慣在螢幕最下方的位置,產品經理問,那放在哪兒。呵呵噠不知道。其次,曾經看過一個調查報告,問使用者更喜歡用客戶端還是web端。

喜歡客戶端的使用者遠遠超過了web端。你問我喜歡什麼,我也是喜歡客戶端。你問我為什麼,我覺得比較有安全感吧,而且更新版本讓我覺得很爽,很有存在感,讓我知道我並沒有被世界遺忘,讓我知道你們產品在更新,在為我操心。另外超連結..我一個客戶端要你seo乾什麼。這還沒完,webapp的缺點還有一大把,最大的缺點莫過於沒有GPU加速,想要實現一個複雜一些動畫,真是要了瀏覽器親命了。其次網頁是單執行緒的,載入dom時會阻塞js,導致的結果就是,卡。一卡就煩了,煩了就關了,使用者減一。

而hybrid就不同了,hybrid app的意思是混合原生應用,將需要頻繁更新的頁面作為web放在遠端更新。這是一個靠譜的解決方案,BAT有很多案例,如微信釋出的JS SDK,掌上百度和淘寶客戶端Android版;

當然這裡邊的坑有很多,有機會,我把我踩過的坑講給你們聽。

nodejs

我糾結了一會node屬不屬於前端範疇的問題。我認為是屬於的。

解決高併發一直是後臺哥哥們樂於討論的問題,比如咱們的好近實時監控系統,理論上每個連線都會生成一個新執行緒,每個新執行緒可能需要 2 MB 配套記憶體。在一個擁有 8 GB RAM 的系統上,理論上最大的併發連線數量是 4,000 個使用者。隨著使用者的增長,咱們希望監控程式支援更多使用者,這樣,就必須新增更多伺服器。當然,這會增加業務成本,尤其是伺服器成本。除了成本上升外,還有一個技術問題:使用者可能針對每個請求使用不同的伺服器,因此,任何共享資源都必須在所有伺服器之間共享,到這裡,技術就到了瓶頸。node誕生的初衷,就是為瞭解決這個問題。node解決這個問題的方法是:更改連線到伺服器的方式。每個連線發射一個在 Node 引擎的行程中執行的事件,而不是為每個連線生成一個新的 OS 執行緒,併為其分配一些配套記憶體。

nodejs屬於伺服器端語言,在前後端分離這場圈地運動中是前端的一個有利武器,同時在前端自動化上也提供了大量的可程式設計工具(grunt,bower,gulp等),淘寶百度對nodejs的熱度一直很高,自然而然我認為這是一個趨勢。去年美團成立了美團酒店的團隊,選擇了node作為後臺語言,圈走了後臺大部分的工作。我在想,前端js加上node再加上對UI的技能需求,以後是不是前端工程師是不是該叫全端工程師了。

P:我我對node只有粗淺的瞭解,也是以後希望學習的方向,不辯。

BIG DATA

大資料大概是過去幾年最火熱的名詞,我一大批同學聽說資料挖掘年薪30萬都嗷嗷嗷去做資料庫了。

大多數時候,我們在談大資料其實都是在談在海量資料下的資料挖掘、資料分析、智慧推薦、實時分析等。不同公司的技術方案不同,我只列兩個國內成功的案例:

  • 京東個性化電商,場景包括基於行為、偏好、地域、時間、好友關係等維度,向不同的使用者推薦不同的產品,不同使用者搜尋產品排序也不同…
  • 百度地圖東莞8小時遷徙圖;百度搜索智慧提醒
  • 360手機衛士,電話號碼防騷擾功能是透過使用者的地域、身份、騷擾趨勢,將標記的2.56億個電話號碼選出1000個和使用者關聯度最高的,寫入使用者手機的10k的文本里,達到不聯網不做任何網路互動的情況下,為使用者防騷擾

HTML5+CSS3

這是這幾年被說爛了的一個詞,人人都在說HTML5,問HTML5是什麼,他們也說不清楚,就是酷,就是炫,就是酷炫。

在我看來,HTML5只是一個三人成虎的東西,它吸引的眼球遠超過了它提供的功能,HTML5只是提供了一些新的API,就等於一個app從1.0升級到2.0增加了附近的人功能而已。而且其提供的API,也就是在移動端試一試水,在pc端因為相容的問題,始終不能被明媒正娶。pc端的開發還是以HTML4.0+CSS2為基準漸進增強。至於css3,它最被人關註的動畫,也是flash玩剩下的東西。

移動端的飛速發展催化了HTML5的發展,HTML5的發展也促使各瀏覽器趨於標準化。

這條標準化路上,微信功不可沒,1024,圍住神經貓,淘寶十年,LEXUS NX這些融合了大量HTML5+CSS3元素的頁面讓人印象深刻。

此外,微軟拋棄IE代號,開發edge,各大瀏覽器廠商的不斷標準化,HTML5草案定稿,ES6草稿的不斷實現與完善,前端之路看起來是一條京畿坦途,我充滿期待。

未來

3D頁遊?WebOS? 虛擬現實?

最後,隨著使用者硬體效能的提升,網路頻寬的越來越粗,感測系統,Retina,WebGL技術的日漸成熟,再加上O2O的蓬勃發展,上邊這些會成為現實麼?

贊(0)

分享創造快樂