SegmentFault 最新的文章

为什么前端不能没有监控系统？
SegmentFault 思否技术周刊 -- 不走寻常路的 CSS
“银行家算法”大揭秘！在前端表格中利用自定义公式实现“四舍六入五成双”
它来了！Flutter3.0发布全解析

Posted: 11 May 2022 07:53 PM PDT

大家好，我是杨成功。

提到监控系统，大部分同学首先想到的是后端监控。很明显，比如检测服务器性能，数据库性能，API 的访问流量，以及各种服务的运行情况等等，都与后端息息相关。而前端更多承担的是 UI 展现的角色，主要关注页面怎么排版设计，好像没什么需要监测的地方，因此一直以来都没有涉及到监控的概念。

于是呢大家就一致认为：只要后端稳定可控，应用就是稳定可控的，可实际情况真的是这样吗？

近年来，前端发展日益迅猛，得益于 JavaScript 的持续进化和浏览器功能的不断增强，前端能做到的事情越来越多，相应的前端应用的复杂度也越来越高。以前我们压根不会遇到的问题，现在蹭蹭蹭的一股脑都冒出来了。

举个例子，小明是个前端程序员，有一天用户反馈某页面某按钮点了没有反应。小明立刻找到那个按钮，轻轻一点，咦？正常的呀。然后小明又用了几个不同的账号测试，依然是正常的。这下可把小明难倒了。

怎么办？我相信全天下的前端程序员们遇到奇怪问题的反应是一样的。小明这样告诉用户：可能是浏览器缓存问题，不行强制刷新一下，或者退出登录试试？ 用户按照小明的建议操作一番，果然奏效！于是给小明发来了一连串的"感谢 🙏"。小明尴尬一笑，连忙回复"小意思"。

过了两天，又有一个用户反馈了同样的问题。小明又祭出了上面的万能解决大法，依然奏效。可是问题真的解决了吗？没有啊！然而小明尝试过很多遍都无法复现异常，可能原因有很多，比如：

数据问题，可能取不到某个属性
前端问题，JS 代码执行异常
接口问题，可能接口无响应，或没有返回预期的值

然而正常情况下是没有问题的，小明多次测试也都正常，一定是在某种特定场景下才会出现这个问题，但是我们无法判断，捕捉不到。

像这类 Bug 潜伏在我们的系统中，仿佛地雷一样，指不定什么时候就会爆。最尴尬的是即便它爆了我们也很难发现，这就导致我们的"排雷行动"困难重重。

某个阳光明媚的下午，小明坐在马桶上思考人生。突然脑海中一道灵光闪过，小明想到："如果在用户触发异常的那一刻，系统能自动获取到异常的数据并保存起来，然后在后台的某个地方能看到这些数据，我不就可以立刻找到错误原因了吗？"

小明一拍大腿，对呀！我怎么没有早点想到呢？这样的话，只要发生异常我们就能自动捕获到异常数据，如果再遇到线上报错，我们不需要用户反馈，自己就可以发现，而且能马上定位错误原因，这不是一举两得？

我相信许多前端前辈们也曾经被上述的问题所困扰，然后也像小明一样，慢慢的有了这个思路："将报错时的异常数据存下来供后续排查"。在这个思路不断实践的过程中，逐渐演变成了今天的前端监控。

当然了，今天的前端监控并不仅仅是监控异常数据，任何有利于产品分析的数据都可以加入监控。所以我认为前端监控，就是指采集用户使用系统过程中产生的关键数据，存储到数据库，后续可以查找和分析，这样的整套实现就被称为前端监控系统。

前端监控具体能解决什么问题？

上面用一个例子推导出前端监控出现的背景，粗略的说了下它如何追踪线上报错问题，大家应该初步了解了前端监控的意义。现在我们把目光聚焦在项目上，再详细探究一下它具体能解决哪些问题。

异常报错问题

首先就是异常报错的问题。就如例子中的场景一样，线上发生异常，有时候我们难以复现，甚至如果没有用户反馈，我们都不知道有这个问题，这样就给用户传递了一种我们的产品很不稳定的感觉。因此前端监控是线上产品稳定和异常及时反馈的非常关键的保障。

