Modern Web Development Introduction
0 likes149 views
本文件探讨了现代前端设计与开发模式的演变，包括JavaScript、前端框架（如React和Vue）、组件化开发以及前后端分离趋势。文中详细介绍了前端开发中的痛点及其解决方案，如使用MVVM模式和虚拟DOM优化渲染性能。还强调了工程化的重要性，通过Node.js和npm等工具提高开发效率，最终形成数据驱动开发的思维。
Modern Web Development Introduction
- 3. Web 前端开发考古
- 5. 记忆中的前端开发… 5
- 6. Web 前端三板斧演进 (1/3) HTML (HyperText Markup Language)：以 Jade 为例例 6
- 7. Web 前端三板斧演进 (2/3) CSS (Cascading Style Sheets)：以 Less 为例例 7
- 9. Web 前端三板斧演进 (3/3) JavaScript (ECMAScript)：这是⼀一个很⻓长很⻓长的故事… Picture source from: http://www.css88.com/archives/6533 9
- 10. 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
- 11. 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
- 12. ⼩小⽑毛病 IEEE 754 双精度浮点数 隐式类型转换混乱 奇怪的 this … JavaScript 的故事 (3/4) 12
- 15. 现代前端设计模式
- 16. 前端开发模型 (1/4) 16 传统的 MVC View 层负责前端的数据呈现及简单请求 瘦客户端，前端⾮非常轻量量 改变 浏览器器的性能提升与移动终端的崛起 HTML5 标准的发布使得前端 App 开始流⾏行行
- 17. 前端开发模型 (2/4) 17 前端开发的痛点 代码中⼤大量量调⽤用相同的 DOM API，处理理繁琐，代码冗余以致 难以维护 ⼤大量量的 DOM 操作使得⻚页⾯面渲染性能降低，加载速度变慢，影 响⽤用户体验 数据状态难以维护：当 Model 频繁发⽣生变化时需要主动更更新 到 View 上，当⽤用户对 View 进⾏行行操作时需要将变化的数据同 步到 Model
- 20. Data Binding in MVVM (1/2) 20 Object.defineProperty get set
- 21. Data Binding in MVVM (2/2) 21Picture source from: https://cn.vuejs.org/v2/guide/reactivity.html
- 23. Virtual DOM (1/3) 渲染是⼀一件性能昂贵的事情（下图为 Webkit main flow） 23Picture source from: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
- 24. Virtual DOM (2/3) 24 VDOM 不不是⿊黑魔法 ⼆二次抽象提供 Diff/Patch 的机会，本质上更更粗粒度地更更换 innerHTML 降低重排和重绘的频率 主流实现 React: Reconciliation Vue: Snabbdom
- 25. Virtual DOM (3/3) 25 React Elements React 通过 JSX 语法编写 DOM
- 26. Reconciler Diff Algorithm 26 分层对⽐比 基于 Key 匹配 Pictures source from: https://calendar.perfplanet.com/2013/diff/
- 29. 解决 VDOM 渲染性能问题 29 不不使⽤用 VDOM … React Scheduler Example raised by Lin Clark 三点思考 在 UI 中每次更更新没必要⽴立即⽣生效，避免掉帧 不不同类型的更更新优先级应有不不同，如动画的更更新要⽐比后端数据更更新的优先级 ⾼高 Push-based ⽅方式需要开发者决定调度⼯工作，⽽而 React 提倡 Pull-based ⽅方式 由框架替开发者做决定
- 30. 30 React Fiber (1/6) 传统的执⾏行行流 Pictures source from: https://www.youtube.com/watch?v=ZCuYPiUIONs
- 31. 31 React Fiber (2/6) 期望可控的执⾏行行流 Pictures source from: https://www.youtube.com/watch?v=ZCuYPiUIONs
- 32. 32 React Fiber (3/6) 使⽤用 requestIdleCallback() 实现类似定时器器的功能 Pictures source from: https://www.youtube.com/watch?v=ZCuYPiUIONs
- 33. React Fiber (4/6) 33 A Fiber = A virtual stack frame 将 UI 更更新⼯工作切成⼀一个个⼩小的单元，每个 Fiber 中保 存了了type, key, child, sibling, return 等等与 React Element 相关的信息
- 34. 34 React Fiber (5/6) 当 idle 时间⽤用完，更更新任务暂停，等待下⼀一次 Pictures source from: https://www.youtube.com/watch?v=ZCuYPiUIONs
- 35. 35 React Fiber (6/6) 当⾼高优先级任务出现时，下⼀一个 idle 时期会放弃已经 执⾏行行的低优先级任务，先执⾏行行⾼高优先级任务 抢占式的调度会造成⼀一些问题，例例如： ⽣生命周期钩⼦子不不对称 饥饿现象
- 38. 组件化开发的思考 38 现代的 UI 框架，⽆无论是 React 还是 Vue 都能满⾜足： 组件之间完全独⽴立，实现低耦合、⾼高内部 组件增删改不不影响别的组件 多⼈人协作时可并⾏行行开发多个组件互不不影响 组件只有输⼊入和输出，⽅方便便⾃自动化测试 当⼯工程庞⼤大时，多个组件之间的通信问题，怎么办？
- 39. 组件间通信 39 React 组件通信策略略举例例 Pictures source from: https://www.andrewhfarmer.com/component-communication/
- 40. 组件间通信 - 更更进⼀一步… 40 Redux 使⽤用了了观察者模型，来统⼀一管理理 React 组件的状态 更更重要的是，Redux 遵循了了 Flux 模型，其特⾊色是单项数据流，实 现还有 Vuex 等 Pictures source from: https://facebook.github.io/flux/docs/in-depth-overview.html
- 41. 组件间通信 - 单向数据流 41 仅⼀一个 Store 对于数据共享有设计上的优势，简洁 数据单向流动，经过 Store 中转，变得更更加可控 可以跟踪每⼀一个 Action 的执⾏行行时间实现 Time travel 例例⼦子：flappy-bird
- 42. 前端新思路路 - 数据驱动开发 42 根据特定需求开发指定的代码，接⼝口和代码的复⽤用性 并不不让⼈人满意 ⾯面向数据的开发思维指将业务和需求拆分为可被共享 的数据结构，进⽽而抽象为前后端都可操作的数据模型 相关框架：Relay，Olympics (Alibaba)
- 43. 前端⼯工程化之路路
- 45. 从⼀一个简单的业务场景谈起 (1/2) 45 Web ⻚页⾯面中使⽤用第三⽅方库如 jQuery，通常是在 HTML ⻚页⾯面中增加 <script src=“…”> 标签，引⽤用第三⽅方库的 js ⽂文件 这明显有问题… 更更重要的是：这就是⼯工具团队⼀一些应⽤用的实现⽅方式…
- 47. 从⼀一个简单的业务场景谈起 (2/2) 47 当⼯工程浩⼤大、依赖繁多，⻚页⾯面写满了了 <script> 依赖… 引⽤用顺序需谨慎 繁琐的库管理理降低开发效率 ⻚页⾯面请求库的 HTTP 性能和⽤用户体验下降 ⽆无⽤用的第三⽅方库代码占⽤用请求带宽 …
- 48. Node 和 NPM (1/2) 48 Node.js 基于 Chrome V8 的 JavaScript 运⾏行行时 使 JavaScript 开发者有能⼒力力在浏览器器之外搞事情 NPM (Node Package Manager) 类似 Java Maven 管理理器器 管理理 Node.js 项⽬目，管理理配置、下载/更更新依赖、发布库、…
- 49. Node 和 NPM (2/2) 49 NPM 通过⽬目录下的 package.json ⽂文件配置项⽬目
- 50. 打包⼯工具 50 库管理理已问题解决，但 <script> 标签并未减少 这时候就需要 JS Bundler 出场了了 将项⽬目代码及其依赖打包进⼀一个⽂文件中 当然可配合 uglify, minify 等预处理理器器⼀一起服⽤用 主流⼯工具：Browserify, Webpack
- 51. 打包⼯工具 - Webpack 51 Webpack：不不仅仅是打包 JS！ Pictures source from: https://webpack.js.org
- 52. – Atwood’s Law “Any application that can be written in JavaScript, will eventually be written in JavaScript.”
- 53. Node 应⽤用 (1/3) 53 既然 Node.js 具备了了 Python 等脚本语⾔言的能⼒力力，⾃自然 会有⼈人想⽤用它来写应⽤用、服务器器，尤其是当后端⼈人⼿手 不不⾜足时… 前后端分离趋势 主流框架：Express，Koa
- 54. Web 前后端分离趋势 (1/2) 54 前后端⾼高度耦合： 前端依赖服务端开发环境 在服务端 View 层⾼高度耦合 沟通成本⾼高 职责不不清晰
- 55. Web 前后端分离趋势 (2/2) 55 Node.js 重新定义前后端！ Pictures source from: http://oniwebblog.blogspot.com/2016/01/general-crud-application-using.html
- 56. 56 Node.js 应⽤用的优势 前端熟悉的语⾔言，学习成本低，接受度⾼高 都是 JS，代码可在前后端复⽤用 事件驱动、⾮非阻塞 I/O，适合 I/O 密集型业务 Node 应⽤用 (2/3)
- 58. 58 阿⾥里里的 Node.js 应⽤用 Pictures source from: http://alinode.aliyun.com/blog/37
- 59. 59 实际⽣生产时远不不⽌止 Koa… Pictures source from: https://cnodejs.org/topic/580a6a7e541dfb7b50f40a60
- 60. 60 Node.js 应⽤用稳定吗？ Pictures source from: https://zhuanlan.zhihu.com/p/29374045 Egg.js 多进程模型
- 62. 开发模式初体验
- 63. 63 Demo 时间 Web 应⽤用 Electron 应⽤用 Weex 应⽤用
- 64. That’s it. Thank you all!
- 66. Keep in touch: https://joouis.com/
- 67. Q & A
- 68. 引⽤用 现代前端开发的设计模式 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