Start React with Browserify

About meme = { name: "muyuu", Twitter: "@anticyborg", belongs: "freelance", job: "Web Front-End Engineer"};

Agenda• React

• browserify

• gulp

About React

About React• Facebook製Viewフレームワーク• コンポーネント指向• VirtualDOM

About Reactvar Hello = React.createClass({ render: function(){ return ( <div className="hello"> Hello World! </div> ); }});

React.render( <Hello />, document.getElementById('helloBox') );

何が良いのか• DOM操作を単純化• コンポーネント単位での設計

• 可読性が高い• メンテしやすい• 壊れにくい

DOM操作を単純化jQueryは「今ある要素に対して処理をする」方式<ul> <li class="list" data-item="1">list1</li> <li class="list" data-item="2">list2</li> <li class="list" data-item="3">list3</li></ul>

// js$('.list').on("click", function(){ $(this).toggleClass('delete');});

DOM操作を単純化• DOM変更に弱い• 現状の状態がDOMにしかない• 拡張しずらい

DOM操作を単純化Reactは「今のデータを元にDOMをレンダリングする」方式var dataList = React.createClass({ render: function(){ var items = this.props.items.map( function(item){ return <li>{item}</li>; } ); return( <ul>{items}</ul> ); }});

コンポーネント単位での設計• 構成要素をコンポーネントに分ける• 各コンポーネントの実装とDOMを1箇所に記述

• htmlライクな記述をJSファイル内に記述(JSX)

JSX?JavaScript内にxmlライクなシンタックスで記述できるvar name = React.createClass({ render: function(){ return( <div className="Wrap"> <div className="first">{this.props.first}</div> <div className="last">{this.props.last}</div> </div> ); }});

DEMO

Points• React.createClass() でコンポーネントを作成• renderメソッドにコンポーネントのDOMを記述• propはコンポーネントに渡されるデータ• stateはアプリケーションの状態を持つデータ• stateに変更があった際には再描画される• コンポーネント間で値を受け渡す

Components• 1つのコンポーネントは機能もviewも1箇所に記述• like Web components

Everything can be Component!

Componentsこれからはアプリケーション設計の際には• コンポーネント単位での設計• 各コンポーネントの組み合わせこれらをより重視して作らなければならない

Require?

JSはモジュールの仕組みがない <script src="jquery.js"></script> <script src="underscore.js"></script> <script src="something.js"></script> <script src="more.js"></script> <script src="inquisitive.js"></script> <script src="app.js"></script></body></html>

importしたい！

Browserify

Browserify

Browserify// moduleA.jsmodule.exports = { log: function(){ console.log('it is moduleA'); }};

// moduleB.jsmodule.exports = { log: function(){ console.log('this is moduleB'); }};

Browserify// main.jsvar moduleA = require('moduleA');var moduleB = require('moduleB');

moduleA.log();moduleB.log();// it is moduleA// this is moduleB

Browserify• jQueryを使う場合// main.jsvar $ = require('jquery');

$('.ele').on("click", anything);

Browserifynpm install -g browserifynpm install --save jquerybrowserify main.js -o bundle.js// make bundle.js

React Components with Browserifyvar React = require('react');

var Child = require('./child'); // React componentvar main = React.createClass({ render(){ return ( <div className="main"> <Child data={this.state.data}/> </div> ); }});

Watchify• ファイルを監視してBrowserifyのビルドを自動化

• 通常はrequireしたファイル全てを結合する• 速度が遅い（Reactは130KB,jQueryは84KB）• watchifyなら差分ビルドが可能

Browserify on Gulp• jsだけではなくcss等のビルドもやってる• gulp watch?

• gulp watchでは差分ビルドできない• 遅い

• 1コマンドでwatchもwatchifyも動かしたい

DEMO

https://github.com/muyuu/searchKindle

After AJAX

JSの必須スキルは増える一方

MVWFramework

Unit Test

E2E Test

Node.js

AltJS

Build Tool

おなかいっぱい

フロントエンドは進化の速度が早すぎる

じゃあやめる？

人はいつ死ぬかって？自らを成長させることを

辞めたときさ— おれ

like tuna?

like hamster?

No!

Have Frontier Spirit

走って走って走ってなお走り続けてこそ良い未来に進める

さ、Reactやろう