PWA RTA in Japan 2020

PWA Night Conference 2020 発表資料

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 ! ありがとう ございました