当然了，除了前端的异常，我们同样可以捕获 接口异常。有的时候前端程序员们自嘲自己是"背锅侠"，产品，测试，用户，遇到问题首先找前端，不管是不是前端的问题，前端先顶，再花时间定位错误。有的时候领导脾气不好，上来先劈头盖脸一顿骂，卑微前端也不敢说话，因为啥问题得排查后才清楚，结果排查完后是接口的问题，白挨了一顿骂，心里就非常不爽。

但是如果有了前端监控，我们就能马上拿到异常发生时的错误信息，页面，地址，参数等，什么问题一查便知。下一次遇到线上事故，前端就可以从容不迫客观公正的说这是哪一方的问题。如果遇到甩锅行为，前端也能勇敢说不，毕竟我证据在手，岂容你说吼就吼？

性能检测问题

追踪异常是前端监控最实用的地方，但不光如此，性能监控 也是非常关键的部分。

当下的前端工程体量很大，如果代码质量不高，或者项目架构设计不合理，很容易遇到性能问题。性能问题比如首屏加载时间，页面是否卡顿，白屏，资源重复请求等，可以通过数据采集，比如计算渲染时间，请求接口数量，请求资源总量等，对某个页面进行监控，及时发现性能问题。

那么除了可以"解决问题"，前端监控还有哪些价值？

运营反馈工具

其实前端监控除了可以帮助程序员不断优化和完善应用，对产品和运营同学有同样不可或缺的作用。具体来说就是通过"埋点监控"来收集用户的行为数据，则可以对线上产品的使用情况作出统计分析，比如整体的 PV/UV，某个功能的访问量，访问时段，点击率等等数据。这些数据可以帮助产品和运营了解实际情况，进而改进产品功能。

这些行为数据的收集，可以非常精准的描绘出某个功能或者某个人的实际使用情况。当然采集的数据量也要比异常数据大的多。相比来说，异常监控是只有发生异常才会收集数据，而行为数据则是，只要用户使用我们的产品，与产品发生交互，理论上这些数据都要收集起来。

当然监控是多方面的，收集哪些数据视情况而定。总之你想了解产品的任何情况，都可以通过设计采集规则然后收集数据来实现，这方面是非常灵活的，并不仅仅限于大家熟知的那几个指标。

为什么要选择自研？

前端监控发展到现在，必然会有成熟的第三方平台。目前国内最常用的有三个：

sentry
webfunny
fundebug

首先 sentry 和 fundebug 这两个平台是付费的，而且你的数据越多费用越高，相当于是数据托管平台。webfunny 虽然可以私有化部署，但是它的功能是固定的，没法改代码，这就是它的缺点：不够灵活，无法定制功能。

所以目前虽然市面上已经有成熟的监控系统，但依然有很多团队选择自研。一是数据可以保存在自己的服务器上，不用另外花钱；二是灵活性强，可以自定义功能，比如你可以在触发异常时，接入自己的钉钉或企业微信消息推送，这就需要你的监控系统灵活性很高。

还有我们上面说的，自定义采集规则。我认为这个是最重要的原因。不同规则采集到的数据不一样，因此第三方标准的采集规则可能并不符合你公司的需求。比如有的公司需要获取设备标识作为唯一 ID，有的公司却需要用户标识。这是由业务决定的，每个公司都不一样。

我司前端组就是自研前端监控平台。优势就是可以自定义自己的采集规则，设计自己的数据库存储字段，数据都保存在自己的平台，灵活性和可靠性都非常高，能满足自己的多样性需求。

自研前端监控的技术栈

先上结论，我司的前端监控是前端组自己搞的，所以技术栈是 React + Node.js + MongoDB。

这是一个比较常规的技术方案，前端自己搞嘛，所以技术栈都以 JS 为主。同时这也是前端比较能琢磨明白的东西，算是一个标准方案吧。

其中，Node.js 部分我们使用 express 框架写接口，接口总体分两大类，就是 写入 和 查询统计，作用呢就是前端采集到数据之后，要通过调用接口存储。之后在监控面版上，也要通过接口将数据查询展现出来。

