Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PWA RTA in Japan 2020

Okuto Oyama
February 01, 2020

PWA RTA in Japan 2020

PWA Night Conference 2020 発表資料

Okuto Oyama

February 01, 2020
Tweet

More Decks by Okuto Oyama

Other Decks in Technology

Transcript

  1. はじまるよー
    はい、よーいスタート

    View Slide

  2. 自己紹介タイム
    大山奥人(おおやまおくと) @yamanoku
    株式会社クラウドワークス所属 2019年10月〜
    - フロントエンドエンジニア
    - アクセシビリティ啓蒙家
    - 猫3匹と一児の父

    View Slide

  3. - 簡単
    - 爆速
    - 無料

    View Slide

  4. 便利な世の中に
    なったもんだ。

    View Slide

  5. すべてはここか
    ら始まった

    View Slide

  6. 怒られる前に先
    に各位に謝って
    おきます。申し訳
    ありません。
    本LTはネタ枠に
    なります。
    RTA in Japan

    View Slide

  7. レギュと注意事
    項になります。
    判定基準
    ● 工程順の少なさ
    ● PWAインストールボタンが出るまで
    注意事項
    ● 2020/01時点での実行結果
    ● 実行時間では比較しない
    ● フレームワークの優劣を決めるものではあり
    ません

    View Slide

  8. おなじみ御三家

    View Slide

  9. create-react-app
    $ npx create-react-app
    https://pwa-react-yamanoku.netlify.com/

    View Slide

  10. create-react-app
    import * as serviceWorker from './serviceWorker ';
    // If you want your app to work offline and load
    faster, you can change
    // unregister() to register() below. Note this comes
    with some pitfalls.
    // Learn more about service workers:
    https://bit.ly/CRA-PWA
    serviceWorker.register();
    https://pwa-react-yamanoku.netlify.com/

    View Slide

  11. vue-cli
    $ npx @vue/cli create
    https://pwa-vue-yamanoku.netlify.com/

    View Slide

  12. vue-cli
    Vue CLI v4.1.2
    ? Please pick a preset: (Use arrow keys)
    ❯ vue-cli-preset (babel, pwa, eslint)
    default (babel, eslint)
    Manually select features
    ✨ Creating project in ~/xxxxx/vue-pwa.
    Initializing git repository...
    ⚙ Installing CLI plugins. This might take a
    while...
    https://pwa-vue-yamanoku.netlify.com/

    View Slide

  13. anguler-cli
    $ @angular/cli new
    ? What name would you like to use for the
    new workspace and initial project?
    angular-pwa
    ? Would you like to add Angular routing?
    Yes
    ? Which stylesheet format would you like to
    use? CSS
    https://pwa-angular-yamanoku.netlify.com/

    View Slide

  14. anguler-cli
    $ @angular/cli add @angular/pwa
    Installing packages for tooling via npm.
    Installed packages for tooling via npm.
    $ @angular/cli build --service-worker --prod
    https://pwa-angular-yamanoku.netlify.com/

    View Slide

  15. (拍手)

    View Slide

  16. 真の最速は一体
    なんだろう?

    View Slide

  17. 意外っそれは
    Preact

    View Slide

  18. preact-cli
    > Your next Preact PWA starts in
    30 seconds.
    https://github.com/preactjs/preact-cli
    preact create default preact-pw 60.11s
    user 26.88s system 99% cpu 1:27.52 total
    https://pwa-preact-yamanoku.netlify.com/

    View Slide

  19. preact-cli
    $ npx preact-cli create default

    https://pwa-preact-yamanoku.netlify.com/

    View Slide

  20. @pwa/cli
    https://github.com/lukeed/pwa

    View Slide

  21. package.json
    {
    "private": true,
    "scripts": {
    "build": "pwa build",
    "start": "sirv build -s",
    "watch": "pwa watch"
    },
    "dependencies": {
    "ganalytics": "^3.0.0",
    "sirv-cli": "^0.4.0"
    },
    "devDependencies": {
    "@pwa/cli": "latest",
    "@pwa/plugin-offline": "latest"
    },
    }

    View Slide

  22. 完走した感想
    まとめ
    ● モダンフレームワークの構築ツールではVue.jsが
    CLI上で完結して簡易的。
    ● React.jsはServiceWorkerの設定が必要。
    ● Angularはビルド時のオプションが必要。
    ● Preactの構築ツールがPWA RTA内では最速。
    多分これが一番早いと思います。
    ● Universal PWA BuilderはRTA希望の星となる
    か?
    ● https://www.pwabuilder.com/ すごい

    View Slide

  23. Thanks You !
    ありがとう
    ございました

    View Slide