EmberFest 2019 参加レポート day 2 - tricknotesのぼうけんのしょ

2019年10月にコペンハーゲンで行われた EmberFest の二日目の参加レポートです。

f:id:tricknotes:20191206202611j:plain — EmberFest

tricknotes.hateblo.jp

Compiling Ember by Edward Faulkner

Ember Core Team のメンバーで、数多くの OSS ライブラリの作者としても知られる @eaf4 による、Ember のための新しいビルドツールである Embroider の発表でした。
従来から課題だった、 Broccoli への依存解消と動的解析の強化に焦点があてられているそうです。

Embroider では、Ember アプリケーションのための "three-stage build" が行われています。

1st stage
- Ember App & Addons の解析
- 今までの Ember Addons との互換性を担保するために、静的解析可能な package が提案されました (RFC#507)
2nd stage
- Ember アプリケーションと、Ember の特化したビルドの実施が行われます
3rd stage
- Plain JS, CSS, HTML など、一般的なビルドが実施されます
- この段階で、WebpackやRollupなどの別のビルドツールに生成物が引き渡されます
- JS / CSS などの最適化は、Webpackなどで行われることが想定されています

まだまだ API は実験的とのことでしたが、開発者にとってはEmberアプリケーションに手を入れることなく利用できるようになるとのことです。

FastFlood: a story of a massive memory leak in FastBoot land by Sergio Arbeo

DockYard のメンバーである @Serabe による、FastBoot のメモリリークを直した話でした。

そもそもの話として、メモリリークは再現がとても難しく、一見期待通りに動いているように見えてある閾値を超えてはじめてクラッシュするので、条件の特定が困難だそうです。

話者は FastBoot のメモリリークを発見するために Firefox を利用したそうです
メモリグラフからメモリダンプを取得し、参照の深さ・容量などを解析するところから始めることが重要だそうです。

一度ローカル環境で再現させることができれば、発生するようになったバーションや依存ライブラリを変更しつつ原因を特定していけるとのことでした。また、一般的な不具合解析にも通じるテクニックとして、早めに・頻度高く他のメンバーとのコミュニケーションすることを勧められていました。

Building Ember Apps with Duplos® by Jon Kilroy

Yahoo! でData pipeline エンジニアとして活動している @jonkilroy による発表でした。
データ集計後のフロントエンドの view を Ember で作っているそうで、その開発から得られた経験として、大きなEmberアプリケーションを開発するためには、イチから全部開発するのではなくよくできたAddonsを組み合わせて開発しましょうという発表でした。*1

なお、タイトルに含まれているDuplos®とは幼児向けのLEGOシリーズのことだそうで、LEGOを組み合わせるようにAddonを組み合わせましょうとのメッセージが込められているそうです。*2

いつくかのAddonのパターンと利用例が紹介されていたので、発表資料をご覧いただければと思います。

slides.com

筆者のアプリケーションはデータの表示コンポーネントが多くの種類必要になったとのことで、Addonを公開されているそうです。

NaviApp

Write Tests Like a Mathematician by Isaac Lee

元数学者である @ijlee2 による、Emberアプリのテストの書き方の紹介でした。

わかりやすいテストは、他の開発者がアプリケーションを理解するための重要な手助けとなるため、どうやってテストをわかりやすくなるかというのを次の5つの原則で説明されました。

If, if, if
- テストの結果に対する仮説(≒前提条件)を書くことから始めましょう
Use common, everyday words
- 難しい表現を使わず、ユーザーが目にするままの語彙を使いましょう
Write less with theorems and new terms
- アサーションには、実装の詳細ではなく振る舞いで名前をつけましょう
All your basis are belong to us
- まとまった単位のアサーションには、名前をつけましょう
1 picture = 1000 words
- スナップショットを利用すると、長々と説明するよりもわかりやすい場合があります

話者による関連記事も合わせて読むと理解が深まるでしょう。
Part 3の記事が、まさに今回の発表の内容でした。

Replaying Real Time Live Video Events with Ember by Claudia Hinkle and Chris Ng

LinkedIn 所属の Claudia Hinkle と chrisrng による、オンラインビデオサービスでの実装の工夫の話でした。
このサービスではリアルタイムの動画が配信され、ユーザーが投稿したコメントがリアルタイムに共有される仕組みです。

取り扱いの難しい点はとしては次のようなものがあるとのことでした:

動画は遅延し得るので、コメントはクライアントが見ている時点での時間に紐付ける必要がある
コメントは、動画が盛り上がっている部分に集中するので遅延が発生しやすい
コメントのユーザーが表示している位置によって、タイムラインの自動スクロールのON/OFFを切り替えるための実装が難しい*3

どの点も現実世界の難しさと向き合っており、ひとつひとつに対処していく話は現実感がありとても興味深いものでした。

発表資料が公開されているので、詳しくはこちらをご参照いただければと思います。

www.linkedin.com

Ember Data 2019 by Chris Thoburn

LinkedIn のメンバーであり、Ember Data のコアコミッターでもある Chris Thoburn による、今後の Ember Data の話でした。

Ember Data はいままで小さな決定を繰り返してきた*4ので、APIの細部にいまひとつなことが多いそうです。

そこで、"Project Trim" と呼ばれる、API をより洗練させていくためのプロジェクトが進行中だそうです。

[QUEST] 🌲Project Trim 🌲 · Issue #6166 · emberjs/data · GitHub

これはコンポーネント間の依存をなくし Tree Shaking を有効にします。
またそれだけではなく、ユーザーが独自のコンポーネントと Ember Data を組み合わせて利用できることを意味します。特に現実の効果としては、データストアとして JSON API を利用しない場合に不要なソースコードを削減する余地があります。

今回の発表では、Ember Data 上で独自のデータスキーマを定義するライブラリの紹介もありました。

GitHub - hjdivad/ember-m3

Ember Data の未来とはまさに"今"なので、ぜひプロジェクトに参加してくださいと締めくくられました。

最後に

今回の EmberFest では、プロダクションでの Ember のバージョンのアップデートの話や、大規模の Ember アプリの話が多かったように感じました。
また、わたし自身は普段あまり耳にすることのない*5 PWA の話は、より実践的な内容だったと感じました。

Ember 本体については、なるべく ECMAScript 標準のやり方に沿った形*6で成長を進めていこうとしているように感じます。
ビルドツールについても、いままでのデフォルトだったBroccoliからwebpackとの統合を視野に入れたものとなりJavaScriptコミュニティへの統合が感じられました。

Emberは決して全世界で流行っているとは言えないフレームワークですが、継続的に開発が進められており、また根強いファンがいるというのは喜ばしいことだなと感じます。
もし来年こそ参加したいという方がいらっしゃれば、ぜひご一緒しましょう!!*7

なお、今回の EmberFest は YouTube で playlist が公開されているので、ご興味のある方はご覧ください。

www.youtube.com