-
前端開發
鎖定
- 中文名
- 前端開發
- 外文名
- Front-end development
- 所屬學科
- 計算機科學
前端開發發展歷程
以前會Photoshop和Dreamweaver就可以製作網頁,隨着網站開發難度加大、開發方式多樣,網頁製作更接近傳統的網站後台開發,網頁製作更多被稱為Web前端開發。前端技術包括4個部分:前端美工、瀏覽器兼容、CSS、HTML“傳統”技術與Adobe AIR、Google Gears,以及概念性較強的交互式設計,藝術性較強的視覺設計等。
在Web1.0時代,由於網速和終端能力的限制,大部分網站只能呈現簡單的圖文信息,並不能滿足用户在界面上的需求,對界面技術的要求也不高。隨着硬件的完善、高性能瀏覽器的出現和寬帶的普及,技術可以在用户體驗方面實現更多種可能,前端技術領域迸發出旺盛的生命力。
2005年以後,互聯網進入Web2.0時代,各種類似桌面軟件的Web應用大量湧現,前端由此發生了翻天覆地的變化。網頁不再只是承載單一的文字和圖片,各種富媒體讓網頁的內容更加生動,網頁上軟件化的交互形式為用户提供了更好的使用體驗,這些都是基於前端技術實現的。
前端開發核心技術
HTML
掌握HTML是網頁的核心,是一種製作萬維網頁面的標準語言,是萬維網瀏覽器使用的一種語言,它消除了不同計算機之間信息交流的障礙。因此,它是網絡上應用最為廣泛的語言,也是構成網頁文檔的主要語言,學好HTML是成為Web開發人員的基本條件。
隨着CSS、JavaScript、Flash等技術的發展,Web對於應用的處理能力逐漸增強,用户瀏覽網頁的體驗已經有了較大的改善。不過HTML5中的幾項新技術實現了質的突破,使得Web技術首次被認為能夠接近於本地原生應用技術,開發Web應用真正成為開發者的一個選擇。
HTML5可以使開發者的工作大大簡化,理論上單次開發就可以在不同平台藉助瀏覽器運行,降低開發的成本,這也是產業界普遍認為HTML5技術的主要優點之一。AppMobi、摩托羅拉、Sencha、Appcelerator等公司均已推出了較為成熟的開發工具,支持HTML5應用的發展。
[3]
CSS
學好CSS是網頁外觀的重要一點,CSS可以幫助把網頁外觀做得更加美觀。
JavaScript
學習JavaScript的基本語法,以及如何使用JavaScript編程將會提高開發人員的個人技能。
操作系統
瞭解Unix和Linux的基本知識,對於開發人員有益無害。
瞭解Web服務器,包括對Apache的基本配置,htaccess配置技巧的掌握等。
前端開發性能優化
- 儘量減少HTTP請求 (Make Fewer HTTP Requests)
- 減少DNS 查找 (Reduce DNS Lookups)
- 避免重定向 (Avoid Redirects)
- 使得 Ajax 可緩存 (Make Ajax Cacheable)
- 延遲載入組件 (Post-load Components)
- 預載入組件 (Preload Components)
- 減少DOM元素數量 (Reduce the Number of DOM Elements)
- 切分組件到多個域 (Split Components Across Domains)
- 最小化iframe的數量 (Minimize the Number of iframes)
- 杜絕 http404錯誤 (No 404s)
以上10條涵蓋了Web前端開發中遇到的各種頁面處理技術,讓前端開發人員能夠準確和快速地把握整個網頁的架構,從而達到減少開發成本和頁面美化目的。
前端開發前端框架
學好Web框架,熟悉掌握HTML、服務器端腳本語言、CSS和JavaScript之後,學習Web框架可以加快Web開發速度,節約時間。PHP程序員可選的框架包括CakePHP、CodeIgniter、Zend等,Python程序員喜歡使用Django和 webpy,Ruby程序員常用RoR。
隨着Web 越來越規範和標準的統一,Web組件化技術不斷革新,移動端開發不斷昇華,以下是一些常見開源前端框架:
主流框架之一,Bootstrap 是基於 HTML、CSS、JavaScript的,它簡潔靈活,使得 Web 開發更加快捷。
html5-boilerplate
該框架可以快速構建健壯,且適應力強的web app或網站。
Meteor
Semantic UI
Foundation
優秀的響應式前端框架
Materialize
基於材料設計的現代化響應式前端框架。可提供默認的樣式,自定義組件。此外,Materialize還改進動畫和過渡,為開發人員提供流暢的體驗。
Pure
幾乎可以在每一個web項目中使用的一組小的和響應式的CSS模塊。
Vue
Skeleton
Skeleton 是一個小的 JS 和 CSS 文件的集合,可快速開發漂亮的網站,適合各種屏幕設備包括手機。Skeleton 基於 960 grid 開發。它是一個 UI 框架。
Amaze UI
國內首個開源HTML5跨屏前端框架產品系列,中文排版支持更優、本土化組件豐富。該產品系列中有專門針對移動端的HTML5混合應用開發框架Amaze UI Touch以及針對跨屏HTML5網頁開發的Amaze UI Web。其中,Amaze UI Touch可以幫助開發者通過豐富的組件,快速構建出與原生APP相媲美的專屬移動端的HTML5應用。
UIkit
一個輕量級的和模塊化的前端框架,用於快速開發和功能強大的web接口。
Yui
Yahoo! UI Library (YUI) 是一個開放源代碼的 JavaScript 函數庫,為了能建立一個高互動的網頁,它採用了AJAX, DHTML 和 DOM 等程式碼技術。它也包含了許多 CSS 資源。使用授權為 BSD許可證。
kissy
一款跨終端、模塊化、高性能、使用簡單的 JavaScript 框架。
MUI
最接近原生App體驗的前端框架的框架。
Arale
一個開放、簡單、易用的前端基礎類庫。
JX
JX 是模塊化的非侵入式Web前端框架,特別適合構建和組織大規模、工業級的Web App。
GMU
GMU是基於zepto的mobile UI組件庫,提供webapp、pad端簡單易用的UI組件! Web App。
ZUI
開源HTML5前端框架
Clouda Touch.js
前端開發職業機會
常見前端開發工程師職位職責要求:
(2)熟悉W3C標準和各主流瀏覽器在前端開發中的差異,能熟練運用DIV+CSS,提供針對不同瀏覽器的前端頁面解決方案
[6]
。移動HTML5的性能和其他優化,為用户呈現最好的界面交互體驗和最好的性能。
[7]
(5)瞭解服務器端的相關工作,在交互體驗、產品設計等方面有自己的見解。
資深前端開發工程師
相比較“前端開發工程師”而言,更加資深,工作職責更大。一般而言,資深前端開發工程師需要使用JavaScript或者ActionScript來編寫和封裝具有良好性能的前端交互組件,熟練使用CSS+XHTML完美輸出視覺界面。同時還要對Web項目的前端實現方案 提供專業指導和監督並在日常工作之中對新人及相關開發人員進行前端技能的培訓和指導。另外,還要跟蹤研究前端技術,設計並實施全網前端優化。HTML5、node.js(JavaScript編程的後台語言)興起,要求資深前端熟悉後端,並且要在商業模式、代碼架構思想等維度去整體考慮前端的全局佈局。
[9]
前端架構師
前端架構師更偏管理,但職責要求不僅限於管理。前端架構師需要帶領組員實現全網的前端框架和優化,創建前端的相應標準和規範,完善並推廣和應用自己的標準和框架。同時,還要站在全局的角色為整個網站的信息架構和技術選型提供專業意見和方案。
[6]
- 參考資料
-
- 1. 前端技術領域潛力巨大 百度辦競賽招人 .IT168[引用日期2018-08-29]
- 2. 前端技術 .騰訊網.2018-01-20[引用日期2018-02-28]
- 3. HTML5能否挑戰移動終端OS .中華人民共和國工業和信息化部[引用日期2018-08-29]
- 4. 前端開發大盤點:2015最流行前端框架TOP20 .網易[引用日期2018-08-28]
- 5. 前端開發工程師最緊俏 年薪可達20萬 .網易新聞[引用日期2018-08-28]
- 6. web前端開發工程師職責 .人民網.2011年11月29日[引用日期2016-06-27]
- 7. 200萬年薪!人民網這個崗位等你來! .人民網[引用日期2018-08-29]
- 8. 新華新媒文化傳播有限公司(新媒體中心)公開招聘公告 .新華網[引用日期2018-08-29]
- 9. 如何衡量一個人的 JavaScript 水平? .前端範[引用日期2015-06-20]