大江戸Ruby会議05 の Ninja Talks です。 http://regional.rubykaigi.org/oedo05/

1. Ember コミュニティ とわたし
大江戸Ruby会議05 - 2015.11.08
佐藤竜之介(@tricknotes)

2. 自己紹介
• 佐藤竜之介
• 札幌から来ました
• えにしテックという会社で働いています
• フロント寄りの Web 系プログラマ
• 普段は Rails + Ember.js でお仕事

3. GitHub/Twitter: @tricknotes

4. よろしく
お願いします

5. https://twitter.com/a_matsuda/status/657464064935723009

6. https://twitter.com/a_matsuda/status/657493757449732096

7. 考える
• 大江戸Ruby会議
• 地域Ruby会議
• エモいの OK
• Rails 界隈の話も OK
• 普段やっていることを!
• そうだ、Ember.js の話をしよう

8. 今日のテーマ
「Rails を使った web 開発」というコ
ンテキストでのフロントエンド
JavaScript の選択について

9. 背景
• Rails 開発者も JS を意識せざるをえなくなってきた
• JS のライブラリはたくさんあるけど何を使えばいいの?
• 半年ごとにトレンドが変わる(ように見える)
• つらい
• 今日はちょっと趣向を変えて、コミュニティ的な側面から考え
てみる

10. 今日は Ember コミュニティ とわたしのお話
• 他のライブラリとの比較の話はしない
• React はスルー
• Angular もあえて見ない
• それぞれのライブラリで、解決したい問題とアプローチが違う
• Ember コミュニティの話と、そしてわたしがコミュニティどう
関わっているか

11. 今日お話しすること
• Ember.js の背景
• Ember.js とわたし

12. 第1部
Ember.js の背景

13. Ember.jsA framework for creating
ambitious web applications

14. For examples...

15. Travis CI

16. Idobata

17. Ember.js
• 歴史
• SproutCore が起源
• 2011 年から開発開始
• 2013 年に v1.0.0 リリース
• 現在のバージョンは v2.1.0 (2015-11-08 現在)
• いわゆるフルスタックフレームワーク
• Routing, Model, Template などをサポート

18. フルスタック
バージョン: 2.1.0
• Data binding … ２つ以上のデータを同期させる仕組み。
• Template … オブジェクトの値を変更すると、自動で画面に反映
• Router … URL とアプリケーションを対応付ける
• Component … カスタムHTMLタグ。入れ子にして使う。
• Service … セッションに依存するデータなどを保持
• Ember Data … いわゆるモデル。API と通信してデータを保持す

19. その他の特徴
• FastBoot(Server-Side Rendering)
• Glimmer Engine(Virtual DOM)

20. チーム
• 創始者: Yehuda Katz(@wycats)
• コミッター: 30人くらい
• コアコミッター: 14人くらい
• その他公式ライブラリを含めると 50 人くらい

21. @wycats

22. @wycats
• OSS コミュニティを育てるのが上手い
• 道を作ってあとはひとに託すスタイル
• Rails の AR::Base.scope
• Bundler
• いまは Rust と Ember にコミットしている
• Ember には要所要所で豪快にコミットする

23. Ember.js について
• コミュニティ主導
• 定例の core team meeting
• 昔は議事録が公開されていたが…
• 各コンポネート毎にエキスパートがいる
• 今後の展望はブログに公開: http://emberjs.com/blog/
• 新機能の提案は RFC で: https://github.com/emberjs/rfcs

24. リリース
• Channels: release / beta / canary
• 今後は少し変わる予定 (ref: "Release cycle improvements")
• 定期的に新バージョンをリリース
• feature flag
• エコシステム
• private API を拡張するようなプラグインも大事にしている
• 互換性を大事に。API 変更は deprecation warning を表示する

25. エコシステム
• 開発ツール: Ember CLI
• rails コマンドみたいなツール
• ジェネレータ、ビルド、テスト、などをサポート
• 拡張: Ember Addon
• Ember 版 gem みたい
• Ember CLI でインストールする

26. Ruby と Ember.js
• @wycats says: "optimized for Developer Happiness"
• Ruby / Rails と同じく、Ember.js もプログラムではなくプログラ
マーにフォーカス
• 実は @wycats 以外のコミッターも Ruby やってたひとが多い
• その昔、ビルドツール群は Ruby 製だった
• SproutCore は gem で配布されてた
• $ gem install sproutcore

27. 実際に Ember.js でコードを
書いていても、Rails 開発で
感じる快適さを感じる
(※ あくまで個人の感想であり、効果効能を保証するものではあり
ません)

28. ここ最近のフロントエンド JavaScript
• ようやく JavaScript で本格的なアプリケーションを開発するた
めの土壌が整ってきた
• パターン
• ビルドツール
• JavaScript 自体の仕様
• まだまだ過渡期。これといった一強はない。
• お互いに影響を与えながら進化している(ように見える)

29. ここ最近のフロントエンド JavaScript
• 新陳代謝が活発
• 日々新しいライブラリが生まれ続けている
• Ember は今後の展望を公開している
• マイルストーンを設定して着実に進んでいる
• コミュニティの文化を選択基準に入れてみてもよいでのは
• 良し悪しではなく、好み。馴染めるか。

30. 第2部
Ember.js とわたし

31. 出会いから今に至るまで
たまたま Ember やってるチームに入った(2013.1)

32. 2013 年当時の Ember
• 当時は Ember.js 1.0.0.pre4
• Breaking Change 真っ盛り
• 勉強がてらコードとドキュメントを読む
• 少しづつパッチを送るようになる

33. Before v1.0.0
• Ember 創世期
• 1週間に1回くらい Breaking Change
• ある日、クロスブラウザのサポートが大変という話を耳にする
• IE はあまりメンテされてなさそう
• IE6~8 対応とか始める
• 直しても数日で壊れるのでまた直す
• 意外とエッジケースの漏れが見つかったり

34. 創造と破壊
• 大きな機能追加やリファクタリングの直後はだいたい IE で壊れ
ている
• IE 以外でもたまに壊れていることがある

35. ポイント
• 特殊な環境で動かしてみるとおかしなところを見つけやすい
• IE とか
• Sprockets(ExecJS) 経由とか
• 自然に使えるように…
• 先んじてハマる
• 直すチャンス

36. https://speakerdeck.com/a_matsuda/the-world-of-ruby

37. 継続する
• いろいろ直していると、いつの間にか中のひとになっている
• ember-rails メンテナ
• Ember.js + Rails + ES6 にも挑戦
• なぜか Babel のメンバー(Ruby 方面担当)になっていたり

38. 実際ソースコードに手を入れたり会話してみるとわかること
• 現状の課題
• これからやりたいこと
• どこまでできているか
フレームワークに依存しないトレンドみたいなものも得られる

39. モチベーション
• 自分の道具を本家につっこむ -> ember-middleman
• トレンドの移り変わりがよくわかる
• これから Ember 始めるひとが、バグを踏まない状態だと嬉しい

40. まとめ
• ライブラリの選択基準のひとつにコミュニティを含めてみても
よいのでは
• ちょっとだけでもコミュニティに関わってみると、得られるも
のも多いですよ

41. 参考資料
• http://blog.yodersolutions.com/why-i-recommend-emberjs-over-
angularjs/
• https://speakerdeck.com/wycats/ember-dot-js-at-the-east-bay-
ruby-meetup
• http://shoptalkshow.com/episodes/147-tom-dale/
• http://wazanova.jp/items/1637
• https://frontsidethepodcast.simplecast.fm/16
• http://wazanova.jp/items/1639