モチベーション 背景 クライアントサイドJavaScriptで監視コントローラー付MVCを実装したくなった時の話です。 イベント名をどうやって設計するか? 今はイベントエミッターを実装することは簡単です。 Browserifyを使っていれば、Node.jsのEventEmitterがそのまま使えます。 しかし、イベント名の設計はアプリケーションごとに行う必要があります。 ある程度汎用的な設計は可能でしょうか?
![Backbone.jsに学ぶ(MVC的な意味の)モデルのイベント名 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b34637cc7d7054bc271685c53aeebce580b861b7/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9QmFja2JvbmUuanMlRTMlODElQUIlRTUlQUQlQTYlRTMlODElQjYlRUYlQkMlODhNVkMlRTclOUElODQlRTMlODElQUElRTYlODQlOEYlRTUlOTElQjMlRTMlODElQUUlRUYlQkMlODklRTMlODMlQTIlRTMlODMlODclRTMlODMlQUIlRTMlODElQUUlRTMlODIlQTQlRTMlODMlOTklRTMlODMlQjMlRTMlODMlODglRTUlOTAlOEQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWIxYTE2NmQzZTc0NGZiZjc3YjFmYTNiMmI4YjE5Mjlm%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBsZWRzdW4mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTA4MjBiMGY4Mjk3MGE1MzI4M2JkYTMwYTFmODcxODEw%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44Op44Kw44K244Kk44Ki%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Dab08e449f1f2b60e7d38b9a7b5360366)
モチベーション 背景 クライアントサイドJavaScriptで監視コントローラー付MVCを実装したくなった時の話です。 イベント名をどうやって設計するか? 今はイベントエミッターを実装することは簡単です。 Browserifyを使っていれば、Node.jsのEventEmitterがそのまま使えます。 しかし、イベント名の設計はアプリケーションごとに行う必要があります。 ある程度汎用的な設計は可能でしょうか?
今回は前回作ったTODO-Module-BackboneにMarionetteを導入していきます。 Backboneは薄いライブラリなので、オレオレ実装になってしまうことが多いです。 Marionetteを導入するとBackboneのベストプラクティスに乗っかれるので、大規模アプリには非常に有用です。 例えば 自動で描画をしてくれるので、自分でrenderメソッドを定義する必要がない ビューの管理をしてくれるので、破棄し忘れてゾンビViewが生まれる危険性が減る ヘッダー領域・メイン領域などを管理するRegion機能がある などさまざまなメリットがあります。 前回の記事 www.full-stack-engineer.com デモアプリとソースコードはこちらに公開しています。 TODO-Module-Marionette ソースコード 前回同様このクライアントアプリの動作確認にはAPIが必
前回 はTODO-ModuleのクライアントをAngularJSで作成しましたが、 今回はBackbone.jsを使って作っていきます。 Backbone.jsはAngularJSとくらべて薄いフレームワークで、シンプルな作りになっています。 そのため自由度が高いフレームワークになっています デモアプリとソースコードはこちらに公開しています。 TODO-Module-Backbone ソースコード 前回同様このクライアントアプリの動作確認にはAPIが必要なので、 前回までの記事を参考にローカルで動作させておくかか、 デモアプリのAPIを利用してください。 TODO-Module デモアプリ www.full-stack-engineer.com www.full-stack-engineer.com 動作環境 OS X Yosemite node v0.10.37 npm 2.7.3 前回
前提 会社(Quipper)で今からこういう風にしたい、と宣言した社内ドキュメントを公開する。 枯れてるわけではない。 coffeescript Backbone Backbone.stickit (データバインディング) Chapling.js(は、オマケなのでどうでもいいがサンプルコードはこう) backbone.stickitは安心と信頼のNYT製。(実質Backbone作ってるDocumentCloudと一緒のところ?) backbone.stickit 目的 データバインディングを全面的に使って再描画を最小限にし、コードの見通しをよくしたい。 モデルの役割を明示的にし、MVVMを導入する。 理想的なAPI 擬似コード # ビューモデルの定義 class TopicViewModel extends Model defaults: title: '' # たぶんここでパラメータ名(
HTML5 Experts.jpでエンタープライズ特集が組まれたことは承知だと思います。やはり注目すべきところはJavaScriptフレームワークの見解ではなかったかと思います。JavaScriptフレームワークについては人それぞれ考えがありますので、一概にこれとは言えませんが、私が感じているところを記載したいと思います。 世の中の動向と以前の判断 Googleトレンドを見る限りではAngularJSのひとり勝ちのように思えますが、身の回りの案件ではBackbone.jsが多いのではないかと思えます。1年半前にHTML5プロジェクトを行ったときに選定で残ったのが Backbone.js AngularJS Sencha Ext JS でした。最終的に利用したのはBackbone.JSだったのですが理由がjQueryベースで入り易かったということが上げられます。AngularJSは独特な記法
Backbone.jsの開発をしていると、(経験がないうちは)しばしばinitialize()のところでelとか$elとかeventsとか何がどうなってるのかわからなくなるのですが、ソースを読むと非常にシンプルな流れなのでざっと見ておくと参考になるのではないかというエントリーです。 コンストラクタ //github.com/jashkenas/backbone/blob/b9665843568c922f6249be2fc3538b7d52ba514c/backbone.js#L1037 var View = Backbone.View = function(options) { this.cid = _.uniqueId('view'); options || (options = {}); _.extend(this, _.pick(options, viewOptions)); thi
Marionette.jsのView周りについてを中心にSingle Page Applicationを作るときの話
『るびま』は、Ruby に関する技術記事はもちろんのこと、Rubyist へのインタビューやエッセイ、その他をお届けするウェブ雑誌です。 Rubyist Magazine について 『Rubyist Magazine』、略して『るびま』は、Rubyist の Rubyist による、Rubyist とそうでない人のためのウェブ雑誌です。 最新号 Rubyist Magazine 0063 号 バックナンバー Rubyist Magazine 0063 号 Rubyist Magazine 0062 号 Kaigi on Rails 特集号 RubyKaigi Takeout 2020 特集号 Rubyist Magazine 0061 号 Rubyist Magazine 0060 号 RubyKaigi 2019 直前特集号 Rubyist Magazine 0059 号 Rubyist
Backbone is a hugely popular MV* framework because it gives you a ton of freedom of implementation. There is no one "Backbone way" to accomplish most coding tasks. This freedom is wonderful when you need it, but when you don't, Backbone's lack of official guidance makes it easy to stray into some bad patterns. When writing new code, try following these rules, and you'll likely find that your code
Live, reactive templating ractivejs.orgis a template-driven UI library, but unlike other tools that generate inert HTML, it transforms your templates into blueprints for apps that are interactive by default. Powerful and extensible Two-way binding, animations, SVG support and more are provided out-of-the-box – but you can add whatever functionality you need by downloading and creating plugins. Opt
これは面白い! Webアプリを開発する際に注目を集めているフレームワークBackbone。あまり厚くない仕組みになっているので理解はしやすいのですが、それでも開発時には色々難問にぶつかることがあります。そこでDevtoolsのような開発ツールが役立ちます。 さらにそれを一歩進めてBackbone専用に特化させたのがBackbone-Eyeになります。Firebug専用のツールになっており、Firefoxに元々含まれている開発ツールでは動きませんのでご注意ください。 インストール インストールはMozilla Add-onsから行えます。Firebugも忘れずにインストールしましょう。 インストールしたらBackboneアプリケーションを開きます。 使い方 こちらはサンプルのBackboneアプリケーションです。Firebugを開きます。 Firebugを開くとBackbone-Eyeのタブ
The Backbone FrameworkMarionette simplifies your Backbone application code with robust views and architecture solutions. Download v4.1.2View Docs Organize your app in terms of small Views. Marionette makes it easy to compose rich layouts out of small components Show a sorted filtered list without breaking a sweat. Have a massive collection? Want to add or remove an item? No worries! Learn to love
皆さん、こんにちは。id:KenichiroMurataです。 今回はKnowledge Noteにて連載させて頂いていた 「試して学ぶBackbone.js入門」が全5回分公開されたため、そのまとめをしたいと思います。 記事のコンセプト タイトルに含めた通り、実際にコードを書いて試してみることでBackbone.jsの理解を深めることを一番の目的としています。 なので、ぜひ実際に記事の中に出てくるコードを書いて、動かして、コンソールのログや動作を確認することをおススメします。 各記事の概要 第1回 試して学ぶBackbone.js入門 Backbone.jsの概要から、インストール方法、Model、Collectionの基本を説明しています。 目次 はじめに セットアップ Modelの基本 Collectionの基本 Collectionの便利な関数 第2回 試して学ぶBackbone.
Backbone Patterns Building apps with Backbone.js Here, I try to document the good practices that our team has learned along the way building Backbone applications. This document assumes that you already have some knowledge of Backbone.js, jQuery, and of course, JavaScript itself. Table of contents Model patterns Bootstrapping data View patterns Inline templates JST templates Partials Animation buf
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く