PWA RTA in Japan 2020

PWA Night Conference 2020 発表資料

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