ϨΠϠʔԽ ɹΞʔΩςΫνϟ ΤϯςΟςΟ όϦϡʔ ɹΦϒδΣΫτ ϦϙδτϦ ϢϏΩλεݴޠ େنઃܭ ϦϑΝΫλϦϯά ΞάϦήʔτ ࠓ ͢ Δ ͓ ࠓ ͠ ͳ ͍ ͓
Backbone使ってみるメモ。まだあんまりよくわかってないんだなー。 よくわからないならコードを読めばいいじゃない、という事で、公式で提供されているTodoアプリのコードを読んでみました。 ソース 公式のサンプル。 Backbone.js Todos todos.js いわゆるTodo管理ツールなんだけど、情報をHTML5のLocalStorageに持つようになっている。つまりブラウザを閉じても内容を記憶している。 JSファイル HTMLから読み込んでいるのは以下。 json2.js jquery-1.7.1.js underscore-1.3.1.js backbone.js backbone-localstorage.js todos.js Backbone.jsはUnderscore.jsとjQueryないしZepto.jsが必須。またLocalStorageを使うためのBackb
というわけで色々Backbone.jsについて見てはいるものの、いざ自分で作ってみると上手くいかない・・。 ようはどの単位でViewとModelを紐付ければ良いかわからないんですよねー。 というわけで、Todoリストのサンプルからそのヒントを得ようという試み。 参考:Backbone.js Todos Backbone.js Todosについて 見ての通りBackbone.jsで作られたサンプルアプリ。 Todoリストのデータの保管にはLocalStorageを使ってて、別のライブラリを読み込んでます。 ソース全部 せっかくなので、ソースについてるコメントを和訳しときます。 // An example Backbone application contributed by // [Jérôme Gravel-Niquet](http://jgn.me/). This demo uses a
はじめに 普段は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
This document summarizes a microservices meetup hosted by @mosa_siru. Key points include: 1. @mosa_siru is an engineer at DeNA and CTO of Gunosy. 2. The meetup covered Gunosy's architecture with over 45 GitHub repositories, 30 stacks, 10 Go APIs, and 10 Python batch processes using AWS services like Kinesis, Lambda, SQS and API Gateway. 3. Challenges discussed were managing 30 microservices, ensur
2017/03/01 WebサービスとしてリニューアルしてHerokuで公開しました。 QiiTrend QiitaトレンドをリニューアルしてQiiTrendを作った - Qiita データ取得方法を変更したので、長期間のデータが高速に取得できるようになりました。 サーバーサイドでデータをキャッシュしているので、一度表示したデータは次回から高速に表示できるようになりました。 Qiitaの検索オプションがそのまま使えるようになり、タグ以外の検索もできるようになりました。 以下、2015/04/06の内容 最近話題になってるReact.jsを使ってクライアントサイドだけで動く簡単なアプリを作ってみた。 ソース https://gist.github.com/tag1216/819ded0722cedf75996f デモ http://bl.ocks.org/tag1216/raw/819ded
(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(アルファ版) これらのフレームワークでは、以下のような機能が実現さ
AngularJSのエキスパート達が語る、AngularJSの使いどころとつらいところ(後編)。Deverlopers Summit 2015 JavaScriptのフレームワークの1つとして注目されている「AngularJS」は、どんな用途に向いているのか、学習コストはどれくらいか? 使いにくいところは? などの疑問をAngularJSのエキスパート達が次々に答えてくれるセッション「AngularJSの今とこれから」が、2月19日に都内で行われたイベント「Developers Summit 2015」で行われました。 (本記事は「AngularJSのエキスパート達が語る、AngularJSの使いどころとつらいところ(前編)。Deverlopers Summit 2015」の続きです) AngularJSを選んだ理由 川田氏 次の質問は、数あるフレームワークの中からAngularJSを選ん
あけましておめでとうございます。 新年一発目は 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
JS弱者がBackboneでアプリ書いてて思った「VirtualDOMだったらここがよくなるだろうな」ってことを、ここの識者たちに「この理解でいいの?」って聞きたかったJavaScriptReact こんにちは。VirtualDOM Advent Calendar 15日目のdekokunです。 14日目はtomato360さんの「React.jsのチュートリアルを触る」でした。私はまだチュートリアルすら触っていないのにこの記事を書いていて、こいつ終わってんな感出ています。 現状説明 さて、私は15日目の担当だったんですが、それを成し遂げることができませんでした。 私の後回し精神によって後回されたAdvent Calendarタスクがインフルエンザによって潰された形です。すみませんとしか言い様がない。 インフルエンザの消滅を待って正式に記事を書くため一旦タイトルには「草稿」とつけさせてもら
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”としたとき、下
This document summarizes a microservices meetup hosted by @mosa_siru. Key points include: 1. @mosa_siru is an engineer at DeNA and CTO of Gunosy. 2. The meetup covered Gunosy's architecture with over 45 GitHub repositories, 30 stacks, 10 Go APIs, and 10 Python batch processes using AWS services like Kinesis, Lambda, SQS and API Gateway. 3. Challenges discussed were managing 30 microservices, ensur
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く