アメブロ2016 ~ Isomorphic JavaScriptの詳しい話 | CyberAgent Developers Blog
問題点はIsomorphic実装難易度です。では、アメブロのIsomorphicの実装方法と実装する際にあった問題及びその解決策をお伝えします。 ちなみに、Michael Jackson氏はIsomorphic JavaScript ではなく、 Universal JavaScript と呼ぶべきだと主張しています。私たちはIsomorphic JavaScriptという名前で使うのに慣れたので、ここでは*Isomorphic JavaScriptと記述します。 AmebloのIsomorphic 技術選定 先に結論をあげます：React + Redux 技術選定の基準は下記となります。 安定さ。基本的にプロダクト環境で使える正式版があること。 アクティブな開発。 よいコミュニティ。技術の周りに大きいコミュニティが育っていること。 実績がある。 まずView層のライブラリの選定です。このプ
非SPAなサービスにReactを導入する - クックパッド開発者ブログ
投稿開発部の外村（@hokaccha）です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション（以下SPA）についてよく語られます。 一方で、SPAを構築するにはコストがかかることも事実で、特にフロントエンドエンジニアが多くない環境では、従来通りサーバーサイドでViewを書きつつ動的な部分だけJavaScriptで処理するというアーキテクチャのほうが現実的な場合も往々にしてあります。 今回はこのような、サーバー側でHTMLを生成し、一部の動的な部分だけをReactで書くためのTipsを紹介します。 なお、基本的にサーバーサイドはRails前提ですが、RailsにおけるReactの開発
Bridging in React Native by Tadeu Zagallo
On this post I assume you know the basics of React Native, and will focus on how the internals work when managing the communication between native and JavaScript. Main Threads Before anything else, keep in mind that there are 3 “main” threads* in React Native: The shadow queue: where the layout happens The main thread: where UIKit does its thing The JavaScript thread: where your JS code is actuall
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
2015/05/27にLINE社で行われた、Data Binding JS Nightでの発表内容です。
【翻訳】AngularJSからReactへ: Isomorphicな方法 | POSTD
先週、私たちはWebサイトを検索エンジン向けにインデックス付けできるようにしようとしていました。この記事では、私たちがWebサイトを書き直していて学んだことの要約を紹介したいと思います。 背景 2ヵ月前に RisingStack.com を作成した時、私たちはそのWebサイトでどんなテクノロジを使うか決めなくてはなりませんでした。イベントを追跡する静的なページが数ページあるだけだったので、とても簡単でしたが、私たちはWebサイトをスケーラブルでできるだけ高速なままにしておきたいと考えていました。 私たちのチームは AngularJS の経験が豊富なので、フロントエンドにAngularを選ぶのは妥当だと思われました。 この記事はReactやAngularJSがどちらか一方より優れている理由について述べているわけではないので注意してください。どちらがいいかは常にユースケース次第です。 “Ang
React.js 実戦投入への道 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近話題のReact.jsですが、実戦投入に当たっては結構重たい選択を迫られることになります。 ざっくり言えば、テンプレートエンジンを捨ててReactしますか?それともReactあきらめますか?という選択です。 本記事ではReactの基本思想とこうした選択肢が生まれてしまう背景を述べるとともに、後半では「どちらもあきらめない」という(若干シミュレーションRPGあるある感のある)第三の方策について案を提示します。 Reactの基本 最初に、Reactの基本的な仕組みについてまとめておきます。 Reactは公式ドキュメントが非常に充実してい
Panda Strike: High-performance Web and Mobile Apps and Zero-hassle Dev Ops
React Is A Terrible IdeaMar 11, 2015Dan Yoder There’s been a lot of excitement lately about React. React seems to have bumped Angular from the top of the hippest-framework mountain. This is unfortunate, because both of these frameworks are bad for your application’s health. They’re also bad for the entire software industry. For new applications, please, for the love of all things open, use Web com
2015年に向けたJavaScriptアプリケーションアーキテクチャ Part 1 | POSTD
私はかつて自分はアーキテクトだと名乗ったことがあります。これを裏付けるため、今やウソだらけの複雑な話を設計しなくてはならなくなっているので、ある意味これは本当のことですね。冗談はさておき、2015年を目前としてJavaScriptコミュニティのアプリケーションアーキテクチャの状況について目を向けてみるのは有益なことだと思います。合成、関数型の境界、モジュラリティ、不変データ構造、CSPのチャネルと、その他に関連するいくつかのトピックについて書いてみたいと思います。 合成 アーキテクチャのレベルでは、JavaScriptで大規模なアプリケーションを作成する方法に関してここ数年で少なくとも一つの根本的な変更がありました。機械の細かい違いにより生み出される単一指向性の データバインディング、不変データ構造と、仮想DOM （どれも興味深い問題ですね）などを除けば、多くの開発者が一つのキーコンセプト
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
歌舞伎座.tech#6「VirtualDOMとReact」 アウトラインメモ
歌舞伎座.tech#6「VirtualDOMとReact」 - connpass に参加して来たのでメモ。 すべてのCSSに死を！これはJSerの叫び！- @kyo_ago スライド: CSSに死を！これはJSerの叫び！ #kbkz_tech CSSが辛い CSSはカプセル化とか継承とか、プログラムからの概念がそのまま持ってこれない ReactStyle js-next/react-style JS内にStyleを埋め込むことができる そのままオブジェクト的に入れられる Template Stringsと合わせればその場でCSSを入れることができる styles=にスタイルを入れる セレクタをあまり考えなくていい style属性でスタイリングする 擬似要素、擬似クラスが全滅 :hover :active などが使えない。 CSSの継承などの概念が消える 自分で頑張る必要がある ユーザプレ
React.js cheatsheet
<Video fullscreen={true} autoplay={false} /> render () { this.props.fullscreen const { fullscreen, autoplay } = this.props ··· } Use this.props to access properties passed to the component. See: Properties constructor(props) { super(props) this.state = { username: undefined } } this.setState({ username: 'rstacruz' }) render () { this.state.username const { username } = this.state ··· } Use states
React Nativeがスマホアプリのフロント開発を変えるのか - ワザノバ | wazanova
Reactは当初、「Huge step backwards（これではメンテできなくて、かえって大きく後退してしまっている。）」「Rethink established best practives（皆が積み上げてきたベストプラクティスを変えようとしている。）」と揶揄されたりもしましたが、最近は他のJavaScriptフレームワークにもその思想の一部が反映されるようになって、メインストリームに近づきつつあるようです。 さて今回Facebookが、React Nativeを発表 & オープンソースとして公開して話題になっていますが、Tom Occhinoは React.js Conf 2015のキーノートスピーチで、「一度書けば、どのプラットフォームでもうまく動作する。」ではなく、「一度覚えれば、どのプラットフォーム向けにも書けるようになる。」ものであることを強調しています。 同社の開発メンバ
Flux react現状確認会
Google playでのリワードアプリリジェクトからの今後のマネタイズ手段について インタースティシャル広告×クロスプロモーション-
The Mental Model That Finally Helped Me Understand ReactJS
TL;DR I struggled for a long time trying to understand React. This is what I wish someone had told me. What is React?How does React compare to Angular, Ember, Backbone, et al? How do you handle data? How do you contact the server? What the heck is JSX? What is a "component"? Stop. Stop it right now. React is MAINLY THE VIEW LAYER. React is mentioned in the same breath as other Javascript framework
Reactを実際に使ってみた話が増えてきた - ワザノバ | wazanova
http://youtu.be/uwnjDXtJufs 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 44分前 コンポーネントベースのviewレイヤのライブラリであるReactを、実際に使ってみた感想についての発信が増えてきているので、まとめてみました。（4)はFluxの話も入ってます。） 1) Reactとは？ E4E Developer Conf 2014の講演でFacebookのBen Andersonは、Reactを採用しているサービスを挙げています。 Facebook / Instagram / GitHub (Atom) / Khan Academy (with Backbone.js) / Mozilla Firefox (for Paneis) / NY Times / Reddit (stor
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - garbles/why-did-you-update: :boom: Puts your console on blast when React is making unnecessary updates.
ReactとFluxのこと // Speaker Deck
Dive into React.js
CSSに死を！これはJSerの叫び！ #kbkz_tech
Real World Virtual DOM
