2019 前端技术发展回顾

2019 前端技术发展回顾

不知不觉,二零一九悄然离去。《阿里妈妈前端快爆》从最早的内部第一篇文章算起,已经走过两个多年头了。回顾过去,我们梳理了 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 趋于丰富


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
  • 数学计算上,有了全新的 min()、max()、clamp() 比较函数,传统的预处理器有的功能,CSS 也逐渐完善。自定义属性进入普及阶段,在实现动态换肤等场景时大放异彩;
  • CSS Houdini 进展略慢,只有 CSS Properties and Values API 进入 Chrome 78,Animation Worklet 进入 Chrome 71。路漫漫其修远兮,Houdini 未来还有很长的路要走。
  • CSS 框架方面,根据 stateofcss.com统计,Bootstrap 持续走低,但各种基于它的主题和插件依然火热。基于原子类的 Tailwind CSS 满意度达到了 81%,不得不让我们重新思考 CSS 到底该如何编写?


端技术


跨端技术机遇与危机并存

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


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


容器亦有新公司入局:


隐私与安全越来越受重视

浏览器和 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 元年与并发渲染

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


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


Vue 3.0 alpha 的源码公开,新增 Composition API,将于 2020 年 Q1 正式发布。



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:


致谢


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

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



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

编辑于 02-24

文章被以下专栏收录