作為一個(gè)java程序員寫(xiě)的代碼主要還是后臺(tái)的代碼，雖然開(kāi)始的時(shí)候前后端都寫(xiě)，但是也是用別人造好的輪子來(lái)用，學(xué)學(xué)html,css,js,jquery,再找一個(gè)前端ui框架學(xué)學(xué)，上手之后我們就可以寫(xiě)界面，寫(xiě)后臺(tái)了，當(dāng)然這只是企業(yè)的后臺(tái)管理項(xiàng)目，界面要求不是特別高，對(duì)于網(wǎng)站項(xiàng)目還是需要前端童鞋來(lái)設(shè)計(jì)，布局，寫(xiě)好html給到我們，我們轉(zhuǎn)成jsp，或者各種模板引擎文件。

這種模式對(duì)前端童鞋要求不是特別高，會(huì)設(shè)計(jì)，切圖，就差不多了，什么前端組件化，模塊化，自動(dòng)化這些概念都沒(méi)有，可能是小公司沒(méi)有接觸到，大公司應(yīng)該很早就開(kāi)始實(shí)踐了。那個(gè)時(shí)候常用的就是yahoo的yui,和jquery ui還有jquery一系列插件了等等。

記得11年到12年的時(shí)候移動(dòng)端的開(kāi)發(fā)特別火，很多人都轉(zhuǎn)型去做native的開(kāi)發(fā)了，那個(gè)時(shí)候移動(dòng)端的開(kāi)發(fā)工資特別高，但是我沒(méi)有選擇做移動(dòng)開(kāi)發(fā)，而是選擇安靜的做個(gè)后臺(tái)。

那個(gè)時(shí)候很多創(chuàng)業(yè)公司選擇做產(chǎn)品的時(shí)候首先會(huì)在移動(dòng)端發(fā)力，先做一個(gè)android版本的或者做一個(gè)ios版本的，等到積攢一定的用戶量之后在針對(duì)多個(gè)平臺(tái)制定一個(gè)版本，因?yàn)楹芏喈a(chǎn)品可能沒(méi)得到有機(jī)會(huì)做多個(gè)版本就已經(jīng)死了，所以一個(gè)產(chǎn)品可能有ios，android,winphone,pc等版本，需要多個(gè)團(tuán)隊(duì)來(lái)開(kāi)發(fā)一個(gè)產(chǎn)品。

那個(gè)時(shí)候雖然也有公司用webapp(純html5)和Hybrid來(lái)做移動(dòng)端的開(kāi)發(fā),但是很多公司還是擔(dān)心h5在性能和體驗(yàn)方面不如原生的好，畢竟移動(dòng)端最重要的還是用戶體驗(yàn)，是快，是流暢，那個(gè)時(shí)候解決方案也沒(méi)有像現(xiàn)在這么多，所以很多公司還是選擇采用原生的開(kāi)發(fā)。

現(xiàn)在

隨著h5在移動(dòng)端的使用越來(lái)越多，前端超級(jí)火爆的情況下各種框架，各種解決方案層出不窮，一個(gè)還沒(méi)學(xué)會(huì)，另一個(gè)就出來(lái)了，亂花漸入迷人眼，導(dǎo)致沒(méi)有經(jīng)驗(yàn)的前端人員都不知道應(yīng)該學(xué)什么好了。 看到網(wǎng)上有童鞋總結(jié)了前端近幾年的變化，出來(lái)的輪子有多少，大家自己感受一下。

那些年，一度追捧，一度放棄

下面，花一些篇幅簡(jiǎn)單回顧下 09 年到 15 年前端的發(fā)展歷程。

09 年，基礎(chǔ)類庫(kù)完善，尋求突破

09 年之前，JavaScript 還處于對(duì)自身語(yǔ)言的完善過(guò)程中，而到了 09 年，JavaScript 類庫(kù)已經(jīng)頗為成熟，jQuery/Prototype/Script.aculo.us/Dojo 等都已經(jīng)發(fā)布了好幾個(gè) stable 版本，各大類庫(kù)也是相互吸收優(yōu)點(diǎn)，不斷完善并提高自身性能，然而功能上已經(jīng)沒(méi)有太多增加的勢(shì)頭。部分框架開(kāi)始了思想上的轉(zhuǎn)變，更加注重前端開(kāi)發(fā)的組織和結(jié)構(gòu)，條理性強(qiáng)了很多，如 YUI，Dojo 等。

從 ECMAScript 規(guī)范的爭(zhēng)執(zhí)，開(kāi)啟了瀏覽器引擎大戰(zhàn)，各大廠商也趁機(jī)瓜分 IE6 份額，Chrome 和 Firefox 在這場(chǎng)戰(zhàn)役中取得小勝，V8 也敲響了前端的大門。為了迎合市場(chǎng)的激烈競(jìng)爭(zhēng)，IE 開(kāi)始了升級(jí)之旅，09 年初發(fā)布 IE8，全面兼容 CSS2.1。

