Web前端工程师成长之路

web前端工程师

分拣: Web开发使用

一、何为Web前端工程师?

前端工程师,也叫Web前端开发工程师。他是随着web发展,细分出来的行业。Web前端开发工程师,主要职务是行使(X)HTML/CSS/JavaScript/DOM/Flash等各样Web技术进行产品的界面开发。制作专业优化的代码,并追加互相动态成效,开发JavaScript以及Flash模块,同时组成后台开发技术模拟全部效果,举行添加网络的Web开发,致力于经过技能改正用户体验。

Web前端工程师成长之路——知识汇总

图1、前端技术MSS

Web前端开发技术紧要包括八个因素:HTML、CSS和JavaScript!

它须求前端开发工程师不仅要控制主题的Web前端开发技术,网站品质优化、SEO和服务器端的基础知识,而且要学会使用各类工具举行接济开发以及理论层面的知识,包蕴代码的可维护性、组件的易用性、分层语义模板和浏览器分级扶助等。

乘机近两三年来RIA(Rich Internet
Applications的缩写,中文意思为:丰裕的因特网应用程序)的流行和普及带来的例如:Flash/Flex,Silverlight、XML和劳动器端语言(PHP、ASP.NET,JSP、Python)等语言,前端开发工程师也亟需通晓。

前端开发的入门门槛其实很低,与劳动器端语言先慢后快的读书曲线比较,前端开发的上学曲线是先快后慢。

HTML 甚至不是一门语言,他仅仅是粗略的符号语言!

CSS 只是无类型的体制修饰语言。当然可以勉强算作弱类型语言。

Javascript 的基本功部分绝对来说简单,入手还算快。

也正因为这样,前端开发领域有很多自学成“才”的同行,但半数以上人都停留在会用的等级,因为背后的求学曲线越来越陡峭,每前进一步都很难。
Web前端技术有部分江湖气,知识点过于琐碎,技术价值观的对弈也难分伯仲,即全局的系统的学识结构没有成连串,这么些要素也理所当然上影响了“正统“前端技术的陷落!而且各样“奇技淫巧”被滥用,前端技术知识的承受也过于肤浅,新人难看清时局把握主次。由此,前端技术领域,为团结觅得一个可信赖的师兄,首要性要盖过项目、团队、集团、甚至薪俸。

一面,正如前方所说,前端开发是个可怜新的事情,对一些标准和特等实践的研究都处于探索阶段。总有新的灵感和技巧不时闪现出来,例如CSS
sprite、负边距布局、栅格布局等;种种JavaScript框架家常便饭,为一体前端开发领域注入了宏伟的生机;浏览器大战也进一步缺乏,跨浏览器包容方案如故是充裕多彩。为了满意“高可维护性”的急需,须要更长远、更系统地去控制前端知识,那样才可能创立一个好的前端架构,保障代码的品质。

乘胜手持设备的迅猛发展,推动了
HTML5行业标准的长足上扬。web领域的技艺,大致有10年都没有大的更新了!现在市面很须要优质的、高级的前端工程师。一方面是因为那是一个相比新的撤并行业,而且前端程序员大都自学一部分,知识结构不系统;另一方面,大学内部没有那种课程,最最要害的是:清华青鸟这类培训机构也从未特意的前端工程师的栽培科目!!

吴亮在《JavaScript 王者归来》第一张的序里面说:超过半数程序员认为
Javascript
过于简陋,只适合部分网页上面花哨的变现,所以不愿成本精力去学学,或者以为不学习就能控制。实际上,一门语言是还是不是脚本语言,往往是她的设计目的控制,不难与复杂并不是分别脚本语言和非脚本语言的正式。事实上,在脚本语言里面,Javascript
属于卓越复杂的一门语言,他的复杂度即便放在非脚本语言中来衡量,也是一门一定复杂的言语!Javascript
的复杂度不逊色于 Perl 和 Python!

二、怎样学习前端知识?

作为一名最基础的前端工程师你不可以不精晓HTML、CSS和JavaScript。三者必须同时了然,类似我字样对前者知识坐井观天的,一遭受标题就止住工作就随处搜寻解决方案的,首先就是不上一个合格的前端人士。像自己这么的倘诺当了前端工程师那工期肯定是不可能有限协助的。合格的前端工程师第一要学会的就是在尚未其他外来辅助的情形下(包涵搜索引擎),可以形成大部分职责。

以下知识点是作为一个前端工程师必须询问和熟习的:

DOM结构——三个节点之间可能存在什么关系以及怎么着在节点之间自由运动。

DOM操作——怎么着添加、移除、移动、复制、创制和搜索节点。

