前端技術週刊 2019-01-21：跨端開發的三條路線

阿里媽媽前端快爆發表於2019-01-24
前端跨端

2019-01-21

前端快爆

  • 微軟 Edge 開發者意圖為 Chrome 實現 HTML Modules，該規範用來替代之前的 HTML Imports。其優點是基於 ES Modules，可以避免全域性物件汙染、指令碼解析阻塞等問題。?

點評：舉報，有人在「秀恩愛」！

<!- 早期的 HTML Imports ->
<link rel="import" href="myfile.html">

<!- HTML Modules ->
<!- module.html ->
<div id="blogPost">
    <p>Content...</p>
</div>
<script type="module">
    let blogPost = import.meta.document.querySelector("#blogPost")
    export {blogPost}
</script>
複製程式碼
<!- blog.html ->
<script type="module">
    import {blogPost} from "module.html"
    document.body.appendChild(blogPost)
</script>
複製程式碼
  • Firefox 66 中，CSS grid-template-columns/rows 屬性現在支援動畫了。?

點評：Firefox 是第一個支援該特性的瀏覽器，其他瀏覽器應該會很快跟進，Demo

前端技術週刊 2019-01-21：跨端開發的三條路線

  • Chrome Canary 73 的開發者工具實現了新的懸停工具，可以快速預覽當前選中元素的一些 CSS 屬性和對比度。?

點評：如果可以直接提示當前文字所實際使用的字型就更好啦。

前端技術週刊 2019-01-21：跨端開發的三條路線

優秀 Demo

前端技術週刊 2019-01-21：跨端開發的三條路線

前端技術週刊 2019-01-21：跨端開發的三條路線

專題：跨端開發的三條路線

2018 年跨端開發對於選擇恐懼症來說不是很友好。本刊秉持著一貫抵抗熵增的思路，為大家梳理了跨端開發的三條路線。

路線1: 重量級 App

重量級 App 的開發方式可以控制容器層。這條線路始整體發展思路是：在更動態化的同時，提升效能。參考：?

  1. 原生開發：問題在於需要開發多端，開發效率和動態化能力弱
  2. WebView 能力擴充套件：WebView 用於渲染，能力擴充套件通過橋接層，主要問題是效能差
  • 包括 PhoneGap、Cordova、Ionic、Xamarin 等
  1. 跨平臺橋接：橋接層同時負責渲染和能力擴充套件

Facebook 開源，這條思路的開創者，主要問題是應用體積大、啟動慢、雙端介面不統一、穩定性差

阿里開源，在 Vue 技術棧之上的類似方案

騰訊閉源，針對 React Native 的主要問題進行了優化

美團閉源，從介紹來看主要優化在於佈局演算法方面，附贈 PPT 一枚

  1. Flutter：通過編譯，取消橋接層，減少通訊消耗

Google 開源，利用 Dart 語言編譯到原生

路線2: 輕量級 App

如果將對容器的控制權給出，掛載到更大平臺如 Android 系統或超級應用，則是 18 年時興的小程式或快應用了。

  • 應用級別跨端

微信小程式、支付寶小程式、百度小程式 、淘寶輕應用等

Google 主推，掛載於 Android 系統

廠商聯盟主推，掛載於國產 Android 手機的系統，架構有參考 Weex，附 PPT

路線3: 開發方式整合

在上述兩條線路的發展之下，前端相容線再度陷入碎片化：安卓 App、蘋果 App、Web、小程式、快應用……為了彌合這樣的碎片化，一個可能性即是通過一套 DSL 來編譯到各個不同端，這中間包含了多個公司不同方向的努力：

京東開源，DSL 基於 JSX，通過 React Native 相容原生開發

阿里開源，DSL 基於 JSX，通過 Weex 相容原生開發，附贈介紹一枚

滴滴開源，DSL 借鑑 Vue，支援微信、支付寶小程式

美團開源，DSL 借鑑 Vue，支援 Web 和美團小程式

DCloud 開源，DSL 借鑑 Vue，融合 mpVue 的小程式能力，通過 Weex 相容原生開發

騰訊開源，DSL 借鑑 Vue，支援 Web 和微信小程式

本期編輯：@壹絲；專題供稿：@承虎、@龍笛。

首發地址：zhuanlan.zhihu.com/mm-fe

相關文章