SlideShare a Scribd company logo
1 of 68
Download to read offline
现代前端设计与开发模式
John Chou (luckyjoou@gmail.com)
2017.11
⼤大纲
Web 前端开发考古
现代前端设计模式
前端⼯工程化之路路
开发模式初体验
Web 前端开发考古
– 伟壕
“我们当年年都搞过前端的。”
4
记忆中的前端开发…
5
Web 前端三板斧演进 (1/3)
HTML (HyperText Markup Language):以 Jade 为例例
6
Web 前端三板斧演进 (2/3)
CSS (Cascading Style Sheets):以 Less 为例例
7
Preprocessor 只是前菜好吗!
Web 前端三板斧演进 (3/3)
JavaScript (ECMAScript):这是⼀一个很⻓长很⻓长的故事…
Picture source from: http://www.css88.com/archives/6533 9
JavaScript 的故事 (1/4)
1995 年年
JavaScript 随⽹网景
Navigator 2.0 发布,
由 Brendan Eich 花
费 10 天时间设计
1997 年年
ECMAScript (ECMA-262)
标准确⽴立
1999 年年
IE5 实现了了 XMLHTTP
接⼝口,第⼀一次实现异步
请求
ES3 发布
2004 年年
愚⼈人节,著名的 AJAX 应
⽤用 Gmail 发布
2006 年年
⽬目前最受欢迎的 JS 库
JQuery 发布第⼀一个版本
2009 年年
ES5 版本发布
早期
10
2008 年年
Google Chrome 浏
览器器发布,搭载了了
V8 虚拟机,⽀支持 JIT
2009 年年
Ryan Dahl 结合 V8 引擎
和 libuv 开发了了 Node.js
2010 年年
Backbone 和 Angular
发布
2012 年年
Module bundler Webpack
发布
2013 年年
Facebook 发布 React
2016 年年
ES2016 标准发布,开始
实现先于标准
JavaScript 的故事 (2/4)
现代
11
⼩小⽑毛病
IEEE 754 双精度浮点数
隐式类型转换混乱
奇怪的 this
…
JavaScript 的故事 (3/4)
12
Web
React
Vue
Desktop
NW.js
Electron
Mobile
React
Native
Server
Express
Koa
Restify
JavaScript 的故事 (4/4)
强⼤大的⽣生态
13
JS “进化”到这么屌,然后呢?
14
现代前端设计模式
前端开发模型 (1/4)
16
传统的 MVC
View 层负责前端的数据呈现及简单请求
瘦客户端,前端⾮非常轻量量
改变
浏览器器的性能提升与移动终端的崛起
HTML5 标准的发布使得前端 App 开始流⾏行行
前端开发模型 (2/4)
17
前端开发的痛点
代码中⼤大量量调⽤用相同的 DOM API,处理理繁琐,代码冗余以致
难以维护
⼤大量量的 DOM 操作使得⻚页⾯面渲染性能降低,加载速度变慢,影
响⽤用户体验
数据状态难以维护:当 Model 频繁发⽣生变化时需要主动更更新
到 View 上,当⽤用户对 View 进⾏行行操作时需要将变化的数据同
步到 Model
前端开发模型 (3/4)
MV*
18
前端开发模型 (4/4)
MVVM
19
Data Binding in MVVM (1/2)
20
Object.defineProperty
get
set
Data Binding in MVVM (2/2)
21Picture source from: https://cn.vuejs.org/v2/guide/reactivity.html
数据的更更新变得轻松了了,渲染呢?
22
Virtual DOM (1/3)
渲染是⼀一件性能昂贵的事情(下图为 Webkit main flow)
23Picture source from: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
Virtual DOM (2/3)
24
VDOM 不不是⿊黑魔法
⼆二次抽象提供 Diff/Patch 的机会,本质上更更粗粒度地更更换
innerHTML
降低重排和重绘的频率
主流实现
React: Reconciliation
Vue: Snabbdom
Virtual DOM (3/3)
25
React Elements
React 通过 JSX 语法编写 DOM
Reconciler Diff Algorithm
26
分层对⽐比
基于 Key 匹配
Pictures source from: https://calendar.perfplanet.com/2013/diff/
那么问题⼜又来了了…猜猜看?
27
如果⼀一次更更新数据极⼤大,就让⽤用
户等到⻩黄花菜都凉了了?
28
解决 VDOM 渲染性能问题
29
不不使⽤用 VDOM …
React Scheduler
Example raised by Lin Clark
三点思考
在 UI 中每次更更新没必要⽴立即⽣生效,避免掉帧
不不同类型的更更新优先级应有不不同,如动画的更更新要⽐比后端数据更更新的优先级
⾼高
Push-based ⽅方式需要开发者决定调度⼯工作,⽽而 React 提倡 Pull-based ⽅方式
由框架替开发者做决定
30
React Fiber (1/6)
传统的执⾏行行流
Pictures source from: https://www.youtube.com/watch?v=ZCuYPiUIONs
31
React Fiber (2/6)
期望可控的执⾏行行流
Pictures source from: https://www.youtube.com/watch?v=ZCuYPiUIONs
32
React Fiber (3/6)
使⽤用 requestIdleCallback() 实现类似定时器器的功能
Pictures source from: https://www.youtube.com/watch?v=ZCuYPiUIONs
React Fiber (4/6)
33
A Fiber = A virtual stack frame
将 UI 更更新⼯工作切成⼀一个个⼩小的单元,每个 Fiber 中保
存了了type, key, child, sibling, return 等等与 React
Element 相关的信息
34
React Fiber (5/6)
当 idle 时间⽤用完,更更新任务暂停,等待下⼀一次
Pictures source from: https://www.youtube.com/watch?v=ZCuYPiUIONs
35
React Fiber (6/6)
当⾼高优先级任务出现时,下⼀一个 idle 时期会放弃已经
执⾏行行的低优先级任务,先执⾏行行⾼高优先级任务
抢占式的调度会造成⼀一些问题,例例如:
⽣生命周期钩⼦子不不对称
饥饿现象
其实上⾯面讲的那些不不懂,也是
可以撸码的啦…
但是有些问题肯定还是困扰在
你的⼼心中,⽐比如…
组件化开发的思考
38
现代的 UI 框架,⽆无论是 React 还是 Vue 都能满⾜足:
组件之间完全独⽴立,实现低耦合、⾼高内部
组件增删改不不影响别的组件
多⼈人协作时可并⾏行行开发多个组件互不不影响
组件只有输⼊入和输出,⽅方便便⾃自动化测试
当⼯工程庞⼤大时,多个组件之间的通信问题,怎么办?
组件间通信
39
React 组件通信策略略举例例
Pictures source from: https://www.andrewhfarmer.com/component-communication/
组件间通信 - 更更进⼀一步…
40
Redux 使⽤用了了观察者模型,来统⼀一管理理 React 组件的状态
更更重要的是,Redux 遵循了了 Flux 模型,其特⾊色是单项数据流,实
现还有 Vuex 等
Pictures source from: https://facebook.github.io/flux/docs/in-depth-overview.html
组件间通信 - 单向数据流
41
仅⼀一个 Store 对于数据共享有设计上的优势,简洁
数据单向流动,经过 Store 中转,变得更更加可控
可以跟踪每⼀一个 Action 的执⾏行行时间实现 Time travel
例例⼦子:flappy-bird
前端新思路路 - 数据驱动开发
42
根据特定需求开发指定的代码,接⼝口和代码的复⽤用性
并不不让⼈人满意
⾯面向数据的开发思维指将业务和需求拆分为可被共享
的数据结构,进⽽而抽象为前后端都可操作的数据模型
相关框架:Relay,Olympics (Alibaba)
前端⼯工程化之路路
懂得很多道理理
却依然过不不好这⼀一⽣生
却还是不不知如何⾼高效开发前端
从⼀一个简单的业务场景谈起 (1/2)
45
Web ⻚页⾯面中使⽤用第三⽅方库如 jQuery,通常是在 HTML
⻚页⾯面中增加 <script src=“…”> 标签,引⽤用第三⽅方库的
js ⽂文件
这明显有问题…
更更重要的是:这就是⼯工具团队⼀一些应⽤用的实现⽅方式…
从⼀一个简单的业务场景谈起 (2/2)
47
当⼯工程浩⼤大、依赖繁多,⻚页⾯面写满了了 <script> 依赖…
引⽤用顺序需谨慎
繁琐的库管理理降低开发效率
⻚页⾯面请求库的 HTTP 性能和⽤用户体验下降
⽆无⽤用的第三⽅方库代码占⽤用请求带宽
…
Node 和 NPM (1/2)
48
Node.js
基于 Chrome V8 的 JavaScript 运⾏行行时
使 JavaScript 开发者有能⼒力力在浏览器器之外搞事情
NPM (Node Package Manager)
类似 Java Maven 管理理器器
管理理 Node.js 项⽬目,管理理配置、下载/更更新依赖、发布库、…
Node 和 NPM (2/2)
49
NPM 通过⽬目录下的 package.json ⽂文件配置项⽬目
打包⼯工具
50
库管理理已问题解决,但 <script> 标签并未减少
这时候就需要 JS Bundler 出场了了
将项⽬目代码及其依赖打包进⼀一个⽂文件中
当然可配合 uglify, minify 等预处理理器器⼀一起服⽤用
主流⼯工具:Browserify, Webpack
打包⼯工具 - Webpack
51
Webpack:不不仅仅是打包 JS!
Pictures source from: https://webpack.js.org
– Atwood’s Law
“Any application that can be written in JavaScript,
will eventually be written in JavaScript.”
Node 应⽤用 (1/3)
53
既然 Node.js 具备了了 Python 等脚本语⾔言的能⼒力力,⾃自然
会有⼈人想⽤用它来写应⽤用、服务器器,尤其是当后端⼈人⼿手
不不⾜足时…
前后端分离趋势
主流框架:Express,Koa
Web 前后端分离趋势 (1/2)
54
前后端⾼高度耦合:
前端依赖服务端开发环境
在服务端 View 层⾼高度耦合
沟通成本⾼高
职责不不清晰
Web 前后端分离趋势 (2/2)
55
Node.js 重新定义前后端!
Pictures source from: http://oniwebblog.blogspot.com/2016/01/general-crud-application-using.html
56
Node.js 应⽤用的优势
前端熟悉的语⾔言,学习成本低,接受度⾼高
都是 JS,代码可在前后端复⽤用
事件驱动、⾮非阻塞 I/O,适合 I/O 密集型业务
Node 应⽤用 (2/3)
57
Node.js 服务器器的职责
转发数据,串串接后端服务
路路由设计,控制逻辑
渲染⻚页⾯面,体验优化
权限控制
…
Node 应⽤用 (3/3)
58
阿⾥里里的 Node.js 应⽤用
Pictures source from: http://alinode.aliyun.com/blog/37
59
实际⽣生产时远不不⽌止 Koa…
Pictures source from: https://cnodejs.org/topic/580a6a7e541dfb7b50f40a60
60
Node.js 应⽤用稳定吗?
Pictures source from: https://zhuanlan.zhihu.com/p/29374045
Egg.js 多进程模型
61
部署与上线
⾃自动化打包发布,持续集成
线上环境的稳定性
省去⽹网络运维精⼒力力
内部:Aone,外部:云效
开发模式初体验
63
Demo 时间
Web 应⽤用
Electron 应⽤用
Weex 应⽤用
That’s it. Thank you all!
如果听完为我的离开感到可
惜,那我就觉得值了了(误
Keep in touch: https://joouis.com/
Q & A
引⽤用
现代前端开发的设计模式
Vue.js 和 MVVM ⼩小细节
How Browsers Work: Behind the scenes of modern web browsers
React 官⽅方⽂文档及博客
React’s diff algorithm
A Cartoon Intro to Fiber - React Conf 2017
8 no-Flux strategies for React component communication
Flux
淘宝前后端分离实践
egg - JSConf China 2016
68

More Related Content

Similar to Modern Web Development Introduction

My eclipse 6 java开发教程[优化整合版]
My eclipse 6 java开发教程[优化整合版]My eclipse 6 java开发教程[优化整合版]
My eclipse 6 java开发教程[优化整合版]Cik Wati
 
介紹前端 Web 技術在跨平台開發上的應用
介紹前端 Web 技術在跨平台開發上的應用介紹前端 Web 技術在跨平台開發上的應用
介紹前端 Web 技術在跨平台開發上的應用Jerry Lin
 
常用Js框架比较
常用Js框架比较常用Js框架比较
常用Js框架比较Adam Lu
 
淘宝网前端开发面试题
淘宝网前端开发面试题 淘宝网前端开发面试题
淘宝网前端开发面试题 Lumend
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发leneli
 
如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)
如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)
如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)Cyril Wang
 
