五分鐘帶你了解前端開(kāi)發(fā)券盅,以及前端開(kāi)發(fā)的發(fā)展機(jī)會(huì)

前端開(kāi)發(fā)

前端開(kāi)發(fā)是創(chuàng)建Web頁(yè)面或app等前端界面呈現(xiàn)給用戶(hù)的過(guò)程帮哈,通過(guò)HTML,CSS及JavaScript以及衍生出來(lái)的各種技術(shù)锰镀、框架娘侍、解決方案,來(lái)實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶(hù)界面交互 [1] 泳炉。它從網(wǎng)頁(yè)制作演變而來(lái)憾筏,名稱(chēng)上有很明顯的時(shí)代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中花鹅,網(wǎng)頁(yè)制作是Web1.0時(shí)代的產(chǎn)物氧腰,早期網(wǎng)站主要內(nèi)容都是靜態(tài),以圖片和文字為主刨肃,用戶(hù)使用網(wǎng)站的行為也以瀏覽為主古拴。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展和HTML5、CSS3的應(yīng)用真友,現(xiàn)代網(wǎng)頁(yè)更加美觀黄痪,交互效果顯著,功能更加強(qiáng)大锻狗。 [2]

在這里小編建了一個(gè)前端學(xué)習(xí)交流扣扣群:132667127满力,我自己整理的最新的前端資料和高級(jí)開(kāi)發(fā)教程,如果有想需要的轻纪,可以加群一起學(xué)習(xí)交流

移動(dòng)互聯(lián)網(wǎng)帶來(lái)了大量高性能的移動(dòng)終端設(shè)備以及快速的無(wú)線網(wǎng)絡(luò)油额,HTML5,node.jS的廣泛應(yīng)用刻帚,各類(lèi)框架類(lèi)庫(kù)層出不窮潦嘶。 [1]

發(fā)展歷程

前端技術(shù)的發(fā)展是互聯(lián)網(wǎng)自身發(fā)展變化的一個(gè)縮影。

前端技術(shù)指通過(guò)瀏覽器到用戶(hù)端計(jì)算機(jī)的統(tǒng)稱(chēng)崇众,存貯于服務(wù)器端的統(tǒng)稱(chēng)為后端技術(shù)掂僵。

前端開(kāi)發(fā)主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶(hù)航厚。

以前會(huì)Photoshop和Dreamweaver就可以制作網(wǎng)頁(yè),隨著網(wǎng)站開(kāi)發(fā)難度加大锰蓬、開(kāi)發(fā)方式多樣幔睬,網(wǎng)頁(yè)制作更接近傳統(tǒng)的網(wǎng)站后臺(tái)開(kāi)發(fā),網(wǎng)頁(yè)制作更多被稱(chēng)為Web前端開(kāi)發(fā)芹扭。前端技術(shù)包括4個(gè)部分:前端美工麻顶、瀏覽器兼容、CSS舱卡、HTML“傳統(tǒng)”技術(shù)與Adobe AIR辅肾、Google Gears,以及概念性較強(qiáng)的交互式設(shè)計(jì),藝術(shù)性較強(qiáng)的視覺(jué)設(shè)計(jì)等轮锥。

在Web1.0時(shí)代矫钓,由于網(wǎng)速和終端能力的限制,大部分網(wǎng)站只能呈現(xiàn)簡(jiǎn)單的圖文信息舍杜,并不能滿(mǎn)足用戶(hù)在界面上的需求新娜,對(duì)界面技術(shù)的要求也不高。隨著硬件的完善既绩、高性能瀏覽器的出現(xiàn)和寬帶的普及杯活,技術(shù)可以在用戶(hù)體驗(yàn)方面實(shí)現(xiàn)更多種可能,前端技術(shù)領(lǐng)域迸發(fā)出旺盛的生命力熬词。

