Socket.ioとBackbone.jsによるSingle Page Application 概要編 - Qiita
はじめに スマートフォン向けFX情報サイトsmartfx.minkabu.jpをSocket.ioとBackbone.jsを使って今話題のSinglePageApplication(SPA)で構築しました。 想像していたよりも簡単にできたので、共有してみます。 Socket.ioを使う理由 マーケット情報は共通の情報のため、Socket.ioのBroadcastができ、かつ更新時のみ送信できるという性質がサーバにもクライアントにもやさしいです。 Backbone.jsを使う理由 SPAというと最近ではAngular.jsばかりが目立ちますが、Backbone.jsを選んだのは下記理由です。 1.AngularJSの場合は圧縮され最小化された状態で約36K、Backboneは6.4Kなのでスマホの回線を考えると、Backbone.jsのほうが優位です。 2. 拡張性もBackbone.jsは
Socket.ioとBackbone.jsによるSingle Page Application 実装編 - Qiita
-- app.js |- public - index.html | |- backbone - spa.js | template - timer.jst.ejs | |- time.jst.ejs | |- app - router - sample_router.js.coffee |- models - timer.js.coffee |- views - timer_view.js.coffee |- time_view.js.coffee var express = require('express') var Timer = require('./timer') var path = require('path') var http = require('http') var app = express(); var Mincer = require('mincer'); v
ビューが画面に現れたら処理を実行する - Qiita
Backbone.js Advent Calendar 2日目! 勢い良く走り始めたBackbone.js Advent Calendarですが、初日に引き続き2日目もビューに関連する話題です。 ビューの遅延評価をしたい Backbone.jsに限らずサービスを高速化するために、遅延評価を行いたい場面は沢山あります。たとえば画像掲示板のシステムを作っていたら、いきなり画像全てを読み込もうとするとサーバにも負荷がかかりますし、何よりユーザが表示しない画像まで読み込むのは無駄です。他にもTwitterのようなタイムラインに対して、一番下までユーザがスクロールしたら自動的に続きを読み込むような処理を行いたい場合もあるでしょう。 という訳でユーザのスクロールをトリガーにしてイベントを発火させられるBackbone.LazyViewというのを作ってみました。 taak84u9/backbone-la
RailsアプリでBackbone.jsを使う - Qiita
Backbone.js Advent Calendar 5日目 Backbone.jsの本家ドキュメントにtodoリストをブラウザのLocalStorageを使って保存するチュートリアルがあります。 todo.js 今回は、このtodoアプリのバックエンドとして、Ruby on Railsを使うように変更してみたいと思います。 Backbone.jsとサーバの通信 Backbone.jsはModelやCollectionの内容をサーバと同期するための手段を提供してくれています。標準で用意されているBackbone.syncはサーバがRESTfulと呼ばれるインタフェースを提供していることを前提に動作しますが、同期する方法を自作することも可能で、例えば上記のtodoリストのチュートリアルではLocalStorageにデータを保存するために、Storeという名前のオブジェクトを自作して用いてい
Modelの一対多を実装する - Qiita
例えば、Blogテーブルにuser_idカラムがあり、これがUserテーブルへの外部キー制約になっているような場合、WebフレームワークではBlogモデルにuserフィールドを持たせて、そのフィールドにメッセージを送ると、参照しているUserモデルのインスタンスを返してくれるようになっている場合が多いと思います。 このような関係をBackbone.jsで実現しようと思い、つい以下のように書きたくなってしまうかも知れません。 var User = Backbone.Model.extend({}); var author = new User({id: $(".user_id").html()}); var Blog = Backbone.Model.extend({}); var entry = new Backbone({text: $(".text").html(), user_id:
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: { "
Backbone.js入門 「Router と History」 - Qiita
閲覧上の注意 この記事で対象としているバージョン0.5.3は結構古いので注意してください。 その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。 （追記ここまで） Backbone.js入門の最終回は Router と History です。 Backbone.js入門 「MVC」で述べたように、URL が変更された時に発生する popstate または hashchange イベントを監視してルーチンを起動するのが Router の役目です。History は Router の裏方で頑張る実体で、直接操作することはほとんどありません。 URL が変更された時にアクセスされるのが Router なので、Rails 的な MVC の枠組みで言えばコントローラと言えますし、伝統的な MVC で言えば全てのアンカーとブラウザの進退ボタンを
Backbone.js入門 「View」 - Qiita
閲覧上の注意 この記事で対象としているバージョン0.5.3は結構古いので注意してください。例えばこの記事の内容でいえば、$elプロパティなどが追加されています。 その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。 （追記ここまで） Backbone.js Advent Calendar もようやく折り返し地点。 そんな節目のエントリで取り上げるのが Backbone.js プログラミングでの最重要登場人物の一人である View です。 前回のエントリで Backbone.js では View が各種の処理を起動するということを説明しました。 今回は View を使って、イベントハンドリングを行う方法について主に解説していこうと思います。 View と DOM tree View の役割は大きく分けて2つあります。 特定の DOM
Backbone.js入門 「Model」 - Qiita
閲覧上の注意 この記事で対象としているバージョン0.5.3は結構古いので注意してください。例えばこの記事の内容でいうと、validateに失敗したときに発生するイベントは'error'から'invalid'に変更されています。 その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。 （追記ここまで） 今日のテーマは Model です。 MVC に関する回で Backbone.js における MVC は Rails などの WAF における MVC よりは伝統的な MVC に近い というようなことを書きました。 しかしながら、モデルに関して言えばどちらの場合も大差ありませんから、気分が楽です。 Rails におけるモデルである ActiveRecord が OR マッパーとしての役割を持っていたり、データのバリデーション機能を持っていた
Backbone.js入門 「View と Model の連携」 - Qiita
閲覧上の注意 この記事で対象としているバージョン0.5.3は結構古いので注意してください。 その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。 （追記ここまで） 今日のテーマは View と Model の連携です。 基本的なパターン 例えばブログサービスを作っているとします。 おそらく Blog というモデルや、それを表示するページのビューを作ることになると思いますが、記事の全文を表示するビューや複数の記事をリスト形式で表示するビュー、編集ビューなどなど、一つのモデルに対して複数のビューが存在するのが一般的ではないでしょうか。 このように View と Model は基本的に 多対一 の関係になっています。 そのため、Model の属性が変更されたら、複数の View に変更を通知・反映しなければなりません（でなければユーザはシ
【あえて英語記事オンリー】Backbone.jsを学べるページまとめ - Qiita
Backbone.jsの情報を探していると英語の記事に当たることが多いので、ここはむしろ割り切って最近読んだBackbone.jsについて英語で書かれたページをまとめておきました。 なんか英語の記事読むと「やってやったぜ！」という気持ちにもなるし シンプルなスライドもの Client-side MVC with Backbone.js ごく初歩の「なんでBackbone使ったらいいの？」から、アーキテクチャの説明や利用例、モデルの関連を作るtipsなどページ数は多いけどどんどん読める系。 Unit Testing JavaScript and Backbone.JS BackboneのModelとかViewとかを単体テストする方法を分かりやすく紹介してくれるプレゼンテーションスライド。 前半でごく明快にテストが必要な理由や箇所、後半にBackboneを使うとどういう風に簡単できれいに書ける
Backbone.jsにUIバインディング機能を付ける拡張ライブラリ「Epoxy.js」 - Qiita
Backbone.jsはJavaScriptのMVCフレームワークの中では縛りが緩めで柔軟な使い方ができる(らしい)一方、ModelとDOM要素を関連付けて自動的に連動するような便利機能、いわゆるUIバインディングをサポートしていません。Modelが変更された時に発火されるイベント先で自力でDOMに反映させたり、DOMでのイベント発生時にModelに反映させる処理を自力で書く必要があります。 そんなBackbone.jsのUIバインディングライブラリを自作しようと思い情報収集をしていたら、すでに完成度の高いライブラリがあったのでちょっと試してみました。 ダウンロードやその他詳細はこちらの本家でどうぞ。 http://epoxyjs.org/ 日本語の情報はほぼなかったので(まあ本家のサンプルコード見るだけで大体分かるっていうのもあると思いますが)、ここでは簡単な使い方とかをメモしておこうと
Backbone.jsなどのライブラリのgetter, setterがダサい理由と、その解消方法 - Qiita
Backbone.js, Knockout.js, Ractive.jsどれも素晴しいライブラリですが、モデル等のデータの取得・設定する構文がとてもダサいのが難点ですよね。 Backbone.jsとRactive.jsはget("hoge")やset("hoge", value)という形式。 Knockout.jsは少しマシでhoge()で取得しhoge(value)で設定する形式。 こういうラッパーを必要とする理由はKnockout.jsのドキュメントにわかりやすく書いています。 JavaScript には getter/setter 構文がありますが、残念ながら全てのブラウザで実装されているわけではありません(IEｹﾞﾌﾝｹﾞﾌﾝ...)。 そこで互換性を確保するため、ko.observable オブジェクトの実態は function です。 ドキュメント | Knockout.js
スマホ用のSingle Page Applicationサイトを作る上での問題点と対応 - Qiita
はじめに スマートフォン向けFX情報サイトSmartFXをBackbone.jsを使ったSPA(Single Page Application)で運用しています。 前回はSinglePageApplicationにおける問題点と対応として全般的なSPAの問題を書きましたが、今回はスマホに特化したスマホサイトをSPAで構築するにあたって気づいた問題点とその対応方法を共有したいと思います。 画面遷移に思いのほか時間がかかる！ SPAで構築しているのに、次の画面の遷移が思っているより遅い感じがします。 サーバにアクセスしていないハズなのに。。 原因 clickイベントの発動にスマホの場合は時間がかかるためです。 スマホの場合はタッチがリンクを押したいのか、それともスクロールしたいだけなのかを判定するために一定時間経過しないとクリックと判定しません。 が、その判定時間がかなり長いものと思われます。
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 本体。これがないと始まらない
Marionette.jsを使おう - Qiita
Help us understand the problem. What is going on with this article? この記事は「Gunosy Advent Calendar 2014」の21日目の記事です。 Gunosyの広告配信チームでJavascriptおじさんをやってるaitaです。 最近Gunosyに入社しました。フロントエンドエンジニアではない。 今年はMarionette.jsをいろんなとこで使ってたので、Marionette.jsの紹介します。 Marionette.jsの各コンポーネントについては、 ドキュメントとソース読むのが一番だと思うので書きません。 何故、Marionette.jsを使うのか AngularJS使いたくないからというのは半分冗談です。 僕がMarionette.jsを使い始めた理由は、Backbone.jsがもともと採用事例があっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
動的に作られる要素にイベントをbindする - Qiita
BakboneJSだってDOMとModelをBindingしたい！ - Qiita
Backbone(Marionette)でハマりそうな気がしなくもないパターン - Qiita
angular・backbone・knockoutの比較／印象まとめ - Qiita
