@spring_raining が @AlanGDavalos に社内向け Web アプリケーション「Can We Use?」の開発のきっかけと技術構成について聞いてみました。

ゲストについて

• Alan さん
  • 第二回にて Web Components をテーマに出演
  • https://uit-inside.linecorp.com/episode/2

canweuse

• そもそも caniuse について
  • Web のモダンな機能がまとまっている
  • 機能ごとに対応ブラウザバージョンを確認できる
• canweuse について
  • caniuse の LINE 版ツール
  • 実際の LINE App でのアクセス統計を利用して、どの OS の何パーセントのユーザーに影響があるかなどを調べることができる
    • 社内でプロダクトを使うときの Progressive Enhancement の検証に使える
  • Alan さんが Web Component を Production で使えるかを調べるために開発

canweuse の技術構成

• フロントエンドは LitElement を利用した Web Components での開発
• バックエンドとの通信は GraphQL で行う
  • canweuse の場合は様々なデバイスデータを柔軟に利用したいので GraphQL がベストマッチだった
  • caniuse の生データも同時に入っているので、膨大なデータから必要なデータを取り出すために GraphQL を採用することに
• 通信量の面でも削減になるので量が多い場合は使ってみるとよさそう

GraphQL の技術事情

• 元々は Facebook が作り始めたが、より浸透してきている
• GitHub の API など、大きなサービスでも GraphQL 対応されつつある
• GraphQL 自体は特に専用で作る必要があるわけでもない
  • REST の 上に乗っける形での採用も可能
  • 外部 API ですら良い
• Apollo などのクライアントライブラリは キャッシュまで含めてうまくやってくれる
  • 状態管理の基盤としても注目されている

canweuse のこれからについて

• LINE としてはまずは i18n が大切
  • 多くの拠点のメンバーが使えるように
• もっと大きなデータを取れるようにすると、社内の需要を調べるのに良いかもしれない
• UI も GraphQL クライアントそのままという状態なので、この点もよりフレンドリーにしていきたい
• 将来的に社内特有の事情にあった機能を作れていけると良い

クロージング

• 今週のフロントエンド
  • https://yosuke-furukawa.hatenablog.com/entry/2019/06/10/113111
  • https://www.pika.dev/cdn
  • https://2019.stateofcss.com/