而此時(shí)，Node.js 和 3G Mobile 這兩只巨獸開(kāi)始浮出水面，Web 標(biāo)準(zhǔn)也開(kāi)始向 HTML5、ECMAScript5.0 靠攏。

10 年，Web2.0 深入人心，開(kāi)始性能挑戰(zhàn)

毫無(wú)疑問(wèn)，這一年，各大巨頭都看清了 HTML5 是 web 發(fā)展的未來(lái)，在保留原來(lái)前端技術(shù)的狀態(tài)下，都簇?fù)碇?HTML5 的裙擺。富客戶端應(yīng)用也在這一年蓬勃生長(zhǎng)，ExtJS/Dojo 搖身變?yōu)槠髽I(yè)級(jí)框架，各類組件化概念和產(chǎn)品如約而至。

延續(xù)著 09 年的變化，10 年的前端顯得頗為沉寂，然而在標(biāo)準(zhǔn)的運(yùn)用和推動(dòng)上，各大廠商也是十分賣力。IE 9 出來(lái)了預(yù)覽第三版，iPhone 的 Safari 已經(jīng)能夠支持眾多 HTML5 內(nèi)容：Canvas/Video/Audio/Geolocation/Storage/Application Cache/Web SQL Database 等。

W3C 宣布成立 Web 性能工作組，Google 和 Mozilla 紛紛推出應(yīng)用商店，瀏覽器調(diào)試工具也豐富了起來(lái)，人們開(kāi)始更多地關(guān)注開(kāi)發(fā)體驗(yàn)和性能問(wèn)題。

11 年，HTML5 抗大旗，F(xiàn)lash 堪憂

2011 年 HTML5 的技術(shù)發(fā)展和推廣都向前邁進(jìn)了一大步，語(yǔ)義明確的標(biāo)簽體系、簡(jiǎn)潔明了的富媒體支持、本地?cái)?shù)據(jù)的儲(chǔ)存技術(shù)、canvas 等等各類技術(shù)被廣泛應(yīng)用。這一年，很多 web 開(kāi)發(fā)者也面臨一項(xiàng)技術(shù)的抉擇，HTML5 or Flash？從 Flash Player 11.1 開(kāi)始，Adobe 不再繼續(xù)開(kāi)發(fā)面向移動(dòng)設(shè)備瀏覽器的 Flash 插件，積極投身于 HTML5，這意味著 Flash 技術(shù)的凋零。

這一年，HTML5 游戲火爆到了一個(gè)高潮，他的低門檻和高收益讓很多開(kāi)發(fā)者眼紅，正因如此，移動(dòng)端開(kāi)發(fā)工具和調(diào)試工具也日益成熟。jQuery 已經(jīng)成為大小公司日常開(kāi)發(fā)的標(biāo)配，成千上萬(wàn)的 JQ 插件讓網(wǎng)頁(yè)開(kāi)發(fā)變得尤為輕松，而隨之而來(lái)的也是頁(yè)面的臃腫和性能調(diào)優(yōu)的深入探索。

Node.js 已經(jīng)悄然崛起，在 github 上的訪問(wèn)量已經(jīng)超過(guò)了 Rails，國(guó)內(nèi)的云應(yīng)用開(kāi)始嘗試使用 Node.js，Node.js 相關(guān)工具也紛紛出來(lái)。

12 年，響應(yīng)式開(kāi)發(fā)，工程化推進(jìn)

隨著硬件技術(shù)的發(fā)展，各手機(jī)廠商又開(kāi)始騷動(dòng)起來(lái)，為了占有更多的市場(chǎng)，不斷提高產(chǎn)品的性價(jià)比，體驗(yàn)也得到了不斷的優(yōu)化。借著先前兩年 HTML5 刮起的東風(fēng)，移動(dòng)端上的 web 開(kāi)發(fā)也顫抖了起來(lái)。移動(dòng)端的開(kāi)發(fā)挑戰(zhàn)不亞于 PC 上對(duì)多個(gè)瀏覽器的支持，這一年，萌生了眾多移動(dòng)端框架，如 Sencha Touch/Zepto.js/JQ Mobile 等，相對(duì) PC 端框架，它們更加輕便。

而移動(dòng)端的崛起，帶來(lái)了許多終端開(kāi)發(fā)難題：多終端適配，多分辨率適配，遠(yuǎn)程調(diào)試等等，而隨著這些難題一個(gè)個(gè)被解決，移動(dòng)端生長(zhǎng)的勢(shì)頭變得更加強(qiáng)盛。此時(shí) Twitter 也推出了 Bootstrap， 這個(gè)前端開(kāi)發(fā)工具包不僅方便了前端，也方便了后端同學(xué)，它的出現(xiàn)讓快速建站更加簡(jiǎn)單。