2005年以后,互聯(lián)網(wǎng)進(jìn)入Web2.0時(shí)代吸重,各種類(lèi)似桌面軟件的Web應(yīng)用大量涌現(xiàn)互拾,前端由此發(fā)生了翻天覆地的變化。網(wǎng)頁(yè)不再只是承載單一的文字和圖片嚎幸,各種富媒體讓網(wǎng)頁(yè)的內(nèi)容更加生動(dòng)颜矿,網(wǎng)頁(yè)上軟件化的交互形式為用戶(hù)提供了更好的使用體驗(yàn),這些都是基于前端技術(shù)實(shí)現(xiàn)的嫉晶。

隨著手機(jī)成為人們生活中不可或缺的一部分骑疆,成為人們身體的延伸,人們迎來(lái)了體驗(yàn)為王的時(shí)代替废。移動(dòng)端的前端技術(shù)開(kāi)發(fā)前景寬闊箍铭。此外,前端技術(shù)還能應(yīng)用于智能電視椎镣、智能手表甚至人工智能領(lǐng)域诈火。

核心技術(shù)

HTML語(yǔ)言

掌握HTML是網(wǎng)頁(yè)的核心,是一種制作萬(wàn)維網(wǎng)頁(yè)面的標(biāo)準(zhǔn)語(yǔ)言状答,是萬(wàn)維網(wǎng)瀏覽器使用的一種語(yǔ)言冷守,它消除了不同計(jì)算機(jī)之間信息交流的障礙刀崖。因此,它是網(wǎng)絡(luò)上應(yīng)用最為廣泛的語(yǔ)言拍摇,也是構(gòu)成網(wǎng)頁(yè)文檔的主要語(yǔ)言亮钦,學(xué)好HTML是成為Web開(kāi)發(fā)人員的基本條件。

HTML是一種標(biāo)記語(yǔ)言充活,能夠?qū)崿F(xiàn)Web頁(yè)面并在瀏覽器中顯示蜂莉。HTML5作為HTML的最新版本,引入了多項(xiàng)新技術(shù)堪唐,大大增強(qiáng)了對(duì)于應(yīng)用的支持能力巡语,使得Web技術(shù)不再局限于呈現(xiàn)網(wǎng)頁(yè)內(nèi)容。

隨著CSS淮菠、JavaScript男公、Flash等技術(shù)的發(fā)展,Web對(duì)于應(yīng)用的處理能力逐漸增強(qiáng)合陵,用戶(hù)瀏覽網(wǎng)頁(yè)的體驗(yàn)已經(jīng)有了較大的改善枢赔。不過(guò)HTML5中的幾項(xiàng)新技術(shù)實(shí)現(xiàn)了質(zhì)的突破,使得Web技術(shù)首次被認(rèn)為能夠接近于本地原生應(yīng)用技術(shù)拥知,開(kāi)發(fā)Web應(yīng)用真正成為開(kāi)發(fā)者的一個(gè)選擇踏拜。

HTML5可以使開(kāi)發(fā)者的工作大大簡(jiǎn)化,理論上單次開(kāi)發(fā)就可以在不同平臺(tái)借助瀏覽器運(yùn)行低剔,降低開(kāi)發(fā)的成本速梗,這也是產(chǎn)業(yè)界普遍認(rèn)為HTML5技術(shù)的主要優(yōu)點(diǎn)之一。AppMobi襟齿、摩托羅拉姻锁、Sencha、Appcelerator等公司均已推出了較為成熟的開(kāi)發(fā)工具猜欺,支持HTML5應(yīng)用的發(fā)展位隶。

CSS

學(xué)好CSS是網(wǎng)頁(yè)外觀的重要一點(diǎn),CSS可以幫助把網(wǎng)頁(yè)外觀做得更加美觀开皿。

JavaScript

學(xué)習(xí)JavaScript的基本語(yǔ)法涧黄,以及如何使用JavaScript編程將會(huì)提高開(kāi)發(fā)人員的個(gè)人技能。

操作系統(tǒng)

了解Unix和Linux的基本知識(shí)赋荆,對(duì)于開(kāi)發(fā)人員有益無(wú)害笋妥。

網(wǎng)絡(luò)服務(wù)器

了解Web服務(wù)器,包括對(duì)Apache的基本配置窄潭,htaccess配置技巧的掌握等挽鞠。

