前端精读周刊

筛选条件是 BI 搭建的核心概念，我们大部分所说的探索式分析、图表联动也都属于筛选条件的范畴，其本质就是一个组件对另一个组件的数据查询起到筛选作用。 若干 “具有输出能力” 的组件作为筛选组件，点击查询按钮时触发其作用组件重新取数。 一个表格的表头点击也可以触发筛选行为，或者柱…

bi-designer 是阿里数据中台团队自研的前端搭建引擎，基于它开发了阿里内部最大的数据分析平台，以及阿里云上的 QuickBI。 本文介绍 bi-designer 组件的使用 API。 懒加载的组件会自动完成加载，如需自定义加载 Loading 效果，可以阅读 组件异步、…

bi-designer 是阿里数据中台团队自研的前端搭建引擎，基于它开发了阿里内部最大的数据分析平台，以及阿里云上的 QuickBI。 本文介绍 bi-designer 设计器的使用 API。 心智统一：编辑模式与渲染模式统一。 通用搭建：支持接入任意通用 npm 组件。 低入…

spring 是 Java 非常重要的框架，且蕴含了一系列设计模式，非常值得研究，本期就通过 Spring学习 这篇文章了解一下 spring。 spring 作为一个后端框架，拥有 17 年历史，这在前端看来是不可思议的。前端几乎没有一个框架可以流行超过 5 年，就最近来看，…

本周跟着 Tasks, microtasks, queues and schedules 这篇文章一起深入理解这些概念间的区别。 Tasks 按顺序执行，浏览器可能在 Tasks 之间执行渲染。 如果没有执行中的 js 堆栈，则在每个回调之后。 在每个 task 之后。 在说这…

「可视化搭建系统」——从设计到架构，探索前端的领域和意义 这篇文章主要分析了现阶段可视化搭建的几种表现形式和实现原理，并重点介绍了基于富文本的可视化搭建思路，让人耳目一新。 基于富文本的可视化搭建看似很新颖，但其实早就被广泛使用了，任何一个富文本编辑器几乎都有插入表格功能，这就…

函数缓存是重要概念，本质上就是用空间（缓存存储）换时间（跳过计算过程）。 很显然这样太浪费计算资源了，当已经计算过一次天气后，就没有必要再算一次了，我们期望的是后续调用可以直接拿上一次结果的缓存，这样可以节省大量计算。因此我们可以做一个 memoizedGetChanceOfR…

在说低代码搭建之前，首先要理解什么是搭建（本文搭建指通过 Web 交互搭建一个自定义的新页面）。 对研发人员的提效：相对于 Pro Code 模式，搭建的抽象程度更高，通过牺牲部分定制性换来更高效的开发方式。 对客户的提效：如果用户有任何搭建 Web 应用的诉求，本质上从阿里云…

随着 Typescript 4 Beta 的发布，又带来了许多新功能，其中 Variadic Tuple Types 解决了大量重载模版代码的顽疾，使得这次更新非常有意义。 上面例子中，Arr 类型告诉 TS T 与 U 是数组类型，再通过 [...T, ...U] 按照逻辑顺…

Object 类型的比较是非常重要的基础知识，通过 How to Compare Objects in JavaScript 这篇文章，我们可以学到四种对比方法：引用对比、手动对比、浅对比、深对比。 如果要对比的对象 key 不多，或者在特殊业务场景需要时，这种手动对比方法其实…

IntersectionObserver 可以轻松判断元素是否可见，在之前的 精读《用 React 做按需渲染》 中介绍了原生 API 的方法，这次刚好看到其 React 封装版本 react-intersection-observer，让我们看一看 React 封装思路。 由…

使用 React Hooks 的时候，经常出现执行次数过多甚至死循环的情况，我们可以利用 use-what-changed 进行依赖分析，找到哪个变量引用一直在变化。 那么恭喜你，写出了一个最简单的死循环。这个场景里，我们本意是利用 useEffect 将 props.styl…

BI 平台是阿里数据中台团队非常重要的平台级产品，要保证报表编辑与浏览的良好体验，性能优化是必不可少的。 当前 BI 工具普遍是报表形态，要知道报表形态可不仅仅是一张张图表组件，与这些组件关联的筛选条件和联动关系错综复杂，任何一个筛选条件变化就会导致其关联项重新取数并重渲染组件…

基于 webpack 构建的大型项目开发速度已经非常慢了，前端开发者已经逐渐习惯忍受超过 100 秒的启动时间，超过 30 秒的 reload 时间。即便被寄予厚望的 webpack5 内置了缓存机制也不会得到质的提升。但放到十年前，等待时间是几百毫秒。 好在浏览器支持了 ES…

Recoil 是 Facebook 公司出的数据流管理方案，有一定思考的价值。 Recoil 是基于 Immutable 的数据流管理方案，这也是它值得被拿出来看的最重要原因，如果要用 Mutable 方式管理 React 数据流，直接看 mobx-react 就足够了。 断点…

与组件生命周期绑定的 Utils 非常适合基于 React Hooks 来做，比如可以将 “发请求” 这个功能与组件生命周期绑定，实现一些便捷的功能。 这次以 @umijs/use-request 为例子，分析其功能思路与源码。 默认自动请求：在组件初次加载时自动触发请求函数，…

Deno 将于 2020-05-13 发布 1.0，如果你还有上面的疑惑，可以和我一起通过 Deno 1.0: What you need to know 这篇文章一起了解 Deno 基础知识。 希望你带着疑问思考，未来 10 年看今天，会不会出现 Deno 官方生态壮大，完全…

在数据中台做 BI 工具经常面对海量数据的渲染处理，除了组件本身性能优化之外，经常要排查整体页面性能瓶颈点，尤其是维护一些性能做得并不好的旧代码时。 React 性能调试是面对这种问题的必修课，借助 Profiling React.js Performance 这篇文章一起学习…

Error Boundaries 是 React16 提出来用来捕获渲染时错误的概念，今天我们一起读一读 A Simple Guide to Error Boundaries in React 这篇文章，了解一下这个重要机制。 static getDerivedStateFro…

从 @types/react 源码中挖掘一些 Typescript 使用技巧吧。 泛型可以指代可能的参数类型，但指代任意类型范围太模糊，当我们需要对参数类型加以限制，或者确定只处理某种类型参数时，就可以对泛型进行 extends 修饰。 问题：React.lazy 需要限制返回…