非SPAなサービスにReactを導入する - クックパッド開発者ブログ
投稿開発部の外村（@hokaccha）です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション（以下SPA）についてよく語られます。 一方で、SPAを構築するにはコストがかかることも事実で、特にフロントエンドエンジニアが多くない環境では、従来通りサーバーサイドでViewを書きつつ動的な部分だけJavaScriptで処理するというアーキテクチャのほうが現実的な場合も往々にしてあります。 今回はこのような、サーバー側でHTMLを生成し、一部の動的な部分だけをReactで書くためのTipsを紹介します。 なお、基本的にサーバーサイドはRails前提ですが、RailsにおけるReactの開発
Ruby on Rails on React on SSR on SPA - ✘╹◡╹✘
amakan での設計を例に、RailsでSingle-Page Applicationをつくるときの自分のやり方をまとめてみます。 Gem 「JavaScriptで書かれたReactのコンポーネントからHTMLを生成する」というのをRubyでやるために、RubyのV8エンジン実装であるmini_racerというGemを使う。この処理を楽に実行するために、react_on_railsというGemも使う。 gem "mini_racer" gem "react_on_rails" View body要素内のHTMLは全てReactで生成するので、layout以外にviewのテンプレートは存在しない。 Controller 初回リクエストの場合はHTMLを返す ページ遷移時に呼ばれるリクエストの場合はJSONを返す 外部サイトからブラウザバックで戻ってきたときにJSONを見せない という要求に
新規Railsアプリに小さく導入するReact - Speaker Deck
dotsで開催されたReactの導入を検討されてる方向けの勉強会でお話しました https://eventdots.jp/event/597088
Facebook Relayについてまとめ - Qiita
Reactがもっと広まって欲しいと思っている今日このごろ。React EuropeでJoseph Savona氏の講演でRelayについての「モヤっと」がいっきにかなり解消された気がするので、要点を本編を翻訳しながら自分なりにまとめておきます。 私の理解が誤っている可能性は十二分にありえるので、ご指摘いただければ幸いです。 はじめに ReactとFluxって組み合わせと共によく目にするのが↓の図。 矢印は一方向にしか進まないのが特徴で、わかりやすいってのがいろんなところで書かれているんですけど、 結局データをサーバからとってくるところってどうなってるの？ってのが疑問として残ります。つまり、図で表現すると↓の部分の仕組みがどうなっているかってところです。 その部分を、Instagramのようなサービスを例に説明しています。 クライアントはどのようにしてサーバからデータを取得すべきか まず、I
Shadow DOMとVirtual DOM - Fuzoku実践入門ブログ
Shadow DOMとVirtual DOM、影と仮想、何となくニュアンスが似ているため分かりにくい、そういう声を聞きました。 そこで、一介の風俗解説本の著者が分かりやすく両者を説明する方法を考えてみました。 現実にあるのが影（Shadow）、現実にないのが仮想（Virtual） 色々と自分の中で整理した結果、現実に存在するかしないかで区別すると、理解しやすいと考えました。 要するに、言葉にしてみると次のような考え方です。 影は現実に存在しているので、Shadow DOMも実際のDOMツリーには確かに存在している。 仮想は現実に存在していないため、実際のDOMツリーにも存在しない。 それでは、上記を踏まえた上で、実際の例を見てみましょう。 存在しているけど、触れられないのが影 Shadow DOMの役割は、Shadow DOM 101 - HTML5 Rocksの冒頭にも書かれている通り、
Ajaxを劇的に簡単にするReact.js
ここ数年、Javascript界隈でフレームワーク戦争が勃発してきました。クライアント開発の規模も年々大きくなり、jQueryだけでは複雑な画面遷移などを管理しきれなくなってきたのが原因だと思います。 私も昨年までAngularとbackboneを試しましたが、サーバサイドをMVCにしているのに、クライアントでもMVCを作るMVCの2階建ては、やり過ぎなのではないかと思っていました。フレームワークそのもの覚えるまでにも一苦労というのも面倒に感じました。 2014年、海外でブームに火が付いたReact.js そんな中、2014年の後半からFacebook発のReact.jsの採用事例が聞こえてくるようになりました。AirBnBや米Yahoo! Mailなど大手がReact.jsを積極的に採用し出したので気になり、年末年始を使って色々調べてみることにしました。 Rails以来の衝撃 色々試して
Fluxフレームワーク Arda が気になる10の理由 - Qiita
Help us understand the problem. What is going on with this article? どうも、@armorik83です。 Fluxフレームワーク"Arda"、皆さんご存知ですか? 概念や思想を含めて大々的に発表されたのは、おそらく2015年2月16日（記事掲載時点でおととい）という新たなOSSです。 開発者は@mizchi氏。Qiitaの中の人 (Kobito)、魂が震えてる人、Reactの人として有名かと思いますが、個人的にはAngularJSが嫌いな人という認識です。 今回、そんなmizchiさんが開発されたフレームワーク"Arda"をあえて取り上げたい衝動に駆られたので、興味のある方はお付き合い下さい。 動機 気になった理由の前に、ここに至った動機を前置きします。ここ長いです。例のアレな感じです。 思い出話 私は2013年秋からAng
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactとFluxのこと // Speaker Deck
https://qiita.com/kenokabe/items/9c650ec8bcb1418c596d
Fluxアーキテクチャの覚え書きを書いた - saneyuki_s log