EmberFest 2018 参加レポート day 1
去年に引き続き、今年のEmberFest参加レポートです。 残念ながら日本では Ember.js の話を聞く機会は少ないので、ここぞとばかりにアムステルダムでのカンファレンスに参加してきました。
今回のカンファレンスで、自分がとくに印象に残ったトークをまとめました。
Opening Keynote by Tom Dale - @tomdale
Ember.js のコアコミッタであり、Yehuda Katz氏とともに Ember.js の開発をリードする Tom Dale 氏の基調講演からのスタートです。 2019 年の Ember の姿についてのお話でした。
Angle Bracket
Ember 3.4 では Angle Bracket の導入に伴い Component の API が整理されました。
これによって、ユーザーからは Component への引数と HTML への引数が区別されて((これまで HTML 要素の更新しようとすると、Compoonent の attributesBingins という Ember 独自の属性を設定する必要があり、初学者にとってわかりづらいのが悩みのタネでした))、より直感的に Component を使うことができるようになりました。
Glimmer
Glimmer の進化によって、いままでの実装の都合による制限が取り除かれました:
- ルート要素に
id="ember...とclass="ember-view"が付与されなくなりました - ルート要素として
<div>が生成されなくなりました- その結果、template が複数のルート要素を持てるようになりました
tagName,className,elementIdなど、Ember が独自に提供していた HTML 操作用の属性を使うことなく HTML の属性を直接指定できるようになりました
今後はいままで直感的ではなかった Computed Property の定義を改善予定とのことです。
Ember Octane
生産性とパフォーマンスの向上を目的とした取り組みを新しいコードネーム(Ember Octane)の元で開始するとのことです。
Emberは古くから開発されているフレームワークだということもあり、これまでレガシーな仕組みが多々ありました。*1
すでに getter / setter、ES5 用のポリフィルなどの古い機能は削除されましたが、まだまだレガシーな仕組みは残っています。
今後はそれらを徐々に廃止し、ES 標準の classes、 decorators や async / await といった機能で置き換えていくことを目的としています。
感想
Ember は古くから開発されているフレームワークですが、互換性を保ったままモダンなフレームワークとして生まれ変わりつつあります。
これから新しく Ember.js を始めるユーザーにとって、今どきの ES の記述で違和感なく開発できるのはすばらしいことですね。
From the Browser to the Home Screen: PWAing Your Ember App by Kevin Pfefferle - @kpfefferle
PWA開発にあたって話者が実践している取り組みの紹介でした。 こちらは、話者がデモ用に用意したEmberFestのスケジュールアプリです。
なお、話者はPWAのパフォーマンス計測にLighthouseを使っているそうです。
また、Emberアプリのために次のAddonを使っているとのことです。
- Fastboot
- Service Worker (Cache)
- Web App Manifest
これらの取り組みとひとつひとつ適用することで、Lighthouseでの計測結果は100点になったそうです。
感想
PWAのための具体的な取り組みを聞くことができました。 これからEmberでPWA開発を始めようという方にはとても参考になりそうな発表でした。
ELS - the Ember Language Server byTobias Bieniek - @turbo87
Ember コミッタでもあり、Ember CLI チームとしても活躍されている Tobias Bieniek 氏による発表です。 Ember アプリを開発するにあたって、エディタによる気の利いた補完は生産性を高める上で非常に重要なものとなります。 とくに Ember は CoC に則ることで高い生産性を提供するフレームワークなので、JavaScript が動的言語…とは言えある程度は規約に対して静的解析できるはずです*2
そこで、話者が着目したのが Language Server です。
このプロトコルに沿って API を実装すると、対応しているクライアント(主にエディタを想定しています)からはコード補完などエディタを便利にする機能を提供する余地が生まれます。
話者が現在鋭意実装中なのが Ember Language Server です。
今回の発表では、Ember Language Serverを実装する上でに工夫をお話されました。
- Handlebars のテンプレートは、Glimmer が提供する機能を使えば AST に変換できるので、現在のカーソル位置でなのを補完するべきか(HTML タグなのかコンポーネントなのかヘルパーなのか)が定まる
- ただし、テンプレートを記述している途中など文法エラーになる場合はまだうまく対応できていない
- ユーザー定義のヘルパーは、
app/helpersの下のファイルを探索することで変換候補に追加できる - Ember.js コアやアドオンも含めて、定義元を開く機能も提供できる
一方、Language Server Protocol で未サポートのため、今はまだ追加できない機能もあるとのことでした。
- model / controller / template など、ファイルの種類に応じたアイコンの出し分け
- 関連ファイルの提案
- model / route / template など、「定義元」の候補が複数想定される場合にそのすべてをユーザーに提示する
感想
発表中に話者から、利用しているエディタについての質問がありました。
Vim と Emacs が同程度に少なく、VS Code ユーザーが大半だったのが印象深いです。
Ember アプリの場合エディタがサポートする機能が増えると覚えておく必要があることが減り、新規で開発を始める開発者に優しくなると感じています。
これからの進捗がとても楽しみですね。
Going Realtime with Ember by Michael Lange - @DingoEatingFuzz
マイクロサービス間でのデータ同期・バッチ処理・通知を目的としたクラスタスケジューラであるNomadの紹介でした。 現在は話者の所属企業で開発が進められています。
感想
デモがよくできていて、nomad コマンドを経由してジョブの実行を行うことで、瞬時にEmberアプリにデータが同期され画面に通知が表示される様子は感慨深いものがありました。
ユーザーひとつだけで完結しないEmberアプリを開発する場合には、なんらかのタイミングでのデータ同期が必要でこれを自前で構築するという場面は多々あるかと思います。
Nomad によってこの基盤が汎用的に使えるようになると、開発がとても捗るのではないでしょうか。
Ember Meetup
この日の夜は、アムステルダムの Ember コミュニティによって Ember Meetup が開催されました。
I'm at Ember Meetup pic.twitter.com/EAaIqQjica
— Ryunosuke Sato (@tricknotes) October 11, 2018
とくになにかに取り組んだというわけではないですが、地元のコワーキングスペース(?)でみんな思い思いにビール片手に喋っていました。
以上、一日目の参加レポートでした。 二日目の様子はこちらをご覧ください。
