フロントエンド全身ちぎれ節/BIT VALLEY -INSIDE- Vol4

支えなくて良い技術を支える技術
2018-12-12 BIT VALLEY -INSIDE- Vol.4

Transcript

1. フロントエンド
   全身ちぎれ節
   支えなくて良い技術を支える技術
   2018-12-12 BIT VALLEY -INSIDE- Vol.4
   

   View Slide

2. Satoshi Takeda
   @tkdn
   株式会社 mediba
   au
   パートナー本部 au
   サービス開発部
   フロントエンドエンジニア
   "
   ブラウザが主戦場
   "
   

   View Slide

3. 本日話すこと
   1.
   「支えなくて良い技術」とは
   2.
   支えなくて良い技術を支えていく技術
   how 1: webpack + Babel
   how 2:
   不足しているネイティブ API
   how 3: OS
   固有バグとの付き合い方
   3.
   まとめ・言いたいこと
   

   View Slide

4. 1.
   「支えなくて良い技術」とは
   deprecated, obsoleted
   な技術
   例えば
   

   View Slide

5. TLS 1.0/1.1
   TLS 1.0/1.1
   のサポート停止
   

   View Slide

6. これによって対応出来なくなる
   ブラウザ
   OS
   ・ブラウザ
   Android 2.x - 4.x
   

   View Slide

7. 弊社
   大人の事情でまだまだ支えている
   

   View Slide

8. 対応は辛い
   端末やOS
   由来によるバグチケット
   かさむ工数
   たまっていくカルマ
   ⬇ 開発体験 DX
   の悪化
   

   View Slide

9. このカルマを燃やすために
   エンジニアリングでなんとかする
   

   View Slide

10. ゴール
    レガシー端末をフォローしていくことに疲れない
    開発者が（ある程度）意識せずコーディング・オペレーションできる
    自動化できることは自動化し開発体験を良くしたい
    

    View Slide

11. how 1: webpack + Babel
    webpack
    =>
    モジュール解決のためのバンドラー
    Babel
    => ES2015~
    の構文を解釈し ES5
    相当に変換
    babel-preset-env
    => browserslist
    が提供する DSL
    に従い、サポートブラウザを記述する
    

    View Slide

12. {
    {
    "browserslist"
    "browserslist":
    : [
    [
    // Android 2.1
    以上に最適化
    // Android 2.1
    以上に最適化
    "Android >= 2.1"
    "Android >= 2.1",
    ,
    // iOS 8
    以上に最適化
    // iOS 8
    以上に最適化
    "iOS >= 8"
    "iOS >= 8",
    ,
    ]
    ]
    }
    }
    ターゲットブラウザに準じた変換が可能
    

    View Slide

13. export
    export default
    default class
    class Human
    Human {
    {
    constructor
    constructor(
    (name
    name)
    ) {
    {
    this
    this.
    .name
    name =
    = name
    name ||
    || "Tom"
    "Tom";
    ;
    }
    }
    eat
    eat(
    (food
    food)
    ) {
    {
    console
    console.
    .log
    log(
    (`
    `${
    ${this
    this.
    .name
    name}
    } eats
    eats ${
    ${food
    food}
    }`
    `)
    );
    ;
    }
    }
    }
    }
    こんなのが
    

    View Slide

14. exports
    exports.
    .__esModule
    __esModule =
    = true
    true;
    ;
    var
    var Human
    Human =
    = (
    (function
    function(
    ()
    ) {
    {
    function
    function Human
    Human(
    (name
    name)
    ) {
    {
    _classCallCheck
    _classCallCheck(
    (this
    this,
    , Human
    Human)
    );
    ;
    this
    this.
    .name
    name =
    = name
    name ||
    || "Tom"
    "Tom";
    ;
    }
    }
    Human
    Human.
    .prototype
    prototype.
    .eat
    eat =
    = function
    function eat
    eat(
    (food
    food)
    ) {
    {
    console
    console.
    .log
    log(
    (String
    String(
    (this
    this.
    .name
    name)
    ) +
    + " eats "
    " eats " +
    + String
    String(
    (food
    food)
    ))
    );
    ;
    }
    };
    ;
    return
    return Human
    Human;
    ;
    }
    })
    )(
    ()
    );
    ;
    exports
    exports.
    .default
    default =
    = Human
    Human;
    ;
    

    View Slide

15. だがしかし。
    このままでは
    Android 2
    系, 4.0
    系までフォローできない
    ES5
    相当の
    JavaScript
    ネイティブ API
    が不足している
    

    View Slide

16. やってやろうじゃねえか
    

    View Slide

