ここ数年前から2015までのモダンフロントエンドを総まとめしてみた｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は適当です。ぜひ一度整理してみてください。 (ここではフロントエンドというのを、ざっくりとHTML/CSS/JavascriptをつかったWeb技術のことをいうことにします)。 目次 Javascriptフレームワーク React.js Angular.js
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
Socket.ioとBackbone.jsによるSingle Page Application概要編に続いて実装編としてDemoのソースを解説します。 Demoのソースはgithubで公開しています。 backbone_socket_io_reqev デモの構成 -- 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 Tim
Backbone, Chaplin, Marionette そして React - Quipper における Single Page Application 開発の変遷 - YAPC::Asia Tokyo 2014
私の勤務先 Quipper Ltd は e-learning サービスを提供している会社です。 私は Quipper に入社してからの二年間で、モバイルネイティブ（iOS, Android）以外のほぼ全てのアプリケーション開発になんらかの形で携わってきましたが、その多くが Ruby on Rails による JSON API サーバ + CoffeeScript となんらかの JavaScript フレームワークによる Single Page Application という構成でした。 これまでに、 Backbone, Chaplin, Marionette そして React でフロントエンドアプリケーションを作ってきました。 JavaScript フレームワークの選定は難しい問題で、うまくいったこともあれば苦労したこともありました。 API サーバの設計・開発・運用も思ったほど単純では
How to build a Rails 5 API only and Backbone application
A few weeks ago, an announcement was made referring to the imminent inclusion of Rails API into Rails core. Until now, Rails API has been a separated project and people have been using it through the rails-api gem. Santiago Pastorino and I have been working on bringing Rails API into Rails for a while. After some further discussion, bug fixes and last-minute changes, the corresponding pull request
動的に作られる要素にイベントをbindする - Qiita
Backbone.js Advent Calendar 1日目! 参加者が増えないと2人で25日回すことになるので，どんどん参加してください:) http://atnd.org/events/22017 参加方法は，atndで登録したあと，AdventCalendarタグとBackbone.jsタグを付けて投稿してもらえれば，advent calendar用ページに登録します． http://qiita.com/adcal/backbone Backbone.jsのイベント登録 Backboneではイベントを var myView = Backbone.View.extend({ events: { "click .hello-button": "hello" }, hello: function() { alert("hello!"); } });
ビューが画面に現れたら処理を実行する - Qiita
Backbone.js Advent Calendar 2日目! 勢い良く走り始めたBackbone.js Advent Calendarですが、初日に引き続き2日目もビューに関連する話題です。 ビューの遅延評価をしたい Backbone.jsに限らずサービスを高速化するために、遅延評価を行いたい場面は沢山あります。たとえば画像掲示板のシステムを作っていたら、いきなり画像全てを読み込もうとするとサーバにも負荷がかかりますし、何よりユーザが表示しない画像まで読み込むのは無駄です。他にもTwitterのようなタイムラインに対して、一番下までユーザがスクロールしたら自動的に続きを読み込むような処理を行いたい場合もあるでしょう。 という訳でユーザのスクロールをトリガーにしてイベントを発火させられるBackbone.LazyViewというのを作ってみました。 taak84u9/backbone-la
RailsアプリでBackbone.jsを使う - Qiita
Backbone.js Advent Calendar 5日目 Backbone.jsの本家ドキュメントにtodoリストをブラウザのLocalStorageを使って保存するチュートリアルがあります。 todo.js 今回は、このtodoアプリのバックエンドとして、Ruby on Railsを使うように変更してみたいと思います。 Backbone.jsとサーバの通信 Backbone.jsはModelやCollectionの内容をサーバと同期するための手段を提供してくれています。標準で用意されているBackbone.syncはサーバがRESTfulと呼ばれるインタフェースを提供していることを前提に動作しますが、同期する方法を自作することも可能で、例えば上記のtodoリストのチュートリアルではLocalStorageにデータを保存するために、Storeという名前のオブジェクトを自作して用いてい
Modelの一対多を実装する - Qiita
例えば、Blogテーブルにuser_idカラムがあり、これがUserテーブルへの外部キー制約になっているような場合、WebフレームワークではBlogモデルにuserフィールドを持たせて、そのフィールドにメッセージを送ると、参照しているUserモデルのインスタンスを返してくれるようになっている場合が多いと思います。 このような関係をBackbone.jsで実現しようと思い、つい以下のように書きたくなってしまうかも知れません。 var User = Backbone.Model.extend({}); var author = new User({id: $(".user_id").html()}); var Blog = Backbone.Model.extend({}); var entry = new Backbone({text: $(".text").html(), user_id:
Backbone.js入門 「View と Model と Collection の連携」 - Qiita
閲覧上の注意 この記事で対象としているバージョン0.5.3は結構古いので注意してください。 その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。 （追記ここまで） Backbone.js入門シリーズも佳境に差し掛かってきました。 View と Model の連携は既に取り上げたので、今回は特に Collection と View Model との連携に主眼を当てて記述したいと思います。 View と Collection の連携 復習の意味も込めて、View と Model の連携方法をもう一度記述すると、大枠として次のようになります。 // モデルの定義 Hoge = Backbone.Model.extend({}); // ビューの定義 HogeView = Backbone.View.extend({ events: { "
Backbone.js入門 「Router と History」 - Qiita
閲覧上の注意 この記事で対象としているバージョン0.5.3は結構古いので注意してください。 その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。 （追記ここまで） Backbone.js入門の最終回は Router と History です。 Backbone.js入門 「MVC」で述べたように、URL が変更された時に発生する popstate または hashchange イベントを監視してルーチンを起動するのが Router の役目です。History は Router の裏方で頑張る実体で、直接操作することはほとんどありません。 URL が変更された時にアクセスされるのが Router なので、Rails 的な MVC の枠組みで言えばコントローラと言えますし、伝統的な MVC で言えば全てのアンカーとブラウザの進退ボタンを
Backbone.js入門 「View」 - Qiita
閲覧上の注意 この記事で対象としているバージョン0.5.3は結構古いので注意してください。例えばこの記事の内容でいえば、$elプロパティなどが追加されています。 その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。 （追記ここまで） Backbone.js Advent Calendar もようやく折り返し地点。 そんな節目のエントリで取り上げるのが Backbone.js プログラミングでの最重要登場人物の一人である View です。 前回のエントリで Backbone.js では View が各種の処理を起動するということを説明しました。 今回は View を使って、イベントハンドリングを行う方法について主に解説していこうと思います。 View と DOM tree View の役割は大きく分けて2つあります。 特定の DOM
Backbone.js入門 「Model」 - Qiita
閲覧上の注意 この記事で対象としているバージョン0.5.3は結構古いので注意してください。例えばこの記事の内容でいうと、validateに失敗したときに発生するイベントは'error'から'invalid'に変更されています。 その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。 （追記ここまで） 今日のテーマは Model です。 MVC に関する回で Backbone.js における MVC は Rails などの WAF における MVC よりは伝統的な MVC に近い というようなことを書きました。 しかしながら、モデルに関して言えばどちらの場合も大差ありませんから、気分が楽です。 Rails におけるモデルである ActiveRecord が OR マッパーとしての役割を持っていたり、データのバリデーション機能を持っていた
Backbone.js入門 「View と Model の連携」 - Qiita
閲覧上の注意 この記事で対象としているバージョン0.5.3は結構古いので注意してください。 その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。 （追記ここまで） 今日のテーマは View と Model の連携です。 基本的なパターン 例えばブログサービスを作っているとします。 おそらく Blog というモデルや、それを表示するページのビューを作ることになると思いますが、記事の全文を表示するビューや複数の記事をリスト形式で表示するビュー、編集ビューなどなど、一つのモデルに対して複数のビューが存在するのが一般的ではないでしょうか。 このように View と Model は基本的に 多対一 の関係になっています。 そのため、Model の属性が変更されたら、複数の View に変更を通知・反映しなければなりません（でなければユーザはシ
【あえて英語記事オンリー】Backbone.jsを学べるページまとめ - Qiita
Backbone.jsの情報を探していると英語の記事に当たることが多いので、ここはむしろ割り切って最近読んだBackbone.jsについて英語で書かれたページをまとめておきました。 なんか英語の記事読むと「やってやったぜ！」という気持ちにもなるし シンプルなスライドもの Client-side MVC with Backbone.js ごく初歩の「なんでBackbone使ったらいいの？」から、アーキテクチャの説明や利用例、モデルの関連を作るtipsなどページ数は多いけどどんどん読める系。 Unit Testing JavaScript and Backbone.JS BackboneのModelとかViewとかを単体テストする方法を分かりやすく紹介してくれるプレゼンテーションスライド。 前半でごく明快にテストが必要な理由や箇所、後半にBackboneを使うとどういう風に簡単できれいに書ける
Backbone.jsにUIバインディング機能を付ける拡張ライブラリ「Epoxy.js」 - Qiita
Backbone.jsはJavaScriptのMVCフレームワークの中では縛りが緩めで柔軟な使い方ができる(らしい)一方、ModelとDOM要素を関連付けて自動的に連動するような便利機能、いわゆるUIバインディングをサポートしていません。Modelが変更された時に発火されるイベント先で自力でDOMに反映させたり、DOMでのイベント発生時にModelに反映させる処理を自力で書く必要があります。 そんなBackbone.jsのUIバインディングライブラリを自作しようと思い情報収集をしていたら、すでに完成度の高いライブラリがあったのでちょっと試してみました。 ダウンロードやその他詳細はこちらの本家でどうぞ。 日本語の情報はほぼなかったので(まあ本家のサンプルコード見るだけで大体分かるっていうのもあると思いますが)、ここでは簡単な使い方とかをメモしておこうと思います。 基本的なサンプル <div
BakboneJSだってDOMとModelをBindingしたい！ - Qiita
JavaScript - Client Side - Advent Calendar 2013 http://qiita.com/advent-calendar/2013/javascript 12/3(火)分の記事です。 さてさて Backbone.jsを使うとjQueryのみ使うより Webアプリケーションのソースコードが スッキリ書く事が出来ますよね。 「よーし、もっと勉強するぞ〜」っと思っていると 最近、AngularJSが超人気なんで嫉妬してます。 特にData Bindingうらやましい... Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes. http:
Backbone.jsなどのライブラリのgetter, setterがダサい理由と、その解消方法 - Qiita
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
AngularJS vs. Backbone.js vs. Ember.js
##5 Templating Angular and Ember include a template engine. Backbone, on the other hand, leaves it up to you to use the template engine of your choice. The best way to get a feeling of the different templating engines is a code sample, so let's dive in. We will show an example of formatting a list of items as HTML. ###5.1 AngularJS Angular's Templating engine is simply HTML with binding expression
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - arch-js/arch: Web application framework for React by Red Badger
