2015/05/27 Data Binding JS Night
![今、改めてBackboneを評価する](https://cdn-ak-scissors.b.st-hatena.com/image/square/ea9f2294503ad8179e5f4ec7868960424e1df8f1/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2Fe909810e8d794b9bbf260b1f8ad3fd64%2Fslide_0.jpg%3F4846262)
React.js is a fantastic library. Sometimes it seems like the best thing since sliced Python. React is only one part of a front-end application stack, however. It doesn’t have much to offer when it comes to managing data and state. Facebook, the makers of React, have offered some guidance there in the form of Flux. Flux is an “Application Architecture” (not a framework) built around one-way data fl
久しぶりのBackbone.js入門。 Backbone.jsガイドブックを見ながらまとめてますが、 後半は試行錯誤のたまもの。 Backbone.Routerとは Backbone.RouterはサーバーサイドMVCフレームワークでいうところのCにあたる部分、でもありますし、VCでもあります。 Backbone.ViewがDOMを監視するのに対して、Backbone.Routerはブラウザのハッシュ(URL欄)を監視します(厳密に言うとhashChangeイベントとpopStateイベントを監視)。 Backbone.Routerにハッシュとそれに対応する操作を設定しておくことで、 アプリケーション全体のコントローラみたいなふるまいをします。 Backbone.Routerの使い方 何はともあれサンプルコードを。 // @file router_sample.js var Router
今回はBackbone.ModelとBackbone.Collectionを使って サーバーサイドとRESTな通信をしてみます。 サーバーとの通信ですが、別に難しいことはありません。 jQueryでいう $.get(), $.post() をBackbone.js風に使うだけです。 はじめに サーバーとの通信ですが、今回は/usersというURLに対して行うことにします。 サーバー側はクライアント側からのRESTメソッドに対応した実装がされている前提です。 /usersというURLは名前からuserの集合を表していることがわかるかと思いますが、 このuserの集合というリソースに対してクライアント側から 任意のリソースを要求したり、リソースを作成したりできるのがRESTなAPIです。 この/usersに対してそれぞれのメソッドでリクエストした場合、 以下のような意味になります。 サーバー側
object.once(events, callback, [context]) object.listenTo(other, event, callback) object.stopListening([other], [event], [callback]) Backbone.Model Backbone.Model.extend([properties], [classProperties]) Backbone.Model を継承した新しいモデルを作ります。 properties インスタンスメンバを定義します。 var User = Backbone.Model.extend({ say: function () { console.log("Hello."); } }); var user = new User(); user.say(); //-> Hello. classPr
最近流行りの JavaScript MV* フレームワークは、どれもデータバインディングをサポートしているが、実現方法はフレームワークによって異なる。 この記事では、各種フレームワークがどのようにモデルの変更を検知しているかを次の 4 つのパターンに分類して紹介する。 モデル クラス方式 (Ember.js、Backbone.js、Ractive.js、Knockout.js など) 力ずく方式 (AngualrJS) モデル書き換え方式 (Vue.js) Object.observe 方式 (Polymer) パターン名は私が勝手に名づけたものだけど、このへんの雰囲気が理解できれば、フレームワークごとの個性が分かるだろうし、利用イメージもわきやすいんじゃないかと思っている。 1. モデル クラス方式 「モデルとして扱えるのはフレームワークが用意したモデル クラスのインスタンスだけ」という
Backbone.jsで書き始めたら「Backboneどう?」と聞かれることがあったので、自分ではあんま語れるほど知らないけど「ここらへんの記事は素晴らしいよ!」というものをまとめておいたヽ(・ω・´)ゝ まずは読んでおくべきもの Backbone.js Advent Calendar 2011 なにはともあれまずはBackbone.js Advent Calendar 2011 ある程度まで書けるようになる情報は総ざらいで書いてあると思う。 中でもBackbone.js入門はありがたい。読んでおけば基本の仕組みを知ることが出来る。 Backbone.jsが依存しているunderscore.jsの情報なんかもあったりしてありがたい。 ちなみに今年(2012)のAdvent Calendarはこちら。今はまだ始まったばかりだから情報少ないけどこれから充実してくるだろうし楽しみ(´ω`) Ba
Todoリストの機能 1.テキストボックスから、Enterで追加できる 2.登録したTodoはダブルクリックで編集可能になり、Enterで編集確定できる 3.登録されているTodoの総件数がフッターに表示される 4.完了したTodoがある場合、それらをリストから消すボタンが表示される 5.全選択/解除を行うチェックボックスがある 個人的な結論 趣味開発で使うならAngular.js・仕事で使うならKnockout.jsをお勧めしたい。 まず、フレームワークを選択する際は、以下3つの選択基準を持つとよいと思う。 1.開発の規模 大規模ならBackbone.jsはお勧めできる。 書き方が決まっていて、チュートリアルに目を通せば(面倒なのは置いておいて)何を作らなければならないかは簡単に理解できる。そこそこの人数で長い時間の開発を行うなら、UIチームはアプリケーションとView、サーバーサイドは
はじめに はじめまして。プログラマ向け情報共有サイトQiitaを開発・運営しているIncrements株式会社の高橋と申します。Qiitaではフロントエンドのアプリケーション開発にBackboneを採用しています。また縁があってBackbone.jsガイドブックという本を執筆させていただきました。本連載では、Backboneを使ったより実践的な話題を紹介していきたいと思います。 初回となる今回は「すでにjQueryを使っているけど最近何かと話題のBackboneも気になる!」という開発者の方がBackboneを試しに使ってみる際の初めの一歩の踏み出し方を紹介することが目的です。そのために今回はjQueryで実装されたサンプルコードをBackboneに移植します。 なぜBackboneを使うの? すでにjQueryがあるのになんでわざわざBackboneを使うのでしょう。jQueryを使えば
はじめに Backbone.jsを使って、管理画面を作ったときのことを備忘録も兼ねてまとめて記事にします。 Backboneは入門やHelloWorldはたくさん情報があるんですが、実際使うとなると色々と考えることが多くて大変です。少しでも役に立てればと思います。(・ω・ ) 開発メンバー 5人。JavaScript経験者2人。Backbone経験者0人。(・ω・`;).. 全員JavaやScalaの経験がそれなりにある。 まずはじめに 今回は、全員3日程度ですがBackbone.jsを勉強する時間がありました。 その間に自分がBackboneで一部分実装し、ベースを作成することに。 勉強に使ったのは、主に Backbone.jsガイドブック。 学習のとっかかりとしては、ドットインストールがいいんじゃないかと思います。 ベースの作成 コーディング規約 まずはJavaScriptのコーディン
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く