「Repro Tech : Frontend Reliability support NAVITIME」に参加してきました

勉強会メモ
  • Repro Tech : Frontend Reliability support NAVITIMEに参加してきました。

repro-tech.connpass.com

  • フロントエンドのreliabilityがテーマということでリアルな開発現場の苦労話を多く聞けました
  • Reproのイベントでしたが半分は豪華なゲストスピーカーということでバランス良かったです
タイトル 発表者
E2Eテストを継続するために brn
ReproのWeb SDK開発を支える技術 cheezenaan
続・Vue.jsによる大規模開発 kazupon
フロントエンド開発の土台としてのチーム作り 渡部啓太
クックパッドにおけるwebフロントエンドの改善 @hokaccha
フロントエンドと向き合う @treby

E2Eテストを継続するために

E2Eテスト

  • ユーザと同様に操作して機能を確認するテスト
  • Selenium等で自動で打鍵
  • メリット
    • ユーザが触る画面を直接テストするので確実性高い
  • デメリット
    • 遅い
    • アニメーションとかAPIアクセスとか遅い
    • 謎のエラーで失敗したり不安定
    • メンテナンス大変

E2Eのメンテ

  • CSSセレクタでDOMを選択
    • 変化が多いから大変
  • styled-components使ってるとE2E用にクラスつけないと
    • 自動生成のクラスが付与されるから
  • -> 放置されがち

デメリットの解決策

  • 遅い
    • アニメーション等はクラス名変えて停止してテストするとか
  • 不安定
    • リトライ入れて対応する
    • BrowserStack等外部環境を利用するとか

メンテナビリティ

  • メンテナビリティを実現するにはHTMLの構造に立ち入らないこと

VisualRegressionTest

  • スクショとって画像で比較
  • 前回と比較して変化がないかテストする
  • 変更ないのに差分検知してしまうことも
  • 失敗した理由がわからない
    • 結果しか見えないから
    • 目で見るようにする
    • 部分実行できるように作る

ブラウザ操作レイヤーの抽象化

  • ページ遷移とかはボタン押したりするのでHTMLの構造に依存してしまう
  • Graph Based PageObject
    • ユーザの操作単位でメソッドをきる
    • 部分的な実行もしやすくなった

まとめ

  • CIの整理やレビュー体制等のプロセスが大事
  • プロセスがアウトプットの品質を決める

QA

  • E2Eどれくらい時間かかってる？
    • CIで回してて30分くらい
    • mergeするタイミングで回してる
  • IE対応どうしたらいい？
    • BrowserStack使うか
    • Windowsサーバ立てるか
    • IEだけ手動でもいいと思う
  • SeleniumIDEどう?
    • その時通るテストしか作れないから手直し出てしまう
    • 雛形作るものとしては使えるかも

ReproのWeb SDK開発を支える技術

  • cheezenaanさん(Repro)

Web SDK開発

SDK

  • Software Development Kit
  • アプリ提供者向けの便利なライブラリ集

Web SDK

  • ブラウザ上でで動くSDK
  • ネイティブアプリと比べるとブラウザの分一層多い
    • ブラウザの種類・バージョンの差異がつらい

ReproのWeb SDKに求められること

  • 安心安全で信頼できるSDKを提供したい
  • なるべく多くのブラウザで動かしたい
  • プラットフォーム・バージョンどこまで対応する？？
    • ビジネス要求と開発リソース次第

実際の取組み

  • ほぼ最新Chromeを基準にGraceful Degradation
  • 標準化されてないブラウザAPIは過信しない
  • 外部ライブラリへの依存を極力減らす
    • 使ってるライブラリ
  • ファイルサイズは小さく保つ
    • polyfill入れるくらいなら自分で書く
  • UnitTest手厚く
    • ブラウザ差異はE2Eで
    • 浅く広く作ってる
  • E2E

まとめ

  • ブラウザという壁から逃げずに向き合うことが大事
  • 依存少なくテスト手厚く

QA

  • WebSDKのE2Eどんなことやってる？
    • サンプルアプリに適用してテストしてる

続・Vue.jsによる大規模開発

  • kazuponさん

Vue

中大規模向け開発

  • 複数人で開発する
  • 生産性やメンテナンス性を考慮
  • 最初からフルスタックにはサポートしない
  • 公式にライブラリは提供してる

開発環境セットアップ

Vue CLI 3

  • プラグインベース
  • 構築拡張メンテが楽
  • VueCLIのレールから外れることはできない
  • ts対応
  • prettier
  • cypress

Vue CLI UI

  • ブラウザ上でVueCLIでできることは一通りできる
  • プロジェクト管理
  • GUIベースで設定
  • コマンドライン苦手な人に優しい

その他

  • VSCode + Vetur(VSCodeのプラグイン)
  • eslint-plugin-vue
  • 通信
    • REST -> axios
    • GraphQL -> vue-apollo
  • 状態管理
    • VuexはTSだとつらい
  • E2Eテスト
    • cypressも使えるようになった
    • NightWatch

アプリ設計

コンポーネント設計

  • AtomicDesignに従いSFCを抽出
  • 秩序がたもてるなら無理にAtomicDesignに従わなくてもいいと思う

状態モデリングとデータフロー

  • UI使用から状態に落とし込む
  • モデルとAPI仕様はバックエンドと認識齟齬ないように工夫が必要
    • swaggerやOpenAPI Generator
    • Consumer Driven Contruct

ルーティング設計

  • スクロール位置喪失問題

アプリ実装

  • TS入れるといい
    • VueCLI3なら簡単に導入できる
  • TDD
    • テストはjestを推奨
      • スナップショットテストが便利
    • コンポーネント、データフロー、ルーティング全部TDDやる必要はない

デバッグ

  • Vue Devtools 5でより便利に

まとめ

  • VueCLI3で環境構築が楽になった

フロントエンド開発の土台としてのチーム作り

組織作り

  • すべての人間が同じ方向を向くことが大事

以前

  • お互い何をやってるか分かってなかった

やったこと

  • 情報の同期
    • ファイブフィンガー朝会
  • 情報の共有
    • 自分は何が得意
    • 何を期待する
    • 偏愛マップ
    • 自分の取説
    • スキルマップ
  • 目的の明確化
    • 我々はなぜここにいるのか
  • 毎週振り返り

今後

  • ビジネスサイドとの協働
  • 高負荷の解消

まとめ

  • チーム力は開発力の土台
  • チームと個人を向き合わせる
  • 振り返りでカイゼン

クックパッドにおけるwebフロントエンドの改善

クックパッド

  • Rails化して10周年
  • いろんな負債が積み重なってる

クックパッドのフロントエンド

  • Performance
  • Productivity

performance

techlife.cookpad.com

Productivity

  • 生産性をいかに上げるか

エラートラッキング

  • 全社的にsentry使ってる
  • ノイズがひどいので対応中

コードの整理

  • 現状
    • どこに何書いてあるか分からん
  • 対応
  • 既存コードを動かしながら対応するのは大変

モダン化

今後

  • 各チームが自由にライブラリ選定できる体制にしたい
  • Micro Frontendとか
    • 理想だけど難易度高そう

フロントエンドと向き合う

  • @trebyさん(Repro)

フロントエンド

  • フロントエンドはこわれる
    • ES2015でまともになってきた
  • 変化が激しい
  • テスト充実させたい
    • フロントエンドは簡単に壊れる
  • 3つの柱
    • 技術
    • チーム
    • 根性