ϨΠϠʔԽ ɹΞʔΩςΫνϟ ΤϯςΟςΟ όϦϡʔ ɹΦϒδΣΫτ ϦϙδτϦ ϢϏΩλεݴޠ େنઃܭ ϦϑΝΫλϦϯά ΞάϦήʔτ ࠓ ͢ Δ ͓ ࠓ ͠ ͳ ͍ ͓

#はじめに 普段はBackbone.jsでアプリを作成しているのですが、React.jsの評判が高まってきているので、簡易BlogをBackbone.jsとReact.jsの両方で実装して、比較してみました。 Demoではjs以外は同じサーバのAPIを使っているのでどちらにも反映されます。 Backbone.jsをつかったバージョン Source https://github.com/takeshy/backbone_socket_io Demo https://radiant-dawn-8878.herokuapp.com/backbone React.jsをつかったバージョン Source https://github.com/takeshy/react_socket_io Demo https://radiant-dawn-8878.herokuapp.com/react #HTML
今回は前回作ったTODO-Module-BackboneにMarionetteを導入していきます。 Backboneは薄いライブラリなので、オレオレ実装になってしまうことが多いです。 Marionetteを導入するとBackboneのベストプラクティスに乗っかれるので、大規模アプリには非常に有用です。 例えば 自動で描画をしてくれるので、自分でrenderメソッドを定義する必要がない ビューの管理をしてくれるので、破棄し忘れてゾンビViewが生まれる危険性が減る ヘッダー領域・メイン領域などを管理するRegion機能がある などさまざまなメリットがあります。 前回の記事 www.full-stack-engineer.com デモアプリとソースコードはこちらに公開しています。 TODO-Module-Marionette ソースコード 前回同様このクライアントアプリの動作確認にはAPIが必
Backbone.jsの最終回の今回は、Backbone.Router(以降、Router)について説明します。 はじめに 前回の「試して学ぶ Backbone.js入門4」 では実際に動くアプリケーションを作成しながらBackbone.Viewについて説明しました。 今回は本連載も最終回となり、Backbone.Router(以降、Router)について説明します。 今回のソースの全体はこちらで確認することができます。 Backbone.Router Backbone.jsが提供するRouterコンポーネントは、クライアント側でのページ遷移のイベントとその後の処理(コールバック関数)をマッピングするルーティング機能を提供します。 ViewがDOMイベントの発生を監視して、対応するメソッドに関連付けるように、Rounterはrouteイベントを監視して、対応するメソッドに関連付けます。 W
(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体どれを使えばいいのか?何が違うのか?何から調べていいのか迷うことがあります。 そこで、現時点で事実上全てとなる、9大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ
あけましておめでとうございます。 新年一発目は backbone.js のサンプルとして有名な Todos をサーバーサイドに Rails をつかって作り直してみたいと思います! 以前、backbone.js のサンプル Todos の動作を追ってみたという記事でも動作を簡単に見たのですが、このサンプルでは localStorage を使ってデータを保存する形式がとられています。 これを今回、localStorage ではなく Rails でデータをもつ形式に作り直してみます。 ちなみに今年からブログも、はてな記法から Markdown 記法に変更してみました。 ソースコード コードはこちらに公開しております ↓ https://github.com/danimal141/bor_todos 実装 では早速どんなふうに作っていったかを備忘録がてら書いていきたいと思います!! 準備 今回は
MVC と言えば Apache Struts をはじめとするサーバサイド・フレームワークを想像しますが、 今回は JavaScript による大規模開発の際に採用されるクライアントサイド MVC フレームワーク「Backbone.js」の使い方についてまとめてみました。 (厳密にはクライアントサイドの場合、MVC とは呼ばず MVVM とか MV* とか呼ばれてるようです。) 前提 Backbone.js の構成を簡単に言ってしまうと 単一データの管理を行うモデル 複数件のモデルの管理を行うコレクション 画面の管理を行うビュー の3つの主要モジュールを軸に構成されており、Underscore.js、jQuery(Zepto)に依存するかたちで動作するようになっています。 利用の際は、underscore.js、jquery.js、backbone.js の順で読み込みます。 //cdnjs
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 Advent Calendar 2014 2日目の記事です。 Backbone.Routerではハッシュフラグメント(#hogehoge)によってページ内容の出し分けをしてます。 時によっては前回のハッシュの状態によって、表示内容の制御をしたいときがあります。 例えば、TOPページから下層ページに移動したときはページ遷移のアニメーションを出すけど、 下層ページ間の移動ではアニメーションなしといったときです。 こういう時に使うと便利なのが”有限状態遷移機械“というモデルです。(Finite State Machine[FSM]ともいいます) ある状態から別のある状態に遷移したときに、ある処理が発生しますよというモデルです。 さっきの話を例にとると、TOPページの状態を”#top”、下層ページAの状態を”#pageA”、 下層ページBの状態を”pageB”としたとき、下
Backbone.js, Knockout.js, Ractive.jsどれも素晴しいライブラリですが、モデル等のデータの取得・設定する構文がとてもダサいのが難点ですよね。 Backbone.jsとRactive.jsはget("hoge")やset("hoge", value)という形式。 Knockout.jsは少しマシでhoge()で取得しhoge(value)で設定する形式。 こういうラッパーを必要とする理由はKnockout.jsのドキュメントにわかりやすく書いています。 JavaScript には getter/setter 構文がありますが、残念ながら全てのブラウザで実装されているわけではありません(IEゲフンゲフン...)。 そこで互換性を確保するため、ko.observable オブジェクトの実態は function です。 ドキュメント | Knockout.js
Concatでどこまで戦えるのか @jxck_ browserify使ってるんだけどあんま意味ない感じになっててつらいんだよねーっていうのを昨日 @ahomu に話したら、concatで全然いけますよって言われたからさっき乗り換えた。 — Kazuhito Hokamura (@hokaccha) August 6, 2014 (^ω^) 全然いけますよ 依存管理をサボってconcat 以下、「依存管理に労力を割きたくない」という理由で依存管理を省略した場合に、concatだけで破綻無くビルドするためにやっていたパターンの紹介。いけますと言った手前はあるが、最終的には現場によってケースバイケースということで、どうかひとつご容赦願いたい。 Case 1: Backbone.js Backbone.jsの場合、extends に代表されるクラスベースのオブジェクト指向モデルに多少の制約が必要に
それぞれ、このシリーズの後続の回で詳しく触れていきますが、Application、AppRouter、ControllerはViewやModelの間を取り持つ機能を担っています。ItemView、CollecttonView、CompositeView、Region、Layoutはそれぞれ異なった役割で、View周りのコーディングに役立つ機能を持っています。 Marionette.jsにできること Marionette.jsから得られる恩恵は大小さまざまで、細かいものを挙げていくときりがないほどですが、大きなものを挙げるとすれば、次のような点があります。 モジュール化のサポート 開発者が書かなければならないコード量の減少 機能の部分的な利用 モジュール化のサポート Marionette.jsの機能の中で大きなものとして、モジュール化のサポートがあります。モジュール化というのは、ある機能を表
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く