前端技术周刊 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 等

3. 跨平台桥接：桥接层同时负责渲染和能力扩展

   • React Native

     Facebook 开源，这条思路的开创者，主要问题是应用体积大、启动慢、双端接口不统一、稳定性差

   • Weex

     阿里开源，在 Vue 技术栈之上的类似方案

   • Hippy

     腾讯闭源，针对 React Native 的主要问题进行了优化

   • Picasso

     美团闭源，从介绍来看主要优化在于布局算法方面，附赠 PPT 一枚

4. 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 和微信小程序

---

本期编辑：@壹丝；专题供稿：@承虎、@龙笛。