随時更新中
気になる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
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を決めておけば
1 2 3 4 | <form> <input name="a" value="a-value"> <textarea name="b">b-value</textarea> </form> |
こういう風にシリアライズしてくれる
1 2 3 4 5 6 7 8 | Backbone.Syphon.serialize(view); // will produce => { a: "a-value", b: "b-value", } |
こうやってモデルに突っ込むだけでOK
1 2 3 4 | 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-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
機能的なテーブルがかける
backbone-pageable
上のbackgridで使ってるページネーションを助けるプラグイン
github.com/wyuenho/backbone-pageable/
Backbone.keys
github.com/nervetattoo/backbone.keys
簡単にキーボードを使う
Backbone.Notifier
ダイアログのほかに通知とかスピナーとか
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
エレガントなデータバインディング
Backbone.jsにUIバインディング機能を付ける拡張ライブラリ「Epoxy.js」
backbone.stickit
nytimes.github.io/backbone.stickit/
データバインディング。NYTimes社。国内記事が多い。
backbone.stickit を使って Backbone でデータバインディング
Ractive.js
reactiveではなくractive
mustacheテンプレートをつかったUIライブラリ.
2wayバインディング、SVGなど容易に拡張可能.
Backboneと組み合わせやすい
vue.js
流行になりつつあるデータバインディング
軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた
データバインディングについてVue.jsと Backbone.stickitを比較する
Backbone.Chooser
github.com/brian-mann/Backbone.Chooser
chosenされたmodelやcollectionを簡単にトラッキングできる
ナビゲーションで選ばれたタブをトラッキングするとか、リストで選ばれたアイテムをトラッキングするとか、フォームでマルチセレクトされたアイテムをトラッキングするとか
Backbone UI
Backbone UI はBackboneのModel、Collectionを簡単にUIコンポーネントで表現することができる
Thorax
大規模ウェブアプリケーションのためのBckbone.js + Handlebarフレームワーク
Animating View in Backbone JS
Viewをアニメーションさせる小さなプラグイン
チュートリアル
Backbone.js入門 (全22回)
ぼくらのドットインストール
dotinstall.com/lessons/basic_backbonejs
RailsCasts
gem “backbone on rails”での構築例
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アプリの次に載ってるサンプル 本棚で絞込みを実現
こっちが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
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を用意してるみいたい
Railsから使うにはSprocketsやAssetPipelineの機能とだいぶ被ってる気がする
Using RequireJS with a Rails 3.1 app
Railsから使うRequire.js
github.com/jwhitley/requirejs-rails/
sprocketsを使わないでRequire.jsでいくという考え
Brouserify
Browserify: それはrequire()を使うための魔法の杖
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
いまは
1 2 | id: -> "hoge_" + @model.id |
とかでOK
backbone on rails GemでテンプレートにHandlebars.jsを使う
tatsuokaniwa.blogspot.jp/2013/01/backbone-on-rails-gemhandlebarsjs.html
Backbone.jsで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で追加する部分だけにエフェクトをかける方法を覚えた
1 | $('#id').hide().html(view.render().el).fadeIn() |
jqueryで、要素をゆっくりhide()してからremove()する
1 | $target.hide('slow', function(){ $target.remove(); }); |
jQuery UIでjQMっぽいエフェクト
[jQuery]jQueryUIで横方向にスライド(上下左右自由自在)
1 2 | $('#container').hide().html(view.render().el) .effect("slide", direction: "right", "fast") |
Backbone.syncを調整して送信先URLをカスタマイズする
APIのURLにあわせてBackbone.syncを上書きする方法
Form内のエンターキーで入力確定
todoMVCのやつから抜粋してCoffee化 ifのところこのままだと動かないかも
1 2 3 4 5 6 7 8 9 10 11 12 | 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('') |
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
js-routes
JavaSciptの中でRailsっぽい感じでURLを生成できるライブラリ
github.com/railsware/js-routes
Backbone-Eye
Backbone開発のためのFireBug Extension
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で作ってみる
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
これも同じ感じで要素を抜き出してスクロール移動するナビを作ってくれる
Filters
要素をフィルタリングできる.ほんとはtokeninputとあわせてトップ画面で使いたかった. 商用有料.
自力でできなくもないと思うけど$24なら買ってもいいかも.
www.jscraft.net/plugins/filters.html
*jQuery UIのSortableをanimateさせれば意外と簡単にできるかも
stackoverflow.com/questions/5060357/jquery-sortable-with-animation
*なんか消えてた
MixItUp
上のと似てるやつ
こちらは商用もフリー
gfx
a 3D CSS3 animation library for jQuery
jQuery.grrrid.js
div同士の高さ合わせやdiv内div同士を適当な感じで配置したりdivをグリッドに合わせたり
これとFireBugを使えばマージン指定とかwidthやheightとか早く決められるかも
HandsonTable
一見普通のテーブルにExcel風入力できる
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
複数選択可能な入力補完(suggest)のjquery.tokeninput.jsをJSONで使用する
gmap3
jQueryでGoogle Mapを操作する
jQuery UI BootstrapにGoogle Mapが来た〜gmap3
spin.js
ローディング待ち時間のときに表示するアレ
Backbone.jsで使う方法
PNotify
アラートなどのメッセージ通知
Bootstrapでも使える
Bootstrapなサイトでの通知に使えるレスポンシブなjQueryプラグイン「PNotify」
Remodal
Flat, responsive, lightweight, easy customizable modal window plugin with declarative state notation and hash tracking.