Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...

現状: Rails4.x以上でサービスを稼働している。 フロントエンドは.erbで記述している。JSはassets/javascriptという普通の構成 開発リソース: １人 目的: 既存のUI資産を残しつつ、ECMAScript6 + React + Reduxに置き換える 前提: react-router,react-railsを使う React(ES6)をbabelでコンパイルする必要があるので、frontend/src/javascript 以下にjsxを書いていく。 gulpfileはこんな感じ var gulp = require("gulp"); var browserify = require("browserify"); var babelify = require("babelify"); var source = require("vinyl-source-strea

前回【Raspberry Piでセンシング編】はこちら。前回はRaspberry Piでいかにドアの鍵をセンシングをしたか、という話でした。今回はRaspberry Piから情報を受け取る側、サーバーのお話です。 React.jsが天国と地獄を描画します 今回はNode.js+Expressを選択。Raspberry Piから受け取った情報を、現在サイトにアクセスしているブラウザにWebSocketを通して一斉送信するのにSocket.ioを利用。そしてフロントエンドにはReact.jsを採用。なぜ採用したかといえば使いたかったからです！😤😤😤 これらを使って、 トイレが空いていれば天国、使用中であれば地獄を表示トイレの空き情報をリアルタイムにお知らせという1画面ですべて賄うサイトを作りました。 http://ficc-heavensdoor.herokuapp.com 天国。 そし

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

I have an array with items and I want to make something like this: <tr> (until have items in array <td></td><td></td>) </tr> But if I do that, I get an JSXTransformer error : Adjacent XJS elements must be wrapped in an enclosing tag Working version: {rows.map(function (rowElement){ return (<tr key={trKey++}> <td className='info' key={td1stKey++}>{rowElement.row[0].value}</td><td key={td2ndKey++}>{

こんにちは、KEYチームの荒木です。先月来日していたPriyatamさんがタスクランナーでsassのコンパイルの遅さを指摘されていました。たしかにそうですね。では他の状況はどうかと思い、watchifyを使ったlivereload環境の速度と安定性について npmとgruntとgulpで比較してみることにしました。 比較 npmだけ live-serverで環境を構築、速度を考えてwatchifyで差分ビルド。

今回はReact.jsのVirtual DOM実装の中でもユーザーが意識するべき点のkeyについて書きたいと思います。 React.jsではPropにkeyという値を指定することが出来て、Componentのリストを表示するような時につけていないとdevelopment環境だとconsole.warnで Each child in an array should have a unique "key" prop. Check the render method of KeyTrap. See http://fb.me/react-warning-keys for more information. と表示されます。 このkeyはVirtualDOMのdiffから実際のDOMに反映させるときに最小限の変更にするために使われます。 例えば var KeySample = React.creat

React.jsはComponentを作るライブラリなので、Routerは当然含まれていません。 なのでBackbone.RouterだったりDirectorだったり好きなRouterライブラリと組み合わせて使うことが出来ます。 でもPageの単位でComponentを作って切り替える場合にそれだと面倒だったり冗長になってしまいがちです。 なのでここでは、react-routerというものを紹介したいと思います。 React Router 以前まではReact Routerではserver-side renderingがサポートされていなかったので、react-router-componentというのを使っていたのですが、今はサポートされているのでserver-side renderingしたい場合にも使うことが出来ます。 React Router Componentの方がシンプルなのでわ

You've probably heard about the popular JavaScript framework by Facebook - React. It is used by many popular websites, including Facebook itself and Instagram. In this article you will find 5 practical examples that have been built with React, and which will give you a head start with the framework. Update (Feb 18th 2016): We've made the examples work with React 0.14.7 What is special about React?

最近、とある業務システムの一部となるリッチ画面をReactで開発してます。 Reactは良く出来ていると思います。 できるだけステートレスにすることで安全なコードを記述するという思想は僕の好みです。 Fluxも同じく良い。『処理の流れは一方向。何も考えずにイベントを処理し続ければ良い』という、ある種のストリーミング的な発想により、非常に見通しの良い構成を実現できます。 Fluxのフレームワークは乱立気味ですが、色々比較した結果、僕はrefluxを選びました。 そんなに多機能じゃないので自分で魔改造しやすいところがナイス。 React-0.13から使えるclass構文 最近リリースされたreact-0.13からES6のclass構文を使えるようになりました。 reactに付属するJSXTranformerでパースできるようになったとは言え、 イマドキReactを使うような人は当然Babelで

皆さんこんにちは。adingoにてFluctという広告配信システムの管理画面を中心にクライアントサイドの開発を行っております、大関です。 今回は、表題の通り、実際にプロダクトとして動いている既存のコードベースを、ES5ベースからTypeScriptに段階的に移行させた話について書こうと思います。 移行前のコードベース及び直面した課題 今年の1月頃から、アプリケーションのクライアント側の一部を、以下の構成で実際に開発しています。 言語 ECMAScript 5 主要な依存ライブラリ UI開発にReactおよびFacebook JSX syntax 統合イベントシステムとしてのRxJS テストコードのアサーションにpower-assert ビルドチェーン モジュール連結にbrowserify 環境変数に基づくビルドフラグ用途でenvify コードの解析とLintにESLint 未使用変数や未定

reactにfluxを採用してアプリケーションを設計していると、親->子->孫コンポーネントへpropsのバケツリレーになってしまう事がありました。 そもそもイケてない設計が悪いのですが、reactバケツリレーつらいという声を聞くことも多かったし、自分も辛いと思っていたところ助言をいただいて解決法が見えてきたのでまとめてみます。 propsバケツリレー まず、バケツリレーを再現してみます。 DOM構造 おおまかにdiv[class="app"](親), div[class="group"](子）, div[class="item"](孫)というツリー構造になってます。 <div class="app"><!--親--> <div class="group"><!--子--> <h2>1番目のグループ</h2> <p class="count">13</p> <div class="item

<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

jsonを返すAPIを使用して、チュートリアル+αの画面を実装してみます。 前提知識・単語 実装しながら読んだほうが理解しやすいと思います。 React.jsのadventカレンダー コンポーネント 画面を構成している要素。React.jsは画面をコンポーネントと呼ばれる要素に分けて実装します。 http://qiita.com/koba04/items/4f874e0da8ebd7329701 コンポーネントのライフサイクル propとstate http://qiita.com/koba04/items/bc13d1f42964278ae14e (prop) http://qiita.com/koba04/items/63267bcc918d76ac8767 (state) 1. 画面をコンポーネント分けする reactJSは画面を構成している要素ごとにパーツ分けをし、コンポーネントと

react-helixというライブラリを公開しました。 これは、私が作成したライブラリの PR 記事です。 react-helix は React で Immutable な設計をうまく扱うための小さなライブラリで、いわゆる Flux フレームワークの亜種になります。 亜種ですので Flux そのものではありませんが、その基本的な思想は継承しています。 その上で、ボイラープレートが不要なインターフェイスになるよう再設計してあります。 このライブラリの目標は、以下の3つです。 Action (ただの関数) を中心に、Model を Immutable にして、自然に View からビジネスロジックを引き剥がす。 Flux にあるボイラープレート (定数とかDispatcherへの処理登録とか) をゼロにする。 サーバーサイド レンダリングを妨害しない。 このライブラリを利用して作成したTOD

サブスタックさんがfluxについてひとこと言いたいそうです。.md つまりfluxっていうのは基本的にはEventEmitterでイベントの順序があるっていうことかな? なんか色々書いてあるけども https://facebook.github.io/flux/docs/dispatcher.html#content そして僕にはEventEmitterからみて利点がよくわかってない、単なる人目を引かせるためのマーケティングかな これがほぼ全てのコードか。 https://t.co/y2dbxOtUn9 ドキュメントとは異なっているようにみえるが、、、 @substack fluxはライブラリって言うよりコンセプトだよね。だからflux inspired libraryがたくさんあるんだと思うけど @NickDima なんか騙してるっぽく見える。。。 @NickDima さらに言えば、fl