Shaoyin Song
Shaoyin Song
 近年来，阿里数据中台产品发展迅速。核心产品之 [Quick BI](https://www.aliyun.com/page-source/common/yunqihao/quickbi_gartnerabi_2021) 连续 2 年成为国内唯一入选 Gartner 魔力象限的国产 BI。Quick BI 单一代码仓库源码突破了 100万行。整个开发过程涉及到的人员和模块都很多，因为下面分享的一些原则，产品能一直做到快速迭代。 先分享几个关键数据： - 代码：TypeScript 82万行，样式 Sass+Less+CSS 18万行。（cloc 统计，去除自动生成代码） - 协同：Code Review 12000+次，Commit 53,000+次。  很多人会问，这么多代码，为什么不切分代码库？还不赶快引入微前端、Serverless 框架？你们就不担心无法维护，启动龟速吗？ 实际情况是，从第一天开始，就预估到会有这么大的代码量。启动时间也从最初的几秒钟到后面越来越慢5～10分钟，再优化到近期的5秒钟。整个过程下来，团队更感受到...
 > 原发于知乎专栏：https://zhuanlan.zhihu.com/ne-fe 众所周知，JavaScript 浮点数运算时经常遇到会 `0.000000001` 和 `0.999999999` 这样奇怪的结果，如 `0.1+0.2=0.30000000000000004`、`1-0.9=0.09999999999999998`，很多人知道这是浮点数误差问题，但具体就说不清楚了。本文帮你理清这背后的原理以及解决方案，还会向你解释JS中的大数危机和四则运算中会遇到的坑。 ## 浮点数的存储 首先要搞清楚 JavaScript 如何存储小数。和其它语言如 Java 和 Python 不同，JavaScript 中所有数字包括整数和小数都只有一种类型 — `Number`。它的实现遵循 [IEEE 754](http://grouper.ieee.org/groups/754/) 标准，使用 64 位固定长度来表示，也就是标准的 double 双精度浮点数（相关的还有float...
React Conf 是 React 官方主办的年度盛会，2020年因为疫情没有举行，今年的更加被期待。今年也是第一次线上举办，同往年我熬夜看完 Keynote。整个大会一共19个主题，5个半小时（包括1个小时茶歇），其中有将近40%的女性演讲，内容涵盖 React 18新特性，未来前瞻，以及生态的内容，接下来是我的一些感受。（完整回放链接：[https://www.youtube.com/watch?v=8dUpL8SCO1w](https://www.youtube.com/watch?v=8dUpL8SCO1w)） PS: 为了方便回看，截图尽量保留了播放进度条 ## 内容概要 ### React 新特性介绍 #### Suspense  首先第一个重点介绍的 Suspense，它并不是新特性，React 16.6 就已经引入，现在主要是用来和 React.lazy做组件延迟加载，这次介绍的重点是用 Suspense 来做取数。它最大的优势是把取数和loading处理的关注点分离。  对我而言，Suspense 能够把取数这类异步操作变成同步代码开发一样的体验。确实能提高代码的可读性和可维护性。Suspense 本身并不处理取数，需要和取数库搭配使用，目前 Relay...
 原谅我做一次标题党，Ajax 不会死，传统 Ajax 指的是 XMLHttpRequest（XHR），~~未来~~现在已被 [Fetch](https://fetch.spec.whatwg.org/) 替代。 最近把阿里一个千万级 PV 的数据产品全部由 jQuery 的 `$.ajax` 迁移到 `Fetch`，上线一个多月以来运行非常稳定。结果证明，对于 IE8+ 以上浏览器，在生产环境使用 Fetch 是可行的。 由于 Fetch API 是基于 Promise 设计，有必要先学习一下 Promise，推荐阅读 [MDN Promise 教程](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)。旧浏览器不支持...
 CSS 是前端领域中进化最慢的一块。由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展，CSS 被远远甩在了后面，逐渐成为大型项目工程化的痛点。也变成了前端走向彻底模块化前必须解决的难题。 CSS 模块化的解决方案有很多，但主要有两类。一类是彻底抛弃 CSS，使用 JS 或 JSON 来写样式。[Radium](https://github.com/FormidableLabs/radium)，[jsxstyle](https://github.com/petehunt/jsxstyle)，[react-style](https://github.com/js-next/react-style) 属于这一类。优点是能给 CSS 提供 JS 同样强大的模块化能力；缺点是不能利用成熟的 CSS 预处理器（或后处理器） Sass/Less/PostCSS，`:hover` 和 `:active` 伪类处理起来复杂。另一类是依旧使用 CSS，但使用 JS 来管理样式依赖，代表是...
给2019前端的5个建议
2019 农历新年即将到来，是时候总结一下团队过去一年的技术沉淀。过去一年我们支撑的数据相关业务突飞猛进，其中两个核心平台级产品代码量分别达到30+万行和80+万行，TS 模块数均超过1000个，协同开发人员增加到20+人。由于历史原因，开发框架同时基于 React 和 Angular，考虑到产品的复杂性、人员的短缺和技术背景各异，我们尝试了各种方法打磨工具体系来提升开发效率，以下是节选的5项主要方法。 ### 一、基于 Redux 的状态管理 从2013年React发布至今已近6个年头，前端框架逐渐形成 React/Vue/Angular 三足鼎立之势。几年前还在争论单向绑定和双向绑定孰优孰劣，现在三大框架已经不约而同选择单向绑定，双向绑定沦为单纯的语法糖。框架间的差异越来越小，加上 Ant-Design/NG-ZORRO/ElementUI 组件库的成熟，选择任一你熟悉的框架都能高效完成业务。 那接下来核心问题是什么？我们认为是**状态管理**。简单应用使用组件内 State 方便快捷，但随着应用复杂度上升，会发现数据散落在不同的组件，组件通信会变得异常复杂。我们先后尝试过原生 Redux、分形 Fractal 的思路、自研类 Mobx 框架、Angular Service，最终认为 Redux 依旧是复杂应用数据流处理最佳选项之一。 庆幸的是除了 React 社区，Vue 社区有类似的...
 > Shared mutable state is the root of all evil（共享的可变状态是万恶之源） > > -- Pete Hunt 有人说 Immutable 可以给 React 应用带来数十倍的提升，也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明，因为同期 React 太火，它的光芒被掩盖了。这些至少说明 Immutable 是很有价值的，下面我们来一探究竟。...
## 组件化开发 - 组件应尽可能 stateless (无状态化 ) - React 拥抱函数式编程思想，纯正的函数式讲究的是绝对的无状态化，React 为了降低学习成本还是允许组件保持 state。 - 能通过计算得来的 state 就不要用 state，每次用时计算一遍即可。 - 在 componentWillReceiveProps 中如果有对这个 state 做同步，那就直接使用 props 即可 - 使用 pure render mixin/decorator...
前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。因此我们项目组在双十一后抽了一周时间，把所有代码中的 jQuery 移除。下面总结一下： ## Why not jQuery ### 1. 模式变革 jQuery 代表着传统的以 DOM 为中心的开发模式，但现在复杂页面开发流行的是以 React 为代表的以**数据/状态**为中心的开发模式 应用复杂后，直接操作 DOM...
精读前后端渲染之争
这是我在[前端精度](https://github.com/dt-fe/weekly/)专栏发的一篇文章。精读的文章是：[Here's why Client-side Rendering Won](https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52) # 1 引言  我为什么要选这篇文章呢？ 十年前，几乎所有网站都使用 ASP、Java、PHP 这类做后端渲染，但后来随着 jQuery、Angular、React、Vue 等 JS 框架的崛起，开始转向了前端渲染。从 2014 年起又开始流行了同构渲染，号称是未来，集成了前后端渲染的优点，但转眼间三年过去了，很多当时壮心满满的框架（[rendr](https://github.com/rendrjs/rendr)、[Lazo](https://github.com/lazojs/lazo)）从先驱变成了先烈。同构到底是不是未来？自己的项目该如何选型？我想不应该只停留在追求热门和拘泥于固定模式上，忽略了前后端渲染之“争”的“核心点”，关注如何提升“用户体验”。 原文分析了前端渲染的优势，并没有进行深入探讨。我想以它为切入口来深入探讨一下。 > 明确三个概念：「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制；「前端渲染」指使用 JS 来渲染页面大部分内容，代表是现在流行的 SPA 单页面应用；「同构渲染」指前后端共用...