「UIT#4 Web in App ネイティブアプリケーションのように振る舞うウェブ」に参加してきました

  • UIT#4に参加してきました。

uit.connpass.com

  • 裏番組(これとかこれ)も気になりましたが、自分的にPWAが最近ホットなのでこちらのイベントに参加してみました。
タイトル 発表者
社内向けサービスを@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がアドレスバーなしで立ち上がる!

社内アプリ

アーキテクチャ

  • @nuxtjs/pwa
  • workboxも使ってる
    • workboxに渡したswのコードを見るにはnpm run buildしないと反映されない...
      • devではworkboxのswではなく別のを使うようにした
  • web pushも入れてる
    • WebSocket経由で通知をswに渡す

まとめ

  • 一般向けにはまだ厳しそう
    • 社内向けなら試せるからいいかも
  • PWAの定義は曖昧だけど今回作った程度のDesktopPWAならお手軽

RNとreactの共有ロジックをmonorepoでつくる

  • @yamatatsuさん(CureApp)

monorepo

ページ遷移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を入れた効果

実装

  • 美しさ重視で
  • コンテンツが出るエリアをグレーのエリアで最初出す
    • データの内容によっては行数が変わったりしてがたっとなってしまう
    • がたっとなるとこもアニメーションで

課題

  • GPU, CPU使いすぎ
  • ページ切り替えた瞬間に使用率上がる

デザインと仕様に負けないWeb in Appの作り方

  • @Junさん(LINE)

デザインと仕様に負けないエンジニア

  • デザインと仕様に負ける
    • このデザインは作りたくないな
    • この仕様通りに作りたくないな
  • 辛いとは
    • 人ができないことをしなきゃいけない時苦しむ
    • プログラマが頑張っても同しようもない領域
      • ブラウザ/OSの制約

Web in App

  • Webの辛さとAppの辛さ両方味わえる
  • App的なデザインや仕様 + Webの制約

負けない方法

  • 戦わなければ負けない
  • デザインと仕様の段階でWebと合わないと切る
    • 代替は提案できないとだめ

まとめ

  • 開発者が苦しむといいプロダクトはできない
    • チームの皆がハッピーになれないと良いものはできない
  • 快適な開発が快適なUXにつながる