知道大家都听没听说过这句哈：前端的江湖总是不缺话题，且从没有消停过！！！你要说没听说过，那就对了，这句话是我刚刚说的。但是这句话想必大家都听说过：铁打的后台，流水的前端。

什么意思？就是后台技术几乎没什么变天，前端技术一天一个样，今天用这个，明天用那个。变化多端的前端，让我们前端程序员在爬坑的路上，颠簸流离。

我们今天就一起细数一下最近几天发生的几件大事。

一、Airbnb 弃用 RN，回归原生

就在 6 月 20 日，Airbnb 技术团队在 Medium 上宣布，Airbnb 放弃使用 React Native，将回归到使用基于原生技术的自有框架开发 App。理由如下：

React Native 并不能真正实现完全的跨平台抽象，有时候仍然需要针对特定平台单独编写代码来解决问题。这就间接要求他们的工程师必须熟悉三个平台才能真正用好 React Native，然而绝大多数开发者只熟悉一两个平台，久而久之便引发了一系列的问题。

说实话，相信使用 RN 的同学都很了解 Airbnb 描述的上述问题，确实由于平台和交互的各种原因，RN 给个别一些组件在 Android 平台和 iOS 平台提供的使用方式和组件都是有差异的，导致对于一些界面需要我们单独判断编写。确实需要开发人员同时都得了解 Android 和 iOS 的特性与异同，同时开发者还得了解 RN 技术。

RN 的坑确实很多，不知道现在有多少人还在坑里，或者在爬坑和填坑的路上，但是大家也不要气馁，因为接下来这件事，可能会让你在 RN 的路上看到一些希望。

二、Facebook 正在重构 RN

最近 React 的工程经理 Sophie Alpert 在其官方博客上宣布，Facebook 要重构 React Native，让它加更轻量、更灵活性、更适应 JavaScript 生态圈的发展。据说在过去的几年里，他们发现最初的设计原则成为 JavaScript 和原生应用之间的桥梁，加大了某些特性的开发难度。比如：

异步桥接意味着不能直接将 JS 逻辑与很多原生 API 集成在一起，因为这些原生 API 是同步的。

另外，批量桥接意味着，RN 应用程序调用原生实现的函数会更加困难。对于完全使用 RN 构建的应用程序，这些限制还是可以承受的，但对于在 RN 与现有应用程序代码之间进行复杂集成的应用程序，情况则变得相当糟糕。

因此，Facebook 正在对 React Native 进行大规模重构，让架构变得更加灵活，并更好地与混合 JavaScript / 原生应用开发中的原生基础设施集成。

通过这个项目，他们将应用在过去 5 年中学到的知识，逐步让架构更现代化。他们正在对 React Native 内部进行大量的重写，当然大部分工作都是在底层进行的，所以现有的 React Native 应用程序几乎不需要做出更改。

为了使 RN 更轻量化并能更好地适应现有的原生应用，此次重构主要从三个方面进行：

• 首先，改变线程模型。UI 更新不再需要在三个不同的线程上执行，而是可以在任意线程上同步调用 JavaScript 进行优先更新，同时将低优先级工作推出主线程，以便保持对 UI 的响应
• 其次，将异步渲染功能引入 React Native 中，允许执行多个渲染并简化异步数据处理
• 最后，简化桥接，让它更快、更轻量。原生和 JavaScript 之间的直接调用效率更高，并且可以更轻松地构建调试工具，如跨语言堆栈跟踪

原文地址：https://facebook.github.io/react-native/blog/2018/06/14/state-of-react-native-2018

三、React 被 VUE 反超？

就在 Airbnb 在弃用 RN 之时，React 的star 数也被 VUE 反超。就在近几天，Vue.js 在 GitHub 上的 star 数量终于超过了 React.js 的 star 数量，并在不久之后双双破了 10W。

