201505

Gooxx · May 2, 2015 · a6368e7 · a6368e7
1 parent 0109936
commit a6368e7
Show file tree

Hide file tree

Showing 54 changed files with 252 additions and 0 deletions.
diff --git a/201505/01.md b/201505/01.md
@@ -0,0 +1,252 @@
+# 前端工程
+
+大家下午好，我叫张云龙，来自UC。我自己没什么介绍。（PPT的）这个角落是我的微博"[前端农民工](http://weibo.com/fouber)"。
+
+![](assets/01.jpg)
+
+我从入行到现在比较多的时间是专注于做前端工程方面的学习和探索，我觉得前端是一个技术问题比较少，工程问题比较多的研发领域，它很特殊。我过去一年多的时间一直准备想跟大家系统的阐述，向业界系统的阐述一下前端工程总得问题。今天算是一个简单的开始，先跟大家聊一聊这个话题。
+
+-------------------------
+
+![](assets/02.jpg)
+
+在前端技术面试中有一道经典的面试题“[从输入URL到页面加载完的过程中都发生了什么事情？](http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/)”这个问题既考深度又考广度，可以一定程度上体现前端技术工程师的技术水平。
+
+-------------------------
+
+![](assets/03.jpg)
+
+而我想讲这样一个问题：“从准备写第一行代码到项目发布上线的过程中都发生了什么事情？”，这是对应到前端工程领域的经典问题。
+
+-------------------------
+
+![](assets/04.jpg)
+
+首先，我要向大家阐述一个基本的观念：前端是一种特殊的GUI软件。这里是传统客户端的软件，客户端软件会把原代码打包变成安装包，分发给用户，用户安装它，所有程序资源都在客户端本地，前端应用基本与之类似，所以前端本质上讲是一种GUI软件。但是前端在工程上又有点特殊，使得我们不能完全按照客户端GUI软件方法进行工程开发。
+
+-------------------------
+
+![](assets/05.jpg)
+
+第一个特殊性，它是由三种语言组成，不像传统的GUI软件，前端由三种风格特别不同的编程语言组成，这三种缺一不可，我没有办法完全用JS构建一个应用，而脱离HTML和CSS。
+
+-------------------------
+
+![](assets/06.jpg)
+
+第二个特殊性是，前端是一种远程部署，运行时增量安装的软件。不像传统的GUI软件把所有资源都放在客户端运行时只需加载数据，我们要把程序资源都放在服务端，由用户在运行时安装。这两个特殊性最终导致了前端工程跟传统GUI工程的不同。后面我会详细阐述这两点特殊性对前端工程的影响。
+
+-------------------------
+
+![](assets/07.jpg)
+
+说了这么多，先来定义一下什么是前端工程？前端工程是一门研究用工程化方法构建和维护有效的、实用的和高质量的前端应用的学科。这个概念类比了软件工程的定义，将其限定在了前端范围。
+
+-------------------------
+
+![](assets/08.jpg)
+
+大家可能会有一个疑问，本来一个记事本、浏览器就可以进行前端开发，这么简单的事情有必要搞的这么复杂吗？
+
+-------------------------
+
+![](assets/09.jpg)
+
+2010年的时候Velocipy China大会上来自Facebook的David博士分享了一些 [数据](http://velocity.oreilly.com.cn/2010/index.php?func=session&name=%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5%E8%B5%84%E6%BA%90%E7%9A%84%E7%AE%A1%E7%90%86%E5%92%8C%E4%BC%98%E5%8C%96) 。Facebook五年前，整站有10000多个静态资源，还要被翻译成超过100种语言版本。每种资源又会针对浏览器生成三种不同的版本，要针对不同带宽的用户做5种不同的打包方法，为了加快访问速度。有3、4个不同的用户组，下发不同的功能，用于小批次体验新的产品功能。静态资源的压缩和被压缩有不同的状态切换，我们可以在线上，用户有问题了我就他发一个链接，链接打开之后就是没有压缩的动态资源，用于定位和调试。在5年前，Facebook正个网站各种页面状态的资源组合情况就有300万种，这就是巨大的工程化问题。
+
+-------------------------
+
+![](assets/10.jpg)
+
+有人问我前端到后面学什么？我感觉前端在初期的时候学了页面开发，可能还有很多东西要接触。我总结前端工程涉及八个比较大的分类：
+
+* 组织架构：前端开发规范和架构设计，包括模块化/组件化开发模型、开发框架、目录规范、组织形式等。
+* 工程部署：有关前端项目的部署方式，比如静态资源部署，CDN缓存接入，模板部署等。
+* 性能优化：网站性能优化的工程化方法，比如按需加载、打包合并、资源缓存等
+* 工具平台：构建工具与开发平台
+* 开发流程：前端开发流程，包括开发、测试、部署等环节的打通
+* 统计监控：用户行为与网站状态监控，比如pv/uv、访问路径、用户信息、网站性能等
+* 前端安全：前端安全防范的工程化方法，比如xss、csrf等
+* 系统测试：前端系统测试的工程化方法
+
+-------------------------
+
+![](assets/11.jpg)
+
+以上工程问题在传统GUI软件中也有涉及，然而，前端的特殊性使其在每项工程问题上都有着有别于传统GUI软件独特的解决方式。我们非常有必要针对前端工程化进行系统的探索和研究。今天主要跟大家分享的就是前端特殊性对于开发相关的工程问题的影响。
+
+-------------------------
+
+![](assets/12.jpg)
+
+我曾经在知乎上回答过一个问题：“[大公司里怎样开发和部署前端代码？](http://www.zhihu.com/question/20790576/answer/32602154)”有兴趣的同学可以看一下原文，这里做一点“提纯”：
+
+-------------------------
+
+![](assets/13.jpg)
+
+我们从一个简单的页面说起：我们要写一个页面，里面用到一个a.css资源，把它们丢到服务器上，我们的网页就能访问了，非常简单。但是有个问题，如果我们不对a.css文件做缓存的话，每次访问页面都要加载这个资源，这显然是浪费。
+
+-------------------------
+
+![](assets/14.jpg)
+
+我们知道浏览器缓存可以解决这个问题。有两类浏览器缓存：协商缓存和本地缓存。协商缓存指，每次向服务器发器查询请求，服务器会告诉我们这个文件有没有修改，如果没有修改，浏览器就可以用本地。协商缓存每次都要跟服务器确认缓存是否更新，建立连接也会有时间成本。这时候就会想到使用本地缓存，服务器在发送资源的时候告诉浏览器在一定时间内不要来服务器询问，直接使用本地的缓存就可以了。这种缓存方式是大公司最希望得到的效果，始终让用户直接使用本地缓存。
+
+-------------------------
+
+![](assets/15.jpg)
+
+-------------------------
+
+![](assets/16.jpg)
+
+-------------------------
+
+![](assets/17.jpg)
+
+-------------------------
+
+![](assets/18.jpg)
+
+-------------------------
+
+![](assets/19.jpg)
+
+-------------------------
+
+![](assets/20.jpg)
+
+-------------------------
+
+![](assets/21.jpg)
+
+-------------------------
+
+![](assets/22.jpg)
+
+-------------------------
+
+![](assets/23.jpg)
+
+-------------------------
+
+![](assets/24.jpg)
+
+-------------------------
+
+![](assets/25.jpg)
+
+-------------------------
+
+![](assets/26.jpg)
+
+-------------------------
+
+![](assets/27.jpg)
+
+-------------------------
+
+![](assets/28.jpg)
+
+-------------------------
+
+![](assets/29.jpg)
+
+-------------------------
+
+![](assets/30.jpg)
+
+-------------------------
+
+![](assets/31.jpg)
+
+-------------------------
+
+![](assets/32.jpg)
+
+-------------------------
+
+![](assets/33.jpg)
+
+-------------------------
+
+![](assets/34.jpg)
+
+-------------------------
+
+![](assets/35.jpg)
+
+-------------------------
+
+![](assets/36.jpg)
+
+-------------------------
+
+![](assets/37.jpg)
+
+-------------------------
+
+![](assets/38.jpg)
+
+-------------------------
+
+![](assets/39.jpg)
+
+-------------------------
+
+![](assets/40.jpg)
+
+-------------------------
+
+![](assets/41.jpg)
+
+-------------------------
+
+![](assets/42.jpg)
+
+-------------------------
+
+![](assets/43.jpg)
+
+-------------------------
+
+![](assets/44.jpg)
+
+-------------------------
+
+![](assets/45.jpg)
+
+-------------------------
+
+![](assets/46.jpg)
+
+-------------------------
+
+![](assets/47.jpg)
+
+-------------------------
+
+![](assets/48.jpg)
+
+-------------------------
+
+![](assets/49.jpg)
+
+-------------------------
+
+![](assets/50.jpg)
+
+-------------------------
+
+![](assets/51.jpg)
+
+-------------------------
+
+![](assets/52.jpg)
+
+-------------------------
+
+![](assets/53.jpg)
+
+-------------------------
diff --git a/201505/assets/01.jpg b/201505/assets/01.jpg
diff --git a/201505/assets/02.jpg b/201505/assets/02.jpg
diff --git a/201505/assets/03.jpg b/201505/assets/03.jpg
diff --git a/201505/assets/04.jpg b/201505/assets/04.jpg
diff --git a/201505/assets/05.jpg b/201505/assets/05.jpg
diff --git a/201505/assets/06.jpg b/201505/assets/06.jpg
diff --git a/201505/assets/07.jpg b/201505/assets/07.jpg
diff --git a/201505/assets/08.jpg b/201505/assets/08.jpg
diff --git a/201505/assets/09.jpg b/201505/assets/09.jpg
diff --git a/201505/assets/10.jpg b/201505/assets/10.jpg
diff --git a/201505/assets/11.jpg b/201505/assets/11.jpg
diff --git a/201505/assets/12.jpg b/201505/assets/12.jpg
diff --git a/201505/assets/13.jpg b/201505/assets/13.jpg
diff --git a/201505/assets/14.jpg b/201505/assets/14.jpg
diff --git a/201505/assets/15.jpg b/201505/assets/15.jpg
diff --git a/201505/assets/16.jpg b/201505/assets/16.jpg
diff --git a/201505/assets/17.jpg b/201505/assets/17.jpg
diff --git a/201505/assets/18.jpg b/201505/assets/18.jpg
diff --git a/201505/assets/19.jpg b/201505/assets/19.jpg
diff --git a/201505/assets/20.jpg b/201505/assets/20.jpg
diff --git a/201505/assets/21.jpg b/201505/assets/21.jpg
diff --git a/201505/assets/22.jpg b/201505/assets/22.jpg
diff --git a/201505/assets/23.jpg b/201505/assets/23.jpg
diff --git a/201505/assets/24.jpg b/201505/assets/24.jpg
diff --git a/201505/assets/25.jpg b/201505/assets/25.jpg
diff --git a/201505/assets/26.jpg b/201505/assets/26.jpg
diff --git a/201505/assets/27.jpg b/201505/assets/27.jpg
diff --git a/201505/assets/28.jpg b/201505/assets/28.jpg
diff --git a/201505/assets/29.jpg b/201505/assets/29.jpg
diff --git a/201505/assets/30.jpg b/201505/assets/30.jpg
diff --git a/201505/assets/31.jpg b/201505/assets/31.jpg
diff --git a/201505/assets/32.jpg b/201505/assets/32.jpg
diff --git a/201505/assets/33.jpg b/201505/assets/33.jpg
diff --git a/201505/assets/34.jpg b/201505/assets/34.jpg
diff --git a/201505/assets/35.jpg b/201505/assets/35.jpg
diff --git a/201505/assets/36.jpg b/201505/assets/36.jpg
diff --git a/201505/assets/37.jpg b/201505/assets/37.jpg
diff --git a/201505/assets/38.jpg b/201505/assets/38.jpg
diff --git a/201505/assets/39.jpg b/201505/assets/39.jpg
diff --git a/201505/assets/40.jpg b/201505/assets/40.jpg
diff --git a/201505/assets/41.jpg b/201505/assets/41.jpg
diff --git a/201505/assets/42.jpg b/201505/assets/42.jpg
diff --git a/201505/assets/43.jpg b/201505/assets/43.jpg
diff --git a/201505/assets/44.jpg b/201505/assets/44.jpg
diff --git a/201505/assets/45.jpg b/201505/assets/45.jpg
diff --git a/201505/assets/46.jpg b/201505/assets/46.jpg
diff --git a/201505/assets/47.jpg b/201505/assets/47.jpg
diff --git a/201505/assets/48.jpg b/201505/assets/48.jpg
diff --git a/201505/assets/49.jpg b/201505/assets/49.jpg
diff --git a/201505/assets/50.jpg b/201505/assets/50.jpg
diff --git a/201505/assets/51.jpg b/201505/assets/51.jpg
diff --git a/201505/assets/52.jpg b/201505/assets/52.jpg
diff --git a/201505/assets/53.jpg b/201505/assets/53.jpg