前端開發(前端開發需要學什么)

前端開發

前端開發是創建Web頁面或app等前端界面呈現給用戶的過程，通過HTML，CSS及JavaScript以及衍生出來的各種技術、框架、解決方案，來實現互聯網產品的用戶界面交互 [1] 。它從網頁制作演變而來，名稱上有很明顯的時代特征。在互聯網的演化進程中，網頁制作是Web1.0時代的產物，早期網站主要內容都是靜態，以圖片和文字為主，用戶使用網站的行為也以瀏覽為主。隨著互聯網技術的發展和HTML5、CSS3的應用，現代網頁更加美觀，交互效果顯著，功能更加強大。 [2]

移動互聯網帶來了大量高性能的移動終端設備以及快速的無線網絡，HTML5，node.jS的廣泛應用，各類框架類庫層出不窮。 [1]

發展歷程

前端技術的發展是互聯網自身發展變化的一個縮影。

前端技術指通過瀏覽器到用戶端計算機的統稱，存貯于服務器端的統稱為后端技術。

前端開發主要職能就是把網站的界面更好地呈現給用戶。

以前會Photoshop和Dreamweaver就可以制作網頁，隨著網站開發難度加大、開發方式多樣，網頁制作更接近傳統的網站后臺開發，網頁制作更多被稱為Web前端開發。前端技術包括4個部分：前端美工、瀏覽器兼容、CSS、HTML“傳統”技術與Adobe AIR、Google Gears,以及概念性較強的交互式設計，藝術性較強的視覺設計等。

在Web1.0時代，由于網速和終端能力的限制，大部分網站只能呈現簡單的圖文信息，并不能滿足用戶在界面上的需求，對界面技術的要求也不高。隨著硬件的完善、高性能瀏覽器的出現和寬帶的普及，技術可以在用戶體驗方面實現更多種可能，前端技術領域迸發出旺盛的生命力。

2005年以后，互聯網進入Web2.0時代，各種類似桌面軟件的Web應用大量涌現，前端由此發生了翻天覆地的變化。網頁不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟件化的交互形式為用戶提供了更好的使用體驗，這些都是基于前端技術實現的。

隨著手機成為人們生活中不可或缺的一部分，成為人們身體的延伸，人們迎來了體驗為王的時代。移動端的前端技術開發前景寬闊。此外，前端技術還能應用于智能電視、智能手表甚至人工智能領域。

核心技術

HTML語言

掌握HTML是網頁的核心，是一種制作萬維網頁面的標準語言，是萬維網瀏覽器使用的一種語言，它消除了不同計算機之間信息交流的障礙。因此，它是網絡上應用最為廣泛的語言，也是構成網頁文檔的主要語言，學好HTML是成為Web開發人員的基本條件。

HTML是一種標記語言，能夠實現Web頁面并在瀏覽器中顯示。HTML5作為HTML的最新版本，引入了多項新技術，大大增強了對于應用的支持能力，使得Web技術不再局限于呈現網頁內容。

隨著CSS、JavaScript、Flash等技術的發展，Web對于應用的處理能力逐漸增強，用戶瀏覽網頁的體驗已經有了較大的改善。不過HTML5中的幾項新技術實現了質的突破，使得Web技術首次被認為能夠接近于本地原生應用技術，開發Web應用真正成為開發者的一個選擇。

HTML5可以使開發者的工作大大簡化，理論上單次開發就可以在不同平臺借助瀏覽器運行，降低開發的成本，這也是產業界普遍認為HTML5技術的主要優點之一。AppMobi、摩托羅拉、Sencha、Appcelerator等公司均已推出了較為成熟的開發工具，支持HTML5應用的發展。

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，去年我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

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

主流框架之一，Bootstrap 是基于 HTML、CSS、JavaScript的，它簡潔靈活，使得 Web 開發更加快捷。

html5-boilerplate

該框架可以快速構建健壯，且適應力強的web app或網站。

Meteor

Meteor是新一代的開發即時web應用的開源框架，它能在較短時間內完成開發。

Semantic UI

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

Foundation

優秀的響應式前端框架

Materialize

基于材料設計的現代化響應式前端框架。可提供默認的樣式，自定義組件。此外，Materialize還改進動畫和過渡，為開發人員提供流暢的體驗。

Pure

幾乎可以在每一個web項目中使用的一組小的和響應式的CSS模塊。

Vue

Vue.js 是用于構建交互式的 Web 界面的庫。它提供了 MVVM 數據綁定和一個可組合的組件系統，具有簡單、靈活的 API。

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

Touch.js是移動設備上的手勢識別與事件庫,也是在百度內部廣泛使用的開發。

職業機會

2015年12月5日，《廣州互聯網行業人才緊缺指數（TSI）報告》顯示，前端開發工程師成為廣州互聯網行業中最緊俏的職位。

常見前端開發工程師職位職責要求：

（1）使用Div+css并結合Javascript負責產品的前端開發和頁面制作。

（2）熟悉W3C標準和各主流瀏覽器在前端開發中的差異，能熟練運用DIV+CSS，提供針對不同瀏覽器的前端頁面解決方案 。移動HTML5的性能和其他優化，為用戶呈現最好的界面交互體驗和最好的性能。

（3）負責相關產品的需求以及前端程序的實現，提供合理的前端架構 。改進和優化開發工具、開發流程、和開發框架 [

（4）與產品、后臺開發人員保持良好溝通，能快速理解、消化各方需求，并落實為具體的開發工作 ；能獨立完成功能頁面的設計與代碼編寫，配合產品團隊完成功能頁面的需求調研和分析。

（5）了解服務器端的相關工作，在交互體驗、產品設計等方面有自己的見解。

資深前端開發工程師

相比較“前端開發工程師”而言，更加資深，工作職責更大。一般而言，資深前端開發工程師需要使用JavaScript或者ActionScript來編寫和封裝具有良好性能的前端交互組件，熟練使用CSS+XHTML完美輸出視覺界面。同時還要對Web項目的前端實現方案 提供專業指導和監督并在日常工作之中對新人及相關開發人員進行前端技能的培訓和指導。另外，還要跟蹤研究前端技術，設計并實施全網前端優化。HTML5、node.js（JavaScript編程的后臺語言）興起，要求資深前端熟悉后端，并且要在商業模式、代碼架構思想等維度去整體考慮前端的全局布局。

前端架構師

前端架構師更偏管理，但職責要求不僅限于管理。前端架構師需要帶領組員實現全網的前端框架和優化，創建前端的相應標準和規范，完善并推廣和應用自己的標準和框架。同時，還要站在全局的角色為整個網站的信息架構和技術選型提供專業意見和方案。

作者：BOM前端工程師鏈接：https://www.jianshu.com/p/a5b8c6db9e57