Backbone.js jQuery

気になるBackbone.jsのプラグインとTips

投稿日:2013年1月29日 更新日:

 

随時更新中

気になるBackbone.jsのプラグイン

backbone.marionette

github.com/marionettejs/backbone.marionette

Backboneで使える細かい部品をコンポーネント化して再利用可能にするコンセプトかな

オライリー本でも説明が1章あったので後で見てみる

addyosmani.github.com/backbone-fundamentals/#backbone.marionette

  • 典型的なrenderとかは書かなくても書いてあるのでコードを書く量を減らせる
  • ゾンビViewといわれるメモリ管理の問題をRegionという概念でうまく処理する
  • LayoutというUIを定義するViewを組み合わせることで可読性が高くなる
  • CompositeViewで部品化

ここで指摘されてたのは多分こんな感じ

似たようなコードをたくさん生産するような場合は生産性があがるのかも

 

グダグダですけど、13分くらいからBackbone.jsのアプリ(Mongodbのデータを操作する)をMarionetteに変えていくライブコーディングが始まります

そのあと、バージョンがアップデートしてないとかで、ホントに始まるのが15分くらいから

グダグダだから、逆にゆっくり進むのでわかりやすいという面もなきにしもあらずか

 

Marionette.jsまとめ その1 Application, Controller, AppRouter

Marionette.jsまとめ その2 View, ItemView, CollectionView

Marionette.jsまとめ その3 CompositeView, Layout, Region

backbone.marionetteのViewsについて

introduction to Marionette.js (jscafe14) 日本語

Marionette.js(Backbone.js)のチュートリアル with yeoman その1(準備からサーバー側実装まで)

Marionette.jsのView周りについてを中心にSingle Page Applicationを作るときの話

普通のrailsアプリのBackboneにMarionette付けて思った事

チュートリアルとか

davidsulc.com/blog/category/backbone-js/backbone-marionette/

Leanpubで販売中

Backbone.Marionette.js: A Gentle Introduction

Structuring Backbone Code with RequireJS and Marionette Modules

Backbone.Marionette.js: A Serious Progression

 

“Backbone.Marionette.js: A Gentle Introduction” を今更ながら勉強してみた

“Backbone.Marionette.js: A Gentle Introduction” を今更ながら勉強してみた その2

“Backbone.Marionette.js: A Gentle Introduction” を今更ながら勉強してみた その3

“Backbone.Marionette.js: A Gentle Introduction” を今更ながら勉強してみた その4

“Backbone.Marionette.js: A Gentle Introduction” を今更ながら勉強してみた その5

Backbone.Marionetteのコード読んで日本語コメントをつけた

leader22.github.io/backbone.marionette-ja/

backbone.syphone

フォームデータのシリアライズ

github.com/MrHayato/backbone.syphon

github.com/marionettejs/backbone.syphon

例えば、こういうフォームでnameを決めておけば

こういう風にシリアライズしてくれる

こうやってモデルに突っ込むだけでOK

 

backbone-forms

github.com/powmedia/backbone-forms

Modelにスキーマを書くとそれにあったフォームのViewを作ってくれる

問題があって今のところ0.9.2までしか対応してないもよう

作者がもうすぐ次のバージョン出すってよ

新バージョン出てたので触ってみました

Backbone-formsをさわってみた

Backbone-Responsive-CSS3-Page-Transitions + iScroll-Plugin

github.com/techjacker/Backbone-Responsive-CSS3-Page-Transitions

github.com/techjacker/Backbone-Responsive-CSS3-Page-Transitions-iScroll-Plugin

かっこいいページ遷移を探してたらあった.

Routerを専用のやつに置き換える

backgrid

backgridjs.com/

github.com/wyuenho/backgrid

機能的なテーブルがかける

backbone-pageable

上のbackgridで使ってるページネーションを助けるプラグイン

github.com/wyuenho/backbone-pageable/

Backbone.keys

github.com/nervetattoo/backbone.keys

簡単にキーボードを使う

Backbone.Notifier

backbone-notifier.e-w.co.il/

ダイアログのほかに通知とかスピナーとか

Backbone.ModelBinder

github.com/theironcook/Backbone.ModelBinder

モデルバインディング ほかにrivets.jsも

たぶんモデルの数字を変えるとすぐViewの数字が変わるというアレを実現する

backbone-rerational

github.com/PaulUithol/Backbone-relational

1対多とかの関連性を表現できるらしい 日本語情報があるのがうれしい

antoviaque.org/docs/tutorials/backbone-relational-tutorial/