優(yōu)化

盡量減少HTTP請(qǐng)求 (Make Fewer HTTP Requests)

減少DNS 查找 (Reduce DNS Lookups)

避免重定向 (Avoid Redirects)

使得 Ajax 可緩存 (Make Ajax Cacheable)

延遲載入組件 (Post-load Components)

預(yù)載入組件 (Preload Components)

減少DOM元素?cái)?shù)量 (Reduce the Number of DOM Elements)

切分組件到多個(gè)域 (Split Components Across Domains)

最小化iframe的數(shù)量 (Minimize the Number of iframes)

杜絕 http404錯(cuò)誤 (No 404s)

以上10條涵蓋了Web前端開(kāi)發(fā)中遇到的各種頁(yè)面處理技術(shù),讓前端開(kāi)發(fā)人員能夠準(zhǔn)確和快速地把握整個(gè)網(wǎng)頁(yè)的架構(gòu),從而達(dá)到減少開(kāi)發(fā)成本和頁(yè)面美化目的信认。

前端框架

學(xué)好Web框架

熟悉掌握HTML材义、服務(wù)器端腳本語(yǔ)言、CSS和JavaScript之后嫁赏,學(xué)習(xí)Web框架可以加快Web開(kāi)發(fā)速度其掂,節(jié)約時(shí)間。PHP程序員可選的框架包括CakePHP潦蝇、CodeIgniter款熬、Zend等,Python程序員喜歡使用Django和 webpy攘乒,Ruby程序員常用RoR贤牛。

隨著Web 越來(lái)越規(guī)范和標(biāo)準(zhǔn)的統(tǒng)一,Web組件化技術(shù)不斷革新则酝,移動(dòng)端開(kāi)發(fā)不斷升華殉簸,以下是一些常見(jiàn)開(kāi)源前端框架:

Bootstrap

主流框架之一,Bootstrap 是基于 HTML沽讹、CSS般卑、JavaScript的,它簡(jiǎn)潔靈活爽雄,使得 Web 開(kāi)發(fā)更加快捷蝠检。

html5-boilerplate

該框架可以快速構(gòu)建健壯,且適應(yīng)力強(qiáng)的web app或網(wǎng)站挚瘟。

Meteor

Meteor是新一代的開(kāi)發(fā)即時(shí)web應(yīng)用的開(kāi)源框架叹谁,它能在較短時(shí)間內(nèi)完成開(kāi)發(fā)。

Semantic UI

基于自然語(yǔ)言有效原則的UI組件框架

Foundation

優(yōu)秀的響應(yīng)式前端框架

Materialize

基于材料設(shè)計(jì)的現(xiàn)代化響應(yīng)式前端框架乘盖”灸剑可提供默認(rèn)的樣式,自定義組件侧漓。此外,Materialize還改進(jìn)動(dòng)畫(huà)和過(guò)渡监氢,為開(kāi)發(fā)人員提供流暢的體驗(yàn)布蔗。

Pure

幾乎可以在每一個(gè)web項(xiàng)目中使用的一組小的和響應(yīng)式的CSS模塊。

Vue

Vue.js 是用于構(gòu)建交互式的 Web 界面的庫(kù)浪腐。它提供了 MVVM 數(shù)據(jù)綁定和一個(gè)可組合的組件系統(tǒng)纵揍,具有簡(jiǎn)單、靈活的 API议街。

Skeleton

Skeleton 是一個(gè)小的 JS 和 CSS 文件的集合,可快速開(kāi)發(fā)漂亮的網(wǎng)站,適合各種屏幕設(shè)備包括手機(jī)泽谨。Skeleton 基于 960 grid 開(kāi)發(fā)。它是一個(gè) UI 框架。

Amaze UI

