(1/2) - 第一回 jQueryから始めるBackbone.js - 実践！Backbone - Mobile Touch - モバイル/タブレット開発者およびデザイナー向け情報ポータル
はじめに はじめまして。プログラマ向け情報共有サイトQiitaを開発・運営しているIncrements株式会社の高橋と申します。Qiitaではフロントエンドのアプリケーション開発にBackboneを採用しています。また縁があってBackbone.jsガイドブックという本を執筆させていただきました。本連載では、Backboneを使ったより実践的な話題を紹介していきたいと思います。 初回となる今回は「すでにjQueryを使っているけど最近何かと話題のBackboneも気になる！」という開発者の方がBackboneを試しに使ってみる際の初めの一歩の踏み出し方を紹介することが目的です。そのために今回はjQueryで実装されたサンプルコードをBackboneに移植します。 なぜBackboneを使うの？ すでにjQueryがあるのになんでわざわざBackboneを使うのでしょう。jQueryを使えば
[O'REILLY]Developing Backbone.js Applications -
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 - webネタ
はじめに Backbone.jsを使って、管理画面を作ったときのことを備忘録も兼ねてまとめて記事にします。 Backboneは入門やHelloWorldはたくさん情報があるんですが、実際使うとなると色々と考えることが多くて大変です。少しでも役に立てればと思います。(･ω･ ) 開発メンバー 5人。JavaScript経験者2人。Backbone経験者0人。(･ω･`;).. 全員JavaやScalaの経験がそれなりにある。 まずはじめに 今回は、全員3日程度ですがBackbone.jsを勉強する時間がありました。 その間に自分がBackboneで一部分実装し、ベースを作成することに。 勉強に使ったのは、主に Backbone.jsガイドブック。 学習のとっかかりとしては、ドットインストールがいいんじゃないかと思います。 ベースの作成 コーディング規約 まずはJavaScriptのコーディン
ScaleOut | Supership
日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipの“BE SUPER”なストーリーをシェアしています。
【後編】Backbone.jsでつくるMVPなUIパターン【スクロールスパイ】 | DevelopersIO
※この記事はBackbone.jsでつくるMVPなUIパターン【スクロールスパイ】前編からの続きの後編です。 ContentView 継承 ContentViewは文章を表示し、自身の管轄しているスクロール範囲を知っているコンポーネントです。Backbone.Viewを継承して実装します。 var ContentView = Backbone.View.extend({}); テンプレート UI表示用のテンプレート関数をNavViewと同じように定義しておきます。 <script type="text/template" id="ui-scroll-spy-content-template"> <div class="scroll-spy-content"> <%= content %> </div> </script> var ContentView = Backbone.View.ex
【前編】Backbone.jsでつくるMVPなUIパターン【スクロールスパイ】 | DevelopersIO
前回の更新からだいぶ間が開いてしまいましたがこのシリーズはまだ終わりません！今回はTwitter BootstrapにjQuery Pluginとして実装されているScrollSpyを真似して作ってみたいと思います。 ちょっと解説が長くなってしまったので前後編に分けてご紹介します。 後半はこちら >> Backbone.jsでつくるMVPなUIパターン【スクロールスパイ】後編 デザイン 4つの文章に対しそれぞれナビゲーションが存在し、文章のエリアをスクロールして閲覧している文章に対応するナビゲーションがアクティブ表示になるというものです。 このUIのhtmlは以下のようにコーディングしました <div id="ui-scroll-spy"> <div class="scroll-spy-nav navbar"> <div class="navbar-inner"> <div class="
DailyJS: Backbone.js Tutorial: Routes
Part 1: Build Environment Part 2: Google's APIs and RequireJS Part 3: Authenticating with OAuth2 Part 4: Backbone.sync Part 5: List Views Part 6: Creating Lists Part 7: Editing Lists Part 8: Deleting Lists Part 9: Tasks Part 10: Oh No Not More Tasks Part 11: Spies, Stubs, and Mocks Part 12: Testing with Mocks Part 13: Routes Preparation Before starting this tutorial, you’ll need the following: ale
Backbone.jsにおけるModel-View-Presenterアーキテクチャパターン | DevelopersIO
クライアントサイドJavaScriptのフレームワークとして人気のBackbone.jsが採用している Model–View–Presenter (MVP) というアーキテクチャパターン(以下MPVパターン)について考察してみます。 Model-View-Controllerなら聞いたことあるけど？ 僕もそうでした。初めて知ったのはRuby on Railsを触った時です。 Modelはデータと手続きを担当し、ViewはUIを、Controllerは入力イベントを受付けてModelとView操作する…とまぁざっくり言うとこんな感じですよね。 MVPパターンも凄く似ていて、どうもMVCパターンから派生したものみたいです。以下が各パターンの図です。 Model-View-Controller Model-View-Presenter PresenterがModelとViewを操作しているところ
JavaScript MVCフレームワーク Backbone.jsのコメント付きソースコード日本語訳が公開
JavaScript MVCフレームワークとしてもっとも知名度が高いBackbone.jsのコメント付きソースコードの日本語訳が公開されています。havelogの記事「Backbone.js コメント付きソースコード日本語訳」で紹介されていました。 翻訳を行ったのは、githubをベースにオープンソースソフトウェアのドキュメントを翻訳している翻訳コミュニティのenja-oss。 同グループはすでにBackbone.jsのFAQの翻訳を公開済みで、それに続いてBackbone.jsソースコードのコメントについても翻訳を終えました。 全部で1411行の軽量フレームワーク Backbone.jsはJavaScript MVCフレームワークとしてもっとも知名度が高いものですが、とても軽量なフレームワークでもあります。 今回日本語訳が公開されたソースコードを見ても、全部で1411行、60.72kb。
Backbone.js でレスポンスをキャッシュするプラクティス - present
Backbone.js を使ってクライアント MVC で実装したとしても、画面遷移のたびにサーバーと通信していては、データが表示されるまで結局ユーザーは待たされます。操作が固まらない、ただそれだけ。それに何度も通信していては、サーバー側に余計な負担もかかります。取得したデータが頻繁に更新されないものなら、クライアント側でキャッシュしておかないと。 さて、どう実装しましょう。真っ先に思いついたのは、Backbone.Model や Backbone.Collection を継承したクラスに、fetch や save を呼び出してレスポンスをキャッシュするメソッドを追加する方法。シンプルですけど、キャッシュを扱うコードが分散してしまうのが難点かな。 Backbone.Model や Backbone.Collection が通信を行うとき、Backbone.sync メソッドを必ず経由します。
作って覚える Backbone.js (2) Router 編 - present
モバイル版 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() { # データ一覧を表
作って覚える Backbone.js - present
Web サービスにリッチな UI を実装したいけど、jQuery だけだとコードがスパゲッティになりそうなので、JavaScript の MVC フレームワークを使うことにしました。候補は Backbone.js と Knockout.js の2つ。どちらも最近はてブで注目を浴びましたね。 Backbone.js はあの 37signals がモバイル版 Basecamp で使った実績があります。一方、Knockout.js は .NET 開発者にはおなじみ(?) の MVVM パターンで開発できるといいます。どちらを使おうか迷いましたが、「依存している underscore.js が便利そう」というズレた理由で、今回は Backbone.js を選択。 手を動かさないと覚えない人間なので、サンプルを作ることにしました。作るのは TODO アプリ。サンプルの題材としては定番ですね。Back
Hello Backbone.js Tutorial
Shameless advertisement: Don't forget to check out Agility.js, a simpler alternative to Backbone.js. Hello Backbone is a simple Backbone.js tutorial comprised of self-explanatory "hello world" examples of increasing complexity. It was designed to provide a smoother transition from zero to the popular Todos example. Backbone.js offers a lean MVC framework for organizing your Javascript application.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hello Backbonejs – Artur Adib
backbone.js
Site Under Maintenance