前端精读周刊

文法用来描述语言的语法规则，所以不仅可以用在编程语言上，也可用在汉语、英语上。 当然这是最固定的语法，真实场景中，* 可能被替换为其他单词，而 table 不但可能有其他名字，还可能是个子表达式。 所有 ::= 号左边的都是非终结符，所以 selectList 是非终结符，解析…

因为工作关系，需要开发支持众多方言的 SQL 编辑器，所以复习了一下编译原理相关知识。 相比编译原理专家，我们只需要了解部分编译原理即可实现 SQL 编辑器，所以这是一篇写给前端的编译原理文章。 词法分析，将 SQL 字符串拆分成包含关键词识别的字符段（Tokens）。 语法分…

本周精读的文章是：surprising-polymorphism-in-react-applications，看看作者是如何解释这个多态性含义的。 读完文章才发现，文章标题改为 Redux 的多态性更妥当，因为整篇文章都在说 Redux，而 Redux 使用场景不局限于 Rea…

JS 源码通过 parser（分析器）转化为 AST（抽象语法树），再经过 interperter（解释器）解析为 bytecode（字节码）。 为了提高运行效率，optimizing compiler（优化编辑器）负责生成 optimized code（优化后的机器码）。 本…

介绍了八种 React 条件渲染方式。 这样对 React 渲染效率有提升。 将组件赋值到变量，就可以在 return 前任意修改它了。 但三元运算符产生嵌套时，理解成本会变得很高。 这个是最常用了，因为代码量最少。 高阶组件，就是返回一个新组件的函数，并且接收一个组件作为参数…

本期精读的文章是：如何在 nodejs 使用环境变量。 介绍了开发与生产环境如何管理环境变量。 这里环境变量指的是数据库密码等重要数据，而不是指普通变量传参。 环境变量历史悠久，在运行第一行 JAVA 代码之前，你就得将环境变量设置好。 可问题是，系统变量并不易用，比如结尾是否…

本期精读的文章是：How to Watch for Files Changes in Node.js，探讨如何监听文件的变化。 如果想使用现成的库，推荐 chokidar 或 node-watch，如果想了解实现原理，请往下阅读。 但你可能会发现这个回调执行有一定延迟，因为 w…

2.0-2.8，2.9 草案. 我发现，许多写了一年以上 Typescript 开发者，对 Typescript 对理解和使用水平都停留在入门阶段。造成这个现象的原因是，Typescript 知识的积累需要 刻意练习，使用 Typescript 的时间与对它的了解程度几乎没有关…

组件化。 拥有强大的开源社区。 拥有大量第三方库解决大部分问题。 拥有大量现成的第三方组件。 拥有浏览器拓展/工具帮助快速 debug。 友好的支持单页应用。 不，这些都不是根本原因，最多算前端框架的营销手段。作者给出的最根本原因是： 解决 UI 与状态同步的难题。 作者假设了…

本周精读内容是 《重新思考 Redux》。 《重新思考 Redux》是 rematch 作者 Shawn McKay 写的一篇干货软文。 dva 之后，有许多基于 redux 的状态管理框架，但大部分都很局限，甚至是倒退。但直到看到了 rematch，总算觉得 redux 社区…

本周精读内容是 《逃离 async/await 地狱》。 终于，async/await 也被吐槽了。Aditya Agarwal 认为 async/await 语法让我们陷入了新的麻烦之中。 其实，笔者也早就觉得哪儿不对劲了，终于有个人把实话说了出来，async/await 可…

本周精读内容是 《插件化思维》。没有参考文章，资料源自 webpack、fis、egg 以及笔者自身开发经验。 用过构建工具的同学都知道，grunt, webpack, gulp 都支持插件开发。后端框架比如 egg koa 都支持插件机制拓展，前端页面也有许多可拓展性的要求。…

本系列分三部曲：《框架实现》 《框架使用》 与 《数据流哲学》，这三篇是我对数据流阶段性的总结，正好补充之前过时的文章。 本篇是收官之作 《前端数据流哲学》。 写这篇文章时，很有压力，如有不妥之处，欢迎指正。 同时，由于这是一篇佛系文章，所以不会得出你应该用 某某 框架的结论，…

本周精读的是 webpack4.0 一些变化，以及 typescript 该怎么做才能最大化利用 webpack4.0 的所有特性。 前段时间尝试了 parcel 作为构建工具，就像农村人享受了都市的生活，就再也回不去了一样，发现无配置真是前端构建工具的大趋势，用起来非常方便快…

本周精读的仓库是 immer。 Immer 是最近火起来的一个项目，由 Mobx 作者 Mweststrate 研发。 了解 mobx 的同学可能会发现，Immer 就是更底层的 Mobx，它将 Mobx 特性发扬光大，得以结合到任何数据流框架，使用起来非常优雅。 Immer …

现在不缺前端基础设施了，我们对项目管理的思路也要有所转变。JS 无所不能，但做项目不能无法无天，约定产生效率，工具链保证约定。 当我们用工具链保证了项目结构的约定，就可以抽象出项目的逻辑结构。

本系列分三部曲：《框架实现》 《框架使用》 与 《数据流哲学》，这三篇是我对数据流阶段性的总结，正好补充之前过时的文章。 本篇是收官之作 《前端数据流哲学》。 写这篇文章时，很有压力，如有不妥之处，欢迎指正。 同时，由于这是一篇佛系文章，所以不会得出你应该用 某某 框架的结论，…

本系列分三部曲：《框架实现》 《框架使用》 与 《跳出框架看哲学》，这三篇是我对数据流阶段性的总结，正好补充之前过时的文章。 本篇是 《框架使用》。 现在我们团队也在重新思考数据流的价值，在业务不断发展，业务场景增多时，一个固定的数据流方案可能难以覆盖所有场景，在所有业务里都用…

我们大部分对内产品，都广泛使用了 dob 管理前端数据流，下面隆重介绍一下。 dob 是利用 proxy 实现的数据依赖追踪工具，利用 dob-react 与 react 结合。 dob 的核心思想大量借鉴了 mobx，但是从实现原理、使用便捷性，以及调试工具都做了大量优化。 …