國(guó)內(nèi)首個(gè)開(kāi)源HTML5跨屏前端框架產(chǎn)品系列吧雹,中文排版支持更優(yōu)骨杂、本土化組件豐富。該產(chǎn)品系列中有專(zhuān)門(mén)針對(duì)移動(dòng)端的HTML5混合應(yīng)用開(kāi)發(fā)框架Amaze UI Touch以及針對(duì)跨屏HTML5網(wǎng)頁(yè)開(kāi)發(fā)的Amaze UI Web雄卷。其中搓蚪,Amaze UI Touch可以幫助開(kāi)發(fā)者通過(guò)豐富的組件,快速構(gòu)建出與原生APP相媲美的專(zhuān)屬移動(dòng)端的HTML5應(yīng)用丁鹉。

UIkit

一個(gè)輕量級(jí)的和模塊化的前端框架,用于快速開(kāi)發(fā)和功能強(qiáng)大的web接口妒潭。

Yui

Yahoo! UI Library (YUI) 是一個(gè)開(kāi)放源代碼的 JavaScript 函數(shù)庫(kù),為了能建立一個(gè)高互動(dòng)的網(wǎng)頁(yè)揣钦,它采用了AJAX, DHTML 和 DOM 等程式碼技術(shù)雳灾。它也包含了許多 CSS 資源。使用授權(quán)為 BSD許可證冯凹。

kissy

一款跨終端谎亩、模塊化、高性能谈竿、使用簡(jiǎn)單的 JavaScript 框架团驱。

MUI

最接近原生App體驗(yàn)的前端框架的框架。

Arale

一個(gè)開(kāi)放空凸、簡(jiǎn)單嚎花、易用的前端基礎(chǔ)類(lèi)庫(kù)。

JX

JX 是模塊化的非侵入式Web前端框架呀洲,特別適合構(gòu)建和組織大規(guī)模紊选、工業(yè)級(jí)的Web App。

GMU

GMU是基于zepto的mobile UI組件庫(kù)道逗,提供webapp兵罢、pad端簡(jiǎn)單易用的UI組件! Web App。

ZUI

開(kāi)源HTML5前端框架

Clouda Touch.js

Touch.js是移動(dòng)設(shè)備上的手勢(shì)識(shí)別與事件庫(kù),也是在百度內(nèi)部廣泛使用的開(kāi)發(fā)滓窍。

職業(yè)機(jī)會(huì)

2015年12月5日卖词,《廣州互聯(lián)網(wǎng)行業(yè)人才緊缺指數(shù)(TSI)報(bào)告》顯示,前端開(kāi)發(fā)工程師成為廣州互聯(lián)網(wǎng)行業(yè)中最緊俏的職位吏夯。

常見(jiàn)前端開(kāi)發(fā)工程師職位職責(zé)要求:

(1)使用Div+css并結(jié)合Javascript負(fù)責(zé)產(chǎn)品的前端開(kāi)發(fā)和頁(yè)面制作此蜈。

(2)熟悉W3C標(biāo)準(zhǔn)和各主流瀏覽器在前端開(kāi)發(fā)中的差異,能熟練運(yùn)用DIV+CSS噪生,提供針對(duì)不同瀏覽器的前端頁(yè)面解決方案 裆赵。移動(dòng)HTML5的性能和其他優(yōu)化止毕,為用戶(hù)呈現(xiàn)最好的界面交互體驗(yàn)和最好的性能劣坊。

