Web前端工程师成长之路,怎么着成为一名优异的web前端工程师

web前端工程师

先后设计之道无远弗届,御晨风而返。———— 杰佛瑞 · 詹姆斯

分拣: Web开发使用

自身所碰着的前端程序员分三种:

一、何为Web前端工程师?

首先种一直在问:怎么样学习前端?

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

其次种总说:前端很简单,就那么一点东西。

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

自我从没有听到有人问:怎么做一名佳绩、甚至杰出的WEB前端工程师。

图1、前端技术MSS

图片 1

Web前端开发技术主要不外乎八个元素:HTML、CSS和JavaScript!

何为:前端工程师?

它要求前端开发工程师不仅要驾驭基本的Web前端开发技术,网站质量优化、SEO和劳务器端的基础知识,而且要学会运用种种工具举行赞助开发以及理论层面的知识,包涵代码的可维护性、组件的易用性、分层语义模板和浏览器分级协理等。

前者工程师,也叫Web前端开发工程师。他是随着web发展,细分出来的正业。

趁着近两三年来RIA(Rich Internet
Applications的缩写,汉语意思为:充分的因特网应用程序)的风行和推广带来的比如:Flash/Flex,Silverlight、XML和劳动器端语言(PHP、ASP.NET,JSP、Python)等语言,前端开发工程师也亟需控制。

Web前端开发技术主要不外乎三个因素:HTML、CSS和JavaScript!

前端开发的入门门槛其实很低,与劳务器端语言先慢后快的求学曲线相比较,前端开发的学习曲线是先快后慢。

它须求前端开发工程师不仅要控制焦点的Web前端开发技术,网站品质优化、SEO和劳动器端的基础知识,而且要学会运用各个工具举行赞助开发以及理论层面的学问,包罗代码的可维护性、组件的易用性、分层语义模板和浏览器分级匡助等。

HTML 甚至不是一门语言,他独自是简容易单的号子语言!

乘胜近两三年来RIA(Rich Internet
Applications的缩写,汉语意思为:丰硕的因特网应用程序)的风行和普及带来的诸如:Flash/Flex,Silverlight、XML和服务器端语言(PHP、ASP.NET,JSP、Python)等语言,前端开发工程师也急需了解。

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

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

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

HTML 甚至不是一门语言,他一味是概括的记号语言!

也正因为如此,前端开发领域有不可枚举自学成“才”的同行,但一大半人都停留在会用的级差,因为前边的读书曲线越来越陡峭,每前进一步都很难。
Web前端技术有一对江湖气,知识点过于琐碎,技术价值观的博弈也难分伯仲,即全局的系统的学识结构没有成连串,那几个要素也成立上影响了“正统“前端技术的陷落!而且各个“奇技淫巧”被滥用,前端技术知识的承受也过于肤浅,新人难看清时势把握主次。因而,前端技术世界,为团结觅得一个可信赖的师兄,主要性要盖过项目、团队、公司、甚至报酬。

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

一方面,正如前方所说,前端开发是个格外新的工作,对有些正经和特等实践的切磋都处在探索阶段。总有新的灵感和技巧不时闪现出来,例如CSS
sprite、负边距布局、栅格布局等;各样JavaScript框架层见迭出,为一体前端开发领域注入了伟大的生命力;浏览器大战也尤为白热化,跨浏览器包容方案照旧是各式各种。为了满意“高可维护性”的要求,必要更透彻、更系统地去控制前端知识,那样才可能创制一个好的前端架构,有限支撑代码的品质。

Javascript 的根底部分相对来说简单,入手还算快。

乘机手持设备的迅猛发展,牵动了
HTML5行业标准的长足前进。web领域的技巧,大约有10年都尚未大的换代了!现在市场很必要可以的、高级的前端工程师。一方面是因为那是一个比较新的细分行业,而且前端程序员大都自学一部分,知识结构不系统;另一方面,大学内部没有那种课程,最最重点的是:哈工大青鸟那类培训机构也未尝专门的前端工程师的培训科目!!

