blog
blog copied to clipboard
sorrycc
💡
以下是我在 2019.11.15 [成都全栈大会](https://web-conf.dev/#2019/)分享的文字稿，介绍了蚂蚁前端研发的最佳实践，其中我提取了三个比较重要的点，每个点都是我们实践和深入思考后的结果，希望能对大家有所启发，欢迎探讨。 **招人：如果你如果对这套技术栈感兴趣，希望来一起打磨优化 umi 和 bigfish，我们招人，P6-P9 不限，发邮件到 sorrycc#gmail.com，或者微信联系我。** ## 开篇 准备这个题目时我 google 了下前端最佳实践，排在前面的是讲前端代码规范，语意、可读性、编码规范、空格还是 Tab 等等，我觉得这是我们第一代的最佳实践。 而现在都 9012 年了，最佳实践也经历了很多代的变更，下面是我们在这方面的思考和实践。 ## 自我介绍 ## 目录 ## 为什么要有最佳实践？ 不知大家在这些方面是否有疑惑？ * **前端发展快**，每次发布 Umi 版本时，除了点赞，还有人求别发，表示实在学不动了。右边这张图是之前的朋友圈看到的，转到公司群里，有共鸣的人不少，说明一定程度反应了现在前端社区的情况。...
最近给 antd-admin 提了迁移到 umi 的 [PR](https://github.com/zuiidea/antd-admin/pull/770)，过程中发现使用 [umi](https://github.com/umijs/umi/) + [umi-plugin-dva](https://github.com/umijs/umi/tree/master/packages/umi-plugin-dva) 的方式在代码组织、可维护性等方面相比之前都有不少提升，在这里介绍给大家。 ## Duck Directory 大家都说命名是编程中最难的事情之一，我觉得目录结构组织也差不了多少。 Duck Directory 可以看下图理解下，是指按功能/页面维护进行目录组织，与之相对的是一种扁平的目录组织形式。 dva 项目之前通常都是这种扁平的组织方式， ``` + models - global.js - a1.js - a2.js - b.js...
不寒暄了，经过一周的开发，我们增加和改进了以下功能。 ## 支持 mpa 通过一个自定义的 Umi 渲染器 [renderer-mpa](https://github.com/umijs/umi/tree/master/packages/renderer-mpa) 实现 mpa 的支持，复用现有的路由配置和绝大部分能力，每个页面需要有一个 React 组件出口。不是传统意义上的 mpa，但 React 应用的场景下够用。 mpa 由于不会引入 react-router 和 history，一个简单的 mpa 应用尺寸可以控制地很小。试了下 mpa + preact + 禁用 polyfill 的组合，产物只有...
> 以下内容已整合到脚手架：https://github.com/sorrycc/dva-boilerplate-electron 近期，我们在内部做了一个类似 IDE 性质的应用，基于 electron。过程中趟过不少坑，也有了些心得，记录如下。 包含： - 数据通讯 - 架构方案 - Two-Package 目录结构 - 源码打包 - 应用打包 ## 数据通讯 > 数据通讯方案决定整体的架构方案。 翻翻 Electron 文档，应该不难发现，Electron 有两个进程，分别为 main 和 renderer，而两者之间是通过 ipc...
库地址：https://github.com/sorrycc/roadhog ## roadhog 是啥? 简单来说，**roadhog 是可配置的 [react-create-app](https://github.com/facebookincubator/create-react-app)**。 roadhog 是一个 cli 工具，提供 `server` 和 `build` 两个命令，分别用于本地调试和构建。命令行体验和 create-react-app 一致，配置略有不同，比如默认开启 [css modules](https://github.com/css-modules/css-modules)，**然后还提供了 JSON 格式的配置方式**。  ## 命名来源? http://ow.blizzard.cn/heroes/roadhog ## 为啥要有 roadhog ? 做...
> 本文仅适用于 dva@1，dva@2 的文档请移步 https://github.com/sorrycc/blog/issues/62 > 本文仅适用于 dva@1，dva@2 的文档请移步 https://github.com/sorrycc/blog/issues/62 > 本文仅适用于 dva@1，dva@2 的文档请移步 https://github.com/sorrycc/blog/issues/62 本文会一步步引导大家如何创建一个 CURD 应用，包含查询、编辑、删除、创建，以及分页处理，数据 mock，自动处理 loading 状态等，基于 react, [dva](https://github.com/dvajs/dva) 和 [antd](https://github.com/ant-design/ant-design) 。 最终效果：  ## 开始之前：...
dva 2.0 发布
距离 [dva@1](https://github.com/sorrycc/blog/issues/10) 发布已经快整整一年，经过一段时间断断续续的开发，dva@2 终于能和大家见面了。 2.0 最主要的变化是提取了 [dva-core](https://github.com/dvajs/dva/tree/master/packages/dva-core)，是仅封装了 redux 和 redux-saga 的纯数据流方案。这使得 dva 可以应用在除 react 之外的其他领域，比如 RN、小程序、游戏、vue 等领域；同时也可满足同一领域的多种实现，比如为 react 应用不同的路由方案的 [dva-react-router-3](https://github.com/dvajs/dva/tree/master/packages/dva-react-router-3) 和 [dva-no-router](https://github.com/dvajs/dva/tree/master/packages/dva-no-router)。([#530](https://github.com/dvajs/dva/issues/530)) 本次发布包含 dva-core 和 3 个 react 实现： *...
[Umi UI 一期](https://github.com/sorrycc/blog/issues/86)做好了一个架子，但只是包含一些基础功能，而要做提效，则需要一些实打实的功能。一个月后的 Umi UI 二期带来了一些进阶功能，比如资产（区块+模板）、Mini 气泡、编译态同步、build 和 dev 文件分析等。 ## 新功能 ### 资产市场（区块和模板） 支持区块和模板的查看、预览，以及把他们添加到项目甚至指定页面里。我觉得这是可能带来大幅提效的一个功能，当然还得取决于资产的质量和数量，如果现有区块模板和项目需求的匹配度高，那提效幅度会很大。 注：由于暂不支持撤回操作，建议添加之前通过 git 提交代码保存之前的变更。 ### Mini 气泡 用户使用 UMI UI 不仅仅是通过 `umi ui` 命令，还可以通过 `umi dev`...
## 重要改进 * 改进补丁方案，支持通过配置 [targets](https://umijs.org/zh/config/#targets) 来自动引入补丁，deprecate `umi-plugin-polyfills`，[#1114](https://github.com/umijs/umi/pull/1114) * 支持运行时插件和 `src/app.js`，[#1101](https://github.com/umijs/umi/pull/1101) * 改进出错提醒，更加友好和更多可操作的提示，[#1093](https://github.com/umijs/umi/pull/1093)，[#1132](https://github.com/umijs/umi/pull/1132) * 内置 `babel-plugin-macros`，[#1135](https://github.com/umijs/umi/pull/1135) * 锁定 webpack 版本为 4.19.0，因为 [email protected] 开始和 hard-source-webpack-plugin 不兼容，[#1134](https://github.com/umijs/umi/pull/1134) * `umi-plugin-react` 支持配置 chunks、scripts、headScripts、metas 和 links，[#1097](https://github.com/umijs/umi/pull/1097)...