編程思想的切換，迎來(lái)了 CoffeeScript 和 TypeScript，這兩個(gè)預(yù)處理語(yǔ)言的出現(xiàn)又為 JavaScript 引來(lái)了不少其他方向轉(zhuǎn)型過(guò)來(lái)的開(kāi)發(fā)者。JavaScript 的兄弟 Node.js，也在命令行領(lǐng)域開(kāi)拓了一片不小的疆域，甚至有動(dòng)搖 Perl 和 Ruby 地位的趨勢(shì)。

在前端工程化上，幾個(gè)派系相互爭(zhēng)斗，產(chǎn)出了 AMD、CMD、KMD 等規(guī)范，也衍生了 SeaJS、RequireJS 等模塊化工具。前端在這一年很有跳躍感。

13 年，爆發(fā)式增長(zhǎng)，百花齊放

規(guī)范和標(biāo)準(zhǔn)上有不少產(chǎn)出。Web Components 的出現(xiàn)給前端開(kāi)發(fā)開(kāi)辟了新思路；WebDriver 規(guī)范的出來(lái)推動(dòng)了自動(dòng)化測(cè)試的進(jìn)程，ECMAScript 6 的規(guī)范草案落地，Webapp 工作小組在這一年也是相當(dāng)活躍。

Chrome 瀏覽器在這一年也有了很大的突破，開(kāi)始支持 SPDY，使用 Blink 取代 webkit 作為 Chromium 的新渲染引擎，Chrome DevTools 的調(diào)試體驗(yàn)大幅度提升。這一年中，Chrome 連同其他瀏覽器廠商快速推動(dòng)了各項(xiàng)草案規(guī)范的實(shí)現(xiàn)。

語(yǔ)言能力上依舊在增強(qiáng)，并且從 JS 開(kāi)始擴(kuò)散到 CSS，出現(xiàn)了 LESS、SASS 和 Stylus 等預(yù)處理語(yǔ)言，Web 開(kāi)發(fā)變得更加緊湊。

而在無(wú)線端，應(yīng)用不再局限于 Webapp，由于流暢度、性能等方面不能滿足用戶體驗(yàn)的需求，各大公司開(kāi)始轉(zhuǎn)向 Native 方向的研究，進(jìn)而出現(xiàn)了 Hybrid 和 PhoneGap 的繁榮，它們?yōu)?JS 調(diào)用了提供更多的設(shè)備 API。

Node.js 大放異彩，很多公司在生產(chǎn)環(huán)境中使用 Node.js，同時(shí)也出現(xiàn)了諸如 Express、Meteor 等小巧的快速搭建 Node.js Server 的應(yīng)用框架。

各瀏覽器的調(diào)試也是種類繁多、功能豐富，PhantomJS 在自動(dòng)化測(cè)試上開(kāi)始取代 Selenium，出現(xiàn)了眾多的遠(yuǎn)程調(diào)試方案和工具。

前端工程化開(kāi)始普及，各公司開(kāi)始推出自己的前端集成開(kāi)發(fā)解決方案。

14 年，移動(dòng)端的崛起，HTML5 和 ES6 落地

HTML5 正式定稿，這意味著，web page 正式演變?yōu)?web application。ES6 華麗麗走進(jìn)前端，走的很穩(wěn)重，它的 Module/Class 等特性已經(jīng)完全讓這們語(yǔ)言具備了開(kāi)發(fā)大型應(yīng)用的能力。

大而厚的基礎(chǔ)庫(kù)難以滿足靈活場(chǎng)景，Mobile 要求極致體驗(yàn)，MV* 庫(kù)鋪卷而來(lái)，如 avalon/angular/knockout 等。

Web Components 跨終端組件快速發(fā)展，移動(dòng)端開(kāi)發(fā)迎來(lái)一次升華。Node.js 前后端分離的流行，中間層的出現(xiàn)改變了前后端的合作模式。

2014 是顛覆式的一年，前端發(fā)展在這一年開(kāi)始形成了一個(gè)短暫的穩(wěn)定格局。

15 年，觀念的轉(zhuǎn)變，步入前端工業(yè)化生產(chǎn)

今年格外引人注目的框架是，類 React。Facebook 在 React.js Conf 2015 大會(huì)上推出了基于 JavaScript 的開(kāi)源框架 React Native，它結(jié)合了 Web 應(yīng)用和 Native 應(yīng)用的優(yōu)勢(shì)，可以使用 JavaScript 來(lái)開(kāi)發(fā) iOS 和 Android 原生應(yīng)用。在 JavaScript 中用 React 抽象操作系統(tǒng)原生的 UI 組件，代替 DOM 元素來(lái)渲染等。敲一次代碼，能夠運(yùn)行在多個(gè)平臺(tái)上，其優(yōu)勢(shì)可見(jiàn)一斑。除了 React ，還有手機(jī)淘寶推出的 Weex 框架，它吸收了 vue.js 的編程精華，編程風(fēng)格更加簡(jiǎn)約。