17. how 2:
    足りないネイティブ
    API
    を足す
    ES5
    相当のネイティブ API
    を埋める es5-shim
    を依存として追加しファイルにバンドルさせる
    es-shims/es5-shim: ECMAScript 5 compatibility shims for legacy (and modern)
    JavaScript engines
    

    View Slide

18. これでもう大丈夫やろ…(
    ；´
    ∀｀)
    これでもう大丈夫やろ…(
    ；´
    ∀｀)
    

    View Slide

19. 「一部の
    Android 2
    系では
    ES3
    相当の記述をしないと対応出来ない」
    

    View Slide

20. まじかよ…(
    ；´
    ∀｀)
    まじかよ…(
    ；´
    ∀｀)
    

    View Slide

21. object
    のプロパティが
    予約語となる場合エラーとなる...etc
    //
    下記の構文がエラーとなる
    //
    下記の構文がエラーとなる
    var
    var obj
    obj =
    = {
    { class
    class:
    : true
    true }
    };
    ;
    var
    var obj
    obj.
    .class
    class =
    = true
    true;
    ;
    //
    こうしないとだめ
    //
    こうしないとだめ
    var
    var obj
    obj =
    = {
    { "class"
    "class":
    : true
    true }
    };
    ;
    var
    var obj
    obj[
    ["class"
    "class"]
    ] =
    = true
    true;
    ;
    

    View Slide

22. ES3
    相当に書き換える必要がある
    Branches · sophiebits/es3ify
    最終的な生成ファイルをリビルドするスクリプトを書いた
    

    View Slide

23. ファイルサイズ膨れ上がってきたんだが…(
    ；´
    ∀｀)
    ファイルサイズ膨れ上がってきたんだが…(
    ；´
    ∀｀)
    ここまでやったんならさすがにもう大丈夫やろ…(
    ；´
    ∀｀)
    ここまでやったんならさすがにもう大丈夫やろ…(
    ；´
    ∀｀)
    

    View Slide

24. OS
    固有のバグ
    

    View Slide

25. OS
    固有のバグ
    Uncaught TypeError: Cannot assign to read only
    property '__esModule' of #
    なにこれ…(
    ；´
    ∀｀)
    任意の構文からJavaScript
    オブジェクトへ直接的なプロパティ書き込みが
    出来ないというエラー内容
    

    View Slide

26. 1530 - De ning function's 'prototype' property with Object.de neProperty sets
    different value and makes property immutable - v8 - Monorail
    

    View Slide

27. 出処
    Android 4.0.x
    に搭載された JavaScript
    エンジン V8
    のバグ起因
    V8
    のバージョンまで特定は出来ないが、Android 4.0.3, 4.0.4
    の標準ブラウ
    ザもしくは webview
    の V8 JavaScript
    エンジンではバグを持ったまま実装
    されている。なお 2.x
    系ではバグは起きない
    

    View Slide

28. どうしたもんか
    

    View Slide

29. 回避パッチで何とかなりそう
    

    View Slide

30. // Android 4.x support
    // Android 4.x support
    var
    var defineProperty
    defineProperty =
    = Object
    Object.
    .defineProperty
    defineProperty;
    ;
    Object
    Object.
    .defineProperty
    defineProperty =
    = function
    function (
    (exports
    exports,
    , name
    name)
    ) {
    {
    if
    if (
    (name
    name ===
    === '__esModule'
    '__esModule')
    ) {
    {
    exports
    exports[
    [name
    name]
    ] =
    = true
    true;
    ;
    return
    return;
    ;
    }
    }
    return
    return defineProperty
    defineProperty.
    .apply
    apply(
    (this
    this,
    , arguments
    arguments)
    );
    ;
    }
    };
    ;
    パッチを差し込むプラグインを作った
    無事に動いた…
    

    View Slide

31. 紹介しきれませんがでも他にも OS
    固有のバグが多くあります…
    OS
    固有バグは網羅すること自体が人智を越えているため、トライ&
    エラ
    ーとナレッジの共有しかない
    

    View Slide

32. まとめ
    ターゲットブラウザを明示し設定、意識せずコーディング
    不足した API
    は適宜 poly ll, shim
    を足し込んでフォロー
    OS
    固有のバグは知見でしかない、ぶつからないと分からない
    全身ちぎれて血まみれになりながらまとめた
    

    View Slide

33. 考えていくべきこと
    紹介したことはいずれ価値のなくなるハック
    ユーザがセキュアな環境で通信出来ない事自体をきちんと考える
    レガシー対応に引きずられてサービスグロースの足を引っ張らないと良
    い
    

    View Slide

34. 支えなくて良い技術を支える
    少なくともユーザがいる限りは
    フロントエンドの技術で支えきる
    

    View Slide