第1页
如何成为一名前端开发工程师
姜赟
2014.5.18
2014.5.18
各位同学，大家下午好。
首先跟大家做一下自我介绍，我叫姜赟。目前就职于青牛软件，是一名软件工程师。
同时我也是你们的校友，08级计算机信息与技术专业的。在场有多少和我同专业的学弟学妹，可不可以举一下手？（人数挺多的，不过在场还是有不少非计算机专业的同学，看得出来同学们对于互联网还是十分感兴趣的）
今天非常荣幸能回到母校，给大家分享一些有趣的东西，我希望今天能以一种更轻松的氛围，互动的形式来一起完成今天的活动。
第2页
个人经历
2012年7月 合肥工业大学毕业，加入青牛软件，成为一名Java Developer
2012年10月 第一次接触Web项目，使用技术：Jquery + Baidu Map API
2012年10月 学习Html+css+javascript
2013年4月 学习Bootstrap框架
2013年6月 学习AngularJS框架
2013年8月 学习Websocket技术
2013年10月 学习Easyui框架
2014年3月 学习Chrome Extension、Chrome App开发
2014年4月 学习IndexedDB技术
2014年5月 学习Grunt、Bower、Yeoman工具
2012年10月 第一次接触Web项目，使用技术：Jquery + Baidu Map API
2012年10月 学习Html+css+javascript
2013年4月 学习Bootstrap框架
2013年6月 学习AngularJS框架
2013年8月 学习Websocket技术
2013年10月 学习Easyui框架
2014年3月 学习Chrome Extension、Chrome App开发
2014年4月 学习IndexedDB技术
2014年5月 学习Grunt、Bower、Yeoman工具
第3页
没有任何经验，零基础该如何入手？
言归正传，今天我要讲的是“如何成为一名前端工程师”，how to be a front-end developer。
大家都清楚前端的意思吗？顾名思义，就是更靠近用户的那一端，也就是他们的电脑，平板，手机等各种使用了我们产品的设备。在他们的设备上展现我们的网页，包括文字，动画，图片，音频，视频。
我相信在场的同学应该没有从未上过网的吧，请你们回想一下，当你们第一次打开网页，或者第一次看到让你们眼前一亮的网站时，有没有好奇过它是怎么产生的，换了是在场的你们，没有任何的基础，能不能做出这样的网页？
第4页
没有任何经验，零基础该如何入手？
HTML
CSS
JAVASCRIPT
（skeleton）
（skin）
（soul）
我可以十分肯定的告诉你们，能！在互联网上，任何你们所看到的页面，都离不开三个要素，也就是网页的三要素。我用了拟人化的手法来形容这三要素，html是构成网页的骨架，css是网页的皮肤，javascript是它的灵魂。只要你掌握了这三个要素，你也能做出一样绚丽的网页。
我做个调查，在场有多少一年级二年级的同学？有多少同学已经听说过这三个东西了？没听过也不要紧，我念书的时候也没听过这个。我不知道现在工大开设的编程课有哪些，但我上学那会我只知道C++，我念了一个学期也只能在控制台调试一下自己的程序。但是学这个，只需要一个星期，你就能做出一个简单的网页，能让全世界的人都能访问到了。这个一点都不夸张。
第5页
已经具备基本的前端开发能力，接下来？
有些同学可能已经了解过了，觉得我说的这个太弱了，对吧。网页制作的确就是这么简单，非常容易上手，但是想成为一名优秀的前端工程师，我们还差些什么？
第6页
入门虽易，精通不易。且学且珍惜……
哇，看到这张图时我想大家应该都跟我一样惊呆了。的确，想成为优秀的前端工程师，还有很长的路要走，我们掌握的仅仅是冰山的一角，学无止境，不要去做井底之蛙。当然大家也不要气馁，我相信大家的学习能力都在我之上，我只是比你们先走了一步而已。况且这上面还有一些知识是我没掌握的，我也跟你们一样需要不断的学习。引用网上特别流行的一句话来概括前端的学习之路：入门虽易，精通不易，且学且珍惜。
第7页
工欲善其事，必先利其器
俗话说的好：工欲善其事，必先利其器。好的学习方法能让我们更快的掌握知识，好的开发工具也能帮助我们更快更好的进行开发。这是我本人在学习和工作中使用比较多的两个工具。一个是chrome，可能大家会觉得奇怪，这不是一个浏览器么？也能用来开发？没错，Chrome不但是一个优秀的浏览器，而且还是一个非常强大的开发工具，用它来进行前端开发，可以大大提高开发效率。
第8页
Chrome Developer Tools
打开方式： CTRL + SHIFT + J
第9页
Inspecting the DOM and styles
第10页
Working with the console
Console API ：
https://developer.chrome.com/devtools/docs/console-api
Command Line API： https://developer.chrome.com/devtools/docs/commandline-api
https://developer.chrome.com/devtools/docs/console-api
Command Line API： https://developer.chrome.com/devtools/docs/commandline-api
第11页
Debugging JavaScript
随着JavaScript应用程序的复杂性增加,开发人员需要强大的调试工具来帮助他们快速地发现问题并修复。Chrome DevTools提供一些有用的工具来帮助开发人员减少调试JavaScript中的痛苦。
如何使用Chrome Devtools 来调试 javascript：https://developer.chrome.com/devtools/docs/javascript-debugging
如何使用Chrome Devtools 来调试 javascript：https://developer.chrome.com/devtools/docs/javascript-debugging
第12页
Improving network performance
网络面板提供查看资源请求的详细信息，通过分析这些信息来寻找页面优化的策略。
如何使用Chrome Devtools提升网络性能：
https://developer.chrome.com/devtools/docs/network
如何使用Chrome Devtools提升网络性能：
https://developer.chrome.com/devtools/docs/network
第13页
Improving rendering performance
https://developer.chrome.com/devtools/docs/timeline
第14页
More…
第15页
WebstormThe best JavaScript IDE and HTML editor
拥有智商的代码编辑器
Webstorm能理解你的代码和代码结构，并在你期望的地方自动提示。甚至能在javascript的字符串中实现Html代码的智能提示。
代码质量分析
支持上百种语言的代码检查，在你输入代码完成后立即检查并提示识别出的问题，并且能提供快速修正的解决方案。
丰富的版本控制集成
Webstorm支持目前主流的三大版本控制工具：Git, SVN, Mercurial。统一的UI使你无论在任何地方都能无缝地进行工作。即使你不使用版本控制工具，内置的Local History也能保证你的代码安全。
Webstorm能理解你的代码和代码结构，并在你期望的地方自动提示。甚至能在javascript的字符串中实现Html代码的智能提示。
代码质量分析
支持上百种语言的代码检查，在你输入代码完成后立即检查并提示识别出的问题，并且能提供快速修正的解决方案。
丰富的版本控制集成
Webstorm支持目前主流的三大版本控制工具：Git, SVN, Mercurial。统一的UI使你无论在任何地方都能无缝地进行工作。即使你不使用版本控制工具，内置的Local History也能保证你的代码安全。
第16页
WebstormThe best JavaScript IDE and HTML editor
无止境提高生产力的潜能
集成了Grunt、Bower、Npm这样的工具使你无需离开IDE也能高效的完成工作。在Webstorm中，你会爱上使用键盘来操作各种功能，更不用说在编辑器中的多游标和多选择这样的杀手级功能。
前沿的Web开发技术
Webstorm包含了HTML5 , CSS3, Node.js, AngularJS, Dart, CoffeeScript, TypeScript, LESS, Sass, Stylus, Karma, Mocha, Emmet, RequireJS等前沿的Web开发技术。
跨平台的用户体验
你可以在Window、Mac、Linux中使用Webstorm的所有功能。
集成了Grunt、Bower、Npm这样的工具使你无需离开IDE也能高效的完成工作。在Webstorm中，你会爱上使用键盘来操作各种功能，更不用说在编辑器中的多游标和多选择这样的杀手级功能。
前沿的Web开发技术
Webstorm包含了HTML5 , CSS3, Node.js, AngularJS, Dart, CoffeeScript, TypeScript, LESS, Sass, Stylus, Karma, Mocha, Emmet, RequireJS等前沿的Web开发技术。
跨平台的用户体验
你可以在Window、Mac、Linux中使用Webstorm的所有功能。
从今天开始换上高大上的IDE吧！
http://www.jetbrains.com/webstorm/download/
第17页
Getting Started with WebStorm
1.打开Webstorm。点击 Create New Project。
第18页
Getting Started with WebStorm
2.填写项目名称、路径、类型。
第19页
Getting Started with WebStorm
菜单和工具栏
导航栏
状态栏
编辑窗口
工具窗口
导航栏
状态栏
编辑窗口
工具窗口
第20页
前端技术究竟该怎么学？如何下手？
W3school
http://www.w3school.com.cn/
Jsfiddle
http://jsfiddle.net/
Runjs
http://runjs.cn/
http://www.w3school.com.cn/
Jsfiddle
http://jsfiddle.net/
Runjs
http://runjs.cn/
第21页
谢谢！
新浪微博： @岛民不会抓鱼
Github： http://datoulei.github.io/
Email： jiangyunbh@gmail.com
GDG兴趣小组： https://github.com/gdghefei/Project
Github： http://datoulei.github.io/
Email： jiangyunbh@gmail.com
GDG兴趣小组： https://github.com/gdghefei/Project
第22页
Q&A
前端学习对后端语言的掌握程度需要多少呢？
麻烦介绍一些兼容性测试工具吧。
跟学弟学妹介绍一下页面切图的技巧吧。
跟大家谈一下性能优化吧。有没有一些比较特别的用法可以和大家介绍的？
JaveScrip对象、dom操作
MVC思想
node.js低版本IE兼容性问题
前端js好的编写习惯
前端框架应用的案例
介绍下Webscoket
麻烦介绍一些兼容性测试工具吧。
跟学弟学妹介绍一下页面切图的技巧吧。
跟大家谈一下性能优化吧。有没有一些比较特别的用法可以和大家介绍的？
JaveScrip对象、dom操作
MVC思想
node.js低版本IE兼容性问题
前端js好的编写习惯
前端框架应用的案例
介绍下Webscoket
第23页
Q&A
Html5应用前景与兼容问题
前后台交互知识及注意事项
网站制作的一些技巧
调试插件、浏览器常见兼容问题解决
前端在做功能时经常需要渲染好的数据来模拟出于后端对接的逻辑，大的构架不是很方便，有的公司会用nodejs来做中间的应用层，就相当于一个原型，比如paypal就是将java迁移到nodejs，那么nodejs在应用层上的使用，具体说一下构架吧。
现在出现很多Nodejs做的开发工具，相比其它语言写的，这有什么特别的地方吗？
能说一下模块化框架的内部的实现以及所需要注意的地方吗？
模块化的循环依赖，除了增加一个订阅发布，还有没有其它的解决方案？
能谈一下你们公司组件开发时的整个构架的组织方式吗？
公司里有用IndexDB做过需求吗？可以和我们介绍一下吗？
前后台交互知识及注意事项
网站制作的一些技巧
调试插件、浏览器常见兼容问题解决
前端在做功能时经常需要渲染好的数据来模拟出于后端对接的逻辑，大的构架不是很方便，有的公司会用nodejs来做中间的应用层，就相当于一个原型，比如paypal就是将java迁移到nodejs，那么nodejs在应用层上的使用，具体说一下构架吧。
现在出现很多Nodejs做的开发工具，相比其它语言写的，这有什么特别的地方吗？
能说一下模块化框架的内部的实现以及所需要注意的地方吗？
模块化的循环依赖，除了增加一个订阅发布，还有没有其它的解决方案？
能谈一下你们公司组件开发时的整个构架的组织方式吗？
公司里有用IndexDB做过需求吗？可以和我们介绍一下吗？