也正因为如此,前端开发领域有过多自学成“才”的同行,但多数人都停留在会用的级差,因为前边的学习曲线越来越陡峭,每前进一步都很难。

吴亮在《JavaScript 王者归来》第一张的序里面说:大部分程序员认为
Javascript
过于简陋,只适合部分网页上边花哨的突显,所以不愿开销精力去上学,或者以为不读书就能左右。实际上,一门语言是还是不是脚本语言,往往是她的宏图目的控制,简单与复杂并不是分别脚本语言和非脚本语言的正统。事实上,在脚本语言里面,Javascript
属于卓殊复杂的一门语言,他的复杂度即使放在非脚本语言中来衡量,也是一门一定复杂的语言!Javascript
的复杂度不逊色于 Perl 和 Python!

Web前端技术有一部分江湖气,知识点过于琐碎,技术价值观的博弈也难分伯仲,即全局的系统的知识结构没有成连串,这个元素也成立上影响了“正统“前端技术的沉淀!而且种种“奇技淫巧”被滥用,前端技术知识的继承也过于肤浅,新人难看清时势把握主次。由此,前端技术领域,为投机觅得一个可信赖的师兄,主要性要盖过项目、团队、公司、甚至报酬。

二、怎么样学习前端知识?

一边,正如前方所说,前端开发是个万分新的事情,对有些规范和特级实践的钻研都地处探索阶段。

用作一名最基础的前端工程师你必须控制HTML、CSS和JavaScript。三者必须同时领悟,类似我字样对前者知识管中窥豹的,一碰着题目就告一段落工作就四处物色解决方案的,首先就是不上一个合格的前端人士。像自家这么的倘诺当了前端工程师那工期肯定是不可以担保的。合格的前端工程师第一要学会的就是在没有其余外来辅助的情景下(包蕴搜索引擎),可以落成半数以上任务。

总有新的灵感和技艺不时闪现出来,例如CSS sprite、负边距布局、栅格布局等;

以下知识点是当做一个前端工程师必须询问和熟稔的:

各个JavaScript框架司空眼惯,为全方位前端开发领域注入了英雄的活力;

DOM结构——四个节点之间或者存在什么样关系以及哪些在节点之间自由运动。

浏览器大战也尤为紧张,跨浏览器包容方案仍然是足够多彩。

DOM操作——怎么样添加、移除、移动、复制、创设和查找节点。

为了满意“高可维护性”的内需,必要更深远、更系统地去控制前端知识,那样才可能创制一个好的前端架构,保险代码的成色。

事件——如何利用事件以及IE和DOM事件模型之间存在哪些主要出入。

乘机手持设备的迅猛发展,推动了
HTML5行业标准的快捷腾飞。web领域的技艺,大约有10年都并未大的更新了!

XMLHttpRequest——那是何等、怎么样完整地实施五回GET请求、怎么着检测错误。

现行市面很须求优质的、高级的前端工程师。

适度从紧格局与混杂格局——怎么着触发那二种格局,区分它们有啥意义。

单向是因为那是一个比较新的分开行业,而且前端程序员大都自学一部分,知识结构不系统;另一方面,大学内部没有那种课程,最最要紧的是:南开青鸟那类培训机构也没有特其他前端工程师的创设课程!!

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

吴亮在《JavaScript 王者归来》第一张的序里面说:一大半程序员认为
Javascript
过于简陋,只适合部分网页上面花哨的显现,所以不愿开支精力去学学,或者以为不求学就能操纵。

块级元素与行内元素——怎么用CSS控制它们、它们怎么样影响周围的要素以及你觉得应该怎么定义它们的体裁。

事实上,一门语言是或不是脚本语言,往往是她的布置性目的控制,不难与复杂并不是分别脚本语言和非脚本语言的正儿八经。

变更元素——怎么使用它们、它们有如何问题以及怎么解决这个题目。

实则,在脚本语言里面,Javascript
属于卓殊复杂的一门语言,他的复杂度就算放在非脚本语言中来衡量,也是一门一定复杂的语言!

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

