前端开发是创建
WEB页面或APP等前端界面呈现给用户的过程,通过
HTML,CSS及
JavaScript以及衍生出来的各种技术、框架、解决方案,来实现
互联网产品的
用户界面交互。
发展历程
前端技术的发展是互联网自身发展变化的一个缩影。前端技术指通过浏览器到用户端计算机的统称,存贮于
服务器端的统称为后端技术。前端开发主要职能就是把网站的界面更好地呈现给用户。
以前会
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应用的发展。
CSS
学好CSS是网页外观的重要一点,CSS可以帮助把网页外观做得更加美观。
JavaScript
学习JavaScript的基本语法,以及如何使用JavaScript编程将会提高开发人员的个人技能。
操作系统
了解Unix和
Linux的基本知识,对于开发人员有益无害。
了解Web服务器,包括对
Apache的基本配置,htaccess配置技巧的掌握等。
性能优化
以上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
Meteor是新一代的开发即时
web应用的
开源框架,它能在较短时间内完成开发。
Semantic 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编程的后台语言)兴起,要求资深前端熟悉后端,并且要在
商业模式、代码架构思想等维度去整体考虑前端的全局布局。
前端架构师
前端架构师更偏管理,但职责要求不仅限于管理。前端架构师需要带领组员实现全网的前端框架和优化,创建前端的相应标准和规范,完善并推广和应用自己的标准和框架。同时,还要站在全局的角色为整个网站的
信息架构和技术
选型提供专业意见和方案。