接口的背后就是 MongoDB 数据库，作用就是存储我们采集到的数据。为什么选择 MongoDB 呢？最主要的原因就是它的写入性能非常高，写入速度非常快。上面我们说，监控系统在采集行为数据的时候，写入非常频繁，那么对写入性能的要求就非常高，反观查询反而要求不那么高。

这里也有比较难啃的点，就是采集到大量的数据之后，我们需要各个维度的统计分析。比如：

某个时间段用户的访问次数和访问时长排行
某个时间段页面的访问频率和停留时间排行
某个时间段接口报错的次数以及占比统计

这些比较复杂的查询统计，主要用到 MongoDB 的聚合查询。前端写个基本的分组统计还行，这类复杂查询我们就捉襟见肘了。怎么办呢？我们用很长一段时间啃掉了 MongoDB 聚合查询的所有文档，按照需求一个一个找函数，看哪个能实现，几乎把所有聚合函数都翻了一遍。

接口做完，最后用 React 实现一个管理后台，将数据以图表，表格的形式展示出来，就可以实时看到线上产品的使用情况了。

当然还有一步，就是写一个对接钉钉或企业微信的通知接口，在触发异常的时候发起通知，让我们能及时知道异常情况。我们的通知是这样：

这个信息就能比较全面的看出来是哪里出了问题，如果看更详细的错误再去异常面板去找：

总之首先对接口异常全面监控，确认数据没问题之后我们再前端去排查，效率提高了，锅也少背了，这不是两全其美吗？

最后我们自研的这个小系统在产品上线后发挥了很大的作用，受到了老板的表扬，这样让我们受到了鼓舞，继续完善它～

`CSS 特性`

《2022 年最受瞩目的新特性 CSS @layer 到底是个啥？》

步入 2022，CSS 的新特性层出不穷，而最近在 CSS 圈最受瞩目的新特性，非 CSS @layer 莫属。
本文将用最简洁的语言，快速让读者们搞懂，到底什么是 CSS @layer 新规范。

《革命性创新，动画杀手锏 @scroll-timeline》

在 CSS 规范 Scroll-linked Animations 中，推出了一个划时代的功能。也就是 -- The @scroll-timeline at-rule，直译过来就是滚动时间线。
本文将带大家一探究竟，从入门到学会使用 CSS @scroll-timeline。

《说一说 CSS 中的变量》

大部分的编程语言，在语言出现的那一刻就支持变量。但是，CSS 一开始就不支持原生变量。所以大家开始选择 CSS，LESS 等兼容的 CSS 扩展语言。不过庆幸的是 CSS 目前也已经支持变量，下文就来聊一聊 CSS 中的变量。

《CSS 中的简写到底有多少坑？以后不敢了...》

简写（语法糖）可能给我们的编码带来了很多便利，但凡事都有好有坏，简写也会带来一些问题，所以今天就来讨论一下 CSS 中的简写的 "好" 和 "坏"。

《CSS 自定义属性指北》

自定义属性（有时候也被称作CSS变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由var() 函数来获取值（比如： color: var(--main-color);）

《CSS 也能自动补全字符串？》

很多时候都会碰到字符串补全的需求，典型的例子就时间或者日期中的补零操作，例如
2021-12-31 2022-03-03
通常的做法是
if (num < 10) {   num = '0' + num }
后来，JS 中出现了原生的补全方法padStart()和padEnd()，如下
'3'.padStart(2, '0') // 结果是 '03' '12'.padStart(2, '0') // 结果是 '12'
其实呢，在 CSS 中也是可以实现这样的效果的，并且有多种方案，下面一起看看吧，相信能有不一样的体会
引用

《CSS 实现树状结构目录》

最近在项目中碰到了一个这样的树状结构目录，效果如下

如果用到了 Ant Design 这样的框架，那可以直接用现成的组件。如果没有用到这样的框架呢？其实纯 CSS 也是可以搞定的，下面看看如何实现的，还有很多你可能不知道 CSS 小技巧哦~

`神奇的 CSS`

《神奇的 CSS，让文字智能适配背景颜色》

文本在黑色底色上表现为白色，在白色底色上表现为黑色。看似很复杂的一个效果，但是其实在 CSS 中非常好实现，今天就介绍这样一个小技巧，在 CSS 中，利用混合模式 mix-blend-mode: difference，让文字智能适配背景颜色。

