web前端开发工程师

百科名片

Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5年。Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。

简介

2005年以后,互联网进入Web 2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。
随着Web 2.0概念的普及和W3C组织的推广,网站重构的影响力正以惊人的速度增长。XHTML+CSS布局、DHTML和Ajax像一阵旋风,铺天盖地席卷而来,包括新浪、搜狐、网易、腾讯、淘宝等在内的各种规模的IT企业都对自己的网站进行了重构。
为什么它们会对自己的网站进行重构呢?有两个方面的原因:

第一,根据W3C标准进行重构后,可以让前端的代码组织更有序,显著改善网站的性能,还能提高可维护性,对搜索引擎也更友好;

第二,重构后的网站能带来更好的用户体验,用XHTML+CSS重新布局后的页面,文件更小,下载速度更快。
网站重构的目的仅仅是为了让网页更符合Web标准吗?不是!重构的本质是构建一个前端灵活的类MVC框架,即HTML作为信息模型(Model),CSS控制样式(View),JavaScript负责调度数据和实现某种展现逻辑(Controller)。同时,代码需要具有很好的复用性和可维护性。这是高效率、高质量开发以及协作开发的基础。
DHTML可以让用户的操作更炫,更吸引眼球;Ajax可以实现无刷新的数据交换,让用户的操作更流畅。对于普通用户来说,一个网站是否专业、功能是否强大,服务器端是用J2EE+Oracle的强大组合,还是用ASP+Access的简单组合,并没有太明显的区别。但是,前端的用户体验却给了用户直观的印象。
随着人们对用户体验的要求越来越高,前端开发的技术难度越来越大,Web前端开发工程师这一职业终于从设计和制作不分的局面中独立出来。

Web前端开发技术三要素

Web前端开发技术包括三个要素:HTML、CSS和JavaScript,但随着RIA的流行和普及,Flash/Flex、Silverlight、XML和服务器端语言也是前端开发工程师应该掌握的。Web前端开发工程师既要与上游的交互设计师、视觉设计师和产品经理沟通,又要与下游的服务器端工程师沟通,需要掌握的技能非常多。这就从知识的广度上对Web前端开发工程师提出了要求。如果要精于前端开发这一行,也许要先精十行。然而,全才总是少有的。所以,对于不太重要的知识,我们只需要“通”即可。但“通”到什么程度才算够用呢?对于很多初级前端开发工程师来说,这个问题是非常令人迷惑的。
前端开发的入门门槛其实非常低,与服务器端语言先慢后快的学习曲线相比,前端开发的学习曲线是先快后慢。所以,对于 从事IT工作的人来说,前端开发是个不错的切入点。也正因为如此,前端开发领域有很多自学成“才”的同行,但大多数人都停留在会用的阶段,因为后面的学习 曲线越来越陡峭,每前进一步都很难。另一方面,正如前面所说,前端开发是个非常新的职业,对一些规范和最佳实践的研究都处于探索阶段。总有新的灵感和技术 不时闪现出来,例如CSS sprite、负边距布局、栅格布局等;各种JavaScript框架层出不穷,为整个前端开发领域注入了巨大的活力;浏览器大战也越来越白热化,跨浏览器兼容方案依然是五花八门。为了满足“高可维护性”的需要,需要更深入、更系统地去掌握前端知识,这样才可能创建一个好的前端架构,保证代码的质量。
业内标准
开发流程/方法
ARIA
各种浏览器
沟通方法/表现力
Hack技术
开放服务

Web前端开发工程师的具备条件

一位好的Web前端开发工程师在知识体系上既要有广度,又要有深度,所以很多大公司​即使出高薪也很难招聘到理想的前端开发工程师。现在说的重点不在于讲解技术,而是更侧重于对技巧的讲解。技术非黑即白,只有对和错,而技巧则见仁见智。以前会PhotoshopDreamweaver就可以制作网页,现在只掌握这些已经远远不够了。无论是开发难度上,还是开发方式上,现在的网页制作都更接近传统的网站后台开 发,所以现在不再叫网页制作,而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要,而且需要专业的前端工程师才能做好,这方面的 专业人才近两年来备受青睐。Web前端开发是一项很特殊的工作,涵盖的知识面非常广,既有具体的技术,又有抽象的理念。简单地说,它的主要职能就是把网站 的界面更好地呈现给用户。
如何才能做得更好呢?
第一,必须掌握基本的Web前端开发技术,其中包括:CSS、HTML、DOM、BOM、Ajax、JavaScript等,在掌握这些技术的同时,还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。
第二,在一名合格的前端工程师的知识结构中,网站性能优化、SEO和服务器端的基础知识也是必须掌握的。
第三,必须学会运用各种工具进行辅助开发。
第四,除了要掌握技术层面的知识,还要掌握理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持,等等。
可见,看似简单的网页制作,如果要做得更好、更专业,真的是不简单。这就是前端开发的特点,也是让很多人困惑的原因。如此繁杂的知识体系让新手学习起来无从下手,对于老手来说,也时常不知道下一步该学什么。
代码质量是前端开发中应该重点考虑的问题之一。例如,实现一个网站界面可能会有无数种方案,但有些方案的维护成本会 比较高,有些方案会存在性能问题,而有些方案则更易于维护,而且性能也比较好。这里的关键影响因素就是代码质量。CSS、HTML、JavaScript 这三种前端开发语言的特点是不同的,对代码质量的要求也不同,但它们之间又有着千丝万缕的联系。

