読者です 読者をやめる 読者になる 読者になる

by shigemk2

当面は技術的なことしか書かない

Introduction to React #frontrend

勉強会

@hokaccha

アジェンダ

  1. React.js
  2. Virtual DOM
  3. JSX
  4. Server Side Rendering
  5. Flux
  6. Flow

React.js

A JavaScript library for building user interfaces | React

事例

  • FB
  • Instagram
  • Yahoo
  • Atom

React.jsの特徴

  • ステートレスなコンポーネント設計
  • VirtualDOM
  • JSXシンタックス

いままでだと

  • 状態がDOMにしかない
  • 拡張しづらい
  • 管理しづらい
  • テストしづらい

backboneだと

  • Viewはコンポーネントに分けて
  • データやロジックはModelに持とう

  • 変更の適用を手で書くつらさ

  • イベント地獄
  • 薄いフレームワーク(自由度の高さは利点だけど、そのぶん実装がつらくなる)

Angular Vue

  • 表示はすべてViewModelにもとに構築しよう
  • データが変わったら勝手に表示も変われ
  • UIが変わったらデーtあも勝手に変われ

  • コンポーネントごとに状態を持つつらさ

  • アプリケーションが複雑になるとつらい

React

(いろいろな問題点をどうやってReactで解決するのか)

  • データが変わったら表示も勝手に変われ

Stateless Component

TODO LIST

  • ステートは持っていたほうが自由度が高い
  • でもステートを持つと大規模開発になるとつらい
  • 状態を持たせないことである程度管理しやすくなる

  • テスト可能

  • メンテナンス可能
  • 再利用可能

Statefull Stateless

  • 一番上の親のみに状態をもたせる(親からもらったデータをもとにレンダリングする)
  • 親のデータを更新して、子に反映させる

  • データを元にViewを構築

  • ユーザーのアクション

サーバーサイドと同じ考え方。でも速度とのジレンマが存在する。親からデータを再構築するから遅い。

→VirtualDOM

  • JavaScriptのオブジェクトとしてDOMのような構造
  • データに変更があるとどの部分を変更しないといけないか計算
  • 必要な部分だけ実際のDOMに適用する

React.jsって早いんでしょ?

半分正しい。

  • データの変更→更新分だけDOMに反映
  • データの変更→DOMツリーごとまるごと更新
  • データの変更→差分計算→更新分だけDOMを更新

変更があったら書き換えるけどDOMには反映しない。

ベンチマークを取ると、Reactが一番早い。(それがうまみ)

Reactは設計と速度が両立できる。(簡単に設計できるのに早い)

Virtual DOM実装

Matt-Esch/virtual-dom · GitHub

segmentio/deku · GitHub

JSX

JSX - a faster, safer, easier JavaScript

独自シンタックス

変換ツール

  • react-tools
  • babel

JSX · Babel

シンタックスシュガー実装するためだけにオレオレ実装を追加すると面倒。

  • ES6も一緒に変換するので変換コストはない
  • エディタの設定すれば恩恵が受けられる。

Server Side Rendering

  • JSを解釈できない
  • マシンから読めない

検索エンジンからJSって読めないよね。SEO的につらい。

BromBone | SEO for your AngularJS, EmberJS, or BackboneJS website.

こういうのを使うのもいいけどちょっとオーバースペックぽい

初期表示だけサーバーでやる→クライアントとサーバでコードが重複する問題

rendrjs/rendr · GitHub

Rendr→からReactへの乗り換え

Server Side Rendering

サーバークライアントでコードを共通化できる

reactjs/react-rails · GitHub

Flux

facebook/flux · GitHub

Flux | Application Architecture for Building User Interfaces

考え方なので実装はさまざま、

Flux実装

facebook/flux · GitHub

Flow

静的なチェッカー

Flow, a new static type checker for JavaScript | Engineering Blog | Facebook Code | Facebook

JSXもサポート

コンパイル

まとめ

  • React
  • Flux(設計手法)
  • Flow(Lintツール)

Scalableなのが嬉しい

小規模なものを素早く作るためのツールではない(AngularはAPIを通してごにょごにょだが、Reactは結構実装が面倒だが、そのめんどくささ(制約)を超えた嬉しさがある)

技術選択は適切に(backbone.jsやangular.jsが適している場合もあるしjQueryが適している場合もあるので、その場にあった技術を適切に使うことが肝要。jQueryで30分で出来ることが変なフレームワークを使ったら1日かかったってなると結構つらい)