前端開發(fā)

前端開發(fā)是創(chuàng)建Web頁(yè)面或app等前端界面呈現(xiàn)給用戶的過(guò)程缕粹，通過(guò)HTML稚茅，CSS及JavaScript以及衍生出來(lái)的各種技術(shù)、框架平斩、解決方案亚享，來(lái)實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互 [1] 。它從網(wǎng)頁(yè)制作演變而來(lái)绘面，名稱上有很明顯的時(shí)代特征虹蒋。在互聯(lián)網(wǎng)的演化進(jìn)程中，網(wǎng)頁(yè)制作是Web1.0時(shí)代的產(chǎn)物飒货，早期網(wǎng)站主要內(nèi)容都是靜態(tài)魄衅，以圖片和文字為主，用戶使用網(wǎng)站的行為也以瀏覽為主塘辅。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展和HTML5晃虫、CSS3的應(yīng)用，現(xiàn)代網(wǎng)頁(yè)更加美觀扣墩，交互效果顯著哲银，功能更加強(qiáng)大扛吞。 [2]

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

發(fā)展歷程

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

前端技術(shù)指通過(guò)瀏覽器到用戶端計(jì)算機(jī)的統(tǒng)稱盲泛，存貯于服務(wù)器端的統(tǒng)稱為后端技術(shù)。

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

以前會(huì)Photoshop和Dreamweaver就可以制作網(wǎng)頁(yè)寺滚，隨著網(wǎng)站開發(fā)難度加大、開發(fā)方式多樣屈雄，網(wǎng)頁(yè)制作更接近傳統(tǒng)的網(wǎng)站后臺(tái)開發(fā)村视，網(wǎng)頁(yè)制作更多被稱為Web前端開發(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)單的圖文信息，并不能滿足用戶在界面上的需求质况，對(duì)界面技術(shù)的要求也不高愕宋。隨著硬件的完善、高性能瀏覽器的出現(xiàn)和寬帶的普及结榄，技術(shù)可以在用戶體驗(yàn)方面實(shí)現(xiàn)更多種可能中贝，前端技術(shù)領(lǐng)域迸發(fā)出旺盛的生命力。

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