(3)負(fù)責(zé)相關(guān)產(chǎn)品的需求以及前端程序的實(shí)現(xiàn),提供合理的前端架構(gòu) 背稼。改進(jìn)和優(yōu)化開(kāi)發(fā)工具、開(kāi)發(fā)流程植兰、和開(kāi)發(fā)框架 [

(4)與產(chǎn)品份帐、后臺(tái)開(kāi)發(fā)人員保持良好溝通,能快速理解钉跷、消化各方需求弥鹦,并落實(shí)為具體的開(kāi)發(fā)工作 ;能獨(dú)立完成功能頁(yè)面的設(shè)計(jì)與代碼編寫(xiě)爷辙,配合產(chǎn)品團(tuán)隊(duì)完成功能頁(yè)面的需求調(diào)研和分析彬坏。

(5)了解服務(wù)器端的相關(guān)工作,在交互體驗(yàn)膝晾、產(chǎn)品設(shè)計(jì)等方面有自己的見(jiàn)解栓始。

資深前端開(kāi)發(fā)工程師

相比較“前端開(kāi)發(fā)工程師”而言,更加資深血当,工作職責(zé)更大幻赚。一般而言,資深前端開(kāi)發(fā)工程師需要使用JavaScript或者ActionScript來(lái)編寫(xiě)和封裝具有良好性能的前端交互組件臊旭,熟練使用CSS+XHTML完美輸出視覺(jué)界面落恼。同時(shí)還要對(duì)Web項(xiàng)目的前端實(shí)現(xiàn)方案 提供專(zhuān)業(yè)指導(dǎo)和監(jiān)督并在日常工作之中對(duì)新人及相關(guān)開(kāi)發(fā)人員進(jìn)行前端技能的培訓(xùn)和指導(dǎo)。另外离熏,還要跟蹤研究前端技術(shù)佳谦,設(shè)計(jì)并實(shí)施全網(wǎng)前端優(yōu)化。HTML5滋戳、node.js(JavaScript編程的后臺(tái)語(yǔ)言)興起钻蔑,要求資深前端熟悉后端,并且要在商業(yè)模式奸鸯、代碼架構(gòu)思想等維度去整體考慮前端的全局布局咪笑。

前端架構(gòu)師

前端架構(gòu)師更偏管理,但職責(zé)要求不僅限于管理娄涩。前端架構(gòu)師需要帶領(lǐng)組員實(shí)現(xiàn)全網(wǎng)的前端框架和優(yōu)化窗怒,創(chuàng)建前端的相應(yīng)標(biāo)準(zhǔn)和規(guī)范,完善并推廣和應(yīng)用自己的標(biāo)準(zhǔn)和框架蓄拣。同時(shí)扬虚,還要站在全局的角色為整個(gè)網(wǎng)站的信息架構(gòu)和技術(shù)選型提供專(zhuān)業(yè)意見(jiàn)和方案。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末弯蚜,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子剃法,更是在濱河造成了極大的恐慌碎捺,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,946評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異收厨,居然都是意外死亡晋柱,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)诵叁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)雁竞,“玉大人,你說(shuō)我怎么就攤上這事拧额”撸” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,716評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵侥锦,是天一觀的道長(zhǎng)进栽。 經(jīng)常有香客問(wèn)我,道長(zhǎng)恭垦,這世上最難降的妖魔是什么快毛? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,222評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮番挺,結(jié)果婚禮上唠帝,老公的妹妹穿的比我還像新娘。我一直安慰自己玄柏,他們只是感情好襟衰,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著禁荸,像睡著了一般右蒲。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上赶熟,一...
    開(kāi)封第一講書(shū)人閱讀 52,807評(píng)論 1 314
  • 那天瑰妄,我揣著相機(jī)與錄音,去河邊找鬼映砖。 笑死间坐,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的邑退。 我是一名探鬼主播竹宋,決...
    沈念sama閱讀 41,235評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼地技!你這毒婦竟也來(lái)了蜈七?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,189評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤莫矗,失蹤者是張志新(化名)和其女友劉穎飒硅,沒(méi)想到半個(gè)月后砂缩,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,712評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡三娩,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評(píng)論 3 343
  • 正文 我和宋清朗相戀三年庵芭,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片雀监。...
    茶點(diǎn)故事閱讀 40,926評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡双吆,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出会前,到底是詐尸還是另有隱情好乐,我是刑警寧澤,帶...
    沈念sama閱讀 36,580評(píng)論 5 351
  • 正文 年R本政府宣布回官,位于F島的核電站曹宴,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏歉提。R本人自食惡果不足惜笛坦,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望苔巨。 院中可真熱鬧版扩,春花似錦、人聲如沸侄泽。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,750評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)悼尾。三九已至柿扣,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間闺魏,已是汗流浹背未状。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,867評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留析桥,地道東北人司草。 一個(gè)月前我還...
    沈念sama閱讀 49,368評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像泡仗,于是被迫代替她去往敵國(guó)和親埋虹。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容