在眾多構(gòu)建工具中，如今瀟灑存活的并不多。體驗(yàn)完 grunt 和 browserify 后，gulp 順勢(shì)而至，爾后又出現(xiàn)了 webpack、jspm 等。而包管理工具，經(jīng)歷了 components、bower、spm 后，npm 開(kāi)始主導(dǎo)整個(gè)市場(chǎng)。

Node.js 的應(yīng)用已經(jīng)鋪天蓋地，各大公司前端都把 Node.js 作為分離前后端的主要手段，并且在測(cè)試、監(jiān)控等方面沉淀了大量?jī)?nèi)容。不過(guò)，這個(gè)市場(chǎng)是很苛刻的，Node.js 的性能難以達(dá)到 C/C++ 的水平，那么接下來(lái)要做的就是要提升性能，至少得接近 C/C++。

參考：http://www.barretlee.com/blog/2015/12/10/after-framework-we-gonna-to-hug-data/

雖然出來(lái)的東西多，但是各種東西各有各的應(yīng)用場(chǎng)景，還是可以根據(jù)需要選擇相應(yīng)的框架和解決方案，就像大家經(jīng)常說(shuō)的不為技術(shù)而技術(shù)，為了業(yè)務(wù)而技術(shù)(相信還是有很多童鞋感覺(jué)某個(gè)東西高大上，而沒(méi)有太多考慮試用場(chǎng)景，當(dāng)做自己學(xué)習(xí)和實(shí)踐的用到生產(chǎn)環(huán)境環(huán)境中吧)。

所以現(xiàn)在創(chuàng)業(yè)公司做產(chǎn)品選的應(yīng)該是Hybrid來(lái)做移動(dòng)開(kāi)發(fā)，一套代碼可以跑在移動(dòng)端瀏覽器，可以打包成android的app和ios的app(打包可以了解cordova(選)，appcan, APICloud等等)，后期在根據(jù)發(fā)展開(kāi)發(fā)其他的比如pc web版本。這樣一來(lái)不僅節(jié)約時(shí)間成本，也節(jié)約了金錢成本，后期的維護(hù)也只需要維護(hù)一套代碼，是不是感覺(jué)比之前的多套代碼好很多。

自從14年我一直很關(guān)注前端的變化與發(fā)展，所以我覺(jué)得我現(xiàn)在不能再錯(cuò)過(guò)h5的浪潮了，我覺(jué)得只有了解前后端才能有一個(gè)更加全面的視野來(lái)做產(chǎn)品，來(lái)把一個(gè)東西做好，做技術(shù)選型的時(shí)候也更加得心應(yīng)手了。雖然我之前也會(huì)一些前端技術(shù)，但是跟現(xiàn)在大家常說(shuō)的大前端比起來(lái)，感覺(jué)還是會(huì)得太少。

我經(jīng)常在項(xiàng)目強(qiáng)調(diào)前端優(yōu)化的重要性，可能由于歷史原因其他童鞋并不以為然，那個(gè)時(shí)候覺(jué)前后端都由自己來(lái)掌控多好。所以從現(xiàn)在開(kāi)始有時(shí)間就要好好學(xué)習(xí)一下大前端了。畢竟有基礎(chǔ)，上手應(yīng)該也快。希望在技術(shù)的道路上，越走越遠(yuǎn)。

以后

以后前端的發(fā)展必然是越來(lái)越火，出來(lái)的輪子和解決方案也會(huì)越來(lái)越多，雖然一個(gè)輪子出來(lái)可能很快就會(huì)被替換掉，增大了我們的學(xué)習(xí)成本，但這也是證明了前端是在良性發(fā)展，就像我們常說(shuō)的“長(zhǎng)江后浪推前浪”，更好的東西出來(lái)了就應(yīng)該替換掉舊的東西，當(dāng)然舊的輪子經(jīng)過(guò)時(shí)間和市場(chǎng)的檢驗(yàn)當(dāng)然更加穩(wěn)定，更加成熟。

在選擇上就仁者見(jiàn)仁，智者見(jiàn)智了，希望還是從業(yè)務(wù)場(chǎng)景出發(fā)吧。既然選擇了技術(shù)這條路，就努力走下去吧。

這也算我的一個(gè)年終總結(jié)，有誤的地方希望大家糾正。最后，祝所有人“新年快樂(lè)”!

網(wǎng)站名稱：淺談這些年WEB前端變化
文章轉(zhuǎn)載：http://m.rwnh.cn/news/261544.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、商城網(wǎng)站、小程序開(kāi)發(fā)、手機(jī)網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)