隨著手機(jī)成為人們生活中不可或缺的一部分，成為人們身體的延伸，人們迎來(lái)了體驗(yàn)為王的時(shí)代段磨。移動(dòng)端的前端技術(shù)開發(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開發(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)，用戶瀏覽網(wǎng)頁(yè)的體驗(yàn)已經(jīng)有了較大的改善本股。不過(guò)HTML5中的幾項(xiàng)新技術(shù)實(shí)現(xiàn)了質(zhì)的突破攀痊，使得Web技術(shù)首次被認(rèn)為能夠接近于本地原生應(yīng)用技術(shù)，開發(fā)Web應(yīng)用真正成為開發(fā)者的一個(gè)選擇拄显。

HTML5可以使開發(fā)者的工作大大簡(jiǎn)化苟径，理論上單次開發(fā)就可以在不同平臺(tái)借助瀏覽器運(yùn)行，降低開發(fā)的成本躬审，這也是產(chǎn)業(yè)界普遍認(rèn)為HTML5技術(shù)的主要優(yōu)點(diǎn)之一棘街。AppMobi、摩托羅拉承边、Sencha遭殉、Appcelerator等公司均已推出了較為成熟的開發(fā)工具，支持HTML5應(yīng)用的發(fā)展博助。

我自己是一名從事了多年開發(fā)的web前端老程序員恩沽，目前辭職在做自己的web前端私人定制課程，去年我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨翔始，各種框架都有整理罗心，送給每一位前端小伙伴里伯，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取渤闷。

CSS

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

JavaScript

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

操作系統(tǒng)

了解Unix和Linux的基本知識(shí)，對(duì)于開發(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前端開發(fā)中遇到的各種頁(yè)面處理技術(shù)削祈，讓前端開發(fā)人員能夠準(zhǔn)確和快速地把握整個(gè)網(wǎng)頁(yè)的架構(gòu)，從而達(dá)到減少開發(fā)成本和頁(yè)面美化目的脑漫。

前端框架

學(xué)好Web框架

熟悉掌握HTML髓抑、服務(wù)器端腳本語(yǔ)言、CSS和JavaScript之后优幸，學(xué)習(xí)Web框架可以加快Web開發(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)端開發(fā)不斷升華刹碾，以下是一些常見開源前端框架：

Bootstrap

主流框架之一，Bootstrap 是基于 HTML座柱、CSS迷帜、JavaScript的，它簡(jiǎn)潔靈活色洞，使得 Web 開發(fā)更加快捷戏锹。

html5-boilerplate

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

Meteor

Meteor是新一代的開發(fā)即時(shí)web應(yīng)用的開源框架锦针，它能在較短時(shí)間內(nè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)畫和過(guò)渡焕盟，為開發(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 文件的集合,可快速開發(fā)漂亮的網(wǎng)站,適合各種屏幕設(shè)備包括手機(jī)。Skeleton 基于 960 grid 開發(fā)崇堰。它是一個(gè) UI 框架沃于。

Amaze UI

國(guó)內(nèi)首個(gè)開源HTML5跨屏前端框架產(chǎn)品系列，中文排版支持更優(yōu)赶袄、本土化組件豐富揽涮。該產(chǎn)品系列中有專門針對(duì)移動(dòng)端的HTML5混合應(yīng)用開發(fā)框架Amaze UI Touch以及針對(duì)跨屏HTML5網(wǎng)頁(yè)開發(fā)的Amaze UI Web抠藕。其中饿肺，Amaze UI Touch可以幫助開發(fā)者通過(guò)豐富的組件，快速構(gòu)建出與原生APP相媲美的專屬移動(dòng)端的HTML5應(yīng)用盾似。

UIkit

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

Yui

Yahoo! UI Library (YUI) 是一個(gè)開放源代碼的 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è)開放募疮、簡(jiǎn)單炫惩、易用的前端基礎(chǔ)類庫(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

開源HTML5前端框架

Clouda Touch.js

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

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

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

常見前端開發(fā)工程師職位職責(zé)要求：

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

（2）熟悉W3C標(biāo)準(zhǔn)和各主流瀏覽器在前端開發(fā)中的差異忠聚，能熟練運(yùn)用DIV+CSS，提供針對(duì)不同瀏覽器的前端頁(yè)面解決方案 唱捣。移動(dòng)HTML5的性能和其他優(yōu)化两蟀，為用戶呈現(xiàn)最好的界面交互體驗(yàn)和最好的性能。

（3）負(fù)責(zé)相關(guān)產(chǎn)品的需求以及前端程序的實(shí)現(xiàn)震缭，提供合理的前端架構(gòu) 赂毯。改進(jìn)和優(yōu)化開發(fā)工具、開發(fā)流程拣宰、和開發(fā)框架 [

（4）與產(chǎn)品党涕、后臺(tái)開發(fā)人員保持良好溝通，能快速理解巡社、消化各方需求膛堤，并落實(shí)為具體的開發(fā)工作 ；能獨(dú)立完成功能頁(yè)面的設(shè)計(jì)與代碼編寫晌该，配合產(chǎn)品團(tuán)隊(duì)完成功能頁(yè)面的需求調(diào)研和分析肥荔。

（5）了解服務(wù)器端的相關(guān)工作，在交互體驗(yàn)朝群、產(chǎn)品設(shè)計(jì)等方面有自己的見解燕耿。

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

相比較“前端開發(fā)工程師”而言，更加資深姜胖，工作職責(zé)更大誉帅。一般而言，資深前端開發(fā)工程師需要使用JavaScript或者ActionScript來(lái)編寫和封裝具有良好性能的前端交互組件右莱，熟練使用CSS+XHTML完美輸出視覺(jué)界面蚜锨。同時(shí)還要對(duì)Web項(xiàng)目的前端實(shí)現(xiàn)方案 提供專業(yè)指導(dǎo)和監(jiān)督并在日常工作之中對(duì)新人及相關(guān)開發(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ù)選型提供專業(yè)意見和方案朴肺。