blog
blog copied to clipboard
sorrycc
💡
> 本文为在 GMTC 2019 上分享的文字稿，同步发在[《前端之巅》](https://mp.weixin.qq.com/s/6-yjR_CsHaWUI8YqLK25rA)公众号。 ## 开篇 ## 自我介绍 ## 目录 ## 框架发展历史 这是我们的框架发展时间线。 * 2015 年之前我们有 Sea.JS、Arale、SPM 开源技术方案，大家可以有所耳闻 * 2015 年我们接入 React，从自研的 Roof 到 Redux 再到开源的 Dva，一步步验证我们的最佳实践，并把这些实践交给开源社区检验 * 2017...
哈喽，好久不见！ Umi 2 发布已经是一年半之前的事了，在这段时间里，我们发现之前的架构正逐渐不能满足业务飞速发展的需要，于是我们重写了一遍 Umi。经过几个月的 “007 ” 研发，Umi 3 在今天正式和大家见面了，并调整 slogan 为“**插件化的企业级前端应用框架**”。 ## Umi 是什么？ 有些朋友可能还不太了解 Umi。 Umi 是蚂蚁金服的底层前端框架，已直接或间接地服务了 3000+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。 它包含以下特性： * 🎉 **可扩展**，完整的生命周期，插件化，支持插件和插件集...
Hi，好久不见。 ## 依赖打包 依赖打包指把 node 相关依赖进行打包锁定，现在越来越多的框架和工具都这么处理，因为好处很多， * **安装时 0 peerDependencies Warning** * **安装尺寸从 114M 降到 76M**，详见 [packagephobia](https://packagephobia.com/result?p=umi) * **依赖总量从 786 个减少到 225 个** * **安装速度提升 1 倍**（可能不止，我内网环境从 23.45s 到 4.82s）...
roadhog 2.0 发布
趁着元旦，roadhog 2.0 发布了，我们一起来看看有啥变化吧。 👏 👏 👏 **一、** 首先，我们把底层重写，基于 [af-webpack](https://github.com/umijs/umi/tree/master/packages/af-webpack)。 为啥要基于 af-webpack？**单看 roadhog，这意义不大，但如果有数个工具都基于 af-webpack 做上层封装，那么就意味着 webpack 工具层的配置统一。** 尤其对我们内部来说，有 4-5 个工具，每个工具有各自的配置方法，对于开发者来说无疑是个灾难。对外部的同学来说，[umi](https://github.com/umijs/umi) 和 roadhog 都基于 af-webpack，那么之后在这两个工具之间切换，webpack 的配置层是无需变动的。 另外，大家会发现 roadhog 的 issue 维护不太积极，是因为我的工作重心目前不在这，而是在...
> 更新：我们基于此最佳实践做了一个封装方案：[dva](https://github.com/sorrycc/dva)，可以简化使用 redux 和 redux-saga 时很多繁杂的操作。  前端变化虽快，但其实一直都围绕这几个概念在转： - URL - 访问什么页面 - Data - 显示什么信息 - View - 页面长成什么样 - Action - 对页面做了什么操作 - API Server - Data 数据的来源...
本文是 [sorrycc/blog#18](https://github.com/sorrycc/blog/issues/18) 的更新版，基于 dva@2、[umi](https://github.com/umijs/umi) 和 [umi-plugin-dva](https://github.com/umijs/umi/tree/master/packages/umi-plugin-dva)。下面会一步步引导大家如何创建一个 CURD 应用，包含查询、编辑、删除、创建，以及分页处理，数据 mock，自动处理 loading 状态等。 全部代码在 [umijs/umi-dva-user-dashboard](https://github.com/umijs/umi-dva-user-dashboard)，对 dva 熟练的同学可以看代码。 最终效果：  ## 开始之前： * 确保 node 版本是 8.4 或以上 * 用 [cnpm](https://github.com/cnpm/cnpm) 或 [yarn](https://github.com/yarnpkg/yarn)...
支付宝前端应用架构的发展和选择
> 对 Roof 不感兴趣的同学可以直接从 Redux 段落读起。 下文说说我理解的支付宝前端应用架构发展史，从 roof 到 redux，再到 [dva](https://github.com/sorrycc/dva)。 Roof 应该是从 0.4 开始在项目里大范围推广的。 ## Roof 0.4 Roof 0.4 接触不多，时间久了已经没有太多印象了，记忆中很多概念是从 [baobab](https://github.com/Yomguithereal/baobab) 里来的，通过 cursor 订阅数据，并基于此设计了很多针对复杂场景的解决方案。 这种方式灵活且强大，现在想想如果这条路一走到底，或许比现在要好一些。但由于概念比较多，当时大家都比较难理解 cursor 这类的概念。并且 redux 越来越流行。。...
Hello！umi
**一、** [umi](https://github.com/umijs/umi)（中文名：五米）是我目前的工作重点，正在全力开发中，从写下第一行代码开始算起已有数月。但从闲聊和邮件中发现不少人还不能准备地理解 umi 是啥、能做啥，于是趁着代码写累了，聊聊 umi 的一些情况。 umi 是工具吗？是。但不仅仅是。**我给 umi 的定位是开发框架，目前包含工具 + 路由，不包含数据和视图。** 所以 umi[工具 + 路由] + dva[数据] + antd(-mobile)[视图]，很配哦。另外，umi 目前基于 React，不支持 Vue 和其他框架或者无框架的开发方式。 前面说的目前，其实是精力有限。 **二、** 大家可能会觉得，umi 有啥特别的，工具用 webpack...
> 视频版：[youtube](https://www.youtube.com/watch?v=z4pWFpPiIoc) | [bilibili](https://www.bilibili.com/video/av37573841/) ## 缘起 由于维护 roadhog 和 umi，收到构建方面的问题反馈比较多，其中一个常见的是打包时 uglify 压缩的问题。类似下面的报错都是这个引起的， ``` Failed to minify the bundle. Error: 0.0f3f4c41.async.js from UglifyJs xx.async.js from UglifyJs Unexpected token: keyword (const) 0.570d21b1.async.js...
任何一个小知识点，深挖下去，也是非常有意思的。 ## 什么是补丁？ > A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening...