- UIT#4に参加してきました。
| タイトル | 発表者 |
|---|---|
| 社内向けサービスを@nuxtjs/pwaでお手軽にdesktop PWA化したら結構よかった話 | @kawasako |
| RNとreactの共有ロジックをmonorepoでつくる | @yamatatsu |
| ページ遷移Animation & Skeleton screenをWebViewアプリに実装した体験談 | @shoyo.kyo |
| デザインと仕様に負けないWeb in Appの作り方 | @Jun |
- 以下メモ書きです。
社内向けサービスを@nuxtjs/pwaでお手軽にdesktop PWA化したら結構よかった話
- @kawasakoさん(LINE)
Desktop PWA
- Chrome67から使えるようになった
chrome://flags/でflagをonにすると使える
- twitterとかqiitaとかが対応してる
- 独立したWindowがアドレスバーなしで立ち上がる！
社内アプリ
- 本番アプリでしか起きないエラーとかあると大変
- JSのエラーを全部収集するようにしてる
- => DesktopPWAだともっと楽に見れるようになる!
- 参考
アーキテクチャ
- @nuxtjs/pwa
- workboxも使ってる
- workboxに渡したswのコードを見るには
npm run buildしないと反映されない...- devではworkboxのswではなく別のを使うようにした
- workboxに渡したswのコードを見るには
- web pushも入れてる
- WebSocket経由で通知をswに渡す
まとめ
- 一般向けにはまだ厳しそう
- 社内向けなら試せるからいいかも
- PWAの定義は曖昧だけど今回作った程度のDesktopPWAならお手軽
RNとreactの共有ロジックをmonorepoでつくる
- @yamatatsuさん(CureApp)
monorepo
- lernaというライブラリがある
- 一つのリポジトリに複数プロジェクト持てる
- ロジックを共有することもできる
ページ遷移Animation & Skeleton screenをWebViewアプリに実装した体験談
- @shoyo.kyoさん(LINE)
LINEのフロントエンド
- WebViewもけっこう使ってる
- LINEポイント
- VueでSkelton screenに作り変えた
LINEポイント
- 生誕5周年
- WebViewでできてる
- 積極的にリファクタしてる
- スパイクアクセスあり
- 小規模SPAの集合
Skeleton screenを使ったきっかけ
- SPA化の要望あり
- +αもほしい
- LINE漫画でスムーズなページ遷移
- Skeleton screen + React
- これをやることに -> 体感速度向上施策
Skeleton screenを入れた効果
- 平均PV
- 52%UP
- 直帰率
- 14%ダウン
実装
- 美しさ重視で
- CSSメイン
- コンテンツが出るエリアをグレーのエリアで最初出す
- データの内容によっては行数が変わったりしてがたっとなってしまう
- がたっとなるとこもアニメーションで
課題
- GPU, CPU使いすぎ
- ページ切り替えた瞬間に使用率上がる
デザインと仕様に負けないWeb in Appの作り方
- @Junさん(LINE)
デザインと仕様に負けないエンジニア
- デザインと仕様に負ける
- このデザインは作りたくないな
- この仕様通りに作りたくないな
- 辛いとは
- 人ができないことをしなきゃいけない時苦しむ
- プログラマが頑張っても同しようもない領域
- ブラウザ/OSの制約
Web in App
- Webの辛さとAppの辛さ両方味わえる
- App的なデザインや仕様 + Webの制約
負けない方法
- 戦わなければ負けない
- デザインと仕様の段階でWebと合わないと切る
- 代替は提案できないとだめ
まとめ
- 開発者が苦しむといいプロダクトはできない
- チームの皆がハッピーになれないと良いものはできない
- 快適な開発が快適なUXにつながる
