Enviar búsqueda
Cargar
Flux react現状確認会
•
87 recomendaciones
•
42,510 vistas
VOYAGE GROUP
Seguir
Empresariales
Denunciar
Compartir
Denunciar
Compartir
1 de 62
Descargar ahora
Descargar para leer sin conexión
Recomendados
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
React.js + Flux
React.js + Flux
dsuke Takaoka
React.js + Reduxで作るSPA
React.js + Reduxで作るSPA
Shohei Saeki
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
Recomendados
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
React.js + Flux
React.js + Flux
dsuke Takaoka
React.js + Reduxで作るSPA
React.js + Reduxで作るSPA
Shohei Saeki
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
Angular1&2
Angular1&2
Kenichi Kanai
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
Yuki Ishikawa
AngularJS 概説
AngularJS 概説
Kenichi Kanai
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
TanUkkii
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
kumatch kumatch
Angular#Kanazawa
Angular#Kanazawa
Kenichi Kanai
Angular js はまりどころ
Angular js はまりどころ
Ayumi Goto
angular1脳で見るangular2
angular1脳で見るangular2
Moriyuki Arakawa
20140322
20140322
小野 修司
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
Angular2
Angular2
Kenichi Kanai
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Hayashi Yuichi
オフラインファーストの思想と実践
オフラインファーストの思想と実践
Shumpei Shiraishi
現場開発者視点で答えるWindows Azure
現場開発者視点で答えるWindows Azure
Keiichi Hashimoto
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
インフラジスティックス・ジャパン株式会社
Más contenido relacionado
La actualidad más candente
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
Angular1&2
Angular1&2
Kenichi Kanai
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
Yuki Ishikawa
AngularJS 概説
AngularJS 概説
Kenichi Kanai
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
TanUkkii
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
kumatch kumatch
Angular#Kanazawa
Angular#Kanazawa
Kenichi Kanai
Angular js はまりどころ
Angular js はまりどころ
Ayumi Goto
angular1脳で見るangular2
angular1脳で見るangular2
Moriyuki Arakawa
20140322
20140322
小野 修司
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
Angular2
Angular2
Kenichi Kanai
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Hayashi Yuichi
オフラインファーストの思想と実践
オフラインファーストの思想と実践
Shumpei Shiraishi
La actualidad más candente
(20)
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
React+fluxを導入した話
React+fluxを導入した話
Angular1&2
Angular1&2
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
AngularJS 概説
AngularJS 概説
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
Enterprise x AngularJS
Enterprise x AngularJS
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
Angular#Kanazawa
Angular#Kanazawa
Angular js はまりどころ
Angular js はまりどころ
angular1脳で見るangular2
angular1脳で見るangular2
20140322
20140322
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
Angular2
Angular2
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
オフラインファーストの思想と実践
オフラインファーストの思想と実践
Similar a Flux react現状確認会
現場開発者視点で答えるWindows Azure
現場開発者視点で答えるWindows Azure
Keiichi Hashimoto
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
インフラジスティックス・ジャパン株式会社
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
Daizen Ikehara
テスト
テスト
Masashi Sato
Microsoft Azure ~ Web開発 & モバイル開発者向け情報 ~
Microsoft Azure ~ Web開発 & モバイル開発者向け情報 ~
Daisuke Masubuchi
SharePoint 2010 を使ったクラウドアプリ開発
SharePoint 2010 を使ったクラウドアプリ開発
Tusyoshi Matsuzaki
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
david9142
『これからの.NETアプリケーション開発』セミナー .NET用アプリケーション フレームワーク Open 棟梁 概説
『これからの.NETアプリケーション開発』セミナー .NET用アプリケーション フレームワーク Open 棟梁 概説
Daisuke Nishino
~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~
Oda Shinsuke
Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版
Yoshito Tabuchi
Mvc conf session_5_isami
Mvc conf session_5_isami
Hiroshi Okunushi
新世代Java scriptコントロール wijmo5 devsumi_150219
新世代Java scriptコントロール wijmo5 devsumi_150219
Akiyoshi Yamazaki
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
Monaca
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Akira Inoue
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
Mori Shingo
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
Osamu Shimoda
Visual studio online and Agile
Visual studio online and Agile
Kazushi Kamegawa
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Daizen Ikehara
Introduction to application architecture on asp.net mvc
Introduction to application architecture on asp.net mvc
Atsushi Fukui
【提案】(それぐらい)運用側で保守してもらえませんか?
【提案】(それぐらい)運用側で保守してもらえませんか?
ごろう 野村
Similar a Flux react現状確認会
(20)
現場開発者視点で答えるWindows Azure
現場開発者視点で答えるWindows Azure
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
テスト
テスト
Microsoft Azure ~ Web開発 & モバイル開発者向け情報 ~
Microsoft Azure ~ Web開発 & モバイル開発者向け情報 ~
SharePoint 2010 を使ったクラウドアプリ開発
SharePoint 2010 を使ったクラウドアプリ開発
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
『これからの.NETアプリケーション開発』セミナー .NET用アプリケーション フレームワーク Open 棟梁 概説
『これからの.NETアプリケーション開発』セミナー .NET用アプリケーション フレームワーク Open 棟梁 概説
~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~
Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版
Mvc conf session_5_isami
Mvc conf session_5_isami
新世代Java scriptコントロール wijmo5 devsumi_150219
新世代Java scriptコントロール wijmo5 devsumi_150219
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
Visual studio online and Agile
Visual studio online and Agile
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Introduction to application architecture on asp.net mvc
Introduction to application architecture on asp.net mvc
【提案】(それぐらい)運用側で保守してもらえませんか?
【提案】(それぐらい)運用側で保守してもらえませんか?
Más de VOYAGE GROUP
AWS SDK for Go in #jawsmeguro
AWS SDK for Go in #jawsmeguro
VOYAGE GROUP
Data Engineering at VOYAGE GROUP #jawsdays
Data Engineering at VOYAGE GROUP #jawsdays
VOYAGE GROUP
JavaScriptトレンド総括(2014)
JavaScriptトレンド総括(2014)
VOYAGE GROUP
JSON Schema で Web API のスキマを埋めよう
JSON Schema で Web API のスキマを埋めよう
VOYAGE GROUP
[20140625]wwdc2014 feedback
[20140625]wwdc2014 feedback
VOYAGE GROUP
Google playでのリワードアプリリジェクトからの今後のマネタイズ手段について インタースティシャル広告×クロスプロモーション-
Google playでのリワードアプリリジェクトからの今後のマネタイズ手段について インタースティシャル広告×クロスプロモーション-
VOYAGE GROUP
事業内デザイナーのミッション(公開版) genesix 藤井幹大
事業内デザイナーのミッション(公開版) genesix 藤井幹大
VOYAGE GROUP
[20130624]最近の開発環境について話してみる sakata
[20130624]最近の開発環境について話してみる sakata
VOYAGE GROUP
セミナープレゼン資料【Adingo】 20130529
セミナープレゼン資料【Adingo】 20130529
VOYAGE GROUP
セミナープレゼン資料【Adingo】 20130530
セミナープレゼン資料【Adingo】 20130530
VOYAGE GROUP
Abテストノススメ
Abテストノススメ
VOYAGE GROUP
iPhoneアプリ「トリセツ」にて実践したリーンスタートアップ
iPhoneアプリ「トリセツ」にて実践したリーンスタートアップ
VOYAGE GROUP
【発表用】Lpoワークショップ~組織でサイト改善をする方法~
【発表用】Lpoワークショップ~組織でサイト改善をする方法~
VOYAGE GROUP
Jenkinsとhadoopを利用した継続的データ解析環境の構築
Jenkinsとhadoopを利用した継続的データ解析環境の構築
VOYAGE GROUP
Androidにおけるテストに関して〜デバイスをどう選択するか〜
Androidにおけるテストに関して〜デバイスをどう選択するか〜
VOYAGE GROUP
スマホ無料アプリのマネタイズについて【Adingo】
スマホ無料アプリのマネタイズについて【Adingo】
VOYAGE GROUP
最新のマーケットアルゴリズムと、 アルゴリズムを踏まえてのプロモーション
最新のマーケットアルゴリズムと、 アルゴリズムを踏まえてのプロモーション
VOYAGE GROUP
【発表用】ウェブアナリスト養成講座「Lpoとabテスト」
【発表用】ウェブアナリスト養成講座「Lpoとabテスト」
VOYAGE GROUP
ゴールから始めよう!
ゴールから始めよう!
VOYAGE GROUP
Phpではじめるオブジェクト指向(公開用)
Phpではじめるオブジェクト指向(公開用)
VOYAGE GROUP
Más de VOYAGE GROUP
(20)
AWS SDK for Go in #jawsmeguro
AWS SDK for Go in #jawsmeguro
Data Engineering at VOYAGE GROUP #jawsdays
Data Engineering at VOYAGE GROUP #jawsdays
JavaScriptトレンド総括(2014)
JavaScriptトレンド総括(2014)
JSON Schema で Web API のスキマを埋めよう
JSON Schema で Web API のスキマを埋めよう
[20140625]wwdc2014 feedback
[20140625]wwdc2014 feedback
Google playでのリワードアプリリジェクトからの今後のマネタイズ手段について インタースティシャル広告×クロスプロモーション-
Google playでのリワードアプリリジェクトからの今後のマネタイズ手段について インタースティシャル広告×クロスプロモーション-
事業内デザイナーのミッション(公開版) genesix 藤井幹大
事業内デザイナーのミッション(公開版) genesix 藤井幹大
[20130624]最近の開発環境について話してみる sakata
[20130624]最近の開発環境について話してみる sakata
セミナープレゼン資料【Adingo】 20130529
セミナープレゼン資料【Adingo】 20130529
セミナープレゼン資料【Adingo】 20130530
セミナープレゼン資料【Adingo】 20130530
Abテストノススメ
Abテストノススメ
iPhoneアプリ「トリセツ」にて実践したリーンスタートアップ
iPhoneアプリ「トリセツ」にて実践したリーンスタートアップ
【発表用】Lpoワークショップ~組織でサイト改善をする方法~
【発表用】Lpoワークショップ~組織でサイト改善をする方法~
Jenkinsとhadoopを利用した継続的データ解析環境の構築
Jenkinsとhadoopを利用した継続的データ解析環境の構築
Androidにおけるテストに関して〜デバイスをどう選択するか〜
Androidにおけるテストに関して〜デバイスをどう選択するか〜
スマホ無料アプリのマネタイズについて【Adingo】
スマホ無料アプリのマネタイズについて【Adingo】
最新のマーケットアルゴリズムと、 アルゴリズムを踏まえてのプロモーション
最新のマーケットアルゴリズムと、 アルゴリズムを踏まえてのプロモーション
【発表用】ウェブアナリスト養成講座「Lpoとabテスト」
【発表用】ウェブアナリスト養成講座「Lpoとabテスト」
ゴールから始めよう!
ゴールから始めよう!
Phpではじめるオブジェクト指向(公開用)
Phpではじめるオブジェクト指向(公開用)
Último
エンジニア採用のミスマッチを防ぐコーディング試験サービス『HireRoo(ハイヤールー)』
エンジニア採用のミスマッチを防ぐコーディング試験サービス『HireRoo(ハイヤールー)』
Kousuke Kuzuoka
令和5年度_サステナブルツーリズムセミナー_ビジュアルレポート(公開用).pdf
令和5年度_サステナブルツーリズムセミナー_ビジュアルレポート(公開用).pdf
jun_suto
HRMOS(ハーモス)タレントマネジメント_ご紹介資料_Saleshub掲載用
HRMOS(ハーモス)タレントマネジメント_ご紹介資料_Saleshub掲載用
wataruhonda3
HCCソフト株式会社 2025年新卒採用向け 会社紹介・採用情報資料------
HCCソフト株式会社 2025年新卒採用向け 会社紹介・採用情報資料------
ssusercbaf23
Japan IT Week 2024 Brochure by 47Billion
Japan IT Week 2024 Brochure by 47Billion
Data Analytics Company - 47Billion Inc.
chouhou_obuse_reiwa6nenn_4_2404slide.pdf
chouhou_obuse_reiwa6nenn_4_2404slide.pdf
ssuser31dbd1
株式会社AllAdsと申します。サービス紹介資料で御座いますので、是非ご覧くださいませ。
株式会社AllAdsと申します。サービス紹介資料で御座いますので、是非ご覧くださいませ。
takuyamatsumoto29
株式会社ベクトル総研会社概要 Vector Research Institute (VRI) Corporate Profile
株式会社ベクトル総研会社概要 Vector Research Institute (VRI) Corporate Profile
vrihomepage
JAPAN WEB3.0 AWARD 2023 ブロックチェーン(NFT)技術を活用したアイディア 優秀賞作品 遺3.0相続
JAPAN WEB3.0 AWARD 2023 ブロックチェーン(NFT)技術を活用したアイディア 優秀賞作品 遺3.0相続
Yusuke Katsuma
株式会社フィジオ会社説明資料|採用の際の福利厚生やカルチャーなどを紹介しています
株式会社フィジオ会社説明資料|採用の際の福利厚生やカルチャーなどを紹介しています
chizurumurakami
第15回販促コンペ 審査員個人賞(林 知幸 氏) アルカナ? アディダスジャパン
第15回販促コンペ 審査員個人賞(林 知幸 氏) アルカナ? アディダスジャパン
Yusuke Katsuma
ROMS_recruting_deck_for_website_20240322.pdf
ROMS_recruting_deck_for_website_20240322.pdf
hirokisawa3
Último
(12)
エンジニア採用のミスマッチを防ぐコーディング試験サービス『HireRoo(ハイヤールー)』
エンジニア採用のミスマッチを防ぐコーディング試験サービス『HireRoo(ハイヤールー)』
令和5年度_サステナブルツーリズムセミナー_ビジュアルレポート(公開用).pdf
令和5年度_サステナブルツーリズムセミナー_ビジュアルレポート(公開用).pdf
HRMOS(ハーモス)タレントマネジメント_ご紹介資料_Saleshub掲載用
HRMOS(ハーモス)タレントマネジメント_ご紹介資料_Saleshub掲載用
HCCソフト株式会社 2025年新卒採用向け 会社紹介・採用情報資料------
HCCソフト株式会社 2025年新卒採用向け 会社紹介・採用情報資料------
Japan IT Week 2024 Brochure by 47Billion
Japan IT Week 2024 Brochure by 47Billion
chouhou_obuse_reiwa6nenn_4_2404slide.pdf
chouhou_obuse_reiwa6nenn_4_2404slide.pdf
株式会社AllAdsと申します。サービス紹介資料で御座いますので、是非ご覧くださいませ。
株式会社AllAdsと申します。サービス紹介資料で御座いますので、是非ご覧くださいませ。
株式会社ベクトル総研会社概要 Vector Research Institute (VRI) Corporate Profile
株式会社ベクトル総研会社概要 Vector Research Institute (VRI) Corporate Profile
JAPAN WEB3.0 AWARD 2023 ブロックチェーン(NFT)技術を活用したアイディア 優秀賞作品 遺3.0相続
JAPAN WEB3.0 AWARD 2023 ブロックチェーン(NFT)技術を活用したアイディア 優秀賞作品 遺3.0相続
株式会社フィジオ会社説明資料|採用の際の福利厚生やカルチャーなどを紹介しています
株式会社フィジオ会社説明資料|採用の際の福利厚生やカルチャーなどを紹介しています
第15回販促コンペ 審査員個人賞(林 知幸 氏) アルカナ? アディダスジャパン
第15回販促コンペ 審査員個人賞(林 知幸 氏) アルカナ? アディダスジャパン
ROMS_recruting_deck_for_website_20240322.pdf
ROMS_recruting_deck_for_website_20240322.pdf
Flux react現状確認会
1.
なぜ私はVue.jsを諦め Flux + Reactに 移行したのか ! 社内JavaScript現状確認会
2.
前提となる適用先 • 管理画面的なWebアプリケーションのリニューアル …だったもの(仮) • REST
APIを前提としたSingle Page Applicationもどき (※すべてが1ページではないけど) • 機能・画面が多い • 複雑化することがほぼ確実
3.
Viewへの要求事項 • 統一されたスタイルでUIとなるHTMLを生成できる • なるべく簡単に書けること(含セキュリティリスク回避) (生DOM・jQueryはあり得ない) •
業界におけるパラダイムが過渡期のため、 巨大フレームワークに乗っかりたくは無い (交換可能な部品の組み合わせでプレーンに) • 困ってもなんとか出来るための緊急ハッチも必要
4.
まずFluxを採用した話
5.
What is Flux?
6.
It’s not any
framework, is just an architecture.
7.
Flux アーキテクチャ • Facebook提唱のGUIアプリのアーキテクチャ •
オブザーバパターンを用いる • データの流れる方向を単一にする • 特定のライブラリに依存する思考ではないと 解釈している
8.
Flux 概念図 https://github.com/facebook/flux
9.
Fluxのメリット • データの入力と出力のフローが一定になる • 「あるモジュールに入力が起きた場合、次は どこにデータが来るか?」を規約したアーキ テクチャ •
なので、デバッグ的な予測がしやすい • MVC方言にありがちな概念の言語化
10.
Fluxの辛いところ • 定着した概念ではないので、オレオレFluxが乱立 している(情報収集の難) • 冗長な箇所もある (ほぼ必ずサイクルを一周しなければいけない) •
Store->Viewの通知粒度を細かくしないと、 一般的にViewの更新コストが非常に大きい
11.
何を使ってViewを 実装するか?
12.
今回のViewへの要求事項 • 統一されたスタイルでUIとなるHTMLを生成できる • なるべく簡単に書けること(含XSS回避) •
交換可能な部品の組み合わせでプレーンに. • 困ってもなんとか出来るための緊急ハッチも必要 (生のDOM APIを触る方法がある)
13.
First, I used
Vue.js
14.
※以後のVue体験記は 2014年8~9月初頭の、 v0.10.xの印象である
15.
Vue.js (vuejs.org) • Model
View ViewModel (MVVM) pattern • ES5でデータバインディングする • Angularのデータバインディングだけ 切り出したようなもの • イケイケJSライブラリの割に ドキュメントが文明的
16.
「良い」というよりも「楽」 • 宣言的に書ける • データバインディング •
データを渡せば勝手に表示してくれる • 紐づければ勝手に更新される • 記述量も少なめ
17.
けれどもな
18.
個人的にイマイチ感あった • 規約らしいものはあんまりない • 「Vue.jsの考えるViewModel」が言語化されているとは 言いがたい •
特に値と状態の区別が無いのは好きではない (ビュー層の宿命ではあるが) • Vueのテンプレート定義は複雑な記述が面倒くさい • 個人的にJSコードとバインド先の記述の分断を感じる • プロトタイプチェーンを書き換える(※最近、改良された)
19.
プロトタイプチェーンを 書き換えやがって (^ω^)こういうチェーンがあるじゃろ? ! Hoge | V
Hoge.prototype | V Object.prototype
20.
プロトタイプチェーンを 書き換えやがって (^ω^)Vue.jsにHogeを渡すじゃろ? ! Vue({
data: { bar: Hoge, }, })
21.
プロトタイプチェーンを 書き換えやがって (^ω^)Vue.jsはこう書き換えるじゃろ? ! Hoge | V
<Vueの変更監視用プロパティ> | V Object.prototype
22.
プロトタイプチェーンを 書き換えやがって (^ω^)Hoge.prototypeは行方不明じゃろ? ! Hoge | V
<Vueの変更監視用プロパティ> | V Object.prototype
23.
プロトタイプチェーンを 書き換えやがって (^ω^)toString()すらも行方不明じゃろ? ! Hoge | V
<Vueの変更監視用プロパティ> | V Object.prototype
24.
25.
※最近のバージョンで prototype残してくれるらしい
26.
結局、Vue.jsは断念 • Backbone.Stickitなどからの移行には 有用ではないかと感じる ! • しかし、2014年秋現在、 これでゼロから作るかは悩みどころ ! •
生のオブジェクトを扱えないのは悲しい
27.
そうだ、React行こう
28.
React • View特化ライブラリ(render library) •
自動差分描画機能を持つ(Virtual DOM) • データと状態の概念がAPIレベルで 分かれている • ドキュメントが本当に細かい (github:facebook/react)
29.
本当のDOMツリー SyntheticEvent (Virtual Event) Virtual DOM 差分描画機構 React JS Reactのある生活 ユーザー
30.
Virtual DOM <div>
<h1>bar</h1> <p>foo</p> </div> div h1 p bar foo テンプレートエンジンとして、 文字列ではなく木構造を作る
31.
div h1 p bar foo div h1
p bar 差分計算の概念図 生成した木構造を中間表現として扱い, データ構造としての比較を行う
32.
本当のDOMツリー SyntheticEvent (Virtual Event) Virtual DOM 差分描画機構 React JS データの表示フロー(概略) 人間
33.
本当のDOMツリー SyntheticEvent (Virtual Event) Virtual DOM 差分描画機構 React JS DOMイベントの発生フロー(概略) 人間
34.
Reactのメリット • 実際のDOMの変更処理をReactに丸投げ可能 • 必要なデータを全て一度に入力しても、 自動で差分が計算されるので、 常にある程度の速度で描画が可能 •
「参照透過性のあるビュー層」を実現する
35.
Reactのテンプレートの書き方 • JSで React.DOM.Div()
みたいな関数を使って 頑張って組む • またはJSX (JavaScript XML)で組む • XMLリテラルぽいが、最終的にプレーン なJSの関数に落とし込まれる
36.
JSX Example (変換前)
37.
JSX Example (変換後)
38.
ReactとFlux • Store->Viewへの変更通知を簡略化できる • Reactでは変更後のデータ一式全てを 受けても描画コストを抑えられる •
他ライブラリでは、 丁寧に差分情報を作る必要が有る
39.
Reactのテスト • 公式には「これを使え」というモノは無い • ただしJest(読み込んだものを全部モックに する)というものを公式が超pushしてる
40.
Reactのデメリット • React自身が未だ0.xの状態 (バージョンアップ時に破壊的変更の可能性) • 枯れてはいない •
React管理下のDOMツリーに対して、 他のライブラリを当てるのは面倒くさそう
41.
なぜReactに飛び移ったのか
42.
色々あった
43.
Reactを選んだ理由 • 参照透過性のあるビュー =
状態予測可能性が高い • APIレベルでデータの値と状態を分離している • JSXテンプレートがプログラマブル (積極的に使いたくは無いけど) • ドキュメントが良い (開発元のFacebook自身が使ってる)
44.
ReactでFluxを実践した現状
45.
1. Store ->
Viewの更新通知 • オリジナル 通知を受けたらStoreから、getterメソッドで 取得してる • 弊プロジェクト 「そんなことはしない。通知時に一緒にデー タ全部を渡す. StoreとViewを疎に.」
46.
2. Actionの更新通知 • オリジナル リクエスト失敗ケースを考えると、APIリクエスト もAction起因に •
弊プロジェクト APIリクエストはStoreの領分なのと、 サーバーは永続ストレージという認識なので、 Storeに詰め込んだ
47.
3. テスト • オリジナル 「Jestでモックすれば楽!」 •
弊プロジェクト 「モックは実装に立ち入り過ぎ. 静的にできる 範囲で, mochaとpower-assertで.」
48.
4. Viewのテスト • イベントハンドラの無いViewにユニットテス トは必要ないと判断 •
イベントハンドラのテストはしたい • E2Eテストでカバーも考えたい • ほとんどが未着手・検討中
49.
まとめ • 常に気をつけてMVCをやりたくはなかった →Fluxを採用した • Viewの更新を楽にしたいし,
デバッグもなるべく楽にしたかった →Reactを採用した • ReactはView操作のパラダイムシフト
50.
会場でのQ&Aとか議論とか まとめ
51.
Q. Store内部の依存関係の解決は? • Dispatcherが処理順序解決の方法を 持っているのでそれに頼る(実装依存) •
無かったらメッセージの種類を増やして 頑張るしかなさそう
52.
Q. ユーザーの入力が複数起きたら? • Fluxの本義に従えば、毎回データフローを回 るべきだし、それで十分に回ると思う •
万が一回らなくなったら、そのとき考える
53.
Q. 「5件メッセージがキューに溜まっ たら更新したい」場合は、どうする? • Store側で適切に閾値を決めて、Viewへの通知 回数を管理すれば良いのでは
54.
Q. jQueryプラグインなどと併せて使 いたい(React移行中のケースなど) •その話は止めろ
55.
Q. どうしてもjQueryプラグインなど と併せて使いたい •そんな事を考えては いけない
56.
Q. やっぱりjQueryプラグインなどと 併せて使いたい •本当にそのjQueryプラグ インが必要なのか胸に手を 当てて考え直して、やっぱ り必要だったらReactで 書き直すしかない
57.
Q. Reactに書き直している暇はないんだけど、止むに止まれぬビジネス上の緊急を 要する都合により早急にこのjQueryプラグインを使わなければ死人が出る可能性も 十分にありえる状況において、どうにかしてReactによって統治されたサブツリー内 でjQueryプラグインを使う方法はありますか? • getDOMNode()で生のDOMに触れる
+ shouldComponentUpdate()を応 用して, jQuery適用対象のDOMをReactに更新させなければ、なんとかい ける、はず (やったことないので根拠はない)
58.
Q. アニメーションとかどうする? • ReactがReactCSSTransitionGroupというもの を持っているので、これで対応できるはず •
メチャクチャ複雑なことやりたい場合について は、まだ体験した事が無いのでよくわからん • 「絶対に更新されないComponent」を作れば いいんじゃないの?
59.
Q. JSXの名前解決とか • 普通のJSの関数呼び出しに変換されるので、 普通のJSと一緒と考えて良い •
React Componentのメンバ関数のthisは, 各インスタンスにbindされる
60.
Q. Virtual DOMの差分情報は取 れる? •
ReactにPublicなAPIとしては現在存在しない • 欲しければ, Matt-Esch/virtual-domを使おう
61.
Q. サーバーサイドでプリレンダリン グしたものにReact当て込みたい • やったことがないのでわからない •
API的には出来そうに思えるけど???
62.
Q. Reactの差分描画は最速? • DOM職人には勝てないと思う •
職人エンジニアだけでチームを組まずとも、 生産性を維持しつつ「けっこう速い」ものを 開発するためのツールと割り切るべきでは
Descargar ahora