Backbone.MarionetteアプリをBrowserifyでバンドルする(Grunt編） - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
backboneの基礎の基礎 第1回[サーバからデータ取得せずにローカルで動かす] - Qiita
仕事でbackbone、marionetteをやってます。 jqueryは使った事があったけど、backboneとかのMVCレベルのフレームワークは使った事なかったので、 (JavaとかではstrutsなどのMVCは経験あり)理解するのに手こずりました。 同じような人の理解に役立てれればなぁと思っております。。。 いきなりサーバサイドとの組み合わせでやるとかなり複雑になるなと感じたので、 backboneを基本から簡単に理解できるように数回にわけて書きたいと思います。 まず第1回目として、backboneの一番いいとこといっても過言でないRESTは実装せずに、 ローカルのみで、しかも超簡単な画面を通して、基本的な構成を書きます！ 今回のゴールの画面はこれ フットサルのメンバー紹介サイト。2人のメンバーの名前と生年月日、ポジションがただ表示されているだけの画面。 まぁ、これならHTMLだけで
![backboneの基礎の基礎 第1回[サーバからデータ取得せずにローカルで動かす] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ee6a648ec3b73534c27dd773e68e1c2c85b8252c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNzkyMTQlMkZwcm9maWxlLWltYWdlcyUyRjE1MjE5NDIyOTU_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZDQzZTIxZDIwOWFiMmNiYWFhNjQ3OWI0NDUzMjNkY2I%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D6e9be90d589536b83ab8b98d2be0958e%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9YmFja2JvbmUlRTMlODElQUUlRTUlOUYlQkElRTclQTQlOEUlRTMlODElQUUlRTUlOUYlQkElRTclQTQlOEUlMjAlRTclQUMlQUMxJUU1JTlCJTlFJTVCJUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkwJUUzJTgxJThCJUUzJTgyJTg5JUUzJTgzJTg3JUUzJTgzJUJDJUUzJTgyJUJGJUU1JThGJTk2JUU1JUJFJTk3JUUzJTgxJTlCJUUzJTgxJTlBJUUzJTgxJUFCJUUzJTgzJUFEJUUzJTgzJUJDJUUzJTgyJUFCJUUzJTgzJUFCJUUzJTgxJUE3JUU1JThCJTk1JUUzJTgxJThCJUUzJTgxJTk5JTVEJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9ODUyNzYxNTQ3ZDczZDQ0MzI4NWUzNWQxZGEyOTVlMDI%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBuYWthNDYmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1hNGExOGQzMGJkODcwMDlhNzEzMGMwZDZjM2I0NTUxOQ%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3De43ae9a916aa72f63ac12b70d1c57097)
Backbone.MarionetteアプリをWebpackでバンドルする - Qiita
Webpack 今まで、Browserlifyを利用していましたが、Webpackに切り替えました。Webpackの方が使い方も簡単で、これからモジュールバンドルを利用される方は、Webpackを使う方がいいのではないでしょうか。 なんでもjsへ変換してくれます。 バンドルサンプル バンドルの例として以下のようなモジュールを利用するWebアプリのバンドル方法を示します。全体はGithubに置いてあります。 https://github.com/notice/backbone-marionette backbone backbone.marionette jade lodash jquery Backbone.Marionette 最近では、少し古く感じてしまうBackboneですが、Marionetteの方はv3（現時点最新はv2.4）へ向けて開発が進められています。 v3ではMarion
SinglePageApplicationにおける問題点と対応 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに スマートフォン向けFX情報サイトSmartFXをBackbone.jsを使ったSPA(Single Page Application)で運用しています。 そこでの気づいた問題点とその対応方法を共有したいと思います。 直帰率が高くなりやすい！ SPAにより、各ページの遷移が一瞬でできるようにしたのに、最初のうちは約半数の人がTopページのみで離脱してていました。 理由なのですが、2つあると思っています。 SPAに対する認識 そもそもSPAって普通の人は知らないし、知っていたとしても見ためは普通のWebページとなんら変わらなければ
【2016年夏】個人的に注目なフロントエンドで使えるJavaScriptフレームワークまとめ - Qiita
 # はじめに Webサービスを開発するにあたり、JavaScriptのフレームワークは今や欠かせないものになりました。 多種多用なフレームワークがある中で、今回は主にwebサービスのフロントエンドで用いられるJavaScriptフレームワークをまとめました。 それぞれのJavaScriptフレームワークの詳しい使い方については、詳細に説明されているサイトが沢山あるので本記事では省略致します。 こんなフレームワークもあるんだなーと軽い感じで眺めていただけると幸いです！
Backbone.jsにReduxを導入してみる - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Reduxを導入する契機 ここ何年間かSPAアプリの構築にはBackbone.jsを使っています。 小さくて自由度が高いので、スマホのハイブリッドアプリによくマッチングするからです。 ただアプリが大きくなるにつれて、モデルのデータ管理が難しくなってきました。 SPAで作るにあたって、他の画面へモデルを引き継いだり、処理が完了すればモデルを初期化する必要が出てきます。 メニュー等で別の画面に直接飛んだり、入力をし直すために画面を戻った際にモデルのデータが意図せぬ状況になるパターンが増えてきました。 また、扱うモデルも増えてきたため、モデル
React on 現場 ~ あるいは Modern JavaScript on Rails ~ - Qiita
これは何 JSer.info 5周年記念イベント - connpass (2016/01/16) にて発表した資料。特に理由はないが公開するのを忘れていた。 スライドモードのリリースにあたって公開する 近況(2016/01/16) 昨年9月 Kobito for Windows => Qiita開発チーム モダンなJS(当社比)を導入しようとした モダンなJSとは(mizchi主観2016版) npm/browserifyで依存を解決 Babel/ES2015 React/Flux Testable No More jQuery plugins ※これらの基準について今回は割愛 現実(2015) CoffeeScript Sprockets / グローバル名前空間渡し Backbone JSのテストはjasmineで数件 (※request specは豊富) jQuery plugins
クライアントサイドフレームワークの歴史 - Qiita
クライアントサイドJavaScriptフレームワークの歴史を整理します。 1stリリース順 1stリリース順に並べます。 有史以前 2008年 6月 SproutCore 10月 Cappuccino 第1世代 クライアントサイドJavaScriptに、どうにかして構造を与えようとした世代 2010年 7月 Knockout 10月 Backbone.js 10月 AngularJS 第2世代 フルスタック化を目指した世代 2011年 6月 Ember.js 7月 Agility.js 8月 Derby 9月 Spine 11月 Knockback.js 12月 Meteor 2012年 CanJS 第3世代 virtual DOM や Object.observe() を使った（使おうとした）世代 2013年 1月 Flight (Flight is not under active d
RailsアプリでBackbone.jsを使う（2015年版） - Qiita
Ruby on RailsとBackbone.js始めました。 Rails × Backbone.jsを試したくて調べて出てきた記事「RailsアプリでBackbone.jsを使う」を読み、まったく同じことをやろうとしたら色々ハマりました。 自分がRailsもBackbone.jsも初心者なために陥ったのが大部分だと思いますが、4年近い歳月の間に変わってしまったことも多くあったようです。 そこで、目指すところは元記事と同じまま手順を2015年版に書き換えてみたいと思います。 Backbone.jsの本家ドキュメントにtodoリストをブラウザのLocalStorageを使って保存するチュートリアルがあります。 todo.js 今回は、このtodoアプリのバックエンドとして、Ruby on Railsを使うように変更してみたいと思います。 Rails rails new〜rake db:mig
1年間真剣にJavaScriptに取り組んだ話 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 1年間真剣にJavaScriptに取り組んだ話 まえがき JavaScriptアドベントカレンダーの最終日をやらせて頂いて光栄です。 http://qiita.com/advent-calendar/2015/javascript ※元々は2の最終日を担当するつもりでしたが、本家が空いておりましたので失礼させていただいております。 2015年、自分の中で一番何に夢中だったかといいますと、モンハンかJavaScript(Node.js)だったなぁと思います。 そんなで今回は1年間どんな感じにJavaScriptとじゃれてきたのかをモクモク
無謀にもJavaScriptなしでやってみる! Riot.js入門 - Qiita
このチュートリアルでは簡単なWebページをRiot.jsで作ってみようと思います。読むのに必要な知識は、次の二つだけ。 HTML CSS 逆に不要な知識は、 JavaScript: AngularとかReactとか CSSの方法論: BEMとかSMACSSとか など。ただ、上記を把握していると、より「Riot.jsすげー」ってなるかも、なってほしいな。 Riot.jsを使うにあたって、モック作成や、静的ページだけなら、JavaScriptを書く必要はそれほどありません。このチュートリアルを通じて、次の2つのポイントを伝えられればと思います。 デザイン先行で作成ができる (開発後回し可能) HTML+CSSだけでもコンポーネントが作成できる Riot.jsとは 近年、AngularJSやReact、Backbone.jsなど、さまざまなJavaScriptフレームワークの名前を聞く機会が増え
Socket.ioとBackbone.jsによるSingle Page Application 概要編 - Qiita
はじめに スマートフォン向けFX情報サイトsmartfx.minkabu.jpをSocket.ioとBackbone.jsを使って今話題のSinglePageApplication(SPA)で構築しました。 想像していたよりも簡単にできたので、共有してみます。 Socket.ioを使う理由 マーケット情報は共通の情報のため、Socket.ioのBroadcastができ、かつ更新時のみ送信できるという性質がサーバにもクライアントにもやさしいです。 Backbone.jsを使う理由 SPAというと最近ではAngular.jsばかりが目立ちますが、Backbone.jsを選んだのは下記理由です。 1.AngularJSの場合は圧縮され最小化された状態で約36K、Backboneは6.4Kなのでスマホの回線を考えると、Backbone.jsのほうが優位です。 2. 拡張性もBackbone.jsは
Socket.ioとBackbone.jsによるSingle Page Application 実装編 - Qiita
-- app.js |- public - index.html | |- backbone - spa.js | template - timer.jst.ejs | |- time.jst.ejs | |- app - router - sample_router.js.coffee |- models - timer.js.coffee |- views - timer_view.js.coffee |- time_view.js.coffee var express = require('express') var Timer = require('./timer') var path = require('path') var http = require('http') var app = express(); var Mincer = require('mincer'); v
Backbone.jsと比較したReact.js - Qiita
#はじめに 普段は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
Node.js を5分で大雑把に理解する - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 随時更新します。 対象の人 使ったことないけど、軽く理解はしておきたい人 本格的に勉強する前に、大まかな概要を知りたい人 特徴 サーバーサイドのJavaScript 非同期 (I/Oの処理結果を待たず処理を進める) ノンブロッキングI/O (I/Oの結果を待たないで処理をすすめる。I/O処理が終了したらコールバック関数を実行。) イベントドリブン (何かしらのキッカケで動き始める) シングルスレッド (メモリ消費が少ない、仕事切り替えが少ないので速い) JavaScript エンジンが Google の V8 で速い Node.jsで作
複雑なHTMLを動的にロードするとき，JSテンプレートを利用するとよい - Qiita
完全に遅れてしまっていてもはやAdvent Calendarではなくなっている「Backbone.js Advent Calendar」ですが，なんとか25日まで続けます:) ちなみに昨日までの「Backbone.js入門」シリーズ(by @taka84u9)がとてもわかりやすいので，Backbone.jsを使ったことのない人はまずそちらから読むのがおすすめです． (http://qiita.com/adcal/backbone の12/11分より) はじめに Ajaxを利用して動的にHTMLをロードするとき，対象HTMLが複雑になってくるとJSだけで作るのはコストが大きくなってきます．(appendの山) またぱっとコードを見たときにどういうHTMLになるかわからず，デザイナーと共同作業もやりにくくなります．タグを1つ追加したいだけなのに，JSのコードを読んで追加処理を書くのはかなり面倒
Rendr入門(1): Node.js + Backbone.jsでサーバ & クライアントを構築する"Rendr"の紹介 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめてQiitaで記事を書いています。先日「Node.js + Express.js + Backbone.js」でサーバとクライアントの両方のシステムを構築する"Rendr"というウェブフレームワークを試しました。Rendrは、アメリカで人気のサービス"AirBnb"のチームが開発し、オープンソースとして公開したものです。クライアント側での採用事例は増えているBackbone.jsですが、サーバでの利用は珍しいのでは無いでしょうか。Rendr自体もまだ日本語での紹介例が無い事もあり、システムを紹介しつつ、使用感やメリット、そしてデメ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Backbone.MarionetteアプリをBrowserifyでバンドルする(Gulp編） - Qiita
Yeomanのgenerator-backboneを使って開発環境を作ったときの覚書 - Qiita
backbone-on-railsでモデル一覧を表示する。 - Qiita
