スマホアプリとこれまでのWebアプリケーションで大きく異なるのは画面遷移にあるのではないでしょうか。スマートフォンアプリではタップして上下左右から新しい画面がアニメーションしながら表示されるのが通常です。このような操作をWebアプリで実装するのは大変ですし、イベントハンドリングが残っているとメモリが解放されずにメモリリークにつながる可能性もあります。 有名なところではAngularJSを使ったIonicなどはフレームワーク側で画面遷移を実現できるようになっています。今回は同じくWebフロントエンドフレームワークとして知られるBackbone.jsとその画面遷移ライブラリであるBackStackを組み合わせてスムーズな画面遷移を実現してみます。 必要なもの Backbone.js Underscore jQuery 2.1系 Backstack 今回はこれに組み合わせてBootstrapのU
JavaScriptでのSingletonパターン実装方法の備忘録です。 browserify使用している環境で、Backbone.Modelを継承したオブジェクトをSingletonにしています。 getInstance()メソッドでオブジェクトを取得します。 module.exports = (function() { 'use strict'; var Backbone = require('backbone'); /** * インスタンス保持用変数 */ var instance = null; var Singleton = Backbone.Model.extend({ //... }); return { /** * インスタンス取得パブリックメソッド * @returns {Singleton} */ getInstance: function() { if( !insta
世間はReactの話題で持ちきりのようだけど、Backbone.jsでStyleStatsのWebアプリをリニューアルした。以上で伝えることは終わったが、リニューアルするにあたってつらかったことをつらつらかきとめておく。 StyleStats - An evaluating tool for writing better CSS そもそもBackbone使うほど複雑なアプリでもないんだけど、勉強がてら使ってみた。てかParse.comを使いたくて、それがBackboneベースのSDKだったからというのもある。 Parse.comはmBaaS(mobile Backend as a Service)の類で、データを簡単にストアしてくれるもの。僕のようなフロント側の人間でバックエンドがからっきしな人も、こうゆうのを使うとWebアプリケーションを簡単に作れるそうだ。StyleStatsで、テスト
掲題の本を手に入れてからしばらく放置していましたが、Backboneの冗長な書き方に嫌気がさしていたので(書き方悪いだけ)、Tutorial形式でMarionette.jsを勉強できる良い機会だったので試してみました。 今回から何回かに分けて書いていきます。 環境 Mac OSX v10.9.5 Backbone.Marionette.js v2.2.0 Bootstrap v3.1.1(本はおそらくv2.3.2) フォルダ構成 . ├── assets │ ├── css │ │ └── bootstrap.min.css │ ├── fonts │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.svg │ │ ├── glyphicons-h
天下一クライアントサイドJS MV*フレームワーク武道会 (2014/07/11)のLTの資料です。
何やらBackbone.jsを触ることになりそうなのでお勉強中です。 Backbone.jsというと、とりあえずこんな本があるのですが、 Backbone.jsガイドブックposted with amazlet at 13.07.16高橋 侑久 ラトルズ 売り上げランキング: 126,333 Amazon.co.jpで詳細を見る Naoyaさんによるとあまり入門向けではないらしい。 少々、書籍の構成に難がある。端的に言うと、この書籍は「Backbone.js ガイドブック」であり「Backbone.js 入門」ではない。Backbone.js の本質的な考え方、ベストプラクティスは語られている一方、Backbone がどんなものか分からない初学者に向けた構成にはなっていない。 Backbone.jsガイドブック - naoyaのはてなダイアリー ということで、ドットインストールに頼りました
Backbone.jsとは？ Backbone.jsは、JavaScriptによる大規模なアプリケーション開発を行う際に力を発揮するMVCフレームワークです。データバインディングとカスタムイベントを備えたModel、配列情報を表すCollection、イベントをハンドリングするView、サーバーサイドのアプリケーションと連携するためのRESTful JSONなどをフレームワークとして備えています。 大規模な業務アプリケーションのユーザーインタフェースをJavaScriptでゴリゴリと作ろうとした場合、100%に近い確率で失敗するかと思います。これは、Flexのようなビルド時のコンパイラエラーを検出できないこと、存在するフレームワークがインタラクションやビジュアルに特化していること、ブラウザーやOSの組合せでAPIレベルの仕様が異なる事、同じブラウザーでもバージョンの違いにより挙動が異なる事
サイトトップへ Backbone.js (1.1.0) >> Githubリポジトリ >> 説明付きソース はじめに アップデート Events fon foff ftrigger fonce flistenTo fstopListening flistenToOnce f組み込みイベントのカタログ Model fextend fconstructor / initialize fget fset fescape fhas funset fclear pid pidAttribute pcid pattributes pchanged fpdefaults ftoJSON fsync ffetch fsave fdestroy fUnderscore.jsのメソッド(6) fvalidate pvalidateError pisValid furl fpurlRoot fparse fcl
Backbone.jsを週末を使って学習しました。メモがてらそのときに使った学習リソースをまとめてみたいと思います。 公式サイトまずは公式サイト。ただ公式サイトを眺めただけじゃようわからないので、ざっと眺めるだけでOKだと思います。 Backbone.js 動画でBackboneを触ってみるドットインストールのBackbone入門。手を動かしてもいいですし、流し見でもいいでしょう。 Backbone.js入門（ドットインストール） 英語、かつ有料になりますがプログラミング学習サイト、Code Schoolのコンテンツも非常にいいです。 Anatomy of Backbone.js（Code School） 文章でBackboneを理解する英語になりますがオライリーのBackbone本がWEBで公開されているので読めます。（日本語訳版は現時点で出版されていないようです） Developing
Available free for open-source reading below or for purchase via the O'Reilly store. Pull requests and comments always welcome. Prelude Not so long ago, “data-rich web application” was an oxymoron. Today, these applications are everywhere and you need to know how to build them. Traditionally, web applications left the heavy-lifting of data to servers that pushed HTML to the browser in complete pag
Backbone.jsはJavaScript MVCフレームワークの1つです。Backbone.jsの概要から、インストール方法、Modelの基本を説明していきます。 はじめに Backbone.jsはJavaScript MVCフレームワークの1つです。Backbone.jsはその名が示す通り、Webアプリケーションにアーキテクチャという背骨を提供することを目的としたライブラリです。直ぐに複雑なスパゲッティコードになりがちなWebアプリケーションに、Backbone.jsが提供するEvent, Model, Collection, View, Routerというコンポーネントを使うことで、Webアプリケーションに一定の構造を与えることが可能になります。 例：Backbone.jsによるアーキテクチャイメージ Backbone.jsによるWebアプリケーションの一例 様々なJavaScri
表を見て分かるように、Backbone.ModelとBackbone.Collectionの2つがMVCのModelに相当するので、単にModelといった場合、どちらを指すかわかりづらいので注意してください。 本シリーズでは単にModelといった場合にはBackbone.ModelとBackbone.Collectionの両方を含めた意味で使い、Backbone.Modelを指す場合は、Backbone.Modelと記述します。 また、表のように役割が分担されていますが、その役割を厳密に守らなくてもコードが正しければ動作はします。例えば、Modelの中でjQueryを使ってDOM操作を行うことも可能です。しかし、それをやってしまうとせっかくBackbone.jsを使って役割分担した設計が意味を持たなくなるので、DOM操作は必ずViewの中で行うというルール決めが重要なのです。 Backbo
Backboneでシステムに組み込む際にはビューにイベントのトリガーとなるアクションを仕込みます。そのためビューの中には色々なコードが書かれることになり、結果として殆どの処理をビューが行う状態になってしまったりします。 それを上手に切り離せるかもしれない機能がBackbone UIです。BackboneでUIコンポーネントを提供するという面白いソフトウェアです。 Backbone UIの使い方 幾つかのコンポーネントをチェックしてみます。 ボタンとカレンダー。 チェックボックスに日付ピッカー、それにリンクも。 各種フォームのコンポーネントも入っています。 メニュー、プルダウンもあります。 ラジオグループ。 リストビュー。 テーブルビュー。 タブ。 例えばテキストフィールドを使う場合、次のようになります。 // create a text field to add new items var
フロントエンドとJavaScript JavaScriptのMV*向けライブラリ BACKBONE.JSによるWebアプリケーション開発について 「オープンソースカンファレンス 2013 福岡」の HTML5と最近のフロントエンド事情で発表した資料です。 Read less
モバイル版 Basecamp に使われていると聞いて興味を抱いていた、JavaScript の MVC フレームワーク Backbone.js。Model と View は先日試しました。 作って覚える Backbone.js - present でも、Controller はまだ。「今度試す」といってやらないことが多い私ですけど、Controller は自分も使うので、ちゃんと行動に移すことにします。 Backbone では Controller の役割は Backbone.Router を継承したクラスが行います。Routerの定義の仕方はこんな感じ。 var AppRouter = Backbone.Router.extend({ routes: { "post/": "list", "post/:id": "show" }, list: function() { # データ一覧を表
Web サービスにリッチな UI を実装したいけど、jQuery だけだとコードがスパゲッティになりそうなので、JavaScript の MVC フレームワークを使うことにしました。候補は Backbone.js と Knockout.js の2つ。どちらも最近はてブで注目を浴びましたね。 Backbone.js はあの 37signals がモバイル版 Basecamp で使った実績があります。一方、Knockout.js は .NET 開発者にはおなじみ(?) の MVVM パターンで開発できるといいます。どちらを使おうか迷いましたが、「依存している underscore.js が便利そう」というズレた理由で、今回は Backbone.js を選択。 手を動かさないと覚えない人間なので、サンプルを作ることにしました。作るのは TODO アプリ。サンプルの題材としては定番ですね。Back
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く