Bonfire Frontend #2 に参加したよー

8月23日(木) にあったBonfire Frontend #2 に参加したときのレポートです。
BonfireFronetned はヤフー主催のフロントエンドの勉強会です。
今回のテーマは実践的なWebアプリケーション構築でした!
現場にフォーカスした具体的な話が聞けました。
「Flummox から Redux へリプレースした話」
今回の発表はステート管理のライブラリをFlummox から Redux へリプレースした話でした。
Flummox の実装者がやる気をなくしてしまって開発が止まったため、リプレースする必要があったというこということです。
Redux を採用した理由として、
・開発が止まらない
・採用実績が多い
・移行しやすい
最初は1人でリプレイスされていたようです!すごい!
「FOLIO に画像回帰テストを導入した話」
DOMベースのsnapshot テストは導入が容易だが、
css を適用した上でテストできると嬉しい。
そこでキャプチャ画像を使ってテストをするということでした。
Actual image と、Expected image を比較してテストします。
実際に現場で実践してみて発生した問題としては、
・スクショが不安定
・CI にかかる時間が長い
の2つがあったようです。
画像が読み込まれる前にスクショしてしまい誤検出を起こしてしまったり、1回push してCI が回り切るまで15分以上かかったりしたということです。
これらの問題を解決するために、Storybookのキャプチャを撮るCLI を自前で作成されたということでした。
https://github.com/Quramy/zisui
「PWA 対応戦略と現実解」
まず自分自身がPWA を理解できてなかったので復習から、、、
PWAとは、モバイルのWebアプリだけどネイティブのようなUXが提供されるものです。
インストール不要なので、ストアの審査なくアップデートできたります。
以下のサービスにお手持ちのスマホでアクセスしてみてください!
hellotimo.co
mobile.twitter.com
どうでしょう、Webアプリなんだけど雰囲気がネイティブアプリっぽくなかったでしょうか?
さて、ここからが本題です。
PWA を開発には、専用のフレームワークなどは必要なく、Progressive Web Apps Checklist に沿っていれば良いみたいでした。
発表中に、「アプリをPWA化させている人!」という問いかけに対して、手をあげている人はほとんどいない様子だったので、まだまだこれから活躍が期待される技術だなと思いました。
まずはhttps化が必須だということ。
PWA化の際、費用対効果を考える、実装しておわりではなく運用のことも考える、のが大事だということでした。
Chrome DevToolsを使い倒せ!
会場がワッと湧いていた印象でした。
実際にChrome dev tool を使いながら、パフォーマンスの悪いサイトをリアルタイムに改善していくという発表でした。
Devtools の機能を検索するには、[cmd + shift + P] でできます、
Coverageタブでは、使っていないJavascriptファイル、cssファイルを特定出来ます!
最新機能のLocalOverride を使うと、手元サイトを修正することができます。
React/Redux で秩序あるコードを書く
今回はReact を使った開発で、秩序ある開発をするために気をつけていることの発表でした。
秩序とは、変更に対して柔軟に対応できる状態のこと。
大事なのは以下の3つということでした。
・re-ducks を使う
・データを主体としたstate管理
・component と container を使う
React開発をする上で、stateの管理には「見た目切り」と「データ切り」の2つがあり、おすすめは後者の方ということでした。データ切りをすることで変更に強くなる。開発中のエンジニアは現時点の仕様に詳しいので見た目切りを採用してしまいがちということでした。