《Amazing！巧用 CSS 视差实现酷炫交互动效》

本文将介绍利用 CSS 实现滚动视差效果的一个小技巧，并且，利用这个技巧来制作一些有意思的交互特效。
这里，会运用上这样一种纯 CSS 的视差技巧：
1、使用 transform: translate3d 实现滚动视差
2、借助 CSS 视差实现酷炫交互动效
3、CSS 滚动视差动画 2
4、结合 CSS @scroll-timeline，利用 CSS 控制滚动与动画

《巧用 background-clip 实现超强的文字动效》

background-clip: text 之前也提到多很多次。其核心就在于以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
简单而言，就是运用了 background-clip: text 的元素，其背景内容只保留文字所在区域部分，配合透明文字 color: transparent，就能够利用文字透出背景。
利用 background-clip: text，能够得到很多非常有意思的文字效果。

《让交互更加生动！有意思的鼠标跟随 3D 旋转动效》

简单分析一下，这个交互效果主要有两个核心：
借助了 CSS 3D 的能力
元素的旋转需要和鼠标的移动相结合
本文将讲述如何使用纯 CSS 实现类似的交互效果，以及借助 JavaScript 绑定鼠标事件，快速还原上述效果。

《CSS 阴影进阶，实现更加的立体的阴影效果！》

CSS 阴影的存在，让物体看上去更加有型立体。然而，在最简单的阴影使用之上，我们可以实现更多有意思且更加立体的阴影效果。
本文将带大家看看如何使用 CSS 实现几类比普通阴影更加立体的阴影效果。

`CSS 的艺术`

《CSS重复线性渐变之画格子》

《离谱的 CSS！从表盘刻度到艺术剪纸》

bg1

《使用 CSS 绘制带有动画效果的 React Logo 》

《还在使用定时器吗？CSS 也能实现电子时钟》

Kapture 2022-03-04 at 16.28.36

`CSS 面试`

《前端面试资料整理【css篇】》

简单选择器：id选择器、类选择器、标签选择器、
组合选择器：后代选择器（空格）、子选择器（>）、兄弟选择器（+）、通用选择器（~）
伪类（:hover）
伪元素（::before, ::firt-child，::not()）
属性选择器
ps. 兄弟选择器（+）与通用选择器（~）： "+"指"自己"相邻兄弟，"~"会应用所有兄弟
引用

《一道有意思的 CSS 面试题，FizzBuzz ~》

FizzBuzz 是一道很有意思的题目。我们来看看题目：
如果遇见了 3 的倍数要说 Fizz，5 的倍数就说 Buzz，如果既是 3 的倍数又是 5 的倍数就说 FizzBuzz。
如果是在一些编程语言中，这是一道比较初级的题目，当然，稍微转换一下，我们就可以把它转换成一道有关 CSS 选择器的题目。

PS：大家想看哪些方面的技术内容，可以在评论区留言喔 ~

如有问题可以添加小姐姐微信~

“银行家算法”大揭秘！在前端表格中利用自定义公式实现“四舍六入五成双”

Posted: 10 May 2022 10:40 PM PDT

银行的盈利模式是什么?三个字：信息差!从储户手中收拢资金，然后放贷出去，而所谓的"利润"就是这其中的利息差额。
在我国，人民银行规定每个季度月末的20号为银行结息日，每一年四次结息，因此每年需要非常频繁的计算付给储户的利息。在计算利息时，小数点如何处理就变得很重要，并成为决定利润多少的关键细节。

（图片来自于网络）

通常，我们都知道在保留小数点的时候，常常会用到四舍五入。小于5的数字被舍去，大于等于5的数字进位后舍去，由于所有位上的数字都是自然计算出来的，按照概率计算可知，被舍入的数字均匀分布在0到9之间。
我们不妨以10笔存款利息计算作为模型，以银行家的身份来思考这个算法：

四舍，舍弃的值包含： 0.000、0.001、0.002、0.003、0.004，对银行而言舍弃的内容就不再需要支付，所以舍弃的部分我们可以理解为"赚到了"。

