Submit Search
Upload
Start React with Browserify
•
4 likes
•
3,266 views
Muyuu Fujita
Follow
春のJavaScript祭 in GMO Yours の資料ですよー
Read less
Read more
Technology
Report
Share
Report
Share
1 of 48
Download now
Download to read offline
Recommended
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
Backbone.js入門
Backbone.js入門
AdvancedTechNight
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
Angular js or_backbonejs
Angular js or_backbonejs
Omasa Yusaku
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
backbone.jsの使用例 その1
backbone.jsの使用例 その1
Makoto Haruyama
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
One night Vue.js
One night Vue.js
Masahiro Kyuden
Recommended
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
Backbone.js入門
Backbone.js入門
AdvancedTechNight
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
Angular js or_backbonejs
Angular js or_backbonejs
Omasa Yusaku
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
backbone.jsの使用例 その1
backbone.jsの使用例 その1
Makoto Haruyama
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
One night Vue.js
One night Vue.js
Masahiro Kyuden
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Kohei Kadowaki
iOS WebView App
iOS WebView App
hagino 3000
iOS の通信における認証の種類とその取り扱い
iOS の通信における認証の種類とその取り扱い
niwatako
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
spring_raining
iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?
iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?
Kosuke Ogawa
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?
IRI MO
2時間で学ぶjQuery
2時間で学ぶjQuery
Shumpei Shiraishi
Backbone.js
Backbone.js
daisuke shimizu
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
Daisuke Yamazaki
はじめてのVue.js
はじめてのVue.js
kamiyam .
let UIWebView as WKWebView
let UIWebView as WKWebView
Taketo Sano
Vue.js 2.0を試してみた
Vue.js 2.0を試してみた
Toshiro Shimizu
jQuery Mobile 概要
jQuery Mobile 概要
トモロヲ いちがみ
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
エンジニア勉強会 エスキュービズム
WKWebViewとUIWebView
WKWebViewとUIWebView
Yuki Hirai
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
春のJs祭2015 lt
春のJs祭2015 lt
Yuusuke Takeuchi
いまさら始めてみたRxJS
いまさら始めてみたRxJS
lion-man
More Related Content
What's hot
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Kohei Kadowaki
iOS WebView App
iOS WebView App
hagino 3000
iOS の通信における認証の種類とその取り扱い
iOS の通信における認証の種類とその取り扱い
niwatako
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
spring_raining
iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?
iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?
Kosuke Ogawa
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?
IRI MO
2時間で学ぶjQuery
2時間で学ぶjQuery
Shumpei Shiraishi
Backbone.js
Backbone.js
daisuke shimizu
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
Daisuke Yamazaki
はじめてのVue.js
はじめてのVue.js
kamiyam .
let UIWebView as WKWebView
let UIWebView as WKWebView
Taketo Sano
Vue.js 2.0を試してみた
Vue.js 2.0を試してみた
Toshiro Shimizu
jQuery Mobile 概要
jQuery Mobile 概要
トモロヲ いちがみ
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
エンジニア勉強会 エスキュービズム
WKWebViewとUIWebView
WKWebViewとUIWebView
Yuki Hirai
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
What's hot
(20)
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
iOS WebView App
iOS WebView App
iOS の通信における認証の種類とその取り扱い
iOS の通信における認証の種類とその取り扱い
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?
iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?
React を導入したフロントエンド開発
React を導入したフロントエンド開発
今からでも遅くない! React事始め
今からでも遅くない! React事始め
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?
2時間で学ぶjQuery
2時間で学ぶjQuery
Backbone.js
Backbone.js
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
はじめてのVue.js
はじめてのVue.js
let UIWebView as WKWebView
let UIWebView as WKWebView
Vue.js 2.0を試してみた
Vue.js 2.0を試してみた
jQuery Mobile 概要
jQuery Mobile 概要
20160927 reactmeetup
20160927 reactmeetup
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
WKWebViewとUIWebView
WKWebViewとUIWebView
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Viewers also liked
春のJs祭2015 lt
春のJs祭2015 lt
Yuusuke Takeuchi
いまさら始めてみたRxJS
いまさら始めてみたRxJS
lion-man
Meteorというフレームワーク
Meteorというフレームワーク
rukiadia
EcmaScript 仕様書を読もう
EcmaScript 仕様書を読もう
彰 村地
翻訳から始めるVue.js 入門
翻訳から始めるVue.js 入門
Makoto Chiba
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
松田 千尋
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Masayuki Abe
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
Takuya Tejima
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
JavaScriptによるvideo audio要素のコントロール入門
JavaScriptによるvideo audio要素のコントロール入門
Yossy Taka
Promiseでコールバック地獄から解放された話
Promiseでコールバック地獄から解放された話
Sota Sugiura
Vue.js with Go
Vue.js with Go
Kazuhiro Kubota
Viewers also liked
(12)
春のJs祭2015 lt
春のJs祭2015 lt
いまさら始めてみたRxJS
いまさら始めてみたRxJS
Meteorというフレームワーク
Meteorというフレームワーク
EcmaScript 仕様書を読もう
EcmaScript 仕様書を読もう
翻訳から始めるVue.js 入門
翻訳から始めるVue.js 入門
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
JavaScriptによるvideo audio要素のコントロール入門
JavaScriptによるvideo audio要素のコントロール入門
Promiseでコールバック地獄から解放された話
Promiseでコールバック地獄から解放された話
Vue.js with Go
Vue.js with Go
Similar to Start React with Browserify
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
scala+liftで遊ぼう
scala+liftで遊ぼう
youku
マークアップ講座 04 jQuery - JavaScript
マークアップ講座 04 jQuery - JavaScript
eiji sekiya
jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料
Nobumasa Ura
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Miho Nakano
Intoroduction to React.js
Intoroduction to React.js
Yuto Matsukubo
2012年8月10日 勉強会
2012年8月10日 勉強会
Rin Yano
Knockout
Knockout
Kazuhiro Eguchi
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
インフラジスティックス・ジャパン株式会社
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
多分モダンなWebアプリ開発
多分モダンなWebアプリ開発
tak-nakamura
DOM Scripting & jQuery
DOM Scripting & jQuery
smallworkshop
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Akira Inoue
「その他」のUI Framework 3選
「その他」のUI Framework 3選
Shumpei Shiraishi
Jqm20120210
Jqm20120210
cmtomoda
Selenium webdriver使ってみようず
Selenium webdriver使ってみようず
Oda Shinsuke
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
Kawaz的jQuery入門
Kawaz的jQuery入門
Kohki Miki
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
Similar to Start React with Browserify
(20)
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
scala+liftで遊ぼう
scala+liftで遊ぼう
マークアップ講座 04 jQuery - JavaScript
マークアップ講座 04 jQuery - JavaScript
jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Intoroduction to React.js
Intoroduction to React.js
2012年8月10日 勉強会
2012年8月10日 勉強会
Knockout
Knockout
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
jQuery Mobileの基礎
jQuery Mobileの基礎
多分モダンなWebアプリ開発
多分モダンなWebアプリ開発
DOM Scripting & jQuery
DOM Scripting & jQuery
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
「その他」のUI Framework 3選
「その他」のUI Framework 3選
Jqm20120210
Jqm20120210
Selenium webdriver使ってみようず
Selenium webdriver使ってみようず
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Kawaz的jQuery入門
Kawaz的jQuery入門
Web制作勉強会 #2
Web制作勉強会 #2
More from Muyuu Fujita
Hello npm
Hello npm
Muyuu Fujita
Learn ES2015
Learn ES2015
Muyuu Fujita
Objective Front-End JavaScript
Objective Front-End JavaScript
Muyuu Fujita
小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレ
Muyuu Fujita
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは
Muyuu Fujita
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
非ガチ勢「よし、Coffee script使おう!」
非ガチ勢「よし、Coffee script使おう!」
Muyuu Fujita
あの時AngularJSと出会った僕らは
あの時AngularJSと出会った僕らは
Muyuu Fujita
デザイナー向け 初めてのPhp ~サイト制作に役立つtips~
デザイナー向け 初めてのPhp ~サイト制作に役立つtips~
Muyuu Fujita
Cssアニメーションとその制御
Cssアニメーションとその制御
Muyuu Fujita
WordPressで企業サイトのテーマを作る
WordPressで企業サイトのテーマを作る
Muyuu Fujita
WPerのWPerによるWPerのためのPHP入門
WPerのWPerによるWPerのためのPHP入門
Muyuu Fujita
ノンプログラマのGit入門
ノンプログラマのGit入門
Muyuu Fujita
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
Muyuu Fujita
More from Muyuu Fujita
(14)
Hello npm
Hello npm
Learn ES2015
Learn ES2015
Objective Front-End JavaScript
Objective Front-End JavaScript
小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレ
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
非ガチ勢「よし、Coffee script使おう!」
非ガチ勢「よし、Coffee script使おう!」
あの時AngularJSと出会った僕らは
あの時AngularJSと出会った僕らは
デザイナー向け 初めてのPhp ~サイト制作に役立つtips~
デザイナー向け 初めてのPhp ~サイト制作に役立つtips~
Cssアニメーションとその制御
Cssアニメーションとその制御
WordPressで企業サイトのテーマを作る
WordPressで企業サイトのテーマを作る
WPerのWPerによるWPerのためのPHP入門
WPerのWPerによるWPerのためのPHP入門
ノンプログラマのGit入門
ノンプログラマのGit入門
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
Recently uploaded
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Recently uploaded
(12)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Start React with Browserify
1.
Start React with Browserify
2.
About me me =
{ name: "muyuu", Twitter: "@anticyborg", belongs: "freelance", job: "Web Front-End Engineer" };
3.
Agenda • React • browserify •
gulp
4.
About React
5.
About React • Facebook製Viewフレームワーク •
コンポーネント指向 • VirtualDOM
6.
About React var Hello
= React.createClass({ render: function(){ return ( <div className="hello"> Hello World! </div> ); } }); React.render( <Hello />, document.getElementById('helloBox') );
7.
何が良いのか • DOM操作を単純化 • コンポーネント単位での設計 •
可読性が高い • メンテしやすい • 壊れにくい
8.
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'); });
9.
DOM操作を単純化 • DOM変更に弱い • 現状の状態がDOMにしかない •
拡張しずらい
10.
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> ); } });
11.
コンポーネント単位での設計 • 構成要素をコンポーネントに分ける • 各コンポーネントの実装とDOMを1箇所に記述 •
htmlライクな記述をJSファイル内に記述(JSX)
12.
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> ); } });
13.
DEMO
14.
Points • React.createClass() でコンポーネントを作成 •
renderメソッドにコンポーネントのDOMを記述 • propはコンポーネントに渡されるデータ • stateはアプリケーションの状態を持つデータ • stateに変更があった際には再描画される • コンポーネント間で値を受け渡す
15.
Components • 1つのコンポーネントは機能もviewも1箇所に記述 • like
Web components
16.
Everything can be Component!
17.
Components これからはアプリケーション設計の際には • コンポーネント単位での設計 • 各コンポーネントの組み合わせ これらをより重視して作らなければならない
18.
Require?
19.
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>
20.
importしたい!
21.
Browserify Browserify
22.
Browserify // moduleA.js module.exports =
{ log: function(){ console.log('it is moduleA'); } }; // moduleB.js module.exports = { log: function(){ console.log('this is moduleB'); } };
23.
Browserify // main.js var moduleA
= require('moduleA'); var moduleB = require('moduleB'); moduleA.log(); moduleB.log(); // it is moduleA // this is moduleB
24.
Browserify • jQueryを使う場合 // main.js var
$ = require('jquery'); $('.ele').on("click", anything);
25.
Browserify npm install -g
browserify npm install --save jquery browserify main.js -o bundle.js // make bundle.js
26.
React Components with
Browserify var React = require('react'); var Child = require('./child'); // React component var main = React.createClass({ render(){ return ( <div className="main"> <Child data={this.state.data}/> </div> ); } });
27.
Watchify • ファイルを監視してBrowserifyのビルドを自動化 • 通常はrequireしたファイル全てを結合する •
速度が遅い(Reactは130KB,jQueryは84KB) • watchifyなら差分ビルドが可能
28.
Browserify on Gulp •
jsだけではなくcss等のビルドもやってる • gulp watch? • gulp watchでは差分ビルドできない • 遅い • 1コマンドでwatchもwatchifyも動かしたい
29.
DEMO
30.
https://github.com/muyuu/ searchKindle
31.
After AJAX
32.
JSの必須スキルは 増える一方
33.
MVW Framework
34.
Unit Test
35.
E2E Test
36.
Node.js
37.
AltJS
38.
Build Tool
39.
おなかいっぱい
40.
フロントエンドは進化の 速度が早すぎる
41.
じゃあやめる?
42.
人はいつ死ぬかって? 自らを成長させることを 辞めたときさ — おれ
43.
like tuna?
44.
like hamster?
45.
No!
46.
Have Frontier Spirit
47.
走って走って走って なお走り続けてこそ 良い未来に進める
48.
さ、Reactやろう
Download now