Backbone.js 使い方メモ - Qiita
Backbone.js を勉強した時のメモ。 Backbone.js とは CoffeeScript, Underscore.js などの作者である Jeremy Ashkenas が作っている JavaScript フレームワーク（jashkenas/backbone | Github）。 クライアントサイドで MVC を実装するための下地（骨組み）を提供する。 Angular.js がフルスタックで様々な機能が用意されているのに対して、 Backbone.js はあくまで Backbone（背骨）であり、骨組みを用意するのみ。 双方向のデータバインディングなどの機能はない。 肉付けをするのは、プログラマのお仕事。 機能が少ない分、覚えることは Angular.js に比べれば少ない、と思う。 Hello World 用意するファイル Backbone.js 本体。これがないと始まらない
Backbone.js入門 「View と Model と Collection の連携」 - Qiita
閲覧上の注意 この記事で対象としているバージョン0.5.3は結構古いので注意してください。 その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。 （追記ここまで） Backbone.js入門シリーズも佳境に差し掛かってきました。 View と Model の連携は既に取り上げたので、今回は特に Collection と View Model との連携に主眼を当てて記述したいと思います。 View と Collection の連携 復習の意味も込めて、View と Model の連携方法をもう一度記述すると、大枠として次のようになります。 // モデルの定義 Hoge = Backbone.Model.extend({}); // ビューの定義 HogeView = Backbone.View.extend({ events: { "
さよなら CoffeeScript - mizchi's blog
prototype.js が jQuery に置き換えられた時、開発者が気づいたのは、自分に本当に必要だったのはprototypeのメソッド拡張などではなく、クエリエンジンだったということ。 coffeescriptが当初、熱狂的に支持された背景はなんだっただろう。今思えば、それはアロー記法とクラス構文だったと思う。 javascriptの関数型への憧れ、prototypeベースの限界 javascript は断じて関数型言語ではないが、他の言語と同じぐらい関数型言語に憧れていたのも、また事実だろう。しかしビルトイン関数が高階関数を要求するデザインにしては function というキーワードはながすぎたし、その function が暗黙に作り出す this スコープの複雑な振る舞いも開発者の悩みの種だった。「あらゆる関数スコープで状態を持つことが"できすぎる"」という割れ窓だった。 ES5
大規模Reactアプリケーションを構築するためのベストプラクティス | POSTD
Sift Scienceで製作にReactを使い始めてからほぼ1年になりました。その間、Backbone+Reactという フランケンシュタインのような 複合アプリケーションを、Reactコンポーネントからなる、かなり大きな1つの階層に育て上げました。この記事では、UI不和を最小限にしながら、コードベースをスケーリングするために役立った技法とベストプラクティスを紹介します。また、一般的なコンポーネントのデザインパターンについて、いくつか説明します。 この記事が皆さんの時間の節約と精神衛生の維持に役立ち、UIが複雑になってもReactコードベースの保全性を維持する（破綻するのではなく）ための新しいツールを提供できれば幸いです。 componentDidUpdateで、もっとできる Reactの本質は、DOMの更新というタスクを命令的なものから宣言的なものに変えるということです。他のタイプの命
JavaScriptフレームワーク比較用サンプルアプリ 「TODO-Module-Marionette」を作る - フルスタックエンジニアに
今回は前回作ったTODO-Module-BackboneにMarionetteを導入していきます。 Backboneは薄いライブラリなので、オレオレ実装になってしまうことが多いです。 Marionetteを導入するとBackboneのベストプラクティスに乗っかれるので、大規模アプリには非常に有用です。 例えば 自動で描画をしてくれるので、自分でrenderメソッドを定義する必要がない ビューの管理をしてくれるので、破棄し忘れてゾンビViewが生まれる危険性が減る ヘッダー領域・メイン領域などを管理するRegion機能がある などさまざまなメリットがあります。 前回の記事 www.full-stack-engineer.com デモアプリとソースコードはこちらに公開しています。 TODO-Module-Marionette ソースコード 前回同様このクライアントアプリの動作確認にはAPIが必
Underscore.jsがペライチの開発に欠かせない理由 - ペラログ
こんにちは。ペライチ開発エンジニアの香月(@katsukii)です！ ペライチには「お手伝いメンバー」といって平日の夜と週末、開発を一緒にやってくれている方たちがいます。 そして、そのエンジニア同士で技術をキャッチアップするために、定期的に開催しているのがペライチの技術勉強会です。 4月12日の勉強会では、ペライチで利用しているJavaScriptライブラリの一つ「Underscore.js」を取り上げました。 上記スライドにもあるとおり、Underscore.jsは配列やオブジェクト等のデータ操作をはじめとする、100以上の便利関数が詰まったユーティリティライブラリです。 複雑な処理もシンプルに記述できて、可読性が上がるため、JavaScriptを多用するペライチの実装には、なくてはならないものとなっています。 今後も継続して開催する予定のペライチ技術勉強会。 次回の予定は、5/24(日
入門 React
Facebookが開発したJavaScriptライブラリ「React」の解説書。本書では、サンプルアプリケーションを用いてReact.jsのすべての側面を解説します。「第I部 基礎」でReactコンポーネントの作成と合成を学び、Reactの基本的な使い方を理解します。「第II部 応用」ではワンランク上のコンポーネント作成について学びます。「第III部 ツール」ではReactと共に使用して堅牢なアプリケーションを実装するためのツールについて学びます。最後の「第IV部 実践」では大規模なアプリケーション開発に必要な知識やWeb以外のユースケースについて解説します。読者はコンポーネントベースの最新のフロントエンド開発についての体系的な知識と技術を身につけることができます。日本語翻訳版の本書ではReactの開発環境の構築手順とAPIリファレンスを巻末付録として収録。 目次 まえがき 第I部 基礎
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
小さいライブラリを採用する - mizchi's blog
僕がJavaScriptでライブラリを選定する際、迷ったら小さいものを使う。その理由について。 前提 前提として、枯れた環境で大きいフレームワークができるのは理解できるし、メリットも大きい。あるいは言語それ自身と区別できないぐらいに発達したフレームワークに依存するのも理解できる。RubyにとってのRailsとか、ErlangのOTPとか(いや、これは詳しくないけどそうなんだろうなっていう予想なんだけど)。 危険信号 今のJS界隈は動きが早すぎて、何に依存するのも危ない。とくにフレームワークと銘打たれたものは、でかすぎてどれも危険信号を放っている。 数年後、廃れてしまったフレームワークで開発し続けるのは、僕個人としてもあまり関わりたくないし、現場の離職リスクとして数字に出るだろうし、採用後の教育コストの問題になる。だいたいそういうものは元の設計者もいなくなるものだ。プロダクトの死を意味する。
ScaleOut | Supership
日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipの“BE SUPER”なストーリーをシェアしています。
Backbone.js Todosを読み解く - console.lealog();
というわけで色々Backbone.jsについて見てはいるものの、いざ自分で作ってみると上手くいかない・・。 ようはどの単位でViewとModelを紐付ければ良いかわからないんですよねー。 というわけで、Todoリストのサンプルからそのヒントを得ようという試み。 参考：Backbone.js Todos Backbone.js Todosについて 見ての通りBackbone.jsで作られたサンプルアプリ。 Todoリストのデータの保管にはLocalStorageを使ってて、別のライブラリを読み込んでます。 ソース全部 せっかくなので、ソースについてるコメントを和訳しときます。 // An example Backbone application contributed by // [Jérôme Gravel-Niquet](http://jgn.me/). This demo uses a
Backbone.js Collection.fetch() による一覧画面の描画 | 開発メモるアル
以前書いた、Backbone.js Model.save()によるPOSTデータをPHPで読み込むに続いて、 Backbone.jsを使ったリソース参照に関する記事です。 Backbone.jsを使った一覧表示サンプル Backbone.jsのCollectionとModelを使って、Collection.fetchの結果を画面に一覧表示するサンプルを作ってみました。 一覧表示サンプル サンプルの動作 「表示」ボタンをクリックすると、ユーザーリソースにGETリクエストを送信 JSON形式のユーザー一覧データを含むレスポンスが返ってくる backbone_fetch_test.jsがレスポンスを解析して画面に表示する サンプルを構成するファイル サンプルを動作させているファイルの一覧と、ファイルの内容です。ブログ用にコメント多めに入れてます。 ファイル一覧 backbone-fetch-te
Backbone.jsを薦める3つの理由
Backbone.js(http://documentcloud.github.com/backbone/)を2,3ヶ月触ってみて、導入して良かったことをまとめます。 Backbone.js単体での威力はそこまでではないかもしれませんが、Server側も含めた設計思想を絡めて考えると大きな効果が期待できます（サーバー側も含めた構造改革が全体的に必要になるとは思いますが・・・）。 ## ViewとControllerの結合強度低下 = Viewのアプリ化 ### viewとcontrollerが1対1対応だった頃 Rails単体で作成している場合、Viewにロジックが入れられない以上、 そのViewで必要な変数などは、全てControllerに書く必要がありました。 この状態では、ControllerがViewによって処理内容を変更する必要があり、結合強度が高くなってしまっていました。 この
Backbone.js 日本語リファレンス
object.once(events, callback, [context]) object.listenTo(other, event, callback) object.stopListening([other], [event], [callback]) Backbone.Model Backbone.Model.extend([properties], [classProperties]) Backbone.Model を継承した新しいモデルを作ります。 properties インスタンスメンバを定義します。 var User = Backbone.Model.extend({ say: function () { console.log("Hello."); } }); var user = new User(); user.say(); //-> Hello. classPr
backbone.jsでsyncを呼んだ時にアクセスされるURLの変更 - podhmoの日記
backbone.jsで作成したモデル(Backbone.Model.extendで作成したオブジェクト)はsave(),destroy(),fetch(),create()などのメソッドを持っている。これらは、呼ばれると裏側でsync()メソッドを呼び出している。このsync()がサーバ側に問い合わせて、永続化が行われると言う仕組み。デフォルトでは以下のような形でREST形式で問い合わせが行われる。 モデルのthis.urlが/api/fooの時の例 モデルが呼ぶメソッド url HTTPのメソッド create /api/foo POST save(既にデータが存在している場合) /api/foo PUT destroy /api/foo DELETE fetch /api/foo FETCH backbone.jsのモデルは、このように同じURLに対して、HTTPメソッドを分ける形で
Angular, Ember, Backbone：どのJavaScriptフレームワークを選ぶべきか？ | ReadWrite Japan
Angular, Ember, Backbone：どのJavaScriptフレームワークを選ぶべきか？ JavaScriptフレームワークの選択は、開発者の好みよりもプロジェクトとの相性が大切だ。 JavaScriptベースのアプリケーションやウェブサイトのアイデアを思いついたとして、次にしなければならないのが正しいオープンソース・フレームワークを選ぶことだ。 この記事を読んでいるということは、あなたはまだ初心者や見習いの開発者かもしれない。あるいは自分のアイデアの開発を外部に委託しようと考えているのかもしれない。Angular、Ember、Backboneの名前ぐらいは聞いたことがあるかもしれないが、それらがどういったもので、なぜそれらがウェブ開発の助けになるかについてまでは知らないかもしれない。 開発者はJavaScriptを様々なウェブ・アプリケーションに使用している。それはJa
Backbone.js で HTML の View と Model を分離してみるよ - スタジオ・アルカナ技術ブログ
はいどうも～。Japanese Schoolgirlsが好きなエンジニアの吉田です。 以前「jQuery.tmpl() で HTML の View と Model を分離してみるよ」という 記事を書きましたが、引き続きJavaScriptによるMVCシリーズ第二弾！ 今回は、Backbone.jsでViewとModelを分離させてみるという試みです。 ここ最近、JavaScriptのMVCライブラリだと「JavaScriptMVC」や「Knockout.js」 「Backbone.js」などがぼちぼちと知名度を挙げてきているような印象です。 (※注)正確にはKnockout.jsはMVCではなくMVVM(Model-View-ViewModel)ですね。 そんな中SoundCloudなどでも使用されているBackbone.jsがとても気になって いたので、どのような感じで利用できるのか試し
AngularJSの素晴らしさを整理してみる - pochi's weblog
久々のブログになります。 3年ほどJavaScriptを利用した開発をしてきましたが、最初はなぜJavaScriptでMVCフレームワークが必要なのかいまいちわからず、いろいろ試行錯誤してきました。 今日はタイトルの通りAngularJSが素敵だなということを書きたいのですが、よくあるベストプラクティスみたいなものではなく、自身がどのように思考回路を経由してここに行き着いたのかという経験談を記しておきたいと思います。 ちなみに私のJavaScript力は高くありませんのであしからず・・・。 jQuery 昔々、JavaScript MV(V)Cみたいなものがなかった時代、JavaScriptでリッチなものを作ろうとなるとjQueryやDojoのような低レイヤーのフレームワークが主に利用されていました。 その当時簡単なシングルページアプリケーションを作っていましたが私はjQueryを採用しま
Backbone.js + Marionette.js / AngularJS編in「Rails勉強会@東京第88回」
普段仕事をしていると、自分のやっている案件や会社内でのプロジェクトのことはわかりますが、「Railsの他社での設計方法」みたいなことを知る機会って中々ないですよね。そんな時にオススメしたいのがRails勉強会@東京です。月1回(?)の開催で前回が88回目だったので、Rails 1.xxのころから、7年近く継続している勉強会だそうです。 この勉強会のスタイルは、参加者の興味があるテーマを集めて人気のあるテーマにしたがってフリーディスカッションやハンズオンを行うというものです。参加者が主体的に発言できたり、実際の現場でどんなカタチで開発しているかがラフに聞けてしまいます＾＾ 今回は10/19(土)の勉強会の中で、僕が参加したJavaScript Frameworkの議論を参考にさせていただきつつ、周辺の資料をまとめてみました！ (2013/11/13) アシアルさんのブログのAngularJS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - marionettejs/backbone.marionette: The Backbone Framework