程式人雜誌 -- 2013年3月號
程式人雜誌 -- 2013年3月號程式人雜誌 -- 2013年3月號
程式人雜誌 -- 2013年3月號鍾誠 陳鍾誠
 
開放原始碼作為新事業: 台灣本土經驗談 (COSCUP 2011)
開放原始碼作為新事業: 台灣本土經驗談 (COSCUP 2011)開放原始碼作為新事業: 台灣本土經驗談 (COSCUP 2011)
開放原始碼作為新事業: 台灣本土經驗談 (COSCUP 2011)National Cheng Kung University
 
D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践Jackson Tian
 
Weic2015 docker
Weic2015 dockerWeic2015 docker
Weic2015 dockerRay Lin
 
前端开发的那些事儿
前端开发的那些事儿前端开发的那些事儿
前端开发的那些事儿jndream
 
那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013Adam Wang
 
做一个“懒惰”的程序员-LCP框架系列交流
做一个“懒惰”的程序员-LCP框架系列交流做一个“懒惰”的程序员-LCP框架系列交流
做一个“懒惰”的程序员-LCP框架系列交流lichengdongdong
 
Linux运维趋势 第12期 故障排除
Linux运维趋势 第12期 故障排除Linux运维趋势 第12期 故障排除
Linux运维趋势 第12期 故障排除51CTO
 
