整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
碼閱讀全文
本報(bào)北京12月16日電改革開(kāi)放是黨和人民大踏步趕上時(shí)代的重要法寶，是決定當(dāng)代中國(guó)命運(yùn)的關(guān)鍵一招，也是決定實(shí)現(xiàn)“兩個(gè)一百年”奮斗目標(biāo)、實(shí)現(xiàn)中華民族偉大復(fù)興中國(guó)夢(mèng)的關(guān)鍵一招。為慶祝改革開(kāi)放40周年，充分展示改革開(kāi)放40年的偉大成就，引導(dǎo)廣大黨員干部群眾更加深刻地認(rèn)識(shí)習(xí)近平新時(shí)代中國(guó)特色社會(huì)主義思想是全面深化改革的根本指導(dǎo)思想，更加深刻地認(rèn)識(shí)改革開(kāi)放是堅(jiān)持和發(fā)展中國(guó)特色社會(huì)主義的必由之路，更加深刻地認(rèn)識(shí)中國(guó)共產(chǎn)黨、中國(guó)人民和中國(guó)特色社會(huì)主義的偉大力量，動(dòng)員全黨全國(guó)各族人民在以習(xí)近平同志為核心的黨中央堅(jiān)強(qiáng)領(lǐng)導(dǎo)下，統(tǒng)一思想、凝聚共識(shí)、堅(jiān)定信心，不忘初心、牢記使命、不懈奮斗，在更高起點(diǎn)、更高層次、更高目標(biāo)上將改革開(kāi)放進(jìn)行到底，中央黨史和文獻(xiàn)研究院編寫(xiě)了《改革開(kāi)放四十年大事記》。
新華社今日播發(fā)《改革開(kāi)放四十年大事記》。(全文見(jiàn)海外網(wǎng)，鏈接為http://news.haiwainet.cn/n/2018/1216/c3543543-31460609.html。)
知道大家都聽(tīng)沒(méi)聽(tīng)說(shuō)過(guò)這句哈：前端的江湖總是不缺話題，且從沒(méi)有消停過(guò)！！！你要說(shuō)沒(méi)聽(tīng)說(shuō)過(guò)，那就對(duì)了，這句話是我剛剛說(shuō)的。但是這句話想必大家都聽(tīng)說(shuō)過(guò)：鐵打的后臺(tái)，流水的前端。
什么意思？就是后臺(tái)技術(shù)幾乎沒(méi)什么變天，前端技術(shù)一天一個(gè)樣，今天用這個(gè)，明天用那個(gè)。變化多端的前端，讓我們前端程序員在爬坑的路上，顛簸流離。
我們今天就一起細(xì)數(shù)一下最近幾天發(fā)生的幾件大事。
一、Airbnb 棄用 RN，回歸原生
就在 6 月 20 日，Airbnb 技術(shù)團(tuán)隊(duì)在 Medium 上宣布，Airbnb 放棄使用 React Native，將回歸到使用基于原生技術(shù)的自有框架開(kāi)發(fā) App。理由如下：
React Native 并不能真正實(shí)現(xiàn)完全的跨平臺(tái)抽象，有時(shí)候仍然需要針對(duì)特定平臺(tái)單獨(dú)編寫(xiě)代碼來(lái)解決問(wèn)題。這就間接要求他們的工程師必須熟悉三個(gè)平臺(tái)才能真正用好 React Native，然而絕大多數(shù)開(kāi)發(fā)者只熟悉一兩個(gè)平臺(tái)，久而久之便引發(fā)了一系列的問(wèn)題。
說(shuō)實(shí)話，相信使用 RN 的同學(xué)都很了解 Airbnb 描述的上述問(wèn)題，確實(shí)由于平臺(tái)和交互的各種原因，RN 給個(gè)別一些組件在 Android 平臺(tái)和 iOS 平臺(tái)提供的使用方式和組件都是有差異的，導(dǎo)致對(duì)于一些界面需要我們單獨(dú)判斷編寫(xiě)。確實(shí)需要開(kāi)發(fā)人員同時(shí)都得了解 Android 和 iOS 的特性與異同，同時(shí)開(kāi)發(fā)者還得了解 RN 技術(shù)。
RN 的坑確實(shí)很多，不知道現(xiàn)在有多少人還在坑里，或者在爬坑和填坑的路上，但是大家也不要?dú)怵H，因?yàn)榻酉聛?lái)這件事，可能會(huì)讓你在 RN 的路上看到一些希望。
二、Facebook 正在重構(gòu) RN
最近 React 的工程經(jīng)理 Sophie Alpert 在其官方博客上宣布，F(xiàn)acebook 要重構(gòu) React Native，讓它加更輕量、更靈活性、更適應(yīng) JavaScript 生態(tài)圈的發(fā)展。據(jù)說(shuō)在過(guò)去的幾年里，他們發(fā)現(xiàn)最初的設(shè)計(jì)原則成為 JavaScript 和原生應(yīng)用之間的橋梁，加大了某些特性的開(kāi)發(fā)難度。比如：
異步橋接意味著不能直接將 JS 邏輯與很多原生 API 集成在一起，因?yàn)檫@些原生 API 是同步的。
另外，批量橋接意味著，RN 應(yīng)用程序調(diào)用原生實(shí)現(xiàn)的函數(shù)會(huì)更加困難。對(duì)于完全使用 RN 構(gòu)建的應(yīng)用程序，這些限制還是可以承受的，但對(duì)于在 RN 與現(xiàn)有應(yīng)用程序代碼之間進(jìn)行復(fù)雜集成的應(yīng)用程序，情況則變得相當(dāng)糟糕。
因此，F(xiàn)acebook 正在對(duì) React Native 進(jìn)行大規(guī)模重構(gòu)，讓架構(gòu)變得更加靈活，并更好地與混合 JavaScript / 原生應(yīng)用開(kāi)發(fā)中的原生基礎(chǔ)設(shè)施集成。
通過(guò)這個(gè)項(xiàng)目，他們將應(yīng)用在過(guò)去 5 年中學(xué)到的知識(shí)，逐步讓架構(gòu)更現(xiàn)代化。他們正在對(duì) React Native 內(nèi)部進(jìn)行大量的重寫(xiě)，當(dāng)然大部分工作都是在底層進(jìn)行的，所以現(xiàn)有的 React Native 應(yīng)用程序幾乎不需要做出更改。
為了使 RN 更輕量化并能更好地適應(yīng)現(xiàn)有的原生應(yīng)用，此次重構(gòu)主要從三個(gè)方面進(jìn)行：
原文地址：https://facebook.github.io/react-native/blog/2018/06/14/state-of-react-native-2018
三、React 被 VUE 反超？
就在 Airbnb 在棄用 RN 之時(shí)，React 的star 數(shù)也被 VUE 反超。就在近幾天，Vue.js 在 GitHub 上的 star 數(shù)量終于超過(guò)了 React.js 的 star 數(shù)量，并在不久之后雙雙破了 10W。
Vue.js 作為一個(gè)中國(guó)大神尤雨溪開(kāi)發(fā)的前端框架，是在 2014 年 2 月份開(kāi)源的，Vue.js 以其比 React 更簡(jiǎn)單，更方便，非常的火爆。在過(guò)去的兩年中，Vue 的增長(zhǎng)速度比其他任何主流的 JavaScript 框架都快，最近趕上了 Angular.js，并逐漸縮小了它與 Angular 和 React 之間的差距。
但是，star 數(shù)并不能代表一切，根據(jù) NPM 軟件包的下載量來(lái)衡量，React 仍然在實(shí)際使用方面占據(jù)主導(dǎo)地位。它即將超過(guò)每月 1000 萬(wàn)的巨大下載量，并且還一直保持著高速的增長(zhǎng)。
四、Flutter 發(fā)布首個(gè)預(yù)覽版
Flutter 是谷歌的移動(dòng) UI 框架，可以快速在 iOS 和 Android 上構(gòu)建高質(zhì)量的原生用戶(hù)界面。 Flutter 可以與現(xiàn)有的代碼一起工作。在全世界，F(xiàn)lutter 正在被越來(lái)越多的開(kāi)發(fā)者和組織使用，并且 Flutter 是完全免費(fèi)、開(kāi)源的。
它也是構(gòu)建未來(lái)的 Google Fuchsia 應(yīng)用的主要方式。
框架特性可以說(shuō)是：
1、快速開(kāi)發(fā)
Flutter 的熱重載幫助你快捷方便的試驗(yàn)、重構(gòu) UI、添加特性和修復(fù) bug。在仿真器、模擬器和 ios、android 硬件上體驗(yàn)亞秒級(jí)的重載，而不會(huì)丟失狀態(tài)。
2、絢麗 UI
通過(guò) Flutter 內(nèi)建的漂亮的質(zhì)感設(shè)計(jì)和 Cupertino（ios-flavor）小工具、豐富的動(dòng)畫(huà) api，平滑的自然滾動(dòng)和平臺(tái)感知，讓用戶(hù)感到滿(mǎn)意。
3、響應(yīng)式框架
通過(guò) Flutter 的現(xiàn)代響應(yīng)式 (Reactive) 框架和豐富的平臺(tái)布局和基礎(chǔ)組件輕松構(gòu)建您的用戶(hù)界面。用強(qiáng)大而靈活的 apis 解決 2D、動(dòng)畫(huà)、手勢(shì)、效果等難題。
4、訪問(wèn)原生功能
通過(guò)平臺(tái) api、第三方 sdk 和原生代碼使您的應(yīng)用變得生動(dòng)起來(lái)。Flutter 讓您可以重用您現(xiàn)有的 java、swift 和 Objc 代碼，并在 iOS 和 Android 上訪問(wèn)原生特性和 SDK。
Flutter 可以說(shuō)是現(xiàn)在越來(lái)越到得重視，也有要火的趨勢(shì)，但是其官方編程語(yǔ)言為 Dart，也是一門(mén)全新的語(yǔ)言。所以說(shuō)，上手成本比較高，對(duì)于移動(dòng)端開(kāi)發(fā)人員，語(yǔ)言以及框架都是全新的，整個(gè)技術(shù)棧的積累也都得從頭開(kāi)始。
Flutter 對(duì)于移動(dòng)開(kāi)發(fā)人員，最誘惑的能力是其完全的跨平臺(tái)特性，不同于 RN 這種一處學(xué)到處寫(xiě)，它是一處寫(xiě)到出跑。
另外 Flutter 不同于市面上的其他解決方案，之前我們最常見(jiàn)的無(wú)非就是兩類(lèi)，一個(gè)就是：使用平臺(tái)支持的 Web 技術(shù)，還一個(gè)就是本地跨平臺(tái)，比如：RN、Weex 等。但是 Flutter 跨平臺(tái)最核心的部分，是它的高性能渲染引擎（Flutter Engine）。Flutter 不使用瀏覽器技術(shù)，也不使用 Native 的原生控件，它使用自己的渲染引擎來(lái)繪制 widget。
對(duì)于 Android 平臺(tái)，F(xiàn)lutter 引擎的 C/C++ 代碼是由 NDK 編譯，在 iOS 平臺(tái)，則是由 LLVM 編譯，兩個(gè)平臺(tái)的 Dart 代碼都是 AOT 編譯為本地代碼，F(xiàn)lutter 應(yīng)用程序使用本機(jī)指令集運(yùn)行。
Flutter 正是是通過(guò)使用相同的渲染器、框架和一組 widget，來(lái)同時(shí)構(gòu)建 iOS 和 Android 應(yīng)用，而無(wú)需維護(hù)兩套獨(dú)立的代碼庫(kù)。
最后
最后，看到這里，看到前端大事記之后，不知道你有什么想法？前端的變化多端，前端技術(shù)的層出不窮，是不是感覺(jué)前端技術(shù)變天比女人變臉還快？但是，其實(shí)也不用焦慮，也不用擔(dān)心，一個(gè)技術(shù)的成熟到完全流行起來(lái)，是需要時(shí)間的，是需要過(guò)程的，這段時(shí)間和過(guò)程，就是你提高自己的最好時(shí)機(jī)。
面對(duì)千變?nèi)f化的前端，我對(duì)大家只有一個(gè)忠告和建議：以不變應(yīng)萬(wàn)變，這個(gè)不變的就是學(xué)習(xí)。
非著名程序員
技術(shù)，職場(chǎng)，產(chǎn)品，思維，行業(yè)觀察
者 | 夏之安然
責(zé)編 | 伍杏玲
出品 | CSDN（ID：CSDNnews）
在2019年的今天，我們能在網(wǎng)上看到炫酷的動(dòng)畫(huà)加載，精彩絕倫的交互效果，以及從 PC 端到移動(dòng)端的響應(yīng)式交互，大家覺(jué)得習(xí)以為常。可你不知道的是，在 20 多年前，網(wǎng)頁(yè)僅僅提供了文檔展示能力，沒(méi)有裝飾的它就像一張黑白報(bào)紙那樣簡(jiǎn)陋。
你是否會(huì)問(wèn)：網(wǎng)頁(yè)是如何變成像今天這樣精美的？
這就歸功于 CSS 了。
CSS 的誕生
20 世紀(jì) 90 年代蒂姆·伯納斯·李（Tim Berners-Lee）發(fā)明萬(wàn)維網(wǎng)，創(chuàng)造 HTML 超文本標(biāo)記語(yǔ)言。此后網(wǎng)頁(yè)樣式便以各種形式存在，不同的瀏覽器有自己的樣式語(yǔ)言來(lái)控制頁(yè)面的效果，因?yàn)樽钤嫉?Web 版本中根本沒(méi)有提供一種網(wǎng)頁(yè)裝飾的方法。
ViolaWWW瀏覽器中的網(wǎng)頁(yè)
在HTML迅猛發(fā)展的 90 年代，不同的瀏覽器根據(jù)自身的 HTML 語(yǔ)法結(jié)構(gòu)來(lái)支持實(shí)現(xiàn)不同的樣式語(yǔ)言。在最初的 HTML 版本中，由于只含有很少的顯示屬性，所以用戶(hù)可以自己決定顯示頁(yè)面的方式。
但隨著 HTML 的發(fā)展，HTML 增加了很多功能，代碼也越來(lái)越臃腫，HTML 就變得越來(lái)越亂。網(wǎng)頁(yè)也失去了語(yǔ)義化，維護(hù)代碼很艱難，因?yàn)榇a很混亂：
于是裝飾網(wǎng)頁(yè)樣式的 CSS（層疊樣式表，Cascading Style Sheets）誕生了。
語(yǔ)法的確定
早期 CSS 的語(yǔ)法設(shè)計(jì)看上去類(lèi)似后來(lái)的 JavaScript 語(yǔ)法（當(dāng)時(shí) JavaScript 尚未存在），實(shí)際上，CSS 的這個(gè)寫(xiě)法借鑒了 X11 Window System 中的 X 資源。
早期CSS語(yǔ)法提案
在第一稿建議中，有一個(gè)影響百分比的說(shuō)明符：h1.font.size = 20pt 80%。
行尾百分比的作用是想要通過(guò)這個(gè)百分比來(lái)控制該值的權(quán)重，如字號(hào)設(shè)置為 20pt，權(quán)重設(shè)置 80%，最終將字號(hào)值與權(quán)重組合在一起，值為 16pt。
這個(gè)寫(xiě)法的設(shè)計(jì)初衷是想將開(kāi)發(fā)者與用戶(hù)的要求與偏好組合到一起，CSS 之父哈肯·維姆·萊（H?kon Wium Lie） 提議 CSS 應(yīng)該有一把滑尺，這樣開(kāi)發(fā)者與用戶(hù)都有完全的控制力。當(dāng)時(shí)這個(gè)提議引起了大家的討論，但由于這個(gè)辦法對(duì)如 font-size 等屬性管用，但對(duì)另一些屬性如 font-family 就不好用了，所以最終這個(gè)百分比的用法還是被舍棄了。
至于 CSS 的語(yǔ)法由 font.size 改成font-size，是怎么設(shè)計(jì)來(lái)的呢？首先，連字符讀起來(lái)更像書(shū)面英語(yǔ)，簡(jiǎn)單易懂。其次，DSSSL（Document Style Semanticsand Specification Language，文檔樣式語(yǔ)義和規(guī)范語(yǔ)言） 和 DSSSL-Lite就使用這種連字符屬性名。于是，CSS 也從中借鑒了連字符。
經(jīng)過(guò)多年的努力 ，到1996年底，最終CSS語(yǔ)法變成了現(xiàn)在這個(gè)樣子：
當(dāng)前CSS語(yǔ)法
CSS 歷史大事記
1994 年，H?kon Wium Lie 最初提出了 CSS 的想法，聯(lián)合當(dāng)時(shí)正在設(shè)計(jì) Argo 的瀏覽器的Bert Bos，他們決定一起合作設(shè)計(jì) CSS，于是創(chuàng)造了 CSS 的最初版本。
緊接著，他們?cè)谥ゼ痈绲腗osaic and the Web 大會(huì)上第一次正式提出了 CSS 的建議，1995 年他們一起再次展示了這個(gè)建議。當(dāng)時(shí) W3C 剛剛建立，W3C 對(duì) CSS 很感興趣，為此專(zhuān)門(mén)組織了一次討論會(huì)。
1996 年 12 月，W3C 推出了 CSS 規(guī)范的第一版本。
1997 年，W3C 頒布 CSS1.0 版本 ，CSS1.0 較全面地規(guī)定了文檔的顯示樣式，可分為選擇器、樣式屬性、偽類(lèi) / 對(duì)象幾個(gè)部分。
這一規(guī)范立即引起了各方的關(guān)注，隨即微軟和網(wǎng)景公司的瀏覽器均能支持 CSS1.0，這為 CSS 的發(fā)展奠定了基礎(chǔ)。
1998 年，W3C 發(fā)布了 CSS 的第二個(gè)版本，目前的主流瀏覽器都采用這標(biāo)準(zhǔn)。
CSS2 的規(guī)范是基于 CSS1 設(shè)計(jì)的，包含了 CSS1 所有的功能，并擴(kuò)充和改進(jìn)了很多更加強(qiáng)大的屬性。包括選擇器、位置模型、布局、表格樣式、媒體類(lèi)型、偽類(lèi)、光標(biāo)樣式。
2005 年 12 月，W3C 開(kāi)始 CSS3 標(biāo)準(zhǔn)的制定，到目前為止該標(biāo)準(zhǔn)還沒(méi)有最終定稿。
IE6，前端工程師的痛
2001 年，微軟發(fā)布了 IE6，在 Windows 普及的年代 IE6 瀏覽器占據(jù)了高達(dá) 80% 的市場(chǎng)，這對(duì) CSS 的標(biāo)準(zhǔn)推廣起著重要作用。
因?yàn)?IE6 的用戶(hù)量大，開(kāi)發(fā)者們就選擇了以大眾為準(zhǔn)，許多開(kāi)發(fā)者竭盡全力把 IE6 下的頁(yè)面做好，甚至一些開(kāi)發(fā)者的口號(hào)很響“Only IE6”。
這樣導(dǎo)致許多頁(yè)面根本不是 W3C 標(biāo)準(zhǔn)，因?yàn)?IE6 有一套自己的解析渲染體系。最終 IE6 的龐大市場(chǎng)最終成為了 Web 開(kāi)發(fā)者的一大絆腳石。
作為當(dāng)時(shí)的開(kāi)發(fā)者，必須掌握的一系列瀏覽器 Hacks，網(wǎng)頁(yè)開(kāi)發(fā)和面試必備。印象中當(dāng)時(shí)經(jīng)典的 Bug是“江湖匪號(hào)：一只豬的故事”。
IE6 Hacks和解決方案（圖片來(lái)自飄零霧雨 CSS 參考手冊(cè)）
如今我們?cè)诋?dāng)下高級(jí)瀏覽器中實(shí)現(xiàn)一個(gè)圓角按鈕是很簡(jiǎn)單的事，但在當(dāng)時(shí)不支持 CSS3 屬性的瀏覽器（IE6/7/8）中還得通過(guò)圖片背景切圖方法實(shí)現(xiàn)，如果按鈕的長(zhǎng)度不確定的話，還得實(shí)現(xiàn)按鈕自適應(yīng)長(zhǎng)度，這也是考驗(yàn)前端工程師的 CSS 使用技巧和磨練我們的耐性。
那些年我們前端工程師的收藏夾不僅收藏 CSS Hacks，還會(huì)收藏各種布局攻略，如圣杯布局，也叫雙飛翼布局，就是實(shí)現(xiàn)一個(gè)兩側(cè)寬度固定，中間寬度自適應(yīng)的三欄布局，實(shí)現(xiàn)這些布局需要各種技巧和攻略。當(dāng)時(shí)大牛們總結(jié)出的一些要點(diǎn)：
兩側(cè)寬度固定，中間寬度自適應(yīng)
中間部分在 DOM 結(jié)構(gòu)上優(yōu)先，以便先行渲染
允許三列中的任意一列成為最高列
只需要使用一個(gè)額外的 <div> 標(biāo)簽
就這樣，我們前端開(kāi)發(fā)者練就了一身黑技能，直到微軟發(fā)布 IE6 死亡倒計(jì)時(shí)。最先開(kāi)始放棄 IE6 支持的是一線互聯(lián)網(wǎng)大公司，如淘寶等，直到 2014 后，大家逐漸放棄了對(duì) IE6 的支持，這簡(jiǎn)直是對(duì)前端工程師最大的福音。
隨著 IE6 退出市場(chǎng)，2014年，微軟發(fā)布 IE10 版本。
2016年，Chrome 瀏覽器占據(jù)全球?yàn)g覽器排行榜首位。隨著 Hybrid、React Native 等技術(shù)的興起，互聯(lián)網(wǎng)進(jìn)入移動(dòng)端時(shí)代，前端工程師開(kāi)始新的挑戰(zhàn)，忙碌于適配各種端。
我回首自己做前端開(kāi)發(fā)的這十年來(lái)，記得印象最深刻是，電腦中安裝的瀏覽器軟件是最多的，IE家族、遨游、QQ、360、Chrome 瀏覽器等。
我一般寫(xiě)完一個(gè)項(xiàng)目后，自己先在所有瀏覽器跑一遍 CSS 的兼容性測(cè)試，直到所有瀏覽器沒(méi)有大問(wèn)題才能進(jìn)行項(xiàng)目提測(cè)發(fā)布。也正是有這樣的嚴(yán)謹(jǐn)?shù)墓ぷ鲬B(tài)度，使我在工作中也在不斷進(jìn)步。有時(shí)候，回過(guò)頭想想有過(guò)這樣的經(jīng)歷也是一種技術(shù)財(cái)富的積累。
結(jié)語(yǔ)
CSS 經(jīng)歷了 20 多年的發(fā)展，從 PC 端到移動(dòng)端，在前端工程化不斷進(jìn)步的今天，隨著CSS的規(guī)范不斷的完善升級(jí)，前端業(yè)務(wù)復(fù)雜度越來(lái)越高，帶來(lái)的工程也越來(lái)越龐大，我們前端開(kāi)發(fā)者對(duì) CSS 工程化的方案也不斷地探索。
現(xiàn)在一大批 CSS 預(yù)處理和后處理工具涌現(xiàn)，比較流行的 CSS 預(yù)處理器有 Sass、Less，CSS 后處理器諸如 clean-css、AutoPrefixer、Rework、PostCSS 等。
那么關(guān)于 CSS 將來(lái)發(fā)展會(huì)怎么樣？未來(lái) CSS 還能不能勝任自己的角色，會(huì)不會(huì)有新的模型代替它？對(duì)于這些問(wèn)題，H?kon Wium Lie 認(rèn)為 CSS 目前還能夠勝任，還沒(méi)有看到能夠取代它的新模型出現(xiàn)，新的技術(shù)肯定會(huì)層出不窮，但應(yīng)該是對(duì) CSS 的擴(kuò)展而不是代替。他還表示，我們今天寫(xiě)的 CSS 代碼，500 年后的計(jì)算機(jī)仍然能看懂。
參考資料：
CSS 模塊和標(biāo)準(zhǔn)化進(jìn)程
作者簡(jiǎn)介：夏之安然，目前就職于國(guó)內(nèi)領(lǐng)先旅游行業(yè)互聯(lián)網(wǎng)公司，十年前端開(kāi)發(fā)老兵。對(duì)中后臺(tái)管理系統(tǒng)有深入研究，在團(tuán)隊(duì)主導(dǎo)多個(gè)管理系統(tǒng)架構(gòu)設(shè)計(jì)，并且研發(fā)多款效率工具。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
