Live slide

https://bit.ly/2P45BYC

跨平台開發

Cross-platform develop

過去

Past

現在

Nowadays

未來

Future

關於我

About me

許子駿

That's my name

Eddie Hsu

＠Facebook, Twitter, Medium

apolkingg8

＠everywhere

前端工程師

Front-end developer

吾少也賤

I was a bitch

故多能鄙事

Do many dirty works

誤入歧途

Go astray

跨平台開發者

Cross-platform developer

感覺良好

Feel so good

獨立開發者

Indie developer

差點餓死

Make no money

前端工程師

Front-end developer, again...

為什麼？

Why this topic?

跨平台開發

Cross-platform develop

發展迅速

Grow up fast in these years

造輪子大賽

Wheel race

沒時間看

We are busy at the fu*king job

略懂略懂

Have some knowledge

技術概覽

Missionary

經驗分享

Where are the god damn mines

大綱

Outline

演進歷程

History

框架介紹

Frameworks / Solutions

Cordova

NativeScript

React Native

Electron

Flutter

PWA

優缺點

Pros & cons

適用場景

Suitable & Unsuitable

個人經驗

Personal experience

綜合比較

Compartion

麥噹噹

每一口都有蝦喔

很久很久以前

long long time ago...

App正夯

Mobile app was all the rage

大家都想要App

Everybody want's an app

人不夠

Short handed

時間不夠

No enough time

搶進藍海

Blue ocean

我們需要什麼?

What we need?

簡單易學

Easy to learn

快速產出

Build fast, and make money fast

Cordova

WebView

WebView based solution

簡單易學

Easy to learn

開發快速

Build fast

架構簡單

Simple architecture

成熟度高

High maturity

硬體限制

Hardware limitation

效能瓶頸

Poor UX

UX不佳

Poor UX

擴充限制

Limited scalability

次等替代品

Secondary substitute

搶進藍海

Move fast

廣泛使用

Widely used

過了幾年

After some years...

時代不同了

Time is different

一片紅海

移動優先

Mobile first

要求提高

High standard

質感

Texture

擴充能力

Scalability

整合能力

Integration

原生體驗

Native-like UX

第二世代

2nd generation

Xamarin

NativeScript

React Native

NativeScript

API映射

Native API reflection

import * as app from 'tns-core-modules/application'

let VibrationEffect = android.os.VibrationEffect
let v = app.android.context.getSystemService(
    android.content.Context.VIBRATOR_SERVICE
)

v.vibrate(
    VibrationEffect.createOneShot(
        500, 
        VibrationEffect.DEFAULT_AMPLITUDE
    )
)
import android.os.Vibrator;

Vibrator v = (Vibrator) getSystemService(
    Context.VIBRATOR_SERVICE
);

v.vibrate(
    VibrationEffect.createOneShot(
        500, 
        VibrationEffect.DEFAULT_AMPLITUDE
    )
);
const LinearLayout = android.widget.LinearLayout;
const LayoutParams = android.widget.LinearLayout.LayoutParams;
const TextView = android.widget.TextView;
const Button = android.widget.Button;
const Gravity = android.view.Gravity;

@JavaProxy("my.application.name.MainActivity");
class MainActivity extends android.app.Activity {
    constructor() {
        super();

        return global.__native(this);
    }

    onCreate: function (savedInstanceState) {
        super.onCreate(savedInstance);

        let linLayout = new LinearLayout(this);
        linLayout.setOrientation(LinearLayout.VERTICAL);

        let linLayoutParam = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); 
        setContentView(linLayout, linLayoutParam);

        let lpView = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

        let tv = new TextView(this);
        tv.setText("TextView");
        tv.setLayoutParams(lpView);
        linLayout.addView(tv);
    }
});

Runtime

Metadata

Can I invoke "xxx" method?

Yes

No

Throw Err

Type Marshalling

Compile

Invoke

擴展能力

Scalability

即時支援

Immediately support

單線程模型

