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

PWA RTA in Japan 2020

D65ac1a4aacb7a449bb61cef10fb7143?s=47 Okuto Oyama
February 01, 2020

PWA RTA in Japan 2020

PWA Night Conference 2020 発表資料

D65ac1a4aacb7a449bb61cef10fb7143?s=128

Okuto Oyama

February 01, 2020
Tweet

More Decks by Okuto Oyama

Other Decks in Technology

Transcript

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

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

  3. - 簡単 - 爆速 - 無料

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

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

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

  7. レギュと注意事 項になります。 判定基準 • 工程順の少なさ • PWAインストールボタンが出るまで 注意事項 • 2020/01時点での実行結果

    • 実行時間では比較しない • フレームワークの優劣を決めるものではあり ません
  8. おなじみ御三家

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

  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/
  11. vue-cli $ npx @vue/cli create <app-name> https://pwa-vue-yamanoku.netlify.com/

  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/
  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/
  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/
  15. (拍手)

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

  17. 意外っそれは Preact

  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/
  19. preact-cli $ npx preact-cli create default <app-name> https://pwa-preact-yamanoku.netlify.com/

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

  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" }, }
  22. 完走した感想 まとめ • モダンフレームワークの構築ツールではVue.jsが CLI上で完結して簡易的。 • React.jsはServiceWorkerの設定が必要。 • Angularはビルド時のオプションが必要。 •

    Preactの構築ツールがPWA RTA内では最速。 多分これが一番早いと思います。 • Universal PWA BuilderはRTA希望の星となる か? • https://www.pwabuilder.com/ すごい
  23. Thanks You ! ありがとう ございました