前端开发分享

Created by @dongtianee / Powered by reveal.js

为什么要学习前端开发？
如何成为一名前端工程师？
前端工程师的工具箱
Hybrid应用开发

为什么要学习前端开发？

入门易，上手快

负责语义和排版的HTML和CSS都是标记性语言，学习起来极为简单。

负责交互的JavaScript是一门弱类型高级编程语言，核心语法和原生类非常少。

所见即所得

不需要复杂的编译，马上就能看到你的作品。

从原型到产品，相对短暂的开发周期。

跨平台-1

只要有浏览器，你编写的代码可以运行在
Windows，Linux，Android，IOS等任何一种操作系统下。

跨平台-2

NodeJS的诞生让JavaScript可以编写服务器端的代码。

JS的拥戴者坚信：在未来几年内，随着HTML5与NodeJs的长足发展，JSer将会统治前后端。

前途光明

任意一家互联网公司都在招前端开发工程师。

学习社区成熟，比如GitHub。

学习途径多样。

成长路线：
进可攻：全栈工程师（Full Stack Engineer）
退可守：UED，PM，PL，创业...

前端可以做的事情太多了。

你可以
写一个动画，追求一个女孩。
写一个游戏，分享给小伙伴一起闯关。
做一个应用，让大家快捷订餐，订房，备忘，听音乐，看视频……
做一个系统，为行政工作人员提供方便。
做一个产品，融资，上市，迎娶白富美，走上人生巅峰。
你还可以……
以上的所有，产品从小到大，离不开前端工程师。

如何成为一名前端工程师？

什么是工程师？

工程师既不是码农，也不是科学家。

工程师是脚踏实地的，技术过硬的，可以独立完成一个产品的技术专家。

前端入门易，深入难。所幸我们都具备独立和深入学习的能力。

如何成长为一名前端工程师？

简单说来，前端必须学习的有三部分

HTML，CSS，JavaScript

学习HTML要点在于：掌握语义。

HTML是有标准的，最新标准是HTML5，由W3C制定。

http://www.w3.org/TR/html5/
没有什么书籍能够比W3C标准更详细，更权威。
掌握HTML语义，可以写出更加符合标准的网页，你离工程师更近了一步的同时，也意味着你的网页对搜索引擎更加友好。
掌握HTML语义，在合适的地方用合适的标签，可以避免古老浏览器中出现莫名其妙的错误。

学习CSS要点在于：掌握规则。

CSS是有标准的，最新标准是CSS3，由W3C制定。

选择器，层叠和继承，盒模型，定位，颜色和背景，字体，表格等组成了CSS。

CSS3又增加了Animations,Transitions,Transforms,Media Queries,Flexible Box等。

CSS部分虽然繁杂，但是有章可循，有迹可查。

http://www.w3.org/TR/CSS2
没有什么书籍能够比W3C标准更详细，更权威。
先学习CSS2.1，再学习CSS3。
或者更加直接的学习方法：
CSS 参考手册——非常详细的规则说明/用法示例/浏览器支持情况。

学习JS的要点在于：ECMAScript

我们常说的JavaScript，是指运行在浏览器中的JavaScript。

由ECMAScript，DOM，BOM组成。

ECMAScript

ECMAScript是JS核心，JS只是根据ECMAScript标准衍生出的语言之一。
其它衍生语言有Adobe Flash中的ActionScript，IE中的JScript等。
ECMAScript是由ECMA制定的国际标准，最新版本是ES6。
现代浏览器实现了ES5，古老浏览器只实现了ES3。
http://www.ecma-international.org/ecma-262/5.1/
没有什么书籍能够比ECMASctipt标准更详细，更权威。
ES6目前浏览器支持率很低，可以先不学。
这部分涵盖了JS基本的变量，语法，关键字，对象等。
还需要了解高阶函数，继承，作用域，this对象，执行上下文，闭包，柯理化等。

DOM

了解DOM是前端工程师的基本要求
DOM是有标准的，最新标准是DOM Level3，由W3C制定。
除了理解DOM API，还需要理解DOM Event，包括事件冒泡和捕获，事件代理，自定义事件，Event Loop等。

BOM

BOM目前没有任何标准。各浏览器均有自己的实现。
例如页面跳转，窗口大小，cookie等涉及到浏览器本身的API都属于BOM。

网络传输API

有的书上把网络传输API也当作JS的组成部分
网络传输API（XMLHttpRequest）没有任何标准，但各浏览器对其均有实现。
它是AJAX的核心，而AJAX引领了JS的二次复兴。

除此之外，前端还需要掌握

HTTP原理：
- 例如服务器状态码，服务器头，方法（get,post）等。
浏览器工作原理：
- 例如reflow，repaint。了解浏览器渲染页面的顺序和原理。
- 这对于一个写出非常高效率的CSS和JS代码至关重要。
性能优化：
- 网络性能，代码性能。
- 了解文件压缩，缓存，cookie和LocalStorage区别，CSS Sprite原理等等。
- 知道Yahoo!35条优化建议。
数据结构和算法
- 排序，搜索，二叉树。
调试工具
- 开发调试工具，性能检查工具，网络工具等等。

学习资源

阅读标准文档必不可少。
书籍：
- 《JavaScript高级程序设计》 -一本学习JavaScript的好书
- 《Effective JavaScript》-让你编写高质量代码的好书
- 等等，豆瓣8分以上。

博客（排名不分先后）
- 汤姆大叔
- 张鑫旭
- Aaron
- 叶小钗
- 司徒正美
- 阮一峰
- 屈光宇
- 杜瑶
- Dron
- justjavac

社区和资源

阅读这些优秀框架的源码让你技术突飞猛进

最好的学习方法是实践和练习

关于两者的顺序

先系统学习，学有所成再去做？

在做中学，在学中做。最后需要一个系统的学习，把之前的琐碎知识串联起来。

前端工程师的工具箱

分享一些你们会用到的工具，用这些工具去做吧。

前端工具

代码编写工具
调试工具
测试和优化工具

代码编写工具

编辑器

WebStorm
Sublime Text

代码生成工具

CSS3生成工具

代码检查

调试工具

浏览器调试工具

Chrome开发者工具
IE/Firebug/Opera

Chrome开发者工具

console
断点
查看DOM元素的事件绑定
本地修改CSS值
模拟移动设备
模拟hover，active等伪类

在线Demo工具

测试和优化工具

浏览器测试

Modern.IE
IETest（有时不准确）

优化工具

性能评估和检查：YSlow
图片压缩：TinyPNG

Hybrid应用开发

介于原生App和Web App之间的新选择

	Web App（网页应用）	Hybrid App（混合应用）	Native App（原生应用）
开发成本	低	中	高
维护更新	简单	简单	复杂
体验	差	中	优
Store认可	不认可	认可	认可
安装	不需要	需要	需要
跨平台	优	优	差

浏览器

内置浏览器:
- IOS: Safari
- Windows Phone: IE
- Android 2.x和大部分Android 4.x: 安卓WebKit
- Chrome拥有的Nexus: Google Chrome
- Android4.4及以上：三星使用三星Chrome
- Amazon: Silk
可下载浏览器:Firefox, Opera, UC, QQ, 360, etc