2019前端技术发展回顾

KennedyZora 发布于8月前

不知不觉,二零一九悄然离去。《阿里妈妈前端快爆》从最早的内部第一篇文章算起,已经走过两个多年头了。回顾过去,我们梳理了 2019 年值得了解的技术发展脉络,与诸位细品。

标准进行时

ECMAScript 2019 如期到来

ECMAScript 2019 年包含这些更新:

  • Array.prototype.flat、Array.prototype.flatMap;
  • String.prototype.trimStart、String.prototype.trimEnd;
  • Object.fromEntries;
  • Symbol.prototype.description;
  • try catch 语句允许不填入参数了;
  • Array.prototype.sort 将用Timsort 算法 保证排序结果的稳定性;
  • Function.prototype.toString() 行为修改;
  • 修复 JSON 中 Unicode 边界问题的 Well Formed JSONSubsume JSON

ECMAScript 2020 年可以期待这些更新。

WebAPI 趋于丰富

  • WebAuthn 进入 W3C 推荐规范,WebAuthn 允许用户通过生物识别、个人移动设备等多种方式来进行身份认证;
  • 三个 WebAssembly 标准进入 W3C 推荐阶段:WebAssembly 核心规范、WebAssembly Web API 、 WebAssembly JavaScript 接口
  • W3C 发布 CSS Animation Worklet API 工作草案,提供了在专用线程中运行动画的 API;
  • Web Monetization API (小额支付 API)在过去一年有了声音;
  • 画中画提案 Picture-in-Picture API 已经在三个主流浏览器(Chrome 71、Firefox 69 和Safari TP 95)中得到实验性支持;
  • WebXR Device API 在Chrome 79 中进入试验性支持,为智能手机和头戴式显示器创建沉浸式体验;
  • ResizeObserver API 在Safari TP 97 和 Chrome 65+ 中被支持;
  • TC39 提出了Binary AST 提案,旨在压缩 JavaScript 冷启动过程中的编译与字节码生成时间;
  • 基于 ES modules 的HTML Imports 重回标准,Chrome 80 也已经正式支持;
  • 网页数学公式标记语言MathML 与 Chrome「重归于好」,Igalia 公司正在全力为 Chrome 实现新的 MathML, MathML 与浏览器的爱恨情仇 在庚子之年能否了结,我们拭目以待。

CSS 飞速发展

  • 过去一年里,很高兴几乎再也听不到 IE6,取而代之的是 Android。Flexbox 成为无线页面布局首选,CSS Grid 也逐渐普及,Firefox 71 也率先支持了Subgrid;
  • 随着 macOS/iOS 带起的深色模式浪潮,主流浏览器也也实现了 CSS 媒体查询属性 prefers-color-scheme ,Web 与操作系统的无缝体验更加顺滑;
  • backdrop-filter 属性在 Chrome 76 中迎来无前缀版本,Web 页面可以更加方便的实现背景滤镜;
  • CSS Scroll Snap 规范趋于稳定,主流浏览器也已经全部实现无前缀版本。CSS 也可以实现简单的轮播切换了;
  • 文字与字体上,Variable Fonts(可变字体)技术快速发展,为字体创作带来了无限遐想的空间。line-clamp 多行溢出控制属性 正式进入规范 ,Edge 和 Firefox 也都支持了历史遗留的前缀属性: -webkit-line-clamp ;
  • 数学计算上,有了全新的 ef="https://drafts.csswg.org/css-values-4/#comp-func">min()、max()、clamp() 比较函数,传统的预处理器有的功能,CSS 也逐渐完善。自定义属性进入普及阶段,在实现动态换肤等场景时大放异彩;
  • CSS Houdini 进展略慢,只有 CSS Properties and Values API 进入 Chrome 78,Animation Worklet 进入 Chrome 71。路漫漫其修远兮,Houdini 未来还有很长的路要走。
  • CSS 框架方面,根据 http:// stateofcss.com 的统计,Bootstrap 持续走低,但各种基于它的主题和插件依然火热。基于原子类的 Tailwind CSS 满意度达到了 81%,不得不让我们重新思考 CSS 到底该如何编写?

