Loading article…
 | |
| 原作者 | イェフダ・カッツ |
|---|---|
| 開発者 | エンバーコアチーム |
| 初回リリース | 2011年12月8日 |
| 安定リリース | 5.12.0 [1]
/ 2024年9月30日 |
| リポジトリ | Ember.js リポジトリ |
| 書かれた | JavaScript |
| オペレーティング·システム | クロスプラットフォーム |
| タイプ | JavaScript ライブラリ |
| ライセンス | MITライセンス[2] |
| Webサイト | エンバーjs.com |
.svg/500px-Free_and_open-source_software_logo_(2009).svg.png){kind=logo}
Ember.jsは、コンポーネントサービスパターンを利用するオープンソースの JavaScript ウェブフレームワークです。これは、他のシングルページアプリエコシステムパターンの一般的なイディオム、ベストプラクティス、パターンをフレームワークに組み込むことで、開発者がスケーラブルなシングルページウェブアプリケーションを作成できるように設計されています。[3]
Emberは、 HashiCorp、DigitalOcean、Apple Music、Square、Inc.、Intercom、Discourse、Groupon、LinkedIn、Live Nation、Ghost、Nordstrom、Twitchなど多くのウェブサイトで使用されています。[4] [5] [6]主にウェブ用のフレームワークと考えられていますが、ハイブリッドアプリパターンを利用すると、Emberでデスクトップアプリケーションとモバイルアプリケーションを構築することもできます。[7] [8] [9] Emberデスクトップアプリケーションの最も注目すべき例は、 iTunesデスクトップアプリケーションの機能であるApple Musicです。[10]
Emberの商標はTilde Inc.が所有しています。[11]
歴史
2011年12月、SproutCore 2.0フレームワークは、アプリケーションフレームワークとSproutCore 1.0のウィジェットライブラリ間の混乱を減らすために、Ember.jsに名前が変更されました。[12] [13]このフレームワークは、 jQuery、Ruby on Rails、SproutCoreコアチーム のメンバーであるYehuda Katzによって作成されました。
デザイン
同社によれば、Ember は次の 4 つの主要なアイデアに基づいて設計されたとのことです。
- ウェブアプリケーション
- Ember は、クライアント側アプリケーションの問題に対するソリューションを提供することを目指しています。[引用が必要]
- 生産性の向上
- Emberは開発スタックを提供するツールセットの1つのコンポーネントです。Ember CLIはアドオンを使用してアプリケーション構造とビルドパイプラインを提供します。[14] [15]
- 安定性
- Emberは下位互換性を優先し、フレームワークを進化させながらもそれを維持することを目指しています。[16]
- 将来のウェブ標準
- Emberは、Promise、 Webコンポーネント、ES6構文など、JavaScriptとWebに関する標準を採用しました。 [17] [18] Emberの共同創設者の1人であるYehuda Katzは、JavaScript言語の将来のバージョンを担当する委員会であるTC39のメンバーです。[19]
Ruby on Railsと同様に、Emberは設定よりも規約（CoC）とDRY（ Don't Repeat Yourself）原則に従います。[20]非常に柔軟性が高く、独自の考えを持つフレームワークとして説明されています。[21]
コンセプト
同社によれば、Emberは5つの主要コンセプトから構成されている。[22]
- ルート
- Ember では、アプリケーションの状態は URL によって表されます。各 URL には、ユーザーに表示される内容を制御する対応する「ルート オブジェクト」があります。
- モデル
- すべてのルートには関連するモデルがあり、アプリケーションの現在の状態に関連付けられたデータが含まれています。[23] window.fetchを使用してサーバーからJSONオブジェクトをロードし、それらのオブジェクトをモデルとして使用することもできますが、ほとんどのアプリケーションではEmber Dataなどのモデルライブラリを使用してこれを処理します。
- テンプレート
- テンプレートはアプリケーションのHTMLを構築するために使用され、HTMLBarsテンプレート言語で記述されます。（HTMLBarsはHandlebarsのバリエーションであり、文字列ではなくDOM要素を構築します。）[24]
- コンポーネント
- コンポーネントはカスタム HTML タグです。その動作は JavaScript を使用して実装され、外観は HTMLBars テンプレートを使用して定義されます。コンポーネントはデータを「所有」します。また、ネストすることもでき、アクション (イベント) を通じて親コンポーネントと通信できます。Polymer などの他のコンポーネント ライブラリも Ember で使用できます。[25]
- サービス
- サービスは、ユーザーセッションなどの長期間保存されるデータを保持するためのシングルトンオブジェクトです。[26]
- Emberは依存性注入、宣言型一方向データフロー、追跡プロパティ、自動更新テンプレートも提供します。[27]
Ember ソフトウェア / アドオン
Ember.js は、Ember コア チームによって構築およびサポートされている完全なフロントエンド スタックの 1 つのコンポーネントです。
エンバーCLI
Ember-CLIは、ビルドツールに構成よりも規約を重視することを目的としています。ブロッコリーをベースにしたコマンドラインユーティリティで、このコマンドを実行すると、ember new <app-name>デフォルトのスタックを持つ新しいEmberアプリが生成されます。[28]これにより、次のことが実現されます。
- 標準的なファイルとディレクトリ構造
- ライブリロード機能を備えた開発サーバー
- テストフレームワーク[29]
- 依存関係はnpm経由で管理されます。[30]
- ES6/ES7+ 構文サポート (Babel を使用)
- 資産管理（結合、縮小、バージョン管理を含む）[31]
その他の機能は次のとおりです:
- ブループリントは、アプリケーションに必要なモデル、コントローラ、コンポーネントなどを作成するためのコードジェネレータです。カスタムブループリントも作成できます。[32]
- アドオンは、Ember CLIの機能を拡張する機能を提供します。[33]アドオンはと入力してインストールされます
ember install <addon-name>。現在約2000のアドオンが利用可能です（2018年現在）[34]これには、CoffeeScript、LESS、Sass、Compass、Mochaのアドオンが含まれます。[35]
エンバーデータ
ほとんどのEmberアプリケーションは、オブジェクトリレーショナルマッピング（ORM）の多くの機能を提供するデータ永続化ライブラリであるEmber Dataを使用しています。 [36]ただし、Ember DataなしでEmberを使用することも可能です。[37]
Ember Dataは、クライアント側モデルをサーバー側データにマッピングします。その後、JSON API仕様を実装するRESTful JSON APIを介して、レコードとその関係を構成なしでロードおよび保存できます。 [38]ただし、特定の規則に従う必要があります。[39]ただし、アダプターとアドオンを使用することで、サーバーと連携して構成することもできます。[40] JSON APIには、PHP、Node.js、Ruby、Python、Go、.NET、Java用のサーバーライブラリ実装があります。[41] Java- Springベースのサーバーへの接続もドキュメント化されています。[42]
Ember Dataの最初の安定バージョン（Ember自体に合わせて1.13とラベル付け）は2015年6月18日にリリースされました。[43]
エンバーインスペクター
Ember Inspectorは、Emberアプリケーションをデバッグするための拡張機能で、現在Mozilla FirefoxとGoogle Chromeウェブブラウザで利用可能です。[44] [45]機能には、現在レンダリングされているテンプレート、コンポーネント、ビューを確認する機能、バインディングと計算されたプロパティを計算するUIを使用してEmberオブジェクトのプロパティを確認する機能、コンソールからアプリケーションのオブジェクトにアクセスする機能などがあります。[46] Ember Dataを使用すると、各モデルにロードされたレコードも確認できます。
- オブジェクト インスペクターを使用すると、Ember オブジェクトおよびクラスの実行時コンテンツを表示および編集できます。
- ビュー ツリーには、レンダリングされた Ember アプリケーションの構造が視覚的に表示されます。
- [ルート] タブでは、ルーターの状態とルートを表すために使用される URL を決定して追跡できます。
- [データ] タブには、アプリケーション内のモデルと各モデルにロードされたレコードが表示されます。
- 情報タブには依存関係のバージョンが表示されます。
- 「非推奨」タブでは、例外をトリガーしない非推奨警告のスタック トレースを表示できます。
- Promises タブでは、非同期操作を通じてコードをトレースできます。
- コンテナ タブは、どのオブジェクトがロードされたかを確認するために使用されます。
- レンダリング パフォーマンス タブは、Ember アプリケーションの速度を低下させている原因を特定するためのものです。
ファストブート
FastbootはEmberのコアチームによって作成されたEmber CLIアドオンであり、Ember開発者がNode.jsでアプリを実行できるようにします。この機能により、エンドユーザーはHTMLとCSSをすぐに確認でき、JavaScriptはバックグラウンドでダウンロードされ、完全に読み込まれた後に引き継がれます。[47]
リキッドファイア
Liquid FireはEmberアプリケーションにアニメーションサポートを提供します。[48]機能には、ルート間や単一ルート内のモデル間のアニメーション遷移が含まれます。これは、ビューレイヤーの実装の詳細から明確に分離された空間ルート関係を固めるためのDSLを提供します。例としては、新しい画面がブラウザの端からスライドインするように見えるように画面遷移をアニメーション化することが挙げられます。[49]
リリースプロセス
リリースの完全なリストと詳細な変更ログについては、リリース ブログを参照してください。
リリースサイクル
Emberは、 Google Chromeの急速なリリースサイクルに触発されて、6週間のリリースサイクルに従っています。[50]
Ember 2.0以降、コアチームがサポートする関連プロジェクトのリリースは調整され、Ember自体とバージョン番号を共有するようになりました。[51]
アップグレードと下位互換性
Emberはセマンティックバージョニングの慣例に従っています。[52]特に、破壊的な変更は1.0、2.0などの重要なバージョン番号でのみ導入されます。ポイントリリース（1.1、1.2...）で新機能が追加されたり、機能が廃止されたりすることはありますが、パブリックAPIへの破壊的な変更は導入されません。2015年には、アップグレードプロセスを効率化するためのツールも開発されていました。[53]
このプロセスに加えて、2.0 リリースへのアップグレードに関する問題を軽減するために、いくつかの手順が実行されました。
- 2.0 の主要な機能はすべて早期に導入され、アップグレードによって発生する多くの問題を軽減するために複数のリリースに分散されました。
- 削除された機能のほとんどは、アドオンを通じて引き続き利用できます。
このプロセスは、Emberのコア原則である「停滞のない安定性」に従っており、 AngularJSなどの同様のプロジェクトのアップグレード計画とは対照的です。[54]
今後の展開
プロジェクトのステータスは、コアチームの会議議事録で追跡できます。[55]ただし、Ember への大きな変更は、Request For Comment プロセスを経ます。[56]これにより、Ember コミュニティは新しい提案に対するフィードバックを提供する機会を得られます。注目すべき RFC には次のものがあります。
- エンジン。エンジンは、ユーザーの観点から複数の論理アプリケーションを1つのアプリケーションにまとめることを可能にします。現在は実験的なアドオンとしてリリースされています。[57] [58]
- リリースサイクルの改善。とりわけ、Ember CLI に変更を加えて「svelte builds」をサポートすることを提案しており、これにより非推奨の機能や未使用の機能を削除することになる。[59]
- アウトレットフォーカス。Emberをデフォルトでアクセス可能にする。このRFCは、スクリーンリーダーを使用する人々のユーザーエクスペリエンスを向上させることを目的としています。[60]
スポンサーシップ
AngularJS ( Google )やReact ( Facebook )など、1つの主要企業の支援を受けている他のプロジェクトとは異なり、Ember.jsにはさまざまなスポンサーや支援者がいます。これには、 Yahoo!、LinkedIn、Bustleなどのフレームワークのユーザーが含まれます。[61] [62]
参考文献
- ^ 「リリース 5.12.0」。2024年9月30日。 2024年10月4日閲覧。
- ^ "ember.js/LICENSE". GitHub . 2017年4月27日閲覧。
- ^ Aghassipour, Alexander; Chacko, Shajith (2012 年 11 月 30 日)。「エンタープライズ アプリはシングル ページ デザインに移行中」。TechCrunch。
- ^ 「 Grouponで Ember.js を使って構築」。TalentBuddy。2015年10 月 15 日閲覧。
- ^ 「Discourse-Built with Ember.js」。GitHub 。 2015年7月15日閲覧。
- ^ 「インターコム」。
- ^ 「Ember - 一度書いて、どこでも実行」GitHub 2015年7月5日。
- ^ 「Ember でより優れ たデスクトップ アプリを構築する」。SpeakerDeck。2015年 7 月 5 日。
- ^ 「Wicked Good Ember 2015 講演 - Ember でより優れたデスクトップ アプリを構築する、ビデオ」。2015 年 7 月 5 日。
- ^ 「Built with ember - Apple Music」。BuiltWithEmber 。2016年7月21日閲覧。
- ^ 「Ember.js: 法的事項」。emberjs.com 。 2019年2月14日閲覧。
- ^ 「SproutCore 2.0 が Ember.js になる」The H . 2011 年 12 月 13 日。
- ^ 「Amber.js (旧 SproutCore 2.0) は現在 Ember.js です」。yehudakatz.com。2011 年 12 月 12 日。
- ^ 「Ember CLI」 。 2018年12月15日閲覧。
- ^ 「Ember Addons」 。 2018年12月15日閲覧。
- ^ Asay, Matt (2014 年 11 月 4 日)。「Innovating Fast And Slow: EmberJS は「Web を破壊する必要はない」と主張」。ReadWrite。2015年6月 18 日閲覧。
- ^ 「JavaScript Promises」。Mozilla 。2015年6月18日閲覧。
- ^ 「Web コンポーネント」。WebComponents。2015年6 月 18 日閲覧。
- ^ 「TC39: メンバー」. TC39Wiki . 2015年6月18日閲覧。
- ^ 「新製品の開発2か月後にEmber.jsから学んだこと」Solid、2014年12月16日。 2015年11月3日閲覧。
- ^ 「業界の専門家が Ember.js を使用する主な理由 と、それを自分で導入する方法」。TalentBuddy。2015年10 月 14 日閲覧。
- ^ Frank Treacy. 「5 Essential Ember 2.0 Concepts You Must Understand」. EmberIgniter . 2016年7月27日時点のオリジナルよりアーカイブ。2015年8月31日閲覧。
- ^ 「Ember.js - モデル: 概要」。Emberjs。2014年1月 21 日閲覧。
- ^ Jackson, Robert. 「HTMLBars」. GitHub . 2015年2月18日閲覧。
- ^ 「Ember プロジェクトに Polymer を追加する方法」ProgramWithErik 2015 年 3 月 27 日。2015年8 月 11 日閲覧。
- ^ 「Ember Services チュートリアル」。ProgramWithErik。2015年7 月 26 日。2015 年7 月 27 日閲覧。
- ^ レイ、バンゴ (2013 年 3 月 14 日)。 「Ember.js の入門」。ネッツ+。
- ^ 「Ember CLI」 。 2018年12月15日閲覧。
- ^ 「Ember テスト」 。2018年12 月 15 日閲覧。
- ^ 「Ember CLI による依存関係の管理」。2018 年12 月 15 日閲覧。
- ^ 「Ember CLI アセットコンパイル」 。2018年12 月 15 日閲覧。
- ^ 「Ember CLI ブループリント」 。2018年12 月 15 日閲覧。
- ^ 「Ember CLI Writing Addons」 。 2018年12月15日閲覧。
- ^ 「Ember Addons ディレクトリ」. emberobserver.com . 2018年12月15日閲覧。
- ^ 「Ember CLI の概要」 。2018年12 月 15 日閲覧。
- ^ 「Ember Data README」。GitHub 。 2013年12月4日閲覧。
- ^ 「Ember without Ember Data」。Evil Trout。2013年3月23日。 2014年1月2日閲覧。
- ^ 「JSON API 仕様」 。2015年6 月 16 日閲覧。
- ^ 「Ember.js モデル」.エンバージス。2015 年6 月 26 日に取得。
- ^ 「Ember Observer-Data」。EmberObserver 。2015年6月16日閲覧。
- ^ 「JSON API 実装」。JSON API。2015年6 月 26 日閲覧。
- ^ 「Ember.js と Spring Framework の統合」SpringEmber 2014 年 8 月 20 日2015 年6 月 26 日閲覧。
- ^ 「Ember Data 1.13 リリース」。2015 年 6 月 18 日。2015 年6 月 18 日閲覧。
- ^ 「Firefox アドオン - Ember Inspector」。Mozilla。2015年8 月 5 日閲覧。
- ^ 「Chrome ウェブストア - Ember Inspector」。Chrome ウェブストア。2014年2 月 18 日閲覧。
- ^ 「Ember Inspector」。Ember.js 。 2015年6月28日閲覧。
- ^ 「Fastboot の内部。Node で DOM を偽装する」。Emberjs。2015年1 月 8 日。2015 年6 月 19 日閲覧。
- ^ 「 Liquid Fire: Ember アプリのアニメーションとトランジション」。GitHub。2015年6 月 19 日閲覧。
- ^ 「liquid-fireを使用したEmber.jsのアニメーション」。airpair.com。2020年11月8日時点のオリジナルよりアーカイブ。2015年7月10日閲覧。
- ^ 「新しい Ember リリース プロセス」。2013 年 9 月 6 日。2015年6 月 19 日閲覧。
- ^ 「Ember Project at 2.0」。2015年6月16日。 2015年6月19日閲覧。
- ^ 「Ember API Freeze」。2013年1月18日。 2015年6月19日閲覧。
- ^ 「Ember Watson Addon」 。 2015年6月19日閲覧。
- ^ 「Angular 2.0 発表」。2014 年 10 月 29 日。2015年6 月 19 日閲覧。
- ^ 「Ember コアチーム会議議事録」Emberjs . 2015 年7 月 5 日閲覧。
- ^ "Ember RFC プロセス".エンバージス。2015 年6 月 18 日に取得。
- ^ 「Ember Engines」。EmberAddons.com 。2016年1月19日閲覧。
- ^ 「エンジン」.エンバージス。2015 年2 月 3 日に取得。
- ^ 「リリース プロセスの改良 RFC」。Emberjs。2015年6 月 18 日閲覧。[永久リンク切れ ]
- ^ 「Outlet Focusing RFC」。Emberjs。2016年9月24日時点のオリジナルよりアーカイブ。2015年6月18日閲覧。
- ^ “エンバースポンサー”.エンバージス。2015 年6 月 18 日に取得。
- ^ 「Yahoo 主席ソフトウェアエンジニア、マイク・ノース氏へのインタビュー」Emberweekend . 2015 年8 月 10 日閲覧。
さらに読む
- Builes, Adolfo (2015). Ember-cli 101. Leanpub.定期的に更新されます。
- Erdi, Balint (2015)。「Ember.js でロックンロール」。balinterdi.com。定期的に更新されます。
- ホワイト、マシュー (2015)。Ember 2 で大胆な Web アプリを実現。The Pragmatic Programmers, LLC。ISBN 978-1-68050-078-3。
外部リンク
- 公式サイト