Vue.js 作为一个中国大神尤雨溪开发的前端框架，是在 2014 年 2 月份开源的，Vue.js 以其比 React 更简单，更方便，非常的火爆。在过去的两年中，Vue 的增长速度比其他任何主流的 JavaScript 框架都快，最近赶上了 Angular.js，并逐渐缩小了它与 Angular 和 React 之间的差距。

但是，star 数并不能代表一切，根据 NPM 软件包的下载量来衡量，React 仍然在实际使用方面占据主导地位。它即将超过每月 1000 万的巨大下载量，并且还一直保持着高速的增长。

四、Flutter 发布首个预览版

Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作。在全世界，Flutter 正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的。

它也是构建未来的 Google Fuchsia 应用的主要方式。

框架特性可以说是：

1、快速开发

Flutter 的热重载帮助你快捷方便的试验、重构 UI、添加特性和修复 bug。在仿真器、模拟器和 ios、android 硬件上体验亚秒级的重载，而不会丢失状态。

2、绚丽 UI

通过 Flutter 内建的漂亮的质感设计和 Cupertino（ios-flavor）小工具、丰富的动画 api，平滑的自然滚动和平台感知，让用户感到满意。

3、响应式框架

通过 Flutter 的现代响应式 (Reactive) 框架和丰富的平台布局和基础组件轻松构建您的用户界面。用强大而灵活的 apis 解决 2D、动画、手势、效果等难题。

4、访问原生功能

通过平台 api、第三方 sdk 和原生代码使您的应用变得生动起来。Flutter 让您可以重用您现有的 java、swift 和 Objc 代码，并在 iOS 和 Android 上访问原生特性和 SDK。

Flutter 可以说是现在越来越到得重视，也有要火的趋势，但是其官方编程语言为 Dart，也是一门全新的语言。所以说，上手成本比较高，对于移动端开发人员，语言以及框架都是全新的，整个技术栈的积累也都得从头开始。

Flutter 对于移动开发人员，最诱惑的能力是其完全的跨平台特性，不同于 RN 这种一处学到处写，它是一处写到出跑。

另外 Flutter 不同于市面上的其他解决方案，之前我们最常见的无非就是两类，一个就是：使用平台支持的 Web 技术，还一个就是本地跨平台，比如：RN、Weex 等。但是 Flutter 跨平台最核心的部分，是它的高性能渲染引擎（Flutter Engine）。Flutter 不使用浏览器技术，也不使用 Native 的原生控件，它使用自己的渲染引擎来绘制 widget。

对于 Android 平台，Flutter 引擎的 C/C++ 代码是由 NDK 编译，在 iOS 平台，则是由 LLVM 编译，两个平台的 Dart 代码都是 AOT 编译为本地代码，Flutter 应用程序使用本机指令集运行。

Flutter 正是是通过使用相同的渲染器、框架和一组 widget，来同时构建 iOS 和 Android 应用，而无需维护两套独立的代码库。

最后

最后，看到这里，看到前端大事记之后，不知道你有什么想法？前端的变化多端，前端技术的层出不穷，是不是感觉前端技术变天比女人变脸还快？但是，其实也不用焦虑，也不用担心，一个技术的成熟到完全流行起来，是需要时间的，是需要过程的，这段时间和过程，就是你提高自己的最好时机。

面对千变万化的前端，我对大家只有一个忠告和建议：以不变应万变，这个不变的就是学习。

非著名程序员

技术，职场，产品，思维，行业观察

者 | 夏之安然

责编 | 伍杏玲

出品 | CSDN（ID：CSDNnews）

在2019年的今天，我们能在网上看到炫酷的动画加载，精彩绝伦的交互效果，以及从 PC 端到移动端的响应式交互，大家觉得习以为常。可你不知道的是，在 20 多年前，网页仅仅提供了文档展示能力，没有装饰的它就像一张黑白报纸那样简陋。

你是否会问：网页是如何变成像今天这样精美的？

这就归功于 CSS 了。