事件——怎么着使用事件以及IE和DOM事件模型之间存在什么首要差别。

XMLHttpRequest——那是哪些、怎么样完整地实践两回GET请求、怎么着检测错误。

从严格局与混杂方式——如何触发那三种情势,区分它们有啥意义。

盒模型——外边距、内边距和边框之间的涉及,IE < 8中的盒模型有何两样。

块级元素与行内元素——怎么用CSS控制它们、它们怎么样影响周围的元素以及你认为应该如何定义它们的样式。

转变元素——怎么利用它们、它们有怎么着难点以及怎么化解这一个难点。

HTML与XHTML——二者有如何界别,你觉得应该运用哪一个并说出理由。

JSON——它是怎么着、为何应该运用它、到底该怎么利用它,说出已毕细节来。

上述这一个知识点都应该是您“想都无须想”就了然的事物。除了上述的前端知识,也还需学会至少一门后端编程语言,让你协调学会怎么与后端举行更好的竞相。很多前端工程师对一部分库格外的耳熟能详,jQuery,Bootstrap等,可是对于库的熟练并不可以提现你的优良,整整优秀的是那一个精晓库背后的机制,尤其是力所能及徒手写出一个和谐的库的人。真正合格的前端工程师是能落到实处具体的法力需要,而美好的前端工程师须要缓解的标题是寻觅一个最优的缓解方案。

再就是,优异的前端工程师须求持有卓绝的联络能力,因为前者工程师至少都要满意四类客户的须求:

产品经营。那一个是肩负策划应用程序的一群人。他们会想出比比皆是特有的、奇怪的、甚至是不只是落到实处的选拔。一般的话,产品CEO都追求增加的成效。

UI设计师。这么些人负担应用程序的视觉设计和相互模拟。他们关切的是用户对怎么着敏感、交互的一直性以及完整的好用性。一般的话,UI设计师于流畅靓丽、但并不便于落成的用户界面,而且他们日常不满前端工程师造成
1px 的误差。

项目首席营业官。这一个人负责实际地运行和掩护应用程序。项目管理的根本关注点,无外乎正常运作时刻、应用程序始终健康可用的大运、质量和终结日期。项目COO追求的靶子往往是硬着头皮有限支撑业务的不难化,以及不在升级更新时引入新题材。

最后用户。指的是应用程序的主要消费者。即便前端工程师不会常常与最后用户打交道,但她们的申报意见主要。最后用户须求最多的就是对个体有效的法力,以及竞争性产品所享有的机能。

Yahoo公司 ,YUI的费用工程师 尼古拉斯 C. Zakas
认为:前端工程师是总括机科学工作领域中最复杂的一个工种。绝大部分价值观的编程思想已经不适用了,为了在七种平哈博罗内接纳,各个技术都借鉴了大气软科学的学问和观点。成为可从前端工程师所要具备的正式技术,涉及到广大而复杂的天地,这么些世界又会因为你说到底必须劳动的随处的插手而变得更其复杂。专业技术可能会引领你进来成为前端工程师的大门,但只有选拔该技能创制的应用程序以及你跟外人并肩一起的力量,才会真的让您变得好好。

三、提高无止境

Web前端工程师成长之路——知识汇总

图2、Web前端工程师知识架构

杰出的前端工程师应该拥有飞速学习能力。牵动Web发展的技能并不是静止不动的,那个技巧大约每一日都在变化,假设没有飞速学习能力,你就跟不上Web发展的步伐。你无法不不停升高自己,不断学习新技巧、新方式;仅仅着重明天的文化不可能适应以后。Web的后天与前几日必定有天壤之别,而你的做事就是要搞驾驭怎么着通过协调的Web应用程序来呈现那种天翻地覆的转变。

四、前端开发知识架构

前端工程师

浏览器

IE6/7/8/9

Firefox

Chrome/Safari/Opera

编程语言

JavaScript/Node.js

JavaScript语言美丽

切页面

HTML/HTML5

CSS/CSS3

PhotoShop/Paint.net

开发工具

IDE

VIM/Sublime Text2

Notepad++/EditPlus

WebStorm

调剂工具

Firebug/Firecookie

YSlow

IEDeveloperToolbar/IETester

Fiddler

本子管理

Git/SVN

Github/Bitbucket/Google Code

代码质量

Coding style

JSLint/JSHint

CSSLint

Markup Validation Service

单元测试

QUnit/Jasmine

Mocha/Should/Chai

自动化测试

WebDriver

前端库/框架

jQuery/Underscore/Mootools/Prototype.js

YUI3/Dojo/ExtJS

Backbone/KnockoutJS/Emberjs

前端标准/规范

HTTP1.1

