DING~ 你的页面又产生了N个bug，想必每个前端er对于前端监控都不陌生，不论是第三方的监控平台，亦或是自己公司研发的监控系统，包括转转目前使用的sentry，都是为了能够对我们的生产环境的系统进行及时有效的追踪，产生问题能够第一时间响应和解决。所以本文将对前端监控的原理做一些分析。

如今，随着市场竞争日益激烈，“转化难”也变成大家特别关注的问题，其实需要提升用户转化的场景很多，每个场景都有影响用户心理的关键因素，那么设计师如何做，才能助力用户转化呢？下面结合省钱会员项目，聊聊如何抓住用户心理，从而提升用户转化。

本文主要介绍如何通过对Mach-O文件的解析以及反汇编的应用实现OC&Swift的无用代码检测，重点介绍Swift的检测方案。本文作为Swift Mach-O的应用篇，建议先阅读《从Mach-O角度谈谈Swift和OC的存储差异》和《Swift Hook新思路–虚函数表》了解相关概念和结构。相关代码已经开源：WBBlades，如果感觉工具或方案对您有帮助不妨帮忙点个star。

近期很多大型APP都在做支持Swift与Objective-C的混编开发的工作，58集团旗下的各个APP也在积极探索使用Swift语言开发。因此可以预见，在未来的几年里集团内各个iOS项目中Swift代码的占比会越来越高。因此我们需要考虑Swift代码激增后所带来的一些问题。如何检测混编项目中无用代码是我们面临的诸多问题之一。

本文主要讲两部分内容，一是介绍大致的render函数执行的主流程，包括挂载和渲染jsx节点，对内部调用的函数进行讲解；另一个是细化render阶段做的一些重要内容，包括Fiber的内部计算和任务调度的相关内容。

目前58的iOS团队维护了包含58同城、58同镇、赶集网、招才猫、安居客、新英才、车商通等在内的十几款App，为了降低维护成本，团队将一些基础功能进行了组件化改造，提供了大概20个通用的自研基础组件。不同的App对基础组件的使用情况各不相同，同时为了解决部分垂直业务在跨App维护时多App底层差异的问题，团队在基础组件的基础上又增加了中间件层，使依赖关系的复杂度进一步增加。上层逻辑的Swift改造需要底层基础库的支持，加上全面推进Swift的改造，将涉及大量的业务改造，各层模块之间的协同也是不小的挑战。

1. vue文件是如何转换成DOM节点，并渲染到浏览器上的？
2. 数据更新时，整个的更新流程又是怎么样的？

都说JSX会被babel编译成React.createElement方法，那它具体是怎么实现的呢？在React17版本中，又做了哪些改进呢？带着这些问题，我们去React的源码世界里去一探究竟！

什么是SFC？一个SFC是如何变成浏览器上可执行代码的？点进来，5分钟搞懂。

说到Diff，我们可能首先想到的就是Vue或者React中的一种更新算法，目的就是为了找出差异更新DOM树。而算法本质上是一类问题的最优解，Diff本身是差分、不同的意思，还有诸如字符串或者JSON的Diff，Linux系统中经典的文件Diff。这里我们要探讨的其实就是树的Diff,它的发展历程其实是经过了很长的一段时间。

代码逻辑复用 是我们开发人员减少代码重复度，进行代码优化的一个重要因素，上期我们的同学分享了关于 Vue 框架的相关逻辑复用的方法及原理，本期我们一起来了解下 React 框架中的逻辑复用。

多种特征提取器和优化方案哪种方案效果最优呢？

身为前端工程师，势必听过这个问题：“Vue 与 React 有什么区别？” 的确，Vue和React都是目前最流行、生态最好的框架，整体的功能也非常相似。

对此，我们组织了一次 diff 主题分享，采用奇葩说的模式，针对同一功能讨论下 vue 与react 的异同。本月主题将围绕以下角度带大家更深刻的认识vue和react框架: 组件及逻辑复用，diff算法，编译构建及运行，渲染。

vue与react都推崇组件式的开发理念，那么我们第一篇从组件开始，话不多说，直接进入本篇的正题：vue 组件及逻辑复用的源码解析。

瀑布流布局算是一种比较流行的布局，参差不齐的多列结构，不仅能节省空间，还能在视觉展示上错落有致不拘一格。

随着今年政府对互联网的监管，在不少时候一个紧急需求只给1～2天整改上线，而且整改过程中需求也不是很明确，相关部门也不会给一个详细的需求文档让我们去开发，大家都是“猜测”需求的内容。在这种场景下，如果App具备动态更新的能力，会给公司减少很大的成本。面对需求不确定和紧急修改页面部分元素的能力，给予了动态化最合适的使用场景，而不只是Fix几个BUG。

Fair在58集团内的部分Flutter App中已经落地，终使集成Fair后的App获得了动态化的能力。以下文章内容主要以安居拍房App为例，介绍集成Fair的架构、业务场景所需的能力预埋，以及如何进行原生和动态化代码的维护，持续发挥Flutter的性能。

本文的初衷是想让更多的同学知道并了解vue模版编译，所以文中主要以阶段流程为主，不会涉及过多的底层代码逻辑，请耐心观看。

Vue项目中使用的element-ui，由于弹窗里表单项太多，一些表单项会在可视范围之外。校验表单时，如果未通过校验的表单项在可视范围外，用户感知不强。所以需要在表单校验未通过时滚动到第一个未通过校验的表单项那里，翻看element-ui文档，发现未提供该API。

起初想到的方案有两种：

1. 在业务中封装函数，表单校验失败时调用该函数，根据表单校验失败的className，获取第一个校验失败的dom元素，滚动到指定的dom元素位置。但是如果页面存在多个form表单需要做区分，会增加我们的一个工作量，并且不够优雅。
2. 修改element-ui的源码，增加一个API。但是在平台编译时如果重新执行npm install时代码会被覆盖，并且团队协作时也会遇到这个问题，团队开发中有诸多不便。

后面经过一顿搜索后，发现一个“黑魔法”的解决方案。并且该方案上手简单、便携、且一劳永逸。