CSS 的诞生

20 世纪 90 年代蒂姆·伯纳斯·李（Tim Berners-Lee）发明万维网，创造 HTML 超文本标记语言。此后网页样式便以各种形式存在，不同的浏览器有自己的样式语言来控制页面的效果，因为最原始的 Web 版本中根本没有提供一种网页装饰的方法。

ViolaWWW浏览器中的网页

在HTML迅猛发展的 90 年代，不同的浏览器根据自身的 HTML 语法结构来支持实现不同的样式语言。在最初的 HTML 版本中，由于只含有很少的显示属性，所以用户可以自己决定显示页面的方式。

但随着 HTML 的发展，HTML 增加了很多功能，代码也越来越臃肿，HTML 就变得越来越乱。网页也失去了语义化，维护代码很艰难，因为代码很混乱：

于是装饰网页样式的 CSS（层叠样式表，Cascading Style Sheets）诞生了。

语法的确定

早期 CSS 的语法设计看上去类似后来的 JavaScript 语法（当时 JavaScript 尚未存在），实际上，CSS 的这个写法借鉴了 X11 Window System 中的 X 资源。

早期CSS语法提案

在第一稿建议中，有一个影响百分比的说明符：h1.font.size = 20pt 80%。

行尾百分比的作用是想要通过这个百分比来控制该值的权重，如字号设置为 20pt，权重设置 80%，最终将字号值与权重组合在一起，值为 16pt。

这个写法的设计初衷是想将开发者与用户的要求与偏好组合到一起，CSS 之父哈肯·维姆·莱（Håkon Wium Lie） 提议 CSS 应该有一把滑尺，这样开发者与用户都有完全的控制力。当时这个提议引起了大家的讨论，但由于这个办法对如 font-size 等属性管用，但对另一些属性如 font-family 就不好用了，所以最终这个百分比的用法还是被舍弃了。

至于 CSS 的语法由 font.size 改成font-size，是怎么设计来的呢？首先，连字符读起来更像书面英语，简单易懂。其次，DSSSL（Document Style Semanticsand Specification Language，文档样式语义和规范语言） 和 DSSSL-Lite就使用这种连字符属性名。于是，CSS 也从中借鉴了连字符。

经过多年的努力 ，到1996年底，最终CSS语法变成了现在这个样子：

当前CSS语法

CSS 历史大事记

1994 年，Håkon Wium Lie 最初提出了 CSS 的想法，联合当时正在设计 Argo 的浏览器的Bert Bos，他们决定一起合作设计 CSS，于是创造了 CSS 的最初版本。

紧接着，他们在芝加哥的Mosaic and the Web 大会上第一次正式提出了 CSS 的建议，1995 年他们一起再次展示了这个建议。当时 W3C 刚刚建立，W3C 对 CSS 很感兴趣，为此专门组织了一次讨论会。

1996 年 12 月，W3C 推出了 CSS 规范的第一版本。

1997 年，W3C 颁布 CSS1.0 版本 ，CSS1.0 较全面地规定了文档的显示样式，可分为选择器、样式属性、伪类 / 对象几个部分。

这一规范立即引起了各方的关注，随即微软和网景公司的浏览器均能支持 CSS1.0，这为 CSS 的发展奠定了基础。

1998 年，W3C 发布了 CSS 的第二个版本，目前的主流浏览器都采用这标准。

CSS2 的规范是基于 CSS1 设计的，包含了 CSS1 所有的功能，并扩充和改进了很多更加强大的属性。包括选择器、位置模型、布局、表格样式、媒体类型、伪类、光标样式。

2005 年 12 月，W3C 开始 CSS3 标准的制定，到目前为止该标准还没有最终定稿。

IE6，前端工程师的痛

2001 年，微软发布了 IE6，在 Windows 普及的年代 IE6 浏览器占据了高达 80% 的市场，这对 CSS 的标准推广起着重要作用。