ECMAScript3/5

W3C/DOM/BOM/XHTML/XML/JSON/JSONP

CommonJS/AMD

HTML5/CSS3

性能

JSPerf

YSlow 35 rules

PageSpeed

HTTPWatch

DynaTrace’s Ajax

高性能JavaScript

编程知识储备

数据结构

OOP/AOP

原型链/效用域链

闭包

函数式编程

设计形式

Javascript Tips

布局流程

调减合并

YUI Compressor

Google Clousure Complier

CleanCSS/UglifyJS

文档输出

JSDoc

Dox/Doxmate

花色打造工具

make/Ant

GYP

Grunt

Yeoman

代码协会

类库模块化

CommonJS/AMD

YUI3模块

业务逻辑模块化

文件加载

LABjs

SeaJS/Require.js

安全

CSRF/XSS

ADsafe/Caja/Sandbox

移动Web

HTML5/CSS3

响应式设计

Zeptojs/iScroll

V5/Sencha Touch

PhoneGap

jQuery Mobile

JavaScript生态

MongoDB/CouchDB

前沿技术社区/会议

D2/WebRebuild

NodeParty/W3CTech/HTML5梦工厂

JSConf/沪JS(JSConf.cn)

QCon/Velocity/SDCC

JSConf/NodeConf

YDN/YUIConf

电脑知识储备

编译原理

总计机网络

操作系统

算法原理

软件工程/软件测试原理

软技能

文化管理/计算分享

联络技巧/团队通力合营

须要管理/PM

交互设计/可用性/可访问性知识

可视化

SVG/Canvas/VML

D3/Raphaël/DataV

后端工程师

编程语言

C/C++/Java/PHP/Ruby/Python/…

数据库

SQL

MySQL/MongoDB/Oracle

操作系统

Unix/Linux/OS X/Windows

数据结构

五、Web前端学习书本

HTML、CSS
种类书籍,都是丽水小异,在当当网、杰出网搜索一下广大推介。即使感觉到学的基本上了,可以关切一下《CSS禅意花园》,那个很有影响力。Javascript
的图书 推荐看老外写的,国内广大 Javascript 书籍的作者对 Javascript
语言通晓的都不是很透彻。

此间推荐几本 Javascript 书籍:

——初级读物:——

《JavaScript高级程序设计》:一本相当完整的经文入门书籍,被誉为JavaScript圣经之一,详解的万分详尽,最新版第三版已经发表了,指出购买。

《JavaScript王者归来》百度的一个Web开发项目高管写的,作为初学者准备的入门级教程也不错。

——中级读物:——

《JavaScript权威指南》:其余一本JavaScript圣经,讲解的也卓殊详细,属于中级读物,提议购买。

《JavaScript.The.Good.Parts》:Yahoo大牛,JavaScript精神首脑DouglasCrockford的大小说,尽管才100多页,可是一字千金啊!强烈指出阅读。

《高质量JavaScript》:《JavaScript高级程序设计》小编尼古拉斯 C.
Zakas的又一大作。

《Eloquent
JavaScript》:那本书才200多页,卓殊短小,通过多少个更加经典的例子(Emily姨妈的猫、患难的山民、模拟生态圈、推箱子游戏之类)来介绍JavaScript方方面面的知识和使用措施。

尖端读物:

《JavaScript Patterns
》:书中介绍到了种种经典的方式,如构造函数、单例、工厂等等,值得学习。

《Pro.JavaScript.Design.Patterns》:Apress出版社讲解JavaScript设计方式的书,万分科学。

《Developing JavaScript Web
Applications》:创设富应用的好书,针对MVC方式有较为浓密的授课,同时也对有的流水线的库举行了教学。

《Developing Large Web
Applications》:不仅有JavaScript方面的牵线,还有CSS、HTML方面的介绍,不过介绍的情节却都丰富不利,真正考虑到了一个特大型的Web程序下,怎么着举行JavaScript架构设计,值得一读。

要做非凡的前端工程师,还需求持续全力:《高质量网站建设指南》、《Yahoo工程师的网站质量优化的提议》、“YSLOW”品质优化指出、《网站重构》、《Web开发敏捷之道》、“
jQuery 库”、“前端框架”、“HTML5”、“CSS3”…… 这么些都要长远钻研!

任何伊始难!若是您能到这几个境界,剩下的路自己就足以走下来了。借使单纯只是上学前端编程语言、而不懂后端编程语言(PHP、ASP.NET,JSP、Python),也不可以算作是顶尖的前端工程师。在改为一个大好的前端工程师的道路上,充满了汗珠和费劲。

http://www.w3cfuns.com/blog-5463734-5404605.html

相关文章