backbone.jsでrails3とかのhas_manyとかhas_oneとかを実装

backbone-relationalをJasmineでテストしてみた

backbone-relationalで関連するコレクションをRails3.2のAPIに投稿〜accepts_nested_attributes_for

backbone.epoxy

epoxyjs.org/

エレガントなデータバインディング

Backbone.jsにUIバインディング機能を付ける拡張ライブラリ「Epoxy.js」

backbone.stickit

nytimes.github.io/backbone.stickit/

データバインディング。NYTimes社。国内記事が多い。

Backboneでデータバインディング(stickit)

backbone.stickit を使って Backbone でデータバインディング

Ractive.js

reactiveではなくractive

mustacheテンプレートをつかったUIライブラリ.

2wayバインディング、SVGなど容易に拡張可能.

Backboneと組み合わせやすい

www.ractivejs.org/

Ractive.js入門

Ractive + Backbone

vue.js

流行になりつつあるデータバインディング

vuejs.org/

軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた

データバインディングについてVue.jsと Backbone.stickitを比較する

Angularそっちのけで、Vue.jsについて所感

軽量MVVMフレームワークのVue.jsを試してみた

Backbone.Chooser

github.com/brian-mann/Backbone.Chooser

chosenされたmodelやcollectionを簡単にトラッキングできる

ナビゲーションで選ばれたタブをトラッキングするとか、リストで選ばれたアイテムをトラッキングするとか、フォームでマルチセレクトされたアイテムをトラッキングするとか

Backbone UI

Backbone UI はBackboneのModel、Collectionを簡単にUIコンポーネントで表現することができる

perka.github.io/backbone-ui/

Thorax

大規模ウェブアプリケーションのためのBckbone.js + Handlebarフレームワーク

thoraxjs.org/

github.com/walmartlabs/thorax

Animating View in Backbone JS

Viewをアニメーションさせる小さなプラグイン

Animating View in Backbone JS

チュートリアル

Backbone.js入門 (全22回)

ぼくらのドットインストール

dotinstall.com/lessons/basic_backbonejs

RailsCasts

gem “backbone on rails”での構築例

Backbone on Rails Part 1

Backbone on Rails Part 2

Build a Contacts Manager Using Backbone.js: Part 1

net.tutsplus.com/tutorials/javascript-ajax/build-a-contacts-manager-using-backbone-js-part-1/

基本から説明してる

30分くらいですぐできるらしい

コードはたしかに短かった

バージョンは0.5.2 ちょっと古いかも

 

Anatomy of the backbone

www.codeschool.com/courses/anatomy-of-backbonejs

zombies on railsのCodecademyの教育コース ビデオ+オンラインコード+スライド

いつも思うけどビデオがかっこいい 最初の方だけ無料 みてない

 

Learn Backbone.js on Rails

 

learn.thoughtbot.com/products/1-backbone-js-on-rails

 

こちらは$49

結局買ったけど読んでない 買うとGithubのこの本専用プロジェクトのメンバーにしてくれる仕組みが面白い

137ページ薄いけど内容は濃い

 

CucumberのからみとかTDDの例とか

 

Backboneへの記述は少し古いのかも

 

Backbone Books

 

オライリー本のtodoアプリの次に載ってるサンプル 本棚で絞込みを実現

 

www.atinux.fr/backbone-books/

 

こっちがmarionetteバージョン

 

davidsulc.github.com/backbone.marionette-atinux-books/#search/Neuromarketing

 

Backbone.js explained in CoffeeScript.

 

www.scriptybooks.com/books/backbone-coffeescript/

 

19$か・・・これなら買ってもいいか

 

Backbone.js Tutorial: Google’s APIs and RequireJS

 

dailyjs.com/2012/12/06/backbone-tutorial-2/

 

Backbone.jsでTodoリストをつくるチュートリアル.backbone.syncを改造してGmailのtodoと同期させる

 

BackboneRails.com

 

www.backbonerails.com/

 

Rails + Backbone + CoffeeScriptでアプリを作成

 

$20 進行中

 

最初の3エピソードは無料 marionetteの解説も

 

わかりやすい

marionetteを使ったアプリ構築の標準化を提唱

Tips

5 Rules for Better Backbone Code

dev.hubspot.com/blog/5-rules-for-better-backbone-code

  • Rule 1: Views may point to one and only one Model
  • Rule 2: State must be kept in Models – not Views, and not the DOM
  • Rule 3: Objects may not be stored in Model attributes
  • Rule 4: Models may point to other models
  • Rule 5: Models may not have more than ten attributes