Single thread model

整合性差

Poor integration

起步不佳

Bad early performance

原生知識

Native platform knowledgy

社群不大

Small community

構想很好

Good idea

特色鮮明

Distinctive features

近況不錯

Growing up

原生知識

Native platform knowledgy

不錯的選擇

Good choice

React Native

手動橋接

Manual bridging

public class VibrationModule extends ReactContextBaseJavaModule {

  ReactApplicationContext reactContext;

  public VibrationModule(ReactApplicationContext reactContext) {
    super(reactContext);
    this.reactContext = reactContext;
  }

  @Override
  public String getName() {
    return "VibrationAndroid";
  }

  @ReactMethod
  public void vibrate(int duration) {
    Vibrator v = (Vibrator) reactContext.getSystemService(
        Context.VIBRATOR_SERVICE);
    if (v == null) return;

    v.vibrate(duration);
  }
}
var Vibration = require('react-native-vibration')

Vibration.vibrate(500)

Yoga

Yoga layout engine

JS

Yoga 

Native UI

Props

Layout

Callback

(Shadow thread)

渲染效能

Rendering performance

架構靈活

Flexible architecture

移植性佳

Good portability

React Native on other platform

  • UWP - Microsoft/react-native-windows 

  • OSX - ptmt/react-native-macos

  • AppleTV - Official

  • AndroidTV - Official

  • TizenNET - Samsung/react-native-tizen-dotnet

  • Web - vincentriemer/react-native-dom

  • libui - kusti8/proton-native

  • Qt - status-im/react-native-desktop

你一定想問

You must want to ask...

Airbnb

Airbnb like...

  • Good rendering performance
  • Good scalability
    • react-native-lottie
  • React & JSX is a good UI DSL
    • Same abstract on different platform

Airbnb doesn't like...

  • Long list performance
  • Not mature enougth
  • Spend a lot of time on bridging, but only a bit code share
  • Hard to build a corss-platform mobile team

還能用嗎?

Should I jump?

What's the problem?

  • Long list performance
    • RN core refactoring
  • Too much existing native libs
    • Progressive, partially
  • Team building
    • 團隊成員需要有跨平台知識

社群龐大

Big community

資源豐富

Rich resources

相對成熟

Relatively mature

入門首選

Good choice for beginner

桌面端

Desktop apps

相對的簡單

Relatively simple

效能門檻低

Less performance issue

成熟度高

High maturity

Electron

成熟度高

High maturity

資源豐富

Rich in resources

擴展性高

High scalability

效能?

Performance issue

Init performance improve

  • Lazy require
    • VSCode vs Atom
  • File pack
    • Reduce IO
  • Early start
    • Single instance

Other choice

  • Proton Native (libui)
  • React Native UWP / OSX (native component)
  • React Native desktop (libui)
  • BrigJS (Qt)
  • etc

效能 vs 便利

Performance vs Convenient

專注功能

Focus on feature

沒有特殊需求

No special requirement

優秀選擇

Good choice

電視端

Smart TV

一場悲劇

RN

Web

