ServerlessでReactする - Qiita
はじめに AWS Lambda + API Gateway でAPIつくってReactの部分はS3に置けば超低コストでSPA作れるんじゃね！？という思いつき（みんな気づいてる）を実践してみた記録です。 バージョン Serverless v0.5.5 React v15.1.0 aws-cli v1.10.35 Node.js v4.3 Serverlessはバージョン毎にかなり差異が大きいようなので注意してください（数カ月前に書かれた記事を読んでも？？？となることが多い）。 Nodeの他にPythonでもいけますが今回はNodeでいきます。LambdaはNode v5~系にはまだ対応していません。 プロジェクトをつくる AWSのIDとシークレットを取得する Serverless - Configuring AWS に書いてある通りに進めます。また、AWSは日本語に設定してあるものとします。
Dan Abramov - Live React: Hot Reloading with Time Travel at react-europe 2015
React’s unique strength is bringing to JavaScript development some of the benefits previously exclusive to more radically functional languages such as Elm and ClojureScript, without forcing you to completely eschew local state or rewrite code with exclusively immutable data structures. In this talk, Dan will demonstrate how React can be used together with Webpack Hot Module Replacement to create a
Fluxフレームワーク戦争の現状確認（前編） - マルシテイア
この記事は 仮想DOM/Flux Advent Calendar 2015 2日目の記事です。 みなさんFlux書いてますか？ 僕はオレオレ実装を書き続けて消耗してます。 Fluxフレームワーク使いたいけど使いたくない……！！ いったい今Fluxフレームワークって幾つ生き残ってるの……戦争は終わったの？ っていうか最近新フレームワークの噂聞かないけど、まだFluxって流行ってるの？ 今日はその辺をまとめてみたいと思います。 もくじ 前提知識 Flux以前 2014年5月 Flux登場 〜2015年前半 戦国時代 Fluxxor Fluxible Alt NuclearJS 振り返り 2015/5月 Reduxの登場 前半まとめ 前提知識 Fluxってなに？という方はこちらの資料をみると良いでしょう。 非常に丁寧にまとめられています。 speakerdeck.com なお、以下ではアーキテク
The SoundCloud Client in React + Redux
In the beginning of 2016 it was time for me to deep dive into the ReactJs world. I read tons of articles about React and its environment, especially Redux, so far. Several of my colleagues used it in side projects and on a theoretical level I could participate in the discussions. In my company we relied heavily on Angular 1 at this point. Since we are using it in a quite large code base, we know a
ssig33.com - なぜ SPA か
顧客は SPA であることを望んでいるのか？そうではないです。技術者は SPA を作りたいのか？そうではないです。 ではなぜ SPA 的なものが出来てしまうかといえば、いちいち UI の遷移のために大量のデータをロードしているのは時間と資源の無駄だからです。 もちろんあるべき姿としては、サーバーの CPU やストレージやメモリは爆速で、回線も爆速で、用いられるデータは必要最低限で、クライアントマシンも爆速で、クライアント側でフォームを一個書き換えるたびにページをフルロードしても全くストレス無く使える、というような世界観です。 しかし実際にはサーバーのスペックも回線もクライアントのスペックも不足気味ですから頑張って補っていく必要があります。 すると最初にロードしたデータをクライアントは保持し続けて、 HTML 全体を書き換えるのではなく必要なところだけを最小限の通信とともに書き換えてみたいな
Reactサブセット実装の preact で、ライフゲームのアニメーション書いて使い方を確認した
厳密なサブセットかは要確認な気がするが、まあそういうコンセプトのライブラリがある。 で、使ってみた。 preact とは reactのサブセット実装。reactと比較してかなり小さい(圧縮して3kb)。contextとかpropTypesとかはない。いらないと思う。 reactとの互換をもたせるレイヤーは本体を小さくするために外部パッケージに切り出されている。 https://github.com/developit/preact-compat コード量が少ないので、迷ったら元のコード読めるという安心感がある。 個人的にReactは過剰な抽象化の迷宮だと思っていて、あんまり読みたくない。 最初に ライフゲームのアニメーションしたかったわけで、ライフゲームを書きたかったわけではないので、ライフゲームのロジック部分はnpmから適当に持ってきた。 動いてるコードはここ http://mizchi
React.js pure render performance anti-pattern
Pure render optimized React components can be extremely performant but it requires users to treat their data as immutable for it to work properly. Unfortunately due to nature of Javascript it can be quite challenging sometimes. tl;dr. The anti-pattern is creating new arrays, objects, functions or any other new identities during render or in Redux connect(mapState). Pure render?With React.js pure r
GitHub - petehunt/react-howto: Your guide to the (sometimes overwhelming!) React ecosystem.
react-howto If you’re new to React (or frontend in general) you may find the ecosystem confusing. There are a few reasons for this. React has historically been targeted at early-adopters and experts Facebook only open-sources what it actually uses, so it doesn’t focus on tooling for smaller-than-Facebook projects There’s a lot of bad marketing masquerading as React guides Throughout this document,
Rails5, ActionCable, Redux, and React: Walking through an example chat application
I spent some time over the holiday break wrapping my head around Rails 5 with Redux. This will be an interesting stack to consider. Source code for the chat app is here. Live demo is here. For those unfamiliar, Rails 5 introduces ActionCable (integrated websockets), and DHH published a quick demo of how it works. If you happen to be interested in diving into my example below on your own local mach
仮想DOMで魂が震えてから一年、仮想DOMとFluxの今 - Qiita
なぜ仮想DOMという概念が俺達の魂を震えさせるのか から一年、みなさまどのようなフロントエンドをお過ごしでしょうか。 僕はひたすら過去資産をリファクタしています。 需要の雰囲気 色んな所に書きましたが、去年僕が仮想DOM AdventCalendar をやったのは、「僕自身がproductionで使いたい」ので、「Reactまあいいよね」的な雰囲気を作って外堀埋めるのが目的でした。そして、その目的はおおよそ果たされたと言ってもいいでしょう。ご協力ありがとうございました。 僕自身はKobito for Windows でReactを使ってみて、そのノウハウを公開したり、今年前半は色々とアウトプットをしていましたが、後半はSpecificなアプリケーションドメインを記述することが多くて、あまりアウトプットする内容がなくなってました。 取り敢えずは、新規のプロダクトなら採用してもよい、という雰囲
React入れたらCasperJSのE2Eテスト壊れたのでPhantomJS2入れたらPhantomJSのユニットテスト壊れたのでwebdriverioでE2Eテスト書き直した話 - マルシテイア
これまで VanillaJS / jQuery で頑張ってたプロジェクトに React 入れて、Reactは最高！などと言っていたのだけど、E2Eテストが落ちている事に気づいた。 落ちたテストで画面キャプチャしたりして調べた結果、Reactコンポーネントを描画するところで落ちていた。 どうやらPhantomJS1系で見られる現象のようだった。 e2e - CasperJS で Reactjs のサイトをテスト - Qiita E2EテストにはCasperJSを使っていた。 Casper の dependencies は "phantomjs": ">=1.8.2" となっている。 PhantomJS の謎な挙動にはユニットテストでも散々苦しめられていた。 既に polyfill 幾つか入れて対処していたのだけど、良い機会なので別の道を模索してみよう、という話になった。 頑張ってPhanto
React and Redux with TypeScript
The release of TypeSciprt 1.6 includes support for React components. I decided to give it a whirl and see what TypeScript has to offer. The end result is a port of the Redux TodoMVC example to TypeScript. (See my repo on GitHub) So why use types in the first place? Isn’t the dynamic and flexible nature of JavaScript what makes it so great in the first place? As strange as it sounds, I actually bel
Relay
Built for scaleRelay is designed for high performance at any scale. Relay keeps management of data-fetching easy, whether your app has tens, hundreds, or thousands of components. And thanks to Relay’s incremental compiler, it keeps your iteration speed fast even as your app grows. Keeps iteration quickRelay is data-fetching turned declarative. Components declare their data dependencies, without wo
大規模Reactアプリケーションを構築するためのベストプラクティス | POSTD
Sift Scienceで製作にReactを使い始めてからほぼ1年になりました。その間、Backbone+Reactという フランケンシュタインのような 複合アプリケーションを、Reactコンポーネントからなる、かなり大きな1つの階層に育て上げました。この記事では、UI不和を最小限にしながら、コードベースをスケーリングするために役立った技法とベストプラクティスを紹介します。また、一般的なコンポーネントのデザインパターンについて、いくつか説明します。 この記事が皆さんの時間の節約と精神衛生の維持に役立ち、UIが複雑になってもReactコードベースの保全性を維持する（破綻するのではなく）ための新しいツールを提供できれば幸いです。 componentDidUpdateで、もっとできる Reactの本質は、DOMの更新というタスクを命令的なものから宣言的なものに変えるということです。他のタイプの命
最近のReactへの言及についての違和感 - mizchi's blog
「最近のReactへの言及についての違和感」というエントリ書いたら燃えますかね— イカid:mizchi0x (@mizchi) 2015, 6月 7 僕がみた資料の中でFluxの設計について正しい理解をしていると思えるのはげたさんのこの資料だけです https://t.co/XaKHhhuP2A— イカid:mizchi0x (@mizchi) 2015, 6月 7 みんなsetStateに騙されてる— イカid:mizchi0x (@mizchi) 2015, 6月 7 一部で「React使うとコード量が増える」という意見、サーバサイドで書いたテンプレートのレタッチをするjQueryと比べたらそりゃそうなんだけど、SPAでそもそもJS側がテンプレート握るような環境では handlebars とかで書いてたところが JSXになるだけでそれ移行コスト— イカid:mizchi0x (@mi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Our demo app
mizchi の Redux 考
ReactとFluxのこと // Speaker Deck
React/Redux Introduction
Incremental DOM ざっと見たやつ。追記: 初期バージョンのコードなので最新では異なる場合があります。
