Modern Web Development Introduction
?
0 likes?148 views
HTML, CSS, JS evolution. Design pattern for JS and UI framework. Web engineering.
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.de?neProperty 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 ?ow） 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/?ux/docs/in-depth-overview.html
- 41. 组件间通信 - 单向数据流 41 仅?一个 Store 对于数据共享有设计上的优势，简洁 数据单向流动，经过 Store 中转，变得更更加可控 可以跟踪每?一个 Action 的执?行行时间实现 Time travel 例例?子：?appy-bird
- 42. 前端新思路路 - 数据驱动开发 42 根据特定需求开发指定的代码，接?口和代码的复?用性 并不不让?人满意 ?面向数据的开发思维指将业务和需求拆分为可被共享 的数据结构，进?而抽象为前后端都可操作的数据模型 相关框架：Relay，Olympics (Alibaba)
- 43. 前端?工程化之路路
- 45. 从?一个简单的业务场景谈起 (1/2) 45 Web ?页?面中使?用第三?方库如 jQuery，通常是在 HTML ?页?面中增加 <script src=/choujohn351/modern-web-development-introduction/“…”> 标签，引?用第三?方库的 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