因为 IE6 的用户量大，开发者们就选择了以大众为准，许多开发者竭尽全力把 IE6 下的页面做好，甚至一些开发者的口号很响“Only IE6”。

这样导致许多页面根本不是 W3C 标准，因为 IE6 有一套自己的解析渲染体系。最终 IE6 的庞大市场最终成为了 Web 开发者的一大绊脚石。

作为当时的开发者，必须掌握的一系列浏览器 Hacks，网页开发和面试必备。印象中当时经典的 Bug是“江湖匪号：一只猪的故事”。

IE6 Hacks和解决方案（图片来自飘零雾雨 CSS 参考手册）

如今我们在当下高级浏览器中实现一个圆角按钮是很简单的事，但在当时不支持 CSS3 属性的浏览器（IE6/7/8）中还得通过图片背景切图方法实现，如果按钮的长度不确定的话，还得实现按钮自适应长度，这也是考验前端工程师的 CSS 使用技巧和磨练我们的耐性。

那些年我们前端工程师的收藏夹不仅收藏 CSS Hacks，还会收藏各种布局攻略，如圣杯布局，也叫双飞翼布局，就是实现一个两侧宽度固定，中间宽度自适应的三栏布局，实现这些布局需要各种技巧和攻略。当时大牛们总结出的一些要点：

两侧宽度固定，中间宽度自适应

中间部分在 DOM 结构上优先，以便先行渲染

允许三列中的任意一列成为最高列

只需要使用一个额外的 <div> 标签

就这样，我们前端开发者练就了一身黑技能，直到微软发布 IE6 死亡倒计时。最先开始放弃 IE6 支持的是一线互联网大公司，如淘宝等，直到 2014 后，大家逐渐放弃了对 IE6 的支持，这简直是对前端工程师最大的福音。

随着 IE6 退出市场，2014年，微软发布 IE10 版本。

2016年，Chrome 浏览器占据全球浏览器排行榜首位。随着 Hybrid、React Native 等技术的兴起，互联网进入移动端时代，前端工程师开始新的挑战，忙碌于适配各种端。

我回首自己做前端开发的这十年来，记得印象最深刻是，电脑中安装的浏览器软件是最多的，IE家族、遨游、QQ、360、Chrome 浏览器等。

我一般写完一个项目后，自己先在所有浏览器跑一遍 CSS 的兼容性测试，直到所有浏览器没有大问题才能进行项目提测发布。也正是有这样的严谨的工作态度，使我在工作中也在不断进步。有时候，回过头想想有过这样的经历也是一种技术财富的积累。

结语

CSS 经历了 20 多年的发展，从 PC 端到移动端，在前端工程化不断进步的今天，随着CSS的规范不断的完善升级，前端业务复杂度越来越高，带来的工程也越来越庞大，我们前端开发者对 CSS 工程化的方案也不断地探索。

现在一大批 CSS 预处理和后处理工具涌现，比较流行的 CSS 预处理器有 Sass、Less，CSS 后处理器诸如 clean-css、AutoPrefixer、Rework、PostCSS 等。

那么关于 CSS 将来发展会怎么样？未来 CSS 还能不能胜任自己的角色，会不会有新的模型代替它？对于这些问题，Håkon Wium Lie 认为 CSS 目前还能够胜任，还没有看到能够取代它的新模型出现，新的技术肯定会层出不穷，但应该是对 CSS 的扩展而不是代替。他还表示，我们今天写的 CSS 代码，500 年后的计算机仍然能看懂。

参考资料：

CSS 发展历史及新特性

CSS 模块和标准化进程

A Look Back at the History of CSS

CSS: It was twenty years ago today — an interview with Håkon Wium Lie

作者简介：夏之安然，目前就职于国内领先旅游行业互联网公司，十年前端开发老兵。对中后台管理系统有深入研究，在团队主导多个管理系统架构设计，并且研发多款效率工具。