前端开发
的自我修养
孔垂亮 2019-2-28
孔垂亮
网名：孔家少爷⁹⁵²⁸
@morrain1995
@morrain
前端开发工程师
网易七鱼前端负责人
七鱼，来自网易
目录页
CONTENTS PAGE
01
02
03
04
基本认识
探索发现
学习成长
优雅工作
01
基本认识
过渡页
TRANSITION PAGE
基本认识
探索发现
学习成长
优雅工作
1. 前端行业的这些年
ExtJS/HTML5
2011
Sencha/Node/SeaJS
2012
LESS/SASS/Stylus
2013
ES6/MVC
2014
Grunt/Webpack/NPM
2015
Vue/React
2016
2010
jQuery/Prototype/YUI
2. 什么是前端开发工程师
前端开发是一个先易后难的过程
3. 什么是云服务
基础设施服务，Infrastructure-as-a-service
IaaS层
平台服务，Platform-as-a-service
PaaS层
软件服务，Software-as-a-service
Saas层
3. 什么是云服务
3. 什么是云服务
3. 什么是云服务
3. 什么是云服务
3. 什么是云服务
2
1
SaaS： 是软件的开发、管理、部署都交给第三方，不需要关心技术问题，可以拿来即用。
普通用户接触到的互联网服务，几乎都是 SaaS。
3
PaaS： 提供软件部署平台（runtime），抽象掉了硬件和操作系统细节，可以无缝地扩展。
开发者只需要关注自己的业务逻辑，不需要关注底层。
IaaS： 是云服务的最底层，主要提供一些基础资源。
3. 什么是可用性
用来描述系统稳定性，百分比
表示系统提供服务的时间 占 总时间 的比例
可用性 | 宕机时间/年 | 宕机时间/月 | 宕机时间/周 | 宕机时间/天 |
90% | 36.5 天 | 72 ⼩时 | 16.8 ⼩时 | 2.4 ⼩时 |
99% | 3.65 天 | 7.20 ⼩时 | 1.68 ⼩时 | 14.4 分 |
99.9% | 8.76 ⼩时 | 43.8 分 | 10.1 分钟 | 1.44 分 |
99.99% | 52.56 分 | 4.38 分 | 1.01 分钟 | 8.66 秒 |
99.999% | 5.26 分 | 25.9 秒 | 6.05 秒 | 0.87 秒 |
七鱼，史上最严重的一次事故
02
探索发现
过渡页
TRANSITION PAGE
基本认识
探索发现
学习成长
优雅工作
不知道并不可怕和有害
可怕的和有害的是不
知道而伪装知道
——托尔斯泰
你不一定知道的JavaScript
你不一定知道的JavaScript
事件驱动编程
事件驱动编程
前端工程化
模块化
组件化
规范化
自动化
前端工程化-模块化
前端模块化
服务器端
浏览器端
服务器端
浏览器端
CommonJS
AMD
CMD
ES6 MD
Node.js
RequireJS
Sea.js
ES6
前端工程化-模块化-CommonJS
前端工程化-模块化-CommonJS
前端工程化-模块化-AMD
前端工程化-模块化-AMD
前端工程化-模块化-CMD
前端工程化-模块化-CMD
前端工程化-模块化- ES6 MD
前端工程化-模块化- ES6 MD
前端工程化-组件化
前端工程化-自动化&规范化
前端工程化-自动化&规范化
03
学习成长
过渡页
TRANSITION PAGE
基本认识
探索发现
学习成长
优雅工作
探索发现的目的，在于学习成长
左拉说：“生活的全部意义在于无穷地探索尚未知道的东西，在于不断地增加更多的知识。”
基础篇
实践篇
尝试用一些框架构建应用
尝试去看一点点源码，看别人的代码和实现思路
尝试一些最新的框架，写写demo或者自己的应用
推荐关注：React、Vue、JQuery
提高篇
深入了解框架的原理和构成
深入了解框架解决的问题，以及各种技术的发展路径和内在原因
多参与项目，了解多人合作开发模式和技术方案设计理念
关注标准，参与社区
04
优雅工作
过渡页
TRANSITION PAGE
基本认识
探索发现
学习成长
优雅工作
兵欲善其事 必先利其器
磨刀不误砍柴工，好
的工具会事半功倍
IDE
Google Chrome
SourceTree
Beyond Compare
谢谢