Javascript 的复杂度不逊色于 Perl 和 Python!

JSON——它是怎样、为啥应该选取它、到底该怎么使用它,说出完成细节来。

怎么着学习前端知识?

上述这么些知识点都应当是您“想都休想想”就理解的事物。除了上述的前端知识,也还需学会至少一门后端编程语言,让你协调学会怎么与后端举行更好的相互。很多前端工程师对一些库万分的熟知,jQuery,Bootstrap等,可是对于库的熟习并不可以提现你的地道,整整卓绝的是那多少个知道库背后的建制,越发是力所能及徒手写出一个祥和的库的人。真正合格的前端工程师是能促成具体的职能必要,而杰出的前端工程师须要缓解的标题是寻觅一个最优的缓解方案。

咱俩生存在一个满载规则的大自然之中。社会秩序根据规则运行,总计机语言差不多整个是平整的会聚。总结机前辈们定义规则,规则约束我们,大家用规则控制数据。大部时候,对数码的客体控制,来自于您对规则的支配。

再者,优良的前端工程师须求所有得天独厚的联系能力,因为前端工程师至少都要满足四类客户的须求:

读书 HTML,CSS
应该先跟着书仔细、扎实的学一回。然后就须求做大批量的陶冶,做种种健康的、奇怪的、多量的布局磨练来捆固、精通自己的学识。

产品经营。这一个是肩负策划应用程序的一群人。他们会想出不少出奇的、奇怪的、甚至是不只是落实的应用。一般的话,产品高管都追求拉长的功效。

而上学 Javascript
首先要明了这门语言可以做哪些,不能做什么样,擅长做什么样,不善于做如何!

UI设计师。这一个人肩负应用程序的视觉设计和互动模拟。他们关注的是用户对什么敏感、交互的一贯性以及完整的好用性。一般的话,UI设计师于流畅靓丽、但并不便于完毕的用户界面,而且她们平日不满前端工程师造成
1px 的误差。

设若你只想当一个平常的前端程序员,你只须求记住半数以上 Javascript
函数,做一些操演就可以了。

项目主任。那么些人承受实际地运行和掩护应用程序。项目管理的最主要关切点,无外乎正常运作时刻、应用程序始终健康可用的岁月、质量和终结日期。项目首席营业官追求的目的往往是硬着头皮保证业务的简单化,以及不在升级更新时引入新题材。

假若您想当深远精通Javascript,你要求明白 Javascript
的规律,机制。要求驾驭她们的起点,需求深刻通晓 Javascript
基于对象的实质。

最后用户。指的是应用程序的最紧要消费者。固然前端工程师不会平常与最终用户打交道,但他俩的申报意见主要。最后用户须求最多的就是对个体有效的效益,以及竞争性产品所兼有的意义。

还亟需 深切精通 浏览器宿主 下 的 Javascript 的表现、特性。

Yahoo公司 ,YUI的付出工程师 尼古拉斯 C. Zakas
认为:前端工程师是电脑科学工作领域中最复杂的一个工种。绝大部分传统的编程思想已经不适用了,为了在三种阳斯特拉斯堡应用,三种技能都借鉴了汪洋软科学的学识和理念。成为卓绝前端工程师所要具备的正儿八经技能,涉及到周边而复杂的小圈子,这几个世界又会因为你最后必须劳动的各方的加入而变得尤其扑朔迷离。专业技术或者会引领你进入成为前端工程师的大门,但唯有利用该技能创制的应用程序以及你跟客人并肩一起的能力,才会真正让您变得不错。

因为历史由来,Javascript平昔不被保护,有点像被认领的相似!
所以他有很多毛病,各类宿主环境下的表现不合并、内存溢出标题、执行作用低下等难题。

三、进步无止境

用作一个完好无损的前端工程师还索要长远了然、以及学会处理 Javascript
的这么些毛病。

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

那就是说一名卓绝的、甚至杰出的前端开发工程师的保有何标准?

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

