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

By: Francisco Gonzalez

随時更新中

1 気になるBackbone.jsのプラグイン
2 チュートリアル
3 Tips
4 気になるjQueryのプラグイン

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

backbone.marionette

github.com/marionettejs/backbone.marionette

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

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

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 その１(準備からサーバー側実装まで)

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を決めておけば

<form>
  <input name="a" value="a-value">
  <textarea name="b">b-value</textarea>
</form>

<form>

<textarea name="b">b-value</textarea>

</form>

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

Backbone.Syphon.serialize(view);

// will produce => 

{
  a: "a-value",
  b: "b-value",
}

Backbone.Syphon.serialize(view);

// will produce =>

{

a: "a-value",

b: "b-value",

}

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

    var data = Backbone.Syphon.serialize(this);
    this.model.set(data);

    this.model.save();

var data = Backbone.Syphon.serialize(this);

this.model.set(data);

this.model.save();

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 進行中

最初の３エピソードは無料　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

いまは

id: ->
  "hoge_" + @model.id

1 2	id: -> "hoge_" + @model.id

とかでOK

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

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

jQueryのTipだけど

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

$('#id').hide().html(view.render().el).fadeIn()

1	$('#id').hide().html(view.render().el).fadeIn()

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

$target.hide('slow', function(){ $target.remove(); });

1	$target.hide('slow', function(){ $target.remove(); });

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

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

  $('#container').hide().html(view.render().el)
      .effect("slide", direction: "right", "fast")

1 2	$('#container').hide().html(view.render().el) .effect("slide", direction: "right", "fast")

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

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

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

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

ENTER_KEY = 13

events: 
  'keypress #new-todo': 'createOnEnter'

// If you hit return in the main input field, create new **Todo** model,
// persisting it to *localStorage*.
createOnEnter: ( e ) -> 
  if ( e.which !== ENTER_KEY || !this.$input.val().trim() ) 
    return
  app.Todos.create( this.newAttributes() )
  this.$input.val('')