そんなに目新しくもない技術でWebアプリをリニューアルした2015年春 - MOL
世間は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で、テスト
ビジネスモデルキャンバスを作るツールを作った - blog.takuyan.com
ビジネスモデルキャンバス.com 仕事でBackbone.jsとMarionette.jsを使っている部分があるのだけど、そこに大きめの変更が入ることになった。 しばらくMarionette.jsを触っていなかったし、本家のバージョンも上がっていたので、リハビリとして何かつくろうと思った。 なぜビジネスモデルキャンバスか そこで、以前に本で読んで、コレは良いなあと思いつつ、なかなか実践に移せなかったビジネスモデルキャンバスをつくろうと思った。 「ビジネスモデル・ジェネレーション」という本があり、それ自体は読んだことは無いんだけど、WEBで大体把握していた。 その上で、似たような「ビジネスモデル・YOU」という本を読んでいた。 このビジネスモデルキャンバス、本は読んだけど、実際にコレを書いてみようと思うとすごくハードルが高いと思っていた。 本のサポートページから、PDFでダウンロード出来るん
AngularJSの素晴らしさを整理してみる - pochi's weblog
久々のブログになります。 3年ほどJavaScriptを利用した開発をしてきましたが、最初はなぜJavaScriptでMVCフレームワークが必要なのかいまいちわからず、いろいろ試行錯誤してきました。 今日はタイトルの通りAngularJSが素敵だなということを書きたいのですが、よくあるベストプラクティスみたいなものではなく、自身がどのように思考回路を経由してここに行き着いたのかという経験談を記しておきたいと思います。 ちなみに私のJavaScript力は高くありませんのであしからず・・・。 jQuery 昔々、JavaScript MV(V)Cみたいなものがなかった時代、JavaScriptでリッチなものを作ろうとなるとjQueryやDojoのような低レイヤーのフレームワークが主に利用されていました。 その当時簡単なシングルページアプリケーションを作っていましたが私はjQueryを採用しま
Backbone.jsでUIの状態を管理するみたいなやつ
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 前のやつの続き。UIの状態がコロコロ変わるのはどこで制御すりゃええねんっていうことで、Managerっていうクラスを作ってそいつにやらせることにした例。といっても、Spine.jsのManagerっていうやつの真似をBackbone.jsでやっただけだけど。Spine.jsのドキュメントによれば、これは、State machine とかいうやつらしい。 サンプルmy.coffeeこのサンプルでは、一個クリックすると他のがactiveじゃなくなる。作ったViewのインスタンスを、Managerにぴょこぴょこ追加し、追加されたviewらをまとめてアクティブにしたりしなかったりするようなことをやるだ
Backbone.jsでMVCでTwitter検索なやつをCoffeeScriptで
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 最近MVCがどうのとか調べたりしてるもんで、前Spine.jsで作ったやつを、Backbone.jsにして書いてみた。 Backbone.js作ったやつ# Template manager # //hamalog.tumblr.com/post/13593032409/jquery-tmpldeck deck = $.TmplDeck 'templates.html' # ============================================ # API wrapper # ============================================ api =
Backbone.js と比較しながら Knockout.js を試してみた - present
Backbone.js を試したから Knockout.js にも挑戦 JavaScript のクライアント MVC フレームワークは Backbone.js でいこうと思っていたんですが、Knockout.js が Ver 2.0 でかなり機能追加されて、ちょっと心変わり。もともと Knockout.js のデータバインディング機能に興味を持っていたところに、テンプレート機能が追加されて、試してみたくなりました。 念のため説明すると、Knockout.js は、.NET 開発者にはお馴染みの、データバインディングや MVVM パターンが特徴のフレームワークです。 Knockout : Home ちなみに、Backbone.js の記事はこちら。 作って覚える Backbone.js - present 作って覚える Backbone.js (2) Router 編 - present T
Backbone.js+CoffeeScriptを試してみる « サーバーワークス エンジニアブログ
こんにちわ、プログラマの川口です。今回はBackbone.jsをCoffeeScriptで記述し、Ruby on Railsと組み合わせて利用する簡単なパターンを試してみました。CoffeeScriptは非常に簡潔にJavaScriptを記述できる上に学習コストも低いのでおすすめです。最近はJavaScriptがプロジェクト全体のコードに占める割合が大きくなってきていますし、それに比例してやはりメンテナンス性や可読性が下がっていくこともあり事前に対応策が必須です。 Backbone.jsとは・・・とかは別にいいデスヨネ？dwangoさんのBackbone.js記事を見てください(完全にネタかぶりです、本当にありがとうございました)。 前準備 バージョンはこんな感じ。 Ruby on Rails 3.1.1.rc1 CoffeeScript version 1.1.2 Backbone.js
Backbone.js を使った開発で QUnit を試してみた - present
最近は Backbone.js をよく触っています。Backbone.js を使った場合、そこそこな規模の UI が出来あがるわけで、品質を上げるためにはテストが必要不可欠です。 Backbone.js みたいな MVC フレームワークを導入するメリットとしては、「役割がはっきりしてソースコードがすっきりする」ことの他に、「テストがしやすくなる」というのもあると思います。クライアントサイド MVC に限ったことではないけど、ロジックをモデルに集約し、ビューは表示に徹することで、UI のかなりの部分が自動テストできます。 JavaScript のテストでは JsUnit と QUnit あたりが鉄板。JavaScript のテストライブラリは初めて使うので、軽くドキュメントを読んで簡単そうに感じた QUnit を選択します。試しに、モデルのテストを書いてみたのがこちら。 <!DOCTYPE
作って覚える 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
jQuery Mobileでのアプリケーション開発にBackbone.jsを導入しよう | Lab by engineering@dwango.jp
こんにちは、2011年度新卒エンジニアの夏目です！突然ですがみなさんJavaScript書いてますか？ 最近はjQuery Mobileなどを利用したスマートフォン向けアプリ開発において、クライアントサイドでもヘビーなJavaScriptのコーディングをする機会があると思います。そのようなときコードのいたるところにHTMLが混入したり、どこでどのデータを扱っているのか分からなくなるということになりがちです。 今回はそんな悪夢のようなコーディング生活に一筋の希望の光を照らすBackbone.jsを紹介したいと思います。 対象読者 JavaScriptでの開発経験がある方 Backbone.jsとは Backbone.jsはDocumentCloudが開発をしている、クライアントサイドのJavaScriptコードをModel、View、Controllerで構築するためのフレームワークです。b
A simple Rails 3 and Backbone.js screencast - Andrew Gertig
Tweet Tweet url: http://andrewgertig.com/2011/05/rails-backbone-js-example-screencast/ This is a quick screencast on how to use Backbone.js with a Ruby on Rails application. The screencast covers the simple example of submitting a form, saving the data to the database, and displaying the records in a table. The repo for the backbone-demo app I created for the screencast is on github. [UPDATE: if y
rails3とbackbone.jsの組み合わせで利用する2
■概要 前回に引き続き、backbone.jsを利用してjqueryでMVCの世界を、rails3と共に作っていこうと思います。 今回はデータのやり取りをする所までが目標です。 ■モデル/コントローラ等を作成する $ rails g scaffold post title:string body:text published:boolean $ rake db:migrate $ rake spec (とりあえずrspecが動くか確認しとく) $ rake spec:rcov (ついでにrcovが動くか確認しとく) $ rails s ここで http://localhost:3000/posts でいつもの画面が表示されてればOK! ■json入出力用にコントローラを修正する とりあえずjsonでやり取りできるように変更します。params.exceptはbackboneとのやり取りを考
Underscore.jsとBackbone.jsちょっと試した
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / jQueryが微妙なところ $.each、$.grep、$.mergeとか、DOM関係ないやつは、DOMに依存してるjQueryとは別のところでやるべきじゃない？サーバーサイドでJSやるとかもこの先考えたらその辺、jQueryに依存したくないし→Underscore.jsjQueryはDOM中心指向なので、データを中心としてなんかする時は、あんまりうまいことできなくない？→Backbone.jsということでUnderscore.jsとBackbone.jsを使ってみる Underscore.js: $.eachとか$.grepみたいな便利機能詰め合わせたやつBackbone.js: array
こてさきAjax:underscore.jsを調べてみた - livedoor Blog（ブログ）
一ヶ月ぶりのブログPOSTです。先月は、色んなことがありました。大きくは３つ。 アメリカのボルチモア（メリーランド州。ワシントンDCから1時間弱ぐらいのところ）にて 5/16 - 19の日程で開催された、RailsConf2011に行ってきました。Ruby on Railsについて、様々な話を聞くことができ、とても勉強になりました。 ビッグサイトで開催された"WirelessJapan2011"のセッションで講演してきました（5/25）。内容は、HTML5を活用した、マルチデバイスでのWebアプリ開発について、概論説明。なにげに有料講演は初めての体験で、ちょっとどきどきだったのですが、比較的好評だったようす。こちらも、いい経験になりました。 僕のことでは無いのですが、会社の後輩(@elrana)が5/21-22の日程でニューヨークで開催された TechCrunchの24時間耐久 Hacka
Backbone.jsにCSRF対策のトークンをpostさせる
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ポチってもうたーでは、ユーザーの情報をサーバー側のモデルと同期させるために、Backbone.jsを使っているのだけど、Backbone.jsは結構特殊な、だけどなんかモダンっぽい仕組みでサーバーと通信する仕組みになってる。 普通、postするときは、name=“Takazudo” age=“28” みたいなデータをサーバーに投げるわけだけど、Backbone.jsは、以下のような、データをtoJSONした文字列をボコっとそのままサーバーに投げ、サーバー側でもそのJSON上手いことなんかやってくれっていう仕組みになってる。 { "name": "Takazudo", "age": "28" }
Backbone.jsでなんか作ってみた所感
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / とりあえず、JSONデータを用意して、それをもとにUIをガリっと作るような機会があったので、半ば無理矢理Backbone.jsが便利なのかどうか試してみた。サンプルは出せないけど、JSONファイルを元に、地図にポツポツポイントをおいて、それクリックしたら遷移したり、地図がズームしたりとか、そんな感じのもの。感想は、「サーバーと連携する機能が無い限りは、そこまで意味が無い」 arrayとobjectが混ざって階層化されたJSONを扱う時、Backbone.jsで、arrayをCollection、objectをModelでラップし、これをネストさせた形でモデル部分のクラスを構成する。そして、それ
Backbone.jsを利用したクライアントサイドMVCの導入についてそろそろ書いておくか - 出町ミスド攻防記
jQueryヘビーなアプリケーションの問題点と、MVCによる構造化の必要性 jQueryは、ブラウザ上で動くJSアプリケーションの開発生産性を劇的に向上させました。DOM操作による動的なページ書き換え処理などは、セレクタを使ってちょろっとコードを書くだけで、ほんの数行で記述できてしまいます。 しかし、この方法の延長で、大規模なJSアプリケーションを構築することは果たして現実的でしょうか。例えば「GMail」や「New Twitter」程度の規模のJSアプリケーションを書かなければならないとしたら、どうでしょう？ 大規模なJSアプリケーションを開発するには、こういった手法を延長するのではなく、より洗練されたデザインパターンを導入する必要があります。この目的にぴったりのデザインパターンが、「MVC」デザインパターンです。 MVCパターンは、Webの世界ではサーバサイドプログラミングで広く知られ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
backbone.jsが利用できる状態でrailsプロジェクト生成
New community features for Google Chat and an update on Currents