率先,卓越的Web前端开发工程师要在知识系统上既要有广度和纵深!做到这两点,其实很难。所以广大大集团就是出高薪也很难招聘到漂亮的前端开发工程师。技术非黑即白,唯有对和错,而技巧则分歧。

可以的前端工程师应该拥有飞速学习能力。牵动Web发展的技术并不是静止不动的,那么些技能大约每一天都在变更,假使没有很快学习能力,你就跟不上Web发展的步子。你必须不断提拔自己,不断学习新技巧、新形式;仅仅依靠明日的学识无法适应以后。Web的明天与今日必将有天壤之别,而你的行事就是要搞驾驭什么通过投机的Web应用程序来呈现这种翻天覆地的变通。

在此前,会或多或少Photoshop和Dreamweaver的操作,就可以制作网页。

四、前端开发知识架构

今昔,只控制那几个已经远远不够了。无论是开发难度上,仍然开发情势上,现在的网页制作都更如同传统的网站后台开发,所以现在不再叫网页制作,而是叫Web前端开发。

前端工程师

Web前端开发在产品开发环节中的成效变得尤为首要,而且必要正式的前端工程师才能办好。

浏览器

Web前端开发是一项很奇异的干活,涵盖的知识面卓殊广,既有实际的技巧,又有抽象的见识。简单地说,它的显要职能就是把网站的界面更好地显现给用户。

IE6/7/8/9

说不上,卓绝的Web前端开发工程师应该具备急速学习能力。Web发展的立即,甚至足以说那些技巧大致每一日都在变化!假诺没有急迅学习能力,就跟不上Web发展的步伐。前端工程师必须不停进步自己,不断学习新技巧、新方式;仅仅敬服明日的文化不能适应将来。Web的后天与明天必然有天壤之别,而前者工程师的行事就是要搞精通哪些通过友好的Web应用程序来浮现那种石破天惊的变迁。

Firefox

说到那边,我想起了一个活佛说过的一句话:对于新手来说,新技巧就是新技巧。

Chrome/Safari/Opera

对于一个一把手来说,新技巧不过是就技术的延伸。

编程语言

与此同时,卓越的前端工程师需求具备得天独厚的互换能力,因为前端工程师至少都要满意四类客户的急需。

JavaScript/Node.js

1、出品总经理。这一个是肩负策划应用程序的一群人。他们会想出千千万万万分的、奇怪的、甚至是不只是落实的行使。一般的话,产品首席营业官都追求拉长的出力。

JavaScript语言出色

2、UI设计师。那些人承担应用程序的视觉设计和彼此模拟。他们关注的是用户对如何敏感、交互的一贯性以及完整的好用性。一般的话,UI设计师于流畅靓丽、但并不便于完成的用户界面,而且他们平时不满前端工程师造成
1px 的误差。

切页面

3、项目总裁。这一个人负担实际地运行和护卫应用程序。项目管理的主要关怀点,无外乎正常运转时刻、应用程序始终健康可用的时间、品质和终结日期。项目主管追求的靶子往往是尽量保持工作的简单化,以及不在升级翻新时引入新题材。

HTML/HTML5

4、最后用户。指的是应用程序的严重性消费者。尽管前端工程师不会日常与末了用户打交道,但她俩的举报意见主要。最后用户须求最多的就是对个体有效的效果,以及竞争性产品所享有的成效。

CSS/CSS3

Yahoo 公司 ,YUI 的付出工程师 尼古拉斯 C. Zakas 认为:

PhotoShop/Paint.net

前者工程师是电脑科学工作领域中最复杂的一个工种。绝一大半传统的编程思想已经不适用了,为了在各种阳斯特拉斯堡动用,二种技艺都借鉴了大气软科学的知识和见地。成为可在此从前端工程师所要具备的科班技术,涉及到广大而复杂的世界,那几个领域又会因为您说到底必须劳动的各方的加入而变得越来越复杂。专业技能可能会引领你进来成为前端工程师的大门,但唯有利用该技术创设的应用程序以及你跟客人并肩一起的能力,才会真正让你变得可以。

