start react with browserify

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> ); }});

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

http://browserify.org

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も動かしたい

https://github.com/muyuu/searchKindle



After AJAX

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

MVWFramework

Unit Test

E2E Test

Node.js

Build Tool

おなかいっぱい

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

じゃあやめる？

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

辞めたときさ— おれ

like tuna?

like hamster?

Have Frontier Spirit

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

さ、Reactやろう

start react with browserify

Technology