Backbone.jsで作られた10のWebアプリケーション[ケーススタディ]
スパゲッティコードに絡まったことはありますか？あなたのアプリにもっと健康的なものを食べさせるのですか。もしそうなら、Backbone.jsで何ができるかを覗いてみてください。. 背骨 Model-View-Controllerデザインパターンに大まかに基づいているJavaScriptライブラリですが、Controller要素がないので、MV *フレームワークと呼ぶ方が良いです。.
それはあなたが作るのを助けます 高速で洗練されたデータ豊富な 1ページのWebアプリで ユーザーロジックとは別のデータロジック, データをDOMに結び付ける手間が省けます。 アプリの成長に合わせて拡大縮小. Backboneはデフォルトで任意のRESTful APIと同期するため、RESTful JSONインターフェイスを介してクライアントサイドのアプリケーションを既存のサーバーサイドのAPIに簡単に接続できます。.
この記事では、Backbone.jsが将来のWebアプリケーション・プロジェクトにもたらす可能性を把握するのに役立つように、Backboneライブラリーの機能を利用する10個のWebアプリケーションを検討します。.
1.トレレロ
トレレロ プロジェクトを掲示板、チェックリスト、カード、カードリストに整理し、チームメンバーとのコミュニケーションのための会話などのツールを提供するオンラインコラボレーションおよびプロジェクト管理アプリです。.
TrelloはBackbone.jsを使ってゼロから構築されました。 BackboneはフロントエンドのHTML5 History APIとMoustacheのロジックレステンプレート言語と連携して動作します。 Trello Tech Stackのすべての要素は、次のように設計されています。 更新を簡単に処理できる保守可能なクライアント, そして サーバーと動的に再同期する DOMイベントが発生したとき.
Trelloは、カードやメンバーなどのオブジェクトにはバックボーンモデルとビューを、関連モデルにはバックボーンコレクションを使用します。たとえば、リスト内のカードなどです。開発者も 独自のクライアントサイドモデルキャッシュを構築 にとって より速い更新 もっと 効率的なコード再利用.
フォースクエア
おそらくあなたはすでに聞いたことがある フォースクエア, 世界中の友達と会場を共有することを可能にする人気のあるロケーションベースのソーシャルネットワーキングアプリ.
FoursquareのコアJavaScript APIはバックボーンモデルを中心に構築されています。 Foursquare APIのモデルクラス （Users、Venues、Check-insなど）はBackbone Modelクラスのサブクラスです。 メソッドとプロパティを継承する.
コードの実装はこのようにスケッチすることができます。 fourSq.api.models.Venue = fourSq.api.models.Model.extend（…）; はい、そうです、Backboneによって開発者は次のことが可能になります。 良いオブジェクト指向のJavaScriptを書く.
バックボーンビューは、Foursquareアプリでも役割を果たします。これらの機能は、ユーザーエクスペリエンスを向上させるためです。 ホームページマップとリスト. バックボーン以外に、FoursquareのJavaScript APIも利用しています。 jQuery、Underscore.js （これはBackboneの唯一の難しい依存関係です）、そしてClosure Compiler.
3.ベースキャンプカレンダー
ベースキャンプ, 人気のプロジェクト管理アプリは、カレンダー機能にBackbone.jsを使用しています。.
Basecamp Calendarの主な設計目標は、それを可能にするインタラクティブなインタフェースを作成することでした。 直感的なグループスケジューリング 可能な、そして ミリ秒で自分自身を更新します. Basecampカレンダーでは、バックボーンはモデル（クライアントサイドデータ）が更新されるたびにビューをECO（Embedded CoffeeScript）テンプレートにレンダリングします。.
興味深いのは、開発チームがBasecamp全体をBackbone.jsの主な使用例である単一ページのアプリケーションにするのではなく、実際にその利点を利用できるカレンダー機能のライブラリだけを利用したことです。 Backboneを使用して完全なシングルページアプリケーションを構築する必要は必ずしもないことを説明します。適用できる場所を慎重に検討することをお勧めします。.
Backboneアンチパターンの詳細を読んで、アプリ全体にBackboneが必要かどうかを判断してください。.
4. Flowdock
フロードック グループチャット、チームの受信トレイ、リアルタイムのワークフローなどの機能を提供するリアルタイムのチームコミュニケーションアプリです。
FlowdockはBackbone.jsの上にゼロから構築されました。開発チームの主な課題は、リアルタイムのメッセージとワークフローを可能にすることでした。デフォルトではBackbone.jsはRESTfulインターフェースを介してサーバー側に接続します。これはリアルタイムのデータフローを可能にしません。したがって開発者 Socket.ioリアルタイムエンジン経由でメッセージを保存することにしました REST APIの代わりに.
これを達成するために彼らは カスタムメソッドを書いた 呼ばれる Backbone.sync. Socket.ioはJavaScriptライブラリでもあるので、JavaScript駆動のフロントエンドとバックエンド（Node.js）間の通信をシームレスにします。 Flowdockは主にサーバー側のRailsアプリケーションですが、Socket.io接続を処理する独立したNode.jsバックエンドを持っています。.
フロードック リアルタイムのユーザーエクスペリエンスを向上させる さらに機能的なリアクティブプログラミングを可能にする便利なJavaScriptライブラリであるBacon.jsを使用してください。のEventStreams機能 Bacon.js Flowdockがそのバックボーンモデルとコレクションを最新の状態に保つのに役立ちます。.
カクテル検索
カクテル検索 Backbone.jsの非常に単純な実装のコードを調べる機会を提供するオープンソースのアプリです。バックエンドはPythonで動いていますが、私たちにとって興味深いのは アプリのscript.jsファイル.
コードを調べると、Model-View- *フレームワークの非常に基本的な構造がわかります。 モデル で定義されている カクテル Backbone.Model親クラスのデフォルト設定を変更しないクラス バックボーンコレクション 検索結果用、および3つのバックボーンビュー用に、それぞれに新しいメソッドが追加されています。 バックボーン。 親クラス.
index.htmlファイルを見れば、開発者がBackbone.jsを追加した方法とその依存関係を見つけることができます。, Underscore.js そして jQuery 頭の部分で。 jQueryが必要である間、Underscore.jsはBackboneの唯一の難しい依存関係です バックボーンビューを利用してDOMを操作したい場合 （これはカクテル検索アプリの場合です）.
6.ビットバケット
ビットバケット Githubに似たソースコードホスティングおよびコード管理アプリです。その背後にある会社であるAtlassianは、JIRA商用問題追跡ソフトウェア、その他の主力製品でBackboneを使用しています。.
アプリケーションでBackbone.jsを徹底的に利用している間に、開発チームは、彼らがBackboneから逃したことのいくつかを見つけました。彼らは遭遇しました Backbone.jsのゆるい定義規約に起因する多くのサイレント障害. これは基本的にモデル、コレクション、ビューを意味します 公開するカスタムイベントを必ずしも定義する必要はありません. そしてそれが十分でなければ、モデルは常にを定義しさえしません。 属性 彼らは露出する.
この寛容な性質は多くの開発者に愛されているがAtlassianチームには愛されていない機能なので、彼らはBackbone.Braceと呼ばれる独自のBackbone拡張を開発しました。 ライブラリにmixinと自己文書化された属性とイベントを追加します.
同じことに悩まされているのであれば、Backbone.Braceを自分のアプリに追加することもできます。これはBitbucket自体でホストされているオープンソースプロジェクトです。 BitBucketはフロントエンドでバックボーンビューをレンダリングするためにTrelloのようにMoustacheテンプレート言語を使用します。.
7. SoundCloud
SoundCloud あなたが録音したり、アップロードしてあなた自身のオーディオを共有したり、無料で音楽を聴くことができる人気のオーディオ配信プラットフォームです。.
SoundCloudの開発者たちは、Backbone.jsをモバイルアプリケーションのフロントエンドフレームワークとして最初に使用しましたが、非常に気に入ったのでデスクトップWebサイトのクライアント側でも採用しました。彼らのBackstageブログで彼らはBackboneの能力を持つフレームワークの彼らの選択を説明します まだ柔軟性を保ちながら、強固な構造基盤を提供.
スケーリングはオーディオストリーミングアプリの主な関心事であり、SoundCloudはそれを認めています “実装より組織と関係があります” よくまとまっているが軽量のバックボーンは、理想的な選択肢となります。.
SoundCloudはフロントエンドでバックボーンビューをレンダリングするためにHandlebarsセマンティックテンプレートシステムを利用します.
8. AirBnB
AirBnB 世界中で約200カ国でさまざまなタイプの宿泊施設を見つけて予約できる、めちゃくちゃ成功したコミュニティ市場です。
AirBnBは、SoundCloudと同じようにBackbone.jsをモバイルアプリで最初に使用しましたが、後にはWishlists、Match、Search、Communities、PaymentsなどのWebアプリ機能でますます利用されるようになりました。 AirBnBはBackboneをとても気に入っていたので、フロントエンドで使うことに決心しただけでなく、バックエンドでライブラリを実行することを可能にしたかったのです。.
彼らは後で サーバーサイドのBackboneライブラリ、Rendrをオープンソースにしました。 そしてGithubのページで入手可能です。 RendrはNode.jsで書かれており、それは以下の哲学に従います。 “最小限の構造を課すことで、開発者は自分のアプリケーションに最適な方法でライブラリを使用できます。” バックボーン自体と同じように
AirBnBの技術スタックにもっと興味があるなら、RailsバックエンドからThe Holy Grail of the Holy Grailへの彼らの旅についての彼らのブログ記事を読んでください。 クライアント側とサーバー側の両方でのバックボーンの同時利用.
9.フル
フル あなたが米国にいる場合、あなたは無料でテレビ番組や映画を見ることを可能にするビデオストリーミングアプリです。.
HuluはBackbone.jsを利用して、映画愛好家のためのシームレスで高速なユーザーエクスペリエンスを構築しました。あなたがナビゲートしながら、インターフェイスはあなたが穏やかな移行でアプリを素早く移動することを可能にします。背骨 ユーザーの帯域幅を節約 スクリプトや埋め込みビデオとして リロードされない ずっと.
HuluはバックエンドでRailsエンジンを動かしています、そして面白くて有益な話が好きなら、あなたはについて読むことができます。 開発者チームはどのようにしてjQueryと絡み合ったのか 最後にに変更することを決定する前に より組織化されたバックボーンフレームワーク.
Backbone.jsがHuluに許可しました レンダリングをサーバー側からクライアント側に段階的に変換する 既存のRailsバックエンドの危険な書き換えをする代わりに.
10.数え切れないほど
数えて iPhone、Android、またはWindows Phoneアプリケーションのパフォーマンスをブラウザウィンドウから直接追跡できるリアルタイムのモバイル分析アプリケーションです。.
最近のスーパースターを含む、プラットフォームの開発に使用されたオープンソースソフトウェアの注目すべきリストを見てください。Nginx、MongoDB、サーバーサイドのNode.js、そしてもちろんフロントエンドのBackbone.js.
Handlebarsセマンティックテンプレートライブラリを多用して、バックボーンモデルで作成およびロードされたデータを表示するバックボーンビューをレンダリングします。 Countlyは開発者にやさしいアプリです：それは簡単に拡張できるだけでなく、そのドキュメンテーションは同じく開発者にこのようなチュートリアルを提供します コアのバックボーンクライアントの上にカスタムプラグインを構築する方法.
編集者注： これは、Hongkiat.comのためにAnna Monusによって書かれました。アンナは、科学、人工知能、そして破壊的な技術に関心を持つWeb開発者およびコードライターです。.