开发工具

————————————

IDE

关于书籍:

VIM/Sublime Text2

HTML、CSS
序列书籍,都是各有千秋,在当当网、优良网搜索一下居多引进。如果感觉学的大多了,可以关怀一下《CSS禅意花园》,这一个很有影响力。Javascript
的书籍 推荐看老外写的,国内众多 Javascript 书籍的撰稿人对 Javascript
语言驾驭的都不是很透彻。

Notepad++/EditPlus

此地推荐几本 Javascript 书籍:

WebStorm

起码读物:

调节工具

《JavaScript高级程序设计》:一本非凡完整的经文入门书籍,被誉为JavaScript圣经之一,详解的不行详细,最新版第三版已经发表了,提出购买。

Firebug/Firecookie

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

YSlow

中等读物:

IEDeveloperToolbar/IETester

《JavaScript权威指南》:其余一本JavaScript圣经,讲解的也非凡详尽,属于中级读物,提出购买。

Fiddler

《JavaScript语言精彩》:Yahoo大牛,JavaScript精神首脑道格拉斯Crockford的大笔,尽管才100多页,然而一字千金啊!强烈指出阅读。

本子管理

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

Git/SVN

《Eloquent
JavaScript》:
这本书才200多页,非凡短小,通过多少个非凡经典的例证(埃米莉岳母的猫、横祸的山民、模拟生态圈、推箱子游戏之类)来介绍JavaScript方方面面的学问和行使措施。

Github/Bitbucket/Google Code

高等读物:

代码质量

《JavaScript Patterns
》:
书中牵线到了各类经典的情势,如构造函数、单例、工厂等等,值得学习。

Coding style

《Pro.JavaScript.Design.Patterns》:Apress出版社讲解JavaScript设计形式的书,非凡正确。

JSLint/JSHint

《Developing JavaScript Web
Applications》:
打造富应用的好书,针对MVC形式有较为深刻的任课,同时也对部分流水线的库举办了教学。

CSSLint

《Developing Large Web Applications
|开发大规模Web应用》:
岂但有JavaScript方面的牵线,还有CSS、HTML方面的介绍,可是介绍的内容却都相当不易,真正考虑到了一个重型的Web程序下,怎么着开展JavaScript架构设计,值得一读。

Markup Validation Service

要做非凡的前端工程师,还索要后续努力:《高品质网站建设指南》、《Yahoo工程师的网站品质优化的指出》、“YSLOW”质量优化提出、《网站重构》、《Web开发敏捷之道》、“
jQuery 库”、“前端框架”、“HTML5”、“CSS3”……
这几个都要深入研究!

单元测试

一切开头难!借使您能到那个地步,剩下的路自己就可以走下去了。

QUnit/Jasmine

众人常说:不想当裁缝的驾驶员,不是个好厨神。

Mocha/Should/Chai

假使一味只是读书前端编程语言、而不懂后端编程语言(PHP、ASP.NET,JSP、Python),也不可能当成是顶级的前端工程师。

自动化测试

在改为一个了不起的前端工程师的征途上,充满了汗珠和艰巨。

WebDriver

—— 王子墨 写于Hong Kong,Kowloon

前端库/框架

2012年10月28日 20:18

jQuery/Underscore/Mootools/Prototype.js

本文用到的参考资料:

YUI3/Dojo/ExtJS

1、What makes a good front end
engineer?

Backbone/KnockoutJS/Emberjs

2、Best Practices for Speeding Up Your Web
Site

前端标准/规范

作者:王子墨

HTTP1.1

作品源自:http://julying.com/blog/how-to-become-a-good-web-front-end-engineer/

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精神首脑道格拉斯Crockford的墨宝,即使才100多页,可是一字千金啊!强烈提出阅读。

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

《Eloquent
JavaScript》:那本书才200多页,非凡短小,通过多少个可怜经典的例证(埃米莉姑姑的猫、苦难的隐士、模拟生态圈、推箱子游戏之类)来介绍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