2019-01-21

The front-end quick explode

  • Microsoft Edge developers intend to implement HTML Modules for Chrome, a specification that replaces previous HTML Imports. Its advantage is based on ES Modules, can avoid global object pollution, script parsing blocking and other problems. 🔗

Comment: report, someone in “show affection”!

<! -In the earlyHTML 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>
Copy the code
<! - blog.html ->
<script type="module">
    import {blogPost} from "module.html"
    document.body.appendChild(blogPost)
</script>
Copy the code
  • In Firefox 66, CSSgrid-template-columns/rowsProperties now support animation.🔗

Comment: Firefox is the first browser to support this feature, other browsers should follow soon, Demo

  • Chrome Canary 73’s developer tools implement a new hover tool that gives you a quick preview of some CSS properties and contrast of the currently selected element. 🔗

Comment: It would be nice if you could directly indicate the actual font used in the current text.

A good Demo

  • Pure CSS implementation of the slider

  • Five CSS ribbon effects

Topic: Three routes of cross-end development

2018 was not a very friendly year for choice phobias in cross-end development. This journal holds the thought of resisting entropy to increase consistently, comb for you three lines of cross-terminal development.

Route 1: Heavyweight App

The way heavyweight apps are developed can control the container layer. The whole idea was to improve performance while being more dynamic. Reference: 🔗

  1. Native development: The problem is the need to develop multiple terminals, development efficiency and dynamic capacity is weak
  2. WebView capability extension: WebView is used for rendering, capability extension is through the bridge layer, the main problem is poor performance
  • PhoneGap, Cordova, Ionic, Xamarin, etc
  1. Cross-platform bridging: The bridging layer is responsible for both rendering and capability extension
  • React Native

Facebook open source, the originators of this idea, has major problems with large applications, slow startup, inconsistent two-end interfaces, and poor stability

  • Weex

Ali open source, a similar solution on the Vue technology stack

  • Hippy

Tencent closed source, optimized for React Native’s main problems

  • Picasso

Meituan closed source, from the introduction, the main optimization lies in the layout algorithm, with a PPT

  1. Flutter: Reduces traffic consumption by eliminating the bridge layer through compilation

Google open source, using the Dart language to compile to native

Route 2: Lightweight App

If you give control of the container, mount to a larger platform such as Android or super applications, it is 18 years of popular small programs or applications.

  • The application level is cross-end

Wechat mini program, Alipay mini program, Baidu Mini program, Taobao Light application, etc

  • PWA

Google’s main push, mounted on the Android system

  • Fast application

Manufacturer alliance, mounted in the domestic Android mobile phone system, the architecture of the reference Weex, attached PPT

Route 3: Integration of development methods

Under the development of the above two lines, the front compatible line again fell into fragmentation: Android App, Apple App, Web, small program, fast application… To bridge this fragmentation, one possibility is to compile to the different ends through a set of DSLS that involve efforts from multiple companies in different directions:

  • Taro

Jd open source, DSL based on JSX, through React Native compatible development

  • Rax

Ali open source, DSL based on JSX, through Weex compatible native development, a complimentary introduction

  • Mpx

Didi open source, DSL from Vue, support wechat, Alipay small programs

  • mpVue

Meituan open source, DSL borrowed from Vue, support the Web and Meituan small programs

  • UniApp

DCloud is open source, DSL borrows from Vue, integrates the small program capabilities of mpVue, and is compatible with native development through Weex

  • Wepy

Tencent open source, DSL borrowed from Vue, support Web and wechat small programs

Editor of this issue: @Yisi; Feature contributors: @Chenghu, @Longdi.

Address: zhuanlan.zhihu.com/mm-fe