五入，进位的内容包括：0.005、0.006、0.007、0.008、0.009，对银行而言进位内容会造成亏损，对应亏损的金额则是： 0.005、0.004、0.003、0.002、0.001。
因为舍弃和进位的数字是在0到9之间均匀分布的，所以对于银行家来说，每10笔存款的利息因采用四舍五入而获得的盈利是：
0.000 + 0.001 + 0.002 + 0.003 + 0.004 - 0.005 - 0.004 - 0.003 - 0.002 - 0.001 = -0.005
总体来讲每10笔的利息，通过四舍五入计算就会导致0.005元的损失，即每笔利息计算损失0.0005元。假设某家银行有5千万储户，每年仅仅因为四舍五入的误差而损失的金额是：

public class Client {        public static void main(String[] args) {             //银行账户数量，5千万             int accountNum =5000*10000;             //按照人行的规定，每个季度末月的20日为银行结息日             double cost = 0.0005 * accountNum * 4 ;             System.out.println("银行每年损失的金额：" + cost);        }   }

计算结果是："银行每年损失的金额：100000.0"。你可能难以相信，四舍五入小小一个动作，就导致了每年损失10万。但在真实环境中，实际损失可能事更多。
这个情况是由美国的私人银行家发现，为了解决这一情况提出了一个修正算法：
"舍去位的数值小于5时，直接舍去；
舍去位的数值大于等于6时，进位后舍去；
当舍去位的数值等于5时，分两种情况：5后面还有其他数字（非0），则进位后舍去；若5后面是0（即5是最后一个数字），则根据5前一位数的奇偶性来判断是否需要进位，奇数进位，偶数舍去。"
以上这么多，汇成一句话就是：四舍六入五考虑，五后非零就进一，五后为零看奇偶，五前为偶应舍去，五前为奇要进一。
我们举例说明，取2位精度：
10.5551= 10.56
10.555= 10.56
10.545= 10.54

（图片来自于网络）

简单来说，有了"四舍六入五成双"这样的银行家算法，就可以更为科学精确地处理数据。

在实际应用中，我们使用银行家算法最多的情况就是在大数据量的表格计算中，但是在表格计算中需要通过一系列的内置公式进行复合。对于普通用户来说无论是理解还是最终使用，都很繁琐且复杂。
为了更加方便地解决这个问题，我们可以通过自定义函数来完成这样的需求，这样用户只需要记住自定义的函数名即可使用具有这样一个规则的函数。
接下来我们一起看看，如何在前端表格中快速地实现"四舍六入五成双"。
我们首先需要定义函数的名称，以及里面的参数数目。因为我们想要实现的是，传递两个参数，"1"是需要被约修的数值，"2"是保留小数点后面的位数，根据值和位数进行约修。

var FdaFunction = function() {              this.name = "FDA";              this.minArgs = 1;              this.maxArgs = 2;          };

接下来就是为了方便用户理解和使用，我们需要对这个自定义函数添加一些描述：

 FdaFunction.prototype.description = function() {              return {                  description: "对value进行四舍六入五留双修约，保留小数点后指定位数",                  parameters: [{                      name: "value",                      repeatable: false,                      optional: false                  }, {                      name: "places",                      repeatable: false,                      optional: false                  }]              }          }

最后到了关键步骤，也就是函数的逻辑运行都放在evaluate中，我们会对传入的值做一些判断，并且会利用正则表达式做一些匹配。要实现"五成双"，那么我们还要对需要约修的最后一个位值做判断，来决定是否进位。具体可以参考附件完整的demo。

