React/Redux/Node.jsのSSR/SPAを速くする6つのチューニングポイント
React/Redux/Node.jsのSSR/SPAを速くする6つのチューニングポイント：大規模ブログサイト表示速度改善 大解剖（終）（1/3 ページ） 2004年から続くブログサービス「アメブロ」が2016年9月にシステムをリニューアル。本連載では、そこで取り入れた主要な技術や、その効果を紹介していく。今回は、React/Redux/Node.jsを使ったIsomorphic JavaScript特有のパフォーマンスチューニング手法や実際にあった問題および、その解決方法について。 2004年から続くブログサービスである「アメブロ」は、2016年9月にシステムをリニューアルしました。本連載「大規模ブログサイト表示速度改善 大解剖」では、そこで取り入れた主要な技術や、その効果を紹介しています。 アメブロのリニューアルでは、React/Reduxを採用し、サーバサイドとフロントエンド両方での
JSON Schemaとreact-jsonschema-form - Qiita
{ "title": "ユーザー", "type": "object", "properties": { "id": { "title": "ID", "type": "string", "pattern": "^[0-9a-zA-Z]{8}(-[0-9a-zA-Z]{4}){3}-[0-9a-zA-Z]{12}$" }, "name": { "title": "ユーザー名", "type": "string", "pattern": "^[\\sa-zA-Z]+$" }, "age": { "title": "年齢", "type": "integer", "minimum": 0 } }, "required": [ "id", "name" ] }
FluxとDDDの統合方法 - かとじゅんの技術日誌
おはこんばんにちは、かとじゅんです。 久しぶりにブログを書く…。最近、趣味でAngular2やらReactやらやっています。やっとWebpackになれました…。 さて、今回のお題は「FluxとDDDの統合方法」について。Angular2を先に触っていましたが、FluxといえばやはりReactだろうということで途中で浮気してReactで考えています。Angular2でもできるはずですが、今回はReactで統合方法*1について考えてみたいと思います。一つ断っておくと、FluxはDDDと統合することを想定していない設計パターンなんで云々とかはここでは考えていません。それはこのブログ記事を読む読まないに関わらずご自身で判断されてください。ソースコードについては、Githubへのリンクを一番下に書いてあるので興味がある人は参考にしてみてください。 Fluxって何？ まず基礎ということで、Flux i
ESLintでReactとES2015の構文チェック(eslint-config-airbnb) - dackdive's blog
ES2015の構文チェックと言えば ESLint ですね。 ESLint は "The pluggable linting utility" というだけあって、Rules と呼ばれる膨大なチェック項目の中から 自分がチェックしたい項目を取捨選択し、最終的に .eslintrc という設定ファイルを用意する必要があります。 ただ、さすがに一から自分でルールを構築するのは面倒なので、通常は Shareable Configs と呼ばれる機能を使い、他の人が大体いい感じにセットアップしたものを共有することができます。 eslint-config-airbnb もこの Shareable Configs の1つで、React に関する lint も含まれているのでとりあえずはここから始めるのが良さそうです。 インストールと設定 （package.json は作成済みとします） eslint-con
Redux + React + ES6 の簡単アプリを作成する①(Redux編) - Qiita
背景 Reactにも慣れが出てきたので、次はFluxのデータフローについて学ぼうと思った。 Fluxの詳しいデータフローに関しては、公式サイトや別の記事を参考に。 Fluxのフレームワークとしては、頭1つ抜けているReduxを選定した。 ReactとReduxの連携部分で多少はまったのでメモ。 学習内容 Flux(Reduxベース)の基本的な考え方。 Flux(Reduxベース)のデータフローと登場人物。 Fluxでよくみる図。 概要 入力した内容がそのまま出力されるだけのアプリ。 state管理をReduxのみで行う。 Action ActionはActionCreatorという純粋な関数である。 ActionCreatorはActionオブジェクトを返し、Store(※後述)のdispatch関数に引数として渡される事でStoreにEmit出来る。
Redux + React + ES6 の簡単アプリを作成する②(ReactとReduxの連携編) - Qiita
概要 前回記事の続き。 実際にReduxでReactのstateを管理する。 Reactのインストールは出来ている前提とする。 ReactとReactDOMはwebpackでグローバル変数かしている事とする。 Components ReactでComponentsを作成していく。 まずは、メインとなるComponent。 (CSSフレームワークはMaterialize.cssを利用している。) import FormApp from './Form/FormApp.jsx'; export default class App extends React.Component { render() { return ( <div className="container"> <FormApp handleClick={this.props.onClick} value={this.props.
2016年から始めるフロントサイド~実装編~ - Qiita
余談：react-reduxを使用しているWebサイト(アプリケーション) https://github.com/reactjs/redux/issues/310 わかる範囲でもこれだけあるみたいです。すごいですね。 es6 react, react-dom, react-router redux テストまで書くと長くなって読みづらいので分けます。 es6 公式サイト 基本的には公式サイトのspecを見ていく感じになりますが、英語かつ専門用語辛い。。 Reduxは基本es6で書かれているので、spec読みながらExampleを見るのが良さそうだ！ 実装で一番重要と思われるコードの再利用だけピックアップ。
2015年、キャッチアップをさぼっちゃった人の為のReactプロジェクト入門 - Qiita
React.js Advent Calendar 2015 17日目の記事です。 Reactベースでプロジェクトを始めようと思うと、Boilerplateとしてreact-starter-kitやreact-static-boilerplateが見つかります。これらはReact以外のツールやライブラリを大量に利用している為、事前知識がないと何がどう動いているのか、何から調べれば良いのかを把握するのが難しかったりします。 この記事では、個人的にプロジェクト構成を作り始める前にざっくりと知っておきたかったと思う事前知識と、その学習リソースについてまとめようと思います。 2015年にWebフロントエンド開発トレンドについてキャッチアップをさぼっちゃったなー、という方がモダンな環境でReact開発をスタートする一助になれば嬉しいです。 以下、ES2015, Babel, Webpack, Flux
Scalajs + React + Electronでhello world - のぶLab.
scala, sbt未インストール状態からScalaJS, Reactを使ってElectronでHello worldするまで 環境はMacOS X Yosemite ScalaJSとは AltJS Scalaで書いたコードがJSに変換される http://www.scala-js.org/doc/tutorial.html sbtとは Scala向けのpackage managerみたいなやつ Scala, sbtをインストール homebrew などでインストール $ brew install scala $ brew install sbt Project作成 $ mkdir sample $ cd sample $ touch build.sbt $ mkdir project $ touch project/plugins.sbt $ touch project/build.pr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