Web-based solution issue

  • Browser compatibility
    • 客製化 (x    搞壞他 (o
  • Device issue
  • Old device performance
  • Upgrade rate

輸入設計

Input design

遙控器

Remote controller

成熟度低

Low maturity

碎片化

Fragmentation

效能限制

Performance issues

吃力不討好

Bad DX

多要點錢

Show me more money

2018年

再睡一下就2019了

我們已經有了

We already have...

原生渲染

Native rendering

擴充能力

Scalibility

整合能力

Integration

還缺什麼?

What's the problem?

What's the problem with NS/RN?

  • Different component props & gestures between platforms 
    • 要像ReactXP一樣再做一層抽象
  • Bridging cost
    • 而且JS的context switch成本高
  • JavaScript is a script language
    • Performance
    • Init time

Flutter

Flutter

  • Powered by Google
  • Sky project
  • Dart 
  • "Self" rendering
  • Android, iOS and... Fuschia!

Flutter VM

Dart VM

Skia

Widgets

(UI, Layout, Animation, Gestures, etc...)

Native Platform

App

Dart

Main

(Native)

GPU

(Skia)

IO

Native api invoke 

Render

invoke

Heavey

IO

代碼共享

Code sharing

可移植性

Portability

Dart

Dart language

JIT & AOT

Both JIT & AOT compile

Did Flutter solve the problem?

  • 平台間Component props不一致
    • 自帶渲染引擎，跨平台間一致的Widgets
  • Bridging cost
  • JS performance
  • Init time
    • AOT compile in release

該跳坑嗎

Should I jump?

Before jump in: Why?

  • High performance rendering?
    • RN & NS can also do 60fps animation
  • Code sharing?
    • RN & NS can also share a lot of code
  • Portability?
    • Not yet. RN & Web-based solution already have

Before jump in: Why not?

  • Framework not stable
    • Can you solve core issue by yourself?
  • Small ecosystem
    • 你需要自己造很多輪子嗎？值得嗎？

目前來說

At this time...

沒有必要

Not necessary

部分導入

Partial import

投資未來

Investing the future

搶占先機

Fuchsia OS

可移植性

Portability

架構良好

Good architecture design

做法激進

Innovation

生態圈發展

Ecosystem

Cordova

NativeScript

React Native

Flutter

換一種想法

Another idea

你真的需要App嗎?

Do you really need an

"native" app?

PWA

App shell

Content

Open App store

Search in store

Click install

Waiting for download

Finally got it

Find something interesting on web

Save as an app

Enjoy it :)

轉換率提升

Conversion rate increase

可搜尋

Searchable

可預覽

Previewable

可分享

Shareable

Suitable

  • Content orientation
    • Education
    • Events
    • Finance
    • Food & Drink
    • Lifestyle
    • News & Magazines
    • Shopping
    • Social
    • Weather
  • No platform feature requirement

Unsuitable

  • Integration with existing native app
  • Non-morden browser market

在開工之前

Before building an app

先思考一下

Think one more time

有些時候

Sometimes

你其實

不需要App

You don't need an App

PWA更好

PWA is a better choice

綜合比較

Comparison

Rendering performance

  • Flutter, NativeScript, React Native都可以達到60fps
    • 必須正確的使用
  • Web solution在iOS以及高階的Android上表現較好
    • PWA > Cordova (without Crosswalk)
    • low-end android sucks

Code sharing & portability

  • Web based solution
    • Web is everywhere
  • Flutter
    • Better code sharing & portability, but not yet
  • React Native based
    • 看似跨很多平台，但其實支援度各不相同
  • NativaScript
    • hard to porting on other platform

Learning curve

  • Web-based solutions are easy to learn
    • but hard to improve
  • Flutter is easier than RN and NS
    • no complex UI bridge system
    • easy to trace
  • NativeScript is harder
    • need knowledge both web-side and native-side

未來？

What's the future?

兩個走向

Two directions

自帶渲染引擎

Self rendering

平台多樣化

More new platform

需求增加

Requirement incress

代碼共享

Code sharing

可移植性

Portability

PWA

Progressive Web App

軟硬體升級

Hardware / software performance increase

缺點隱藏

Hide shortcomings

優點突顯

Highlight the advantages

更多標準

More features will be added as standards

更加泛用

More usable

總結

Summary

"It's never been a goal for React Native to replace all other technologies – we are focused on making React Native itself better."

原生開發

Native solution

跨平台開發

Cross-platform solution

是一種工具

is a kind of tool

工具很多

There are tons of tools

各有用途

having different suitable scenes

能解決問題

Choose what you love

就是好工具

and build something cool

Thank you 

不問嗎？

跨平台開發的過去、現在與未來@MOPCON2018

By Eddie Hsu

Made with Slides.com

跨平台開發的過去、現在與未來@MOPCON2018

  • 694

More from Eddie Hsu