         FdaFunction.prototype.evaluate = function(context, num, places) {              if (!isNaN(parseInt(num)) && !isNaN(parseInt(places))) {                 console.log("evaluate")                  num = numGeneral(num);                 if (!isNumber(num)) {                     return num;                 }                 var d = places || 0;                 var m = Math.pow(10, d);                 var n = +(d ? num * m : num).toFixed(8); // Avoid rounding errors                 var i = Math.floor(n),                     f = n - i;                 var e = 1e-8; // Allow for rounding errors in f                 var r = f > 0.5 - e && f < 0.5 + e ? (i % 2 == 0 ? i : i + 1) : Math.round(n);                 var result = d ? r / m : r;                  if (places > 0) {                     var s_x = result.toString();                     var pos_decimal = s_x.indexOf(".");                     if (pos_decimal < 0) {                         pos_decimal = s_x.length;                         s_x += ".";                     }                     while (s_x.length <= pos_decimal + places) {                         s_x += "0";                     }                     return s_x;                 } else {                     return result;                 }             }else{                  return "#VALUE!";             }                      }

体验下载完整demo：
https://gcdn.grapecity.com.cn...

大家如果想了解更多与自定义公式相关内容，可以查看链接：
https://demo.grapecity.com.cn...

扩展阅读

SpreadJS 纯前端表格控件

它来了！Flutter3.0发布全解析

Posted: 11 May 2022 05:45 PM PDT

本文转载自公众号：群英传
作者：徐宜生

我们在手机、桌面和网络上进行多平台UI开发的历程达到了顶峰。

我们很高兴地宣布，作为谷歌I/O主题演讲的一部分，我们今天推出了Flutter 3。Flutter 3完成了我们从以移动为中心到多平台框架的路线图，提供了对macOS和Linux桌面应用的支持，以及对Firebase集成的改进，新的生产力和性能特性，并支持Apple Silicon。

The journey to Flutter 3

我们创办Flutter的初衷是试图彻底改变应用开发：将网络的迭代开发模式与硬件加速图形渲染和像素级控制相结合，而这在以前是游戏的专利。自Flutter 1.0测试版以来的四年里，我们逐渐在这些基础上发展，增加了新的框架功能和新的小工具，与底层平台更深入的整合，丰富的包库和许多性能和工具的改进。

随着产品的成熟，越来越多的人开始用它构建应用程序。今天，有超过50万个应用程序是用Flutter建立的。来自data.ai等研究公司的分析，以及公众的评价，表明Flutter被许多细分领域的客户所使用：从微信等社交应用到Betterment和Nubank等金融和银行应用；从SHEIN和trip.com等商务应用到Fastic和Tabcorp等生活方式应用；从My BMW等伴侣应用到巴西政府等公共机构。

今天，有超过50万个应用程序使用Flutter构建。

开发人员告诉我们，Flutter有助于在更多的平台上更快地构建漂亮的应用程序。在我们最新的用户研究中。

91% 的开发者认为 Flutter 缩短了构建和发布应用程序的时间。
85%的开发者认为Flutter使他们的应用程序比以前更漂亮。
85%的人认为Flutter使他们的应用比以前能在更多的平台上发布。

在Sonos最近的一篇博客文章中，讨论了他们改造后的设置体验，他们强调了其中的第二个问题。

"毫不夸张地说，[Flutter]释放了一种与我们团队之前交付的任何东西都不同的 "高级 "程度。对我们的设计师来说，最重要的是，可以轻松地构建新的UI，这意味着我们的团队花在对规格说 "不 "的时间更少，花在迭代上的时间更多。如果这听起来值得，我们会推荐你试一试Flutter--我们很高兴这样做。"

Introducing Flutter 3

今天，我们推出Flutter 3，这是我们填补Flutter所支持的平台的旅程的高潮。有了Flutter 3，您可以从一个代码库中为六个平台构建更好的体验，为开发者提供无与伦比的生产力，并使初创企业从第一天起就能将新的想法带到完整的可触达市场。

在以前的版本中，我们用网络和Windows支持来补充iOS和Android，现在Flutter 3增加了对macOS和Linux应用的稳定支持。增加平台支持需要的不仅仅是渲染像素：它包括新的输入和交互模型、编译和构建支持、可访问性和国际化，以及特定平台的整合。我们的目标是让你能够灵活地充分利用底层操作系统，同时尽可能多地分享你选择的用户界面和逻辑。

在macOS上，我们已经支持英特尔和苹果Silicon，并提供通用二进制支持，使应用程序能够打包可执行文件，在两种架构上原生运行。在Linux上，Canonical和谷歌已经合作为开发提供了一个高度集成的、最好的选择。

Superlist是Flutter如何实现美丽的桌面体验的一个很好的例子，它今天推出了测试版。Superlist提供了超强的协作，通过一个新的应用程序，将列表、任务和自由形式的内容结合在一起，成为待办事项和个人计划的新方式。Superlist团队选择Flutter是因为它能够提供快速、高度品牌化的桌面体验，我们认为他们迄今为止的进展证明了为什么它被证明是一个伟大的选择。

Flutter 3还对许多基本要素进行了改进，提高了性能，支持Material You，并更新了生产力。

除了上述工作外，在这个版本中，Flutter可以完全原生在苹果芯片上进行开发。虽然Flutter自发布以来一直与M1驱动的苹果设备兼容，但Flutter现在充分利用了Dart对苹果芯片的支持，在M1驱动的设备上实现了更快的编译，并支持macOS应用程序的通用二进制文件。

在这个版本中，我们为Material Design 3所做的工作基本完成，使开发者能够利用一个适应性强、跨平台的设计系统，提供动态的色彩方案和更新的视觉组件。

我们详细的技术博文阐述了这些以及Flutter 3的许多其他新功能。

Flutter由Dart驱动，这是一种用于多平台开发的高生产力、可移植的语言。我们在这个周期中对Dart的工作包括减少模板和帮助可读性的新语言功能，实验性的RISC-V支持，升级的linter和新的文档。关于Dart 2.17中所有新改进的进一步细节，请查看专用博客：https://medium.com/dartlang。

Firebase and Flutter

当然，建立一个应用程序不仅仅是一个UI框架。应用程序发布者需要一套全面的工具来帮助你构建、发布和运营你的应用程序，包括认证、数据存储、云功能和设备测试等服务。有多种服务支持Flutter，包括Sentry、AppWrite和AWS Amplify。

谷歌提供的应用服务是Firebase，SlashData的开发者基准研究显示，62%的Flutter开发者在其应用中使用Firebase。因此，在过去的几个版本中，我们一直在与Firebase合作，以扩大和更好地将Flutter作为一个一流的集成。这包括将Flutter的Firebase插件提高到1.0，增加更好的文档和工具，以及像FlutterFire UI这样的新部件，为开发者提供可重用的auth和profile界面的UI。

今天，我们宣布Flutter/Firebase的整合将成为Firebase产品中完全支持的核心部分。我们将源代码和文档转移到Firebase的主仓库和网站中，你可以指望我们与Android和iOS同步发展Firebase对Flutter的支持。

此外，我们还进行了重大改进，以支持使用Crashlytics的Flutter应用程序，这是Firebase流行的实时崩溃报告服务。随着Flutter Crashlytics插件的更新，你可以实时跟踪致命的错误，为你提供与其他iOS和Android开发者相同的功能集。这包括重要的警报和指标，如 "无崩溃用户"，帮助你保持你的应用程序的稳定性。
Crashlytics分析管道已经升级，以改善Flutter崩溃的聚类，使其更快地分流、优先处理和修复问题。最后，我们简化了插件的设置过程，因此只需要几个步骤就可以使用Crashlytics，并从你的Dart代码中开始运行。

Flutter Casual Games Toolkit

对于大多数开发者来说，Flutter是一个应用程序框架。但是，围绕休闲游戏开发的社区也在不断壮大，利用Flutter提供的硬件加速图形支持和Flame等开源游戏引擎。我们希望让休闲游戏开发者更容易上手，所以在今天的I/O大会上，我们宣布了休闲游戏工具包，它提供了一个模板和最佳实践的入门套件，以及广告和云服务的良好体验。

虽然Flutter并不是为高强度的3D动作游戏而设计的，但即使是一些游戏也转向Flutter的非游戏UI，包括像PUBG Mobile这样拥有数亿用户的流行游戏。而对于I/O，我们想看看我们能把技术推到什么程度，所以我们创造了一个有趣的弹球游戏，它由Firebase和Flutter的网络支持提供支持。I/O弹球游戏提供了一个围绕谷歌最喜欢的四个吉祥物设计的定制桌子。Flutter的Dash、Firebase的Sparky、Android机器人和Chrome的恐龙，并让你与他人竞争高分。我们认为这是一种展示Flutter多功能性的有趣方式。

e-techbytes

Thursday, May 12, 2022