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

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

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

點評：若是能夠直接提示當前文本所實際使用的字體就更好啦。

優秀 Demo

• 純 CSS 實現的滑塊

• 五種 CSS 綵帶效果

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

2018 年跨端開發對於選擇恐懼症來講不是很友好。本刊秉持着一向抵抗熵增的思路，爲你們梳理了跨端開發的三條路線。

路線1: 重量級 App

重量級 App 的開發方式能夠控制容器層。這條線路始總體發展思路是：在更動態化的同時，提高性能。參考：🔗

1. 原生開發：問題在於須要開發多端，開發效率和動態化能力弱
2. WebView 能力擴展：WebView 用於渲染，能力擴展經過橋接層，主要問題是性能差

• 包括 PhoneGap、Cordova、Ionic、Xamarin 等

1. 跨平臺橋接：橋接層同時負責渲染和能力擴展

• React Native

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

• Weex

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

• Hippy

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

• Picasso

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

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

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

路線2: 輕量級 App

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

• 應用級別跨端

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

• PWA

Google 主推，掛載於 Android 系統

• 快應用

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

路線3: 開發方式整合

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

• Taro

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

• Rax

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

• Mpx

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

• mpVue

美團開源，DSL 借鑑 Vue，支持 Web 和美團小程序

• UniApp

DCloud 開源，DSL 借鑑 Vue，融合 mpVue 的小程序能力，經過 Weex 兼容原生開發

• Wepy

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

---

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

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