web前端开发工程师的更多相关文章

  1. Web前端开发工程师养成计划【转载】

    Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...

  2. Web前端开发工程师基本要求

    一位好的Web前端开发工程师在知识体系上既要有广度,又要有深度,所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师.现在说的重点不在于讲解技术,而是更侧重于对技巧的讲解.技术非黑即白,只有对和错 ...

  3. Web前端开发工程师的就业前景

    Web前端开发工程师的就业前景 Web前端开发工程师是一个全新的职业,在IT行业真正受到重视的时间不超过5年.因此,大家越来越关心web前端工程师前景怎么样?web前端工程师就业如何?Web前端开发是 ...

  4. 从就业面分析web前端开发工程师就业前景(2011.6)

    案例一 公司名称:法国电信北京研发中心 工作地点:北京 联系方式:hao.luan@orange-ftgroup.com 栾先生 岗位名称:web 前端开发工程师 岗位要求: 1. 计算机或相关专业本 ...

  5. web前端开发工程师,你了解吗?

    web前端开发工程师可以说是一个全新的职业,在IT整个行业中真正受到重视的时间没有超过5年,也正因为这样,大家越来越想了解web前端工程师的前景究竟怎么样?web前端培训就业前景如何?web前端工程师 ...

  6. Web前端开发工程师面试题

    Web前端开发工程师面试题1.说说css的优先级?2.在移动端中,常常使用tap作为点击事件,好处是?会带来什么问题?3.原生JS的window,onload与Jquery的$(document).r ...

  7. 上海洋码头(www.ymatou.com)急招技术人才(职位:互联网软件开发工程师,.NET网站架构师,Web前端开发工程师,高级测试工程师,产品经理)

    对公司招聘职位有兴趣的童鞋可以把简历发送到zhangzhiqiang@ymatou.com,我们HR会快速给你答复. 互联网软件开发工程师 岗位职责: 1.参与洋码头各个平台(www.ymatou.c ...

  8. web前端开发工程师工资多少

      做web前端开发工程师工资高不高?下面千锋小编为大家分析一下:作为目前互联网行业中的主流技术,Web前端一直是占有重要的地位.尤其是近年来HTML5技术的突飞猛进,使Web前端技术有了更好的发展. ...

  9. 25个Web前端开发工程师必看的国外大牛和酷站

    逛了一周国外大牛们的博客与酷站,真是满满的钦佩.震撼.羡慕.惊喜………… Web设计是一个不断变化的领域,因此掌握最新的发展趋势及技术动向对设计师来说非常重要.无论是学习新技术,还是寻找免费资源与工具 ...

随机推荐

  1. ArcEngine10在VS2010中编译问题

    原文 http://www.gisall.com/html/47/122747-4141.html 问题描述: 前段时间装了个VS2010,用ArcEngine10在VS2010中基于.Net Fra ...

  2. 软件体系结构经典问题——KWIC的分析和解决

    KWIC作为一个早年间在ACM的Paper提出的一个问题,被全世界各个大学的软件设计课程奉为课堂讲义或者作业的经典.(From Wiki,FYI,D. L. Parnas uses a KWIC In ...

  3. 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活

    图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本 ...

  4. Java程序员面试题集(71-85)(转)

    转:http://blog.csdn.net/jackfrued/article/details/17566627 Java程序员面试题集(71-85) 摘要:这一部分主要包括了UML(统一建模语言) ...

  5. ZendStudio快捷键 注释的快捷键

    注:本文省略“通用快捷键”描述,诸如:ctrl+N=新建,ctrl+O=打开,ctrl+C=复制,ctrl+V,ctrl+X……等等几乎所有软件都通用的一组快捷键,而着重介绍zde独有的快捷键,了解并 ...

  6. Sublime Text插件FileHeader实践

    FileHeader是一个文件模板插件,可以定制各种文件模板和文件头部信息,保存时可以自动更新文件的修改时间.在多人开发中这个功能相当实用. 具体介绍我就不细说了,主要是分享一下在使用FileHead ...

  7. (原)前端知识杂烩(css系列)

    更新于 20160217 1. css hack .pad{ padding:17px 0 0 17px; /* 普通写法 */ *padding:17px 0 0 17px; /* *为IE7 *+ ...

  8. HDU 5791 Two

    题意:给两个序列,求公共序列的个数 分析:很自然想到最长公共子序列的转移的转移形式,用dp[i][j]表示第一个串前i个 和第二个串前j个匹配的答案数量,a[i]==b[i],dp[i][j]=dp[ ...

  9. HDU 5787 K-wolf Number

    题意:l-r之间有多少个数,其连续k位不存在相同的数字 分析:数位dp,从高位开始向低位进行枚举.因为连续k个数字不相同,在枚举一个数字的时候, 要知道前k-1位的内容,这可以用一个4维的数组表示,再 ...

  10. cc1plus: fatal error: emeralddb-pmdMain.d: No such file or directory

    签名autoscan, aclocal, config啥的都没错,最后make 报下面的错,查了各个文件没发现有啥问题,请哪位帮忙卡看 make[1]: Entering directory `/ro ...