AMD (Asynchronous Module Definition)

Backbone.jsと一緒に使うと便利とよく書かれてるRequire.js

いろんなライブラリを混合して使うときに名前空間とかを管理してくれるのかな

jQueryやBackboneもAMD用のCDNを用意してるみいたい

Why AMD?

Railsから使うにはSprocketsやAssetPipelineの機能とだいぶ被ってる気がする

Using RequireJS with a Rails 3.1 app

Railsから使うRequire.js

github.com/jwhitley/requirejs-rails/

sprocketsを使わないでRequire.jsでいくという考え

Brouserify

browserify.org/

Browserify: それはrequire()を使うための魔法の杖

browserify をはじめてみる

backbone-patterns

github.com/rstacruz/backbone-patterns

Tipsを集めた文書 もう管理されてないみたいだけどちょっと使えるTips集

GithubでソーシャルにTips集をやるってなかなかいいアイデアかも

BackboneのViewで動的にidとかclassをつける方法

stackoverflow.com/questions/7033134/setting-id-and-classname-dynamically-in-backbone-js-views

いまは

とかでOK

backbone on rails GemでテンプレートにHandlebars.jsを使う

tatsuokaniwa.blogspot.jp/2013/01/backbone-on-rails-gemhandlebarsjs.html

 

Backbone.jsでUIの状態を管理するみたいなやつ

hamalog.tumblr.com/post/19008960974/backbonejsでuiの状態を管理するみたいなやつ

Fetch Backbone collection with search parameters

stackoverflow.com/questions/12315973/fetch-backbone-collection-with-search-parameters

Backbone.js global notifications

berzniz.com/post/19351578959/backbone-js-global-notifications

RABL Backbone Integration

github.com/nesquena/rabl/wiki/Backbone-Integration

RABLを使ったときの初期JSONの与え方のTIPs

Backbone.js: Sessions and Authentication

whatcodecraves.com/articles/2012/01/11/backbonejs-sessions-and-authentication

jquery-cookieプラグインを使ったsessionとauthenticationの構築例

github.com/carhartl/jquery-cookie

Backbone.jsにcron機能を実装する30行のCoffeeScript

Backbone.jsにcron機能を実装する30行のCoffeeScript

jQueryで要素の追加・削除のときにエフェクトをつける方法

jQueryのTipだけど

 jQueryで追加する部分だけにエフェクトをかける方法を覚えた

 jqueryで、要素をゆっくりhide()してからremove()する

jQuery UIでjQMっぽいエフェクト

[jQuery]jQueryUIで横方向にスライド(上下左右自由自在)

Backbone.syncを調整して送信先URLをカスタマイズする

APIのURLにあわせてBackbone.syncを上書きする方法

 

Form内のエンターキーで入力確定

todoMVCのやつから抜粋してCoffee化 ifのところこのままだと動かないかも

addyosmani.github.com/todomvc/architecture-examples/backbone/

jQueryベースのアプリをBackbone.jベースに書き直す方法

www.publickey2.jp/2013/01/jquerybackbonej.html

英語 いつか読む

目次だけ抜粋

  • Step by step from jQuery to Backbone
  • Separating DOM and Ajax
  • Creating a view
  • Adding events
  • A view’s responsibilities
  • Getting started with views in Backbone
  • Let’s use a model
  • Handling several models
  • Evented views
  • Escape it!
  • And we’re done!
  • Want to learn more?

 

Benchmark test for some template engines.

ecoが遅すぎる気がしてちょっと調べてみた.Hogan.jsが早いな

jsperf.com/mustache-hogan-handlebars-underscore-ejs-jqueryejs-pure/4

 

Backbone.js fetch with parameters

stackoverflow.com/questions/6659283/backbone-js-fetch-with-parameters

HOW DO YOU DYNAMICALLY SET AJAX REQUEST DATA WITH RAILS 3.1, JQUERY, COFFEESCRIPT, AND ALL THAT JAZZ?

js-routes

JavaSciptの中でRailsっぽい感じでURLを生成できるライブラリ

github.com/railsware/js-routes

サブディレクトリ環境でJsRoutesを使う

Backbone-Eye

Backbone開発のためのFireBug Extension

dhruvaray.github.io/spa-eye/

addons.mozilla.org/en-US/firefox/addon/Backbone-Eye/

Backbone-Eye – Backboneアプリを開発するならFirefoxでいこう!

日本語書籍

本命キタ オライリー本の日本語訳

こっちは読み手を選ぶっぽいのでレビューを参考に買うか決めて

自分は買った

Turbolinksとの共存