GlassFish特性介绍
GlassFish特性介绍GlassFish特性介绍
GlassFish特性介绍Jim Jiang
 
React.js what do you really mean?
React.js what do you really mean?React.js what do you really mean?
React.js what do you really mean?昱安 周
 
Beyond rails server
Beyond rails serverBeyond rails server
Beyond rails serverMichael Chen
 
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型Jackson Tian
 
從雛形到設計-了解您的使用者在想什麼
從雛形到設計-了解您的使用者在想什麼從雛形到設計-了解您的使用者在想什麼
從雛形到設計-了解您的使用者在想什麼Souyi Yang
 

Similar to Modern Web Development Introduction (20)

My DevOps Tour 0.1
My DevOps Tour 0.1My DevOps Tour 0.1
My DevOps Tour 0.1
 
My eclipse 6 java开发教程[优化整合版]
My eclipse 6 java开发教程[优化整合版]My eclipse 6 java开发教程[优化整合版]
My eclipse 6 java开发教程[优化整合版]
 
介紹前端 Web 技術在跨平台開發上的應用
介紹前端 Web 技術在跨平台開發上的應用介紹前端 Web 技術在跨平台開發上的應用
介紹前端 Web 技術在跨平台開發上的應用
 
常用Js框架比较
常用Js框架比较常用Js框架比较
常用Js框架比较
 
