3D頁(yè)游\WebOS\虛擬現(xiàn)實(shí) 十年WEB技術(shù)發(fā)展歷程
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
隨著用戶硬件性能的提升,網(wǎng)絡(luò)帶寬的越來越粗,傳感系統(tǒng),Retina,WebGL技術(shù)的日漸成熟,再加上O2O的蓬勃發(fā)展,這些會(huì)成為現(xiàn)實(shí)么? 一個(gè)小分享,知識(shí)有限,拋磚引玉。 Ajax 03年的時(shí)候我上六年級(jí),那時(shí)候網(wǎng)吧剛在小縣城的角落萌生。傳奇,大話西游第一代網(wǎng)游一時(shí)風(fēng)靡。我抱著試一試的心態(tài)給了網(wǎng)吧老板兩塊錢想申請(qǐng)個(gè)號(hào)玩玩,然后接下來的一個(gè)小時(shí)我一直在,注,冊(cè),賬,號(hào)。 彼時(shí)網(wǎng)吧用的512k的帶寬,注冊(cè)的時(shí)候,填了一堆信息,提交,頁(yè)面跳轉(zhuǎn),嘣,”您填寫的信息有誤,請(qǐng)重填”。然后跳轉(zhuǎn)回注冊(cè)頁(yè)面,以此循環(huán)。我現(xiàn)在時(shí)常想,如果當(dāng)時(shí)ajax能普及開來,我就可以省2塊錢了。 那么ajax是什么? 首先ajax是一種技術(shù)。以往的網(wǎng)頁(yè)交互方式,用戶在點(diǎn)擊一個(gè)按鈕后,比如提交按鈕,用戶就要等待漫長(zhǎng)的數(shù)據(jù)和服務(wù)器的交互,期間用戶無(wú)法進(jìn)行任何 操作,只能點(diǎn)根煙。而ajax所做的,就是在向服務(wù)器發(fā)送請(qǐng)求的時(shí)候,我們不必等待結(jié)果,而是可以同時(shí)做其他的事情,等到有了結(jié)果我們可以再來處理這個(gè)事 其實(shí)ajax技術(shù)早在1998年的時(shí)候就已經(jīng)由微軟實(shí)現(xiàn)了,然而直到2005年2月,Adaptive Path公司的Jesse JamesGarrett發(fā)表文章“Ajax: A New Approach to WebApplications”,人們讀了后覺得哎喲不錯(cuò)哦這個(gè)屌,這之后ajax才大規(guī)模普及開來。 ajax的出現(xiàn),極大了提高了web的用戶體驗(yàn)。時(shí)至今日,即使國(guó)內(nèi)IT發(fā)展再怎么落后,所有網(wǎng)站的登錄注冊(cè)也已經(jīng)實(shí)現(xiàn)了ajax交互。用戶點(diǎn)填寫完信息后,頁(yè)面不用刷新就可以知道信息提交成功與否,哪錯(cuò)改哪。 另外ajax作為一種前后端分離的解決方案,也已經(jīng)被國(guó)內(nèi)大多數(shù)不很low的公司所采用,也間接導(dǎo)致了php等網(wǎng)頁(yè)腳本語(yǔ)言的衰落。(來辯) jQuery 早年的js編程,代碼的效率是極其低下的,這點(diǎn)尤其體現(xiàn)在操作dom上,開發(fā)者想要給一個(gè)按鈕添加事件,要寫長(zhǎng)長(zhǎng)一大段重復(fù)的代碼去獲取到這個(gè)按 鈕,再寫長(zhǎng)長(zhǎng)一大段重復(fù)的代碼去添加事件。盡管老油條會(huì)將常用的操作封裝起來,但是對(duì)于不會(huì)封裝的新手,這無(wú)疑是很痛苦的一件事,尤其再加上各種各樣的兼 容。 2006年,本著拯救菜鳥,讓他們do more的宗旨,jquery誕生。jQuery誕生的意義,一是對(duì)ie6 7 8及各種割據(jù)一方的瀏覽器做好了兼容,二是極大簡(jiǎn)化了dom操作,使開發(fā)效率大大提升。jquery很火爆,火爆的有些前端只會(huì)寫jquery而不會(huì)寫原生 js的程度。時(shí)至今日,說jquery write once,see everywhere已經(jīng)不為過了。 jquery的另一個(gè)意義(我認(rèn)為)在于,它催化了人們對(duì)前端的興趣與探索,相比linux,你用很低的成本,就可以寫出一個(gè)讓不懂編程的妹子說歐 巴你碉堡了的效果,讓人們覺得哎喲(又)不錯(cuò)哦這個(gè)屌。此后大量的類庫(kù)和基于jquey的插件雨后春筍般誕生,前端行業(yè)歌舞升平欣欣向榮,網(wǎng)頁(yè)開發(fā)進(jìn)入一 個(gè)新時(shí)代。 Chrome 天下武功出谷歌。在ie6,7,8的時(shí)代里面,盡管Firefox也緩慢的挑戰(zhàn)ie的地位。但和2009年開始Google開始推廣的chrome 瀏覽器產(chǎn)生的顛覆性影響比起來,遜色很多。Chrome使用Apple的開源內(nèi)核webkit,良好的設(shè)計(jì)標(biāo)準(zhǔn)和市場(chǎng)反應(yīng);促進(jìn)瀏覽器快速迭代,讓IE在 windows10中徹底消失。 chrome瀏覽器的推出,將簡(jiǎn)化前端的入門程度又推進(jìn)了一步,其自帶的調(diào)試工具好用又無(wú)腦,我們可以利用其輕松的查看網(wǎng)絡(luò)狀態(tài),加載順序,進(jìn)行斷點(diǎn)調(diào)試等,同時(shí)谷歌的插件功能,又給開發(fā)者提供了極大便利。 目前chrome最新版開始采用blink內(nèi)核,測(cè)試版本中,已經(jīng)可以對(duì)css3動(dòng)畫進(jìn)行追蹤和調(diào)試。在我還沒有想象到的時(shí)候,chrome已經(jīng)實(shí)現(xiàn)了它。 一句話,沒有chrome,就沒有新中國(guó),就只能用firefox了。 GitHub 隨著軟件項(xiàng)目的迭代加快,項(xiàng)目版本工具也不斷的演進(jìn),經(jīng)歷CVS,SVN,GIT。到目前為止CVS差不多已經(jīng)從互聯(lián)網(wǎng)行業(yè)慢慢消失,SVN作為文件和文檔存儲(chǔ)存在,由linux內(nèi)核發(fā)明人linus創(chuàng)建的版本工具 GIT現(xiàn)在作為代碼版本標(biāo)準(zhǔn)。Github依賴于git成為開發(fā)人員團(tuán)隊(duì)協(xié)作的社區(qū)!到2015年1月github上已注冊(cè)的開發(fā)人員超過一千萬(wàn),開源項(xiàng) 目幾千萬(wàn)。其中2014中國(guó)研發(fā)者在github上增⻓長(zhǎng)最快。你幾乎可以在上面找到一切你想要的代碼…比如username..password.. OAUTH OAuth1或OAuth2與以往的授權(quán)方式不同之處是OAUTH的授權(quán)不會(huì)使第三方觸及到用戶的帳號(hào)信息(如用戶名與密碼)。 產(chǎn)生背景:最常見的服務(wù)場(chǎng)景,用戶需要使用兩個(gè)不同企業(yè)的服務(wù),登錄驗(yàn)證A企業(yè),下載內(nèi)容;然后登錄驗(yàn)證B企業(yè),上傳內(nèi)容到B企業(yè)服務(wù),復(fù)雜又耗時(shí)。無(wú)論 是用戶,還是A、B都會(huì)想要互通服務(wù)。這就產(chǎn)生了核實(shí)身份的需求。舊的用戶名、密碼機(jī)制會(huì)造成A/B企業(yè)有權(quán)限查看甚至修改對(duì)方的用戶資源。為了達(dá)到確認(rèn) 身份、服務(wù)互通,Google、Yahoo、Microsoft牽頭促使OAuth1.0產(chǎn)生。之后的OAuth2.0是各大互聯(lián)網(wǎng)企業(yè)基于https安 全的一次新規(guī)劃。 目前最常見的應(yīng)用場(chǎng)景主要在授權(quán)登錄上,如微信,qq,微博等等 JSON Json雖然是2001年就產(chǎn)生的標(biāo)準(zhǔn),但被廣泛應(yīng)用是在2008年之后各種Ajax應(yīng)用、iPhone、Android設(shè)備流行之后。舊的服務(wù)體 系多是企業(yè)級(jí),所以XML對(duì)java型的企業(yè)級(jí)服務(wù)定位有益。但對(duì)于流量限制,語(yǔ)義簡(jiǎn)單的API服務(wù)來說,XML龐大、冗余、不易學(xué)又占帶寬。 去年我剛工作的時(shí)候,后臺(tái)給我返回一個(gè)數(shù)組,沒有發(fā)言權(quán)的我在是要遍歷這個(gè)數(shù)組還是轉(zhuǎn)化為json格式之間糾結(jié)了很久。 Json的普及,從另一個(gè)角度體現(xiàn)了web開發(fā)的一個(gè)優(yōu)勢(shì),不管你后臺(tái)是java ruby php還是python,你只要給我一個(gè)json格式的接口,我就能撐起整個(gè)地球。 DJANGO&RAILS 敏捷開發(fā)打破了項(xiàng)目研發(fā)模式。在2010之后的WEB2.0時(shí)代,Html5盛行,前端工作被分離出去,PHP那種網(wǎng)頁(yè)腳本的優(yōu)勢(shì)沒那么明顯,雖然 在CMS和論壇模板上依然有優(yōu)勢(shì)。Django和Rails的最大優(yōu)勢(shì)在于,他讓個(gè)人或兩三個(gè)的小團(tuán)隊(duì),實(shí)現(xiàn)整套產(chǎn)品成為可能。以Instagram為 例,最初兩個(gè)python工程師用django快速實(shí)現(xiàn)了服務(wù)端的所有功能,在用戶增長(zhǎng)時(shí),再將大訪問量和大數(shù)據(jù)量的服務(wù)獨(dú)立出去。 盡管現(xiàn)實(shí)殘酷,rails每況日下,IE8和rails誰(shuí)先消失只是先后問題,但其提供的解決方案還是被很多后生所效仿。人們都會(huì)記得這朵曇花。 Bootstrap 2011年Twitter開源的網(wǎng)頁(yè)端GUI框架。jquery兼容了不同瀏覽器的js部分,bootstrap則兼容了不同瀏覽器的css部分。 甚至于說,作為一個(gè)后端開發(fā),你無(wú)需了解css,無(wú)需前端,無(wú)需設(shè)計(jì)師,只要看一看bootstrap的文檔,就可以搭起一個(gè)美觀大方的后臺(tái)管理系統(tǒng)。常 見類似的GUI框架還有zurb的foundation,google的materialize,百度也曾出過一個(gè)名為GMU的移動(dòng)端框架。 就我個(gè)人來說,我并不喜歡這些gui框架,盡管他們簡(jiǎn)化了css,實(shí)現(xiàn)了一些很炫酷的效果,盡管我在項(xiàng)目中也用到過這些,盡管我不想承認(rèn)我是綠茶。 這些框架最大的缺點(diǎn)就是,千篇一律,所有的頁(yè)面都是一個(gè)樣子,一樣的nav,一樣的sidebar,一樣的表單,連鼠標(biāo)點(diǎn)上去放個(gè)光都一模一樣。就像我如 果長(zhǎng)了三條腿(雖然確實(shí)長(zhǎng)了三條腿)別人會(huì)說我很別致讓他們眼前一亮,但如果所有人都長(zhǎng)了三條腿,web也就失去其魅力了。另一個(gè)缺點(diǎn)是臃腫,一個(gè)css 就走100多k的流量,其js插件又大都依賴jquery,忍心么。 當(dāng)然,其為了解決響應(yīng)式提出的柵格化html的思想還是很值得借鑒的。 IOS & ANDROID系統(tǒng)的普及 2009年之后IOS和Android的快速發(fā)展,導(dǎo)致WEB開發(fā)發(fā)生以下改變: 1. html5在移動(dòng)瀏覽器上優(yōu)先實(shí)現(xiàn),Android和IOS設(shè)備全面支持html5、CSS3,加速了IE消失 2. 上網(wǎng)隨時(shí)隨地發(fā)生。鼠標(biāo)點(diǎn)擊、內(nèi)容繁復(fù)的網(wǎng)頁(yè)越來越簡(jiǎn)潔,響應(yīng)式設(shè)計(jì)快速流行。 3. APP和服務(wù)器交互大部分和網(wǎng)頁(yè)一樣基于HTTP協(xié)議,webapp,hybrid app的概念被提出。 關(guān)于webapp,這里簡(jiǎn)單說下web相比原生的優(yōu)勢(shì) 跨平臺(tái):常說的一次編譯,到處運(yùn)行 免安裝:打開瀏覽器,就能使用 快速部署:升級(jí)只需在服務(wù)器更新代碼,而不像客戶端需要更新版本 超鏈接:可以與其他網(wǎng)站互連,可以被搜索引擎檢索 聽起來刁刁的,這些優(yōu)勢(shì)卻經(jīng)不住推敲。首先,不同系統(tǒng)的用戶使用習(xí)慣是不同的,ios用戶返回按鈕習(xí)慣在左上角,而安卓用戶卻習(xí)慣在屏幕最下方的位置,產(chǎn)品經(jīng)理問,那放在哪兒。呵呵噠不知道。其次,曾經(jīng)看過一個(gè)調(diào)查報(bào)告,問用戶更喜歡用客戶端還是web端。 喜歡客戶端的用戶遠(yuǎn)遠(yuǎn)超過了web端。你問我喜歡什么,我也是喜歡客戶端。你問我為什么,我覺得比較有安全感吧,而且更新版本讓我覺得很爽,很有存 在感,讓我知道我并沒有被世界遺忘,讓我知道你們產(chǎn)品在更新,在為我操心。另外超鏈接..我一個(gè)客戶端要你seo干什么。這還沒完,webapp的缺點(diǎn)還 有一大把,最大的缺點(diǎn)莫過于沒有GPU加速,想要實(shí)現(xiàn)一個(gè)復(fù)雜一些動(dòng)畫,真是要了瀏覽器親命了。其次網(wǎng)頁(yè)是單線程的,加載dom時(shí)會(huì)阻塞js,導(dǎo)致的結(jié)果 就是,卡。一卡就煩了,煩了就關(guān)了,用戶減一。 而hybrid就不同了,hybrid app的意思是混合原生應(yīng)用,將需要頻繁更新的頁(yè)面作為web放在遠(yuǎn)程更新。這是一個(gè)靠譜的解決方案,BAT有很多案例,如微信發(fā)布的JS SDK,掌上百度和淘寶客戶端Android版; 當(dāng)然這里邊的坑有很多,有機(jī)會(huì),我把我踩過的坑講給你們聽。 NodeJS 我糾結(jié)了一會(huì)node屬不屬于前端范疇的問題。我認(rèn)為是屬于的。 解決高并發(fā)一直是后臺(tái)哥哥們樂于討論的問題,比如咱們的好近實(shí)時(shí)監(jiān)控系統(tǒng),理論上每個(gè)連接都會(huì)生成一個(gè)新線程,每個(gè)新線程可能需要 2 MB配套內(nèi)存。在一個(gè)擁有 8 GB RAM 的系統(tǒng)上,理論上最大的并發(fā)連接數(shù)量是 4,000個(gè)用戶。隨著用戶的增長(zhǎng),咱們希望監(jiān)控程序支持更多用戶,這樣,就必須添加更多服務(wù)器。當(dāng)然,這會(huì)增加業(yè)務(wù)成本,尤其是服務(wù)器成本。除了成本上升外,還有 一個(gè)技術(shù)問題:用戶可能針對(duì)每個(gè)請(qǐng)求使用不同的服務(wù)器,因此,任何共享資源都必須在所有服務(wù)器之間共享,到這里,技術(shù)就到了瓶頸。node誕生的初衷,就 是為了解決這個(gè)問題。node解決這個(gè)問題的方法是:更改連接到服務(wù)器的方式。每個(gè)連接發(fā)射一個(gè)在 Node引擎的進(jìn)程中運(yùn)行的事件,而不是為每個(gè)連接生成一個(gè)新的 OS 線程,并為其分配一些配套內(nèi)存。 nodejs屬于服務(wù)器端語(yǔ)言,在前后端分離這場(chǎng)圈地運(yùn)動(dòng)中是前端的一個(gè)有利武器,同時(shí)在前端自動(dòng)化上也提供了大量的可編程工具 (grunt,bower,gulp等),淘寶百度對(duì)nodejs的熱度一直很高,自然而然我認(rèn)為這是一個(gè)趨勢(shì)。去年美團(tuán)成立了美團(tuán)酒店的團(tuán)隊(duì),選擇了 node作為后臺(tái)語(yǔ)言,圈走了后臺(tái)大部分的工作。我在想,前端js加上node再加上對(duì)UI的技能需求,以后是不是前端工程師是不是該叫全端工程師了。 P:我我對(duì)node只有粗淺的了解,也是以后希望學(xué)習(xí)的方向,不辯。 BIG DATA 大數(shù)據(jù)大概是過去幾年最火熱的名詞,我一大批同學(xué)聽說數(shù)據(jù)挖掘年薪30萬(wàn)都嗷嗷嗷去做數(shù)據(jù)庫(kù)了。 大多數(shù)時(shí)候,我們?cè)谡劥髷?shù)據(jù)其實(shí)都是在談在海量數(shù)據(jù)下的數(shù)據(jù)挖掘、數(shù)據(jù)分析、智能推薦、實(shí)時(shí)分析等。不同公司的技術(shù)方案不同,我只列兩個(gè)國(guó)內(nèi)成功的案例: • 京東個(gè)性化電商,場(chǎng)景包括基于行為、偏好、地域、時(shí)間、好友關(guān)系等維度,向不同的用戶推薦不同的產(chǎn)品,不同用戶搜索產(chǎn)品排序也不同… • 百度地圖東莞8小時(shí)遷徙圖;百度搜索智能提醒 • 360手機(jī)衛(wèi)士,電話號(hào)碼防騷擾功能是通過用戶的地域、身份、騷擾趨勢(shì),將標(biāo)記的2.56億個(gè)電話號(hào)碼選出1000個(gè)和用戶關(guān)聯(lián)度最高的,寫入用戶手機(jī)的10k的文本里,達(dá)到不聯(lián)網(wǎng)不做任何網(wǎng)絡(luò)交互的情況下,為用戶防騷擾 HTML5+CSS3 這是這幾年被說爛了的一個(gè)詞,人人都在說HTML5,問HTML5是什么,他們也說不清楚,就是酷,就是炫,就是酷炫。 在我看來,HTML5只是一個(gè)三人成虎的東西,它吸引的眼球遠(yuǎn)超過了它提供的功能,HTML5只是提供了一些新的API,就等于一個(gè)app從1.0 升級(jí)到2.0增加了附近的人功能而已。而且其提供的API,也就是在移動(dòng)端試一試水,在pc端因?yàn)榧嫒莸膯栴},始終不能被明媒正娶。pc端的開發(fā)還是以 HTML4.0+CSS2為基準(zhǔn)漸進(jìn)增強(qiáng)。至于css3,它最被人關(guān)注的動(dòng)畫,也是flash玩剩下的東西。 移動(dòng)端的飛速發(fā)展催化了HTML5的發(fā)展,HTML5的發(fā)展也促使各瀏覽器趨于標(biāo)準(zhǔn)化。 這條標(biāo)準(zhǔn)化路上,微信功不可沒,1024,圍住神經(jīng)貓,淘寶十年,LEXUS NX這些融合了大量HTML5+CSS3元素的頁(yè)面讓人印象深刻。 此外,微軟拋棄IE代號(hào),開發(fā)edge,各大瀏覽器廠商的不斷標(biāo)準(zhǔn)化,HTML5草案定稿,ES6草稿的不斷實(shí)現(xiàn)與完善,前端之路看起來是一條京畿坦途,我充滿期待。 未來 3D頁(yè)游?WebOS? 虛擬現(xiàn)實(shí)? 最后,隨著用戶硬件性能的提升,網(wǎng)絡(luò)帶寬的越來越粗,傳感系統(tǒng),Retina,WebGL技術(shù)的日漸成熟,再加上O2O的蓬勃發(fā)展,上邊這些會(huì)成為現(xiàn)實(shí)么? 該文章在 2015/7/13 23:30:06 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |