AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

如何成为一名前端开发工程师 by 姜赟

发布者 FEer   简介 前端技术
发布于 1439341686252  浏览 4765 关键词 前端 
分享到

第1页

如何成为一名前端开发工程师
姜赟
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工具

第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

第11页

Debugging JavaScript
随着JavaScript应用程序的复杂性增加,开发人员需要强大的调试工具来帮助他们快速地发现问题并修复。Chrome DevTools提供一些有用的工具来帮助开发人员减少调试JavaScript中的痛苦。
如何使用Chrome Devtools 来调试 javascript:https://developer.chrome.com/devtools/docs/javascript-debugging

第12页

Improving network performance
网络面板提供查看资源请求的详细信息,通过分析这些信息来寻找页面优化的策略。
如何使用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也能保证你的代码安全。

第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的所有功能。
从今天开始换上高大上的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/

第21页

谢谢!
新浪微博: @岛民不会抓鱼
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

第23页

Q&A
Html5应用前景与兼容问题
前后台交互知识及注意事项
网站制作的一些技巧
调试插件、浏览器常见兼容问题解决
前端在做功能时经常需要渲染好的数据来模拟出于后端对接的逻辑,大的构架不是很方便,有的公司会用nodejs来做中间的应用层,就相当于一个原型,比如paypal就是将java迁移到nodejs,那么nodejs在应用层上的使用,具体说一下构架吧。
现在出现很多Nodejs做的开发工具,相比其它语言写的,这有什么特别的地方吗?
能说一下模块化框架的内部的实现以及所需要注意的地方吗?
模块化的循环依赖,除了增加一个订阅发布,还有没有其它的解决方案?
能谈一下你们公司组件开发时的整个构架的组织方式吗?
公司里有用IndexDB做过需求吗?可以和我们介绍一下吗?
支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。