淘宝网前端开发面试题
淘宝网前端开发面试题 淘宝网前端开发面试题
淘宝网前端开发面试题
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
 
如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)
如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)
如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)
 
程式人雜誌 -- 2013年3月號
程式人雜誌 -- 2013年3月號程式人雜誌 -- 2013年3月號
程式人雜誌 -- 2013年3月號
 
開放原始碼作為新事業: 台灣本土經驗談 (COSCUP 2011)
開放原始碼作為新事業: 台灣本土經驗談 (COSCUP 2011)開放原始碼作為新事業: 台灣本土經驗談 (COSCUP 2011)
開放原始碼作為新事業: 台灣本土經驗談 (COSCUP 2011)
 
D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践
 
Weic2015 docker
Weic2015 dockerWeic2015 docker
Weic2015 docker
 
前端开发的那些事儿
前端开发的那些事儿前端开发的那些事儿
前端开发的那些事儿
 
那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013
 
做一个“懒惰”的程序员-LCP框架系列交流
做一个“懒惰”的程序员-LCP框架系列交流做一个“懒惰”的程序员-LCP框架系列交流
做一个“懒惰”的程序员-LCP框架系列交流
 
Linux运维趋势 第12期 故障排除
Linux运维趋势 第12期 故障排除Linux运维趋势 第12期 故障排除
Linux运维趋势 第12期 故障排除
 
GlassFish特性介绍
GlassFish特性介绍GlassFish特性介绍
GlassFish特性介绍
 
React.js what do you really mean?
React.js what do you really mean?React.js what do you really mean?
React.js what do you really mean?
 
Beyond rails server
Beyond rails serverBeyond rails server
Beyond rails server
 
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
 
從雛形到設計-了解您的使用者在想什麼
從雛形到設計-了解您的使用者在想什麼從雛形到設計-了解您的使用者在想什麼
從雛形到設計-了解您的使用者在想什麼
 

Modern Web Development Introduction