TurbolinksとBackbone.jsを共存させるための二行

Rails 4 Turbolinks and Backbone

Two-Way Data Binding

摂氏と華氏の相互変換アプリをBackbone、React、Angular、Meteor、素のJavaScriptで作ってみる

n12v.com/2-way-data-binding/

Backbone.js: avoid view→model→view double conversion

 

気になるjQueryのプラグイン

なんかついでに

MagicNav

h1要素とか抜き出してくれる Bootstrapとかの固定ヘッダーに対応してスクロール移動してくれる

まさにこれがやりたかった

WordPressにページ内ナビゲーションをつけた~jQuery

johnpolacek.github.com/MagicNav.js/

ついでに自動でH1〜H6要素に連番追加

stackoverflow.com/questions/5127017/automatic-numbering-of-headings-h1-h6-using-jquery

scrollNav.js

これも同じ感じで要素を抜き出してスクロール移動するナビを作ってくれる

scrollnav.com/

Filters

要素をフィルタリングできる.ほんとはtokeninputとあわせてトップ画面で使いたかった. 商用有料.

自力でできなくもないと思うけど$24なら買ってもいいかも.

www.jscraft.net/plugins/filters.html

*jQuery UIのSortableをanimateさせれば意外と簡単にできるかも

stackoverflow.com/questions/5060357/jquery-sortable-with-animation

jsfiddle.net/KgNCD/2

*なんか消えてた

MixItUp

mixitup.io/

上のと似てるやつ

こちらは商用もフリー

gfx

a 3D CSS3 animation library for jQuery

maccman.github.com/gfx/

jQuery.grrrid.js

div同士の高さ合わせやdiv内div同士を適当な感じで配置したりdivをグリッドに合わせたり

これとFireBugを使えばマージン指定とかwidthやheightとか早く決められるかも

HandsonTable

一見普通のテーブルにExcel風入力できる

handsontable.com/

github.com/warpech/jquery-handsontable

Usage with backbone.js / spine.js – creation of new Items

ToolBar.js

ツールチップでメニューをポップアップさせるという発想

ツールチップタイプのメニューバーを実装するjQueryプラグイン・Toolbar.Js

paulkinzett.github.com/toolbar/

jquery.tokeninput.js

loopj.com/jquery-tokeninput/

複数選択可能な入力補完(suggest)のjquery.tokeninput.jsをJSONで使用する

gmap3

jQueryでGoogle Mapを操作する

gmap3.net/en/

jQueryを使ってGoogleMapを表示

jQuery UI BootstrapにGoogle Mapが来た〜gmap3

spin.js

ローディング待ち時間のときに表示するアレ

fgnass.github.io/spin.js/

Backbone.jsで使う方法

PNotify

アラートなどのメッセージ通知

Bootstrapでも使える

sciactive.com/pnotify/

Bootstrapなサイトでの通知に使えるレスポンシブなjQueryプラグイン「PNotify」

Remodal

Flat, responsive, lightweight, easy customizable modal window plugin with declarative state notation and hash tracking.

vodkabears.github.io/remodal/

-Backbone.js, jQuery
-,

執筆者:

関連記事

Rails4でMarkdownをリアルタイムプレビュー〜backbone-on-rails&marked.js

By: Kool Cats Photography over 2 Million Views – CC BY 2.0 目次1 前回2 サンプルアプリ3 Gemfile4 generate5 …

Rails3.2とBackbone.jsでGoogle CalendarライクなカレンダーにCRUD~fullcalendar-rails

目次1 前回2 READ ~データベースからイベントを読み込んでカレンダーに表示する3 CREATE~カレンダーからイベントを登録する4 UPDATE1~カレンダーのイベントをクリックしてイベントを編 …

Rails3でajaxでD&Dでまとめてファイルアップロードをスクラッチで~jQueryFileUpload for Rails

参考 Rails3でajaxでD&Dでまとめてファイルアップロード~jQueryFileUpload for Rails Rails3でajaxでD&Dでまとめてファイルアップロード2 …

Rails3でajaxでD&Dでまとめてファイルアップロード2~jQueryFileUpload for Rails

  前提 Rails3でajaxでD&Dでまとめてファイルアップロード~jQueryFileUpload for Rails Ruby on Rails 3.2でファイルアップロード …

Rails3.2+jQueryUI1.10でjQuery-UI-Bootstrapのデモ画面を出すところまでやった

なにかいつの間にかかっこいい感じのサイトになってた addyosmani.github.com/jquery-ui-bootstrap/ jquery-ui-bootstrap.github.io/j …