こんにちは、Goodpatchでフロントエンドエンジニアをしているよしこです!

昨日Goodpatchにて初めてのEngineer Meetupがおこなわれました!
当初は30名の募集だったのですが、なんと90名を超える方々にご登録をいただきました。最終的に40名まで増枠をおこない、大盛況だったMeetupの内容をここで簡単にご紹介したいと思います!

今回のテーマは「ProttのWebパフォーマンスチューニング」でした。
ProttはGoodpatchが開発しているプロトタイピングツールです。そのProttでおこなったパフォーマンスチューニングの裏側を、Prott開発チームのエンジニアからご紹介させていただきました!

AngularJSの$watch登録数が60,000だった @yoshiko_pg

Slack for iOS Upload

まず最初に私よしこから、Prottのフロントエンドのパフォーマンスチューニングについてお話しさせていただきました。
ProttはAngularJSを使用したシングルページアプリケーションです。AngularJSはモデルの値とビューでの表示を自動で同期してくれる双方向バインディングが便利な半面、それに頼りすぎてしまうとデータが増えたときにページが重くなってしまいがちです。
このセッションではAngularJSで陥りがちな「$watch登録数多すぎ問題」と、なぜ$watchが増えると重くなるのか、そしてそれをどういった方法で解決したかをご紹介しました。
60,000もの$watch対象をいったいどこまで減らせたのか、ぜひスライドでご確認ください!

資料はこちら

SPDY導入物語 @urapico

続いてProttチームのインフラエンジニア、塩浦からインフラ面でのパフォーマンスチューニングに関するセッションでした。
Googleが開発したプロトコルであるSPDYを使用すると、同時に読み込めるリソースの数が増えたりとネットワークの部分でのパフォーマンス改善が見込めます。そんなSPDYを導入するにあたっての具体的な流れや苦労したポイントをご紹介いたしました。
セッション後にはインフラについての質問もいただき、懇親会でもインフラトークが盛り上がっていたようです!

資料はこちら

Goodpatchに生息するbotたち @deepblue_will

Slack for iOS Upload-1

パフォーマンスチューニングに関するセッションの合間の箸休めとして、Prottチームのフロントエンドエンジニアである碧志からGoodpatchで活用されているSlack botについてのセッションです!
GoodpatchのSlackでは毎日いろいろなbotが働いてくれています。そんなbotたちを実用的なものから癒し系なものまでキャプチャを交えてお見せしました。加えてbotの作り方やHerokuでの運用のコツもご紹介しています。
私は会話の合間に変なちゃちゃを入れてくるrobo(雑談bot)によく癒やされています!

資料はこちら

Make the Prott Faster @sada_h

Slack for iOS Upload-2

最後にProttチームのエンジニアリーダーであるひらいから、Web版Prottのパフォーマンスチューニングについて総括するセッションがありました。
アプリケーションのパフォーマンスは、エンジニアが関わることのできる代表的なUXです。Prottでは今年の6月〜7月をパフォーマンス改善期間として定め、エンジニアチーム全員でパフォーマンス改善に取り組んできました。その結果、Web版のProttの速度は2倍程度まで大幅に改善されました。
このセッションではパフォーマンス改善期間におこなったインフラ〜サーバー〜フロントエンドまでの技術的な取り組みを包括的にご紹介いたしました。
まだまだ改善できるポイントは多いので、Prottチームはこれからもパフォーマンス改善に取り組んでいきます!

資料はこちら

当日の雰囲気は Togetterまとめをチェックしてみてください!

4つのセッションのあとはピザとビールでPizzapatch懇親会をおこないました。
セッションを聞いてくださった方のほとんどが懇親会にも参加してくださり、賑やかで楽しい懇親会になりました!

Goodpatchではこれからも定期的にEngineer Meetupを開催していきたいと思っています!
次の開催が決まりましたらConnpassのGoodpatchグループGoodpatch Twitterでも告知をおこないますので、ご興味のある方はぜひチェックしてみてください!