知道大家都聽沒聽說過這句哈：前端的江湖總是不缺話題，且從沒有消停過！！！你要說沒聽說過，那就對了，這句話是我剛剛說的。但是這句話想必大家都聽說過：鐵打的后臺，流水的前端。

什么意思？就是后臺技術幾乎沒什么變天，前端技術一天一個樣，今天用這個，明天用那個。變化多端的前端，讓我們前端程序員在爬坑的路上，顛簸流離。

我們今天就一起細數一下最近幾天發生的幾件大事。

一、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

作者簡介：夏之安然，目前就職于國內領先旅游行業互聯網公司，十年前端開發老兵。對中后臺管理系統有深入研究，在團隊主導多個管理系統架構設計，并且研發多款效率工具。