端技术

跨端技术机遇与危机并存

2019 年发展得较快的跨端框架有:

  • Flutter 于年初发布了正式版 1.0,并快速迭代到了 1.12;
  • 基于 Web Component 的跨端框架 Ionic年初发布了 4.0,并随后支持了Ionic React;

而国内编译到各大小程序也成为跨端框架的一个刚需:

  • W3C 发布了小程序标准化白皮书;
  • 百度搜索全面接入百度小程序,将致搜索权重提升;
  • 年末,腾讯开源跨端框架 hippy;
  • 过去两年崭露头角的 wepytaro 开发依然活跃,而 mpVue 已有半年以上没有维护。

容器亦有新公司入局:

隐私与安全越来越受重视

浏览器和 Node.js 端有如下安全更新:

  • 不安全的 TLS 1.0 和 1.1 默认被禁用(Safari TP 91、Google Chrome 72+、Firefox Nightly);
  • Firefox 67 开始 , <a target="_blank"> 、 <area target="_blank"> 自动附加 rel="noopener" ,以防止新页面恶意篡改当前页面;
  • Chrome 69 开始支持 Content-Security-Policy 的 report-to 指令,此指令支持了合并多个违规上报请求;
  • Chrome 76 起实现 Fetch Metadata 请求头提案 ,允许请求时带上上下文,使服务器端可以进行安全相关的校验;
  • Node.js 12.7.0+ 支持了 --policy-integrity=sri ,可以让不符合 Subresource Integrity 规范的请求在服务端执行任何代码前就被拦截。

对于前端指纹技术和跨站追踪,也有更多的浏览器限制:

性能优化被浏览器更多考量

Chrome 提出 展现锁定提案 ,使得开发者可以跳过部分渲染,子规范在后续更新陆续得到实验性支持:

多个浏览器团队也在过去一年更新了相关的性能优化故事:

JavaScript 与框架

Hooks 元年与并发渲染

Hooks 抛弃了传统的生命周期模型,保证了更细粒度和更简洁的逻辑抽象:

并发渲染特性在 React Roadmap 的前列,此模式还没有在稳定版本支持:

Node.js 稳步迭代,又有新人入场

Node.js 一年一更新,一年一淘汰:

但仍有不满足于 Node.js 和 V8 的人,他们都在尝试提供更受控的脚本运行时环境:

  • Node.js 作者更新了 deno 动向,但原定于去年夏发布的 1.0 版本 依然没有到来
  • FFmpeg 作者发布了 JavaScript 引擎:QuickJS,专注于提供嵌入式环境的运行时;
  • Facebook 开源了 JavaScript 引擎:Hermes,专注于提高 React Native 应用的性能;

此外,不能遗忘 Make JavaScript Great Again 的 TypeScript:

  • TypeScript迭代到了 3.7 版本,支持大量 TC39 stage 3 的特性如 Top-Level Await、Nullish Coalescing 等
  • 2019 年是 TypeScript渗透率突飞猛进的一年

致谢

感谢一直以来默默坚持的四位轮值编辑:承虎、一丝 、池冰 、墨尘,以及特邀编辑:紫云飞;感谢各位加班之余挤出时间来编写、审稿、P 图。

更加需要感谢的是各位粉丝朋友,是你们一直以来的关注与点赞给了我们最大的动力。新的一年里,我们将继续秉承:原创、求精、求严的精神,努力做的更好!

鲜衣怒马归来时,愿君依旧少年心……

本期编辑:承虎、一丝 & 审阅:一丝

查看原文: 2019 前端技术发展回顾

  • crazyswan
  • goldenduck
  • ticklishgorilla
  • redswan