フロントエンドの未来！？Universal JavaScript

Universal Reactについて簡単にまとめてみました。

Transcript

1. 株式会社エアークローゼット
2. フロントエンドの未来！？ Universal JavaScript
3. Universal React ≒ Universal React
4. アパレル ×IT Fashion Tech IT活⽤ による 新しいかたちの ファッション レンタルサービス
5. 発想とITで⼈々の⽇常に 新しいワクワクを 創造する
6. 執⾏役員CTO 元Sier && 元楽天 JavaScript(Node.js含む) / ruby / Python / SQL / Java / PHP ランニングプログラマー フルマラソン3時間19分 株式会社 エアークローゼット 執⾏役員CTO 辻 亮佑（つじ りょうすけ） プロフィール
7. Universal JavaScript
8. Universal Reactって 聞いたことある⼈？ 質問1
9. Universal Reactって 使ったことある⼈？ 質問2
10. • 開発が速い！ • 表⽰が速い！ • イケメン 特徴
11. 開発が速い！
12. 通常の開発 バックエンド フロントエンド
13. SPAの開発 フロントエンド バックエンド
14. Universal Reactの開発 バックエンド フロントエンド & バックエンド
15. スピード！スピード！スピード！ スピード！スピード！スピード！
16. 表⽰速度が速い！
17. SPAの場合 HTML読み込み JSの読み込み APIでデータ取得 レンダリング
18. Universal Reactの場合 HTML読み込み JSの読み込み APIでデータ取得 レンダリング 結果だけだ！ この世には結果だけが残る！
19. イケメン
20. 検索エンジンに評価し てもらうには、⾒た⽬ を良くしないといけな い。 イケメン
21. ※
22. SPAの場合 検索エンジン www.air-closet.com HTTP request 空のHTML
23. Univeral Reactの場合 検索エンジン www.air-closet.com HTTP request 中⾝のある HTML
24. 実装
25. • next.js h t t p s : / / g i t h u b . c o m / z e i t / n e x t . j s / ス タ ー 数 : 9 , 5 1 7 • react-redux-universal-hot-example h t t p s : / / g i t h u b . c o m / e r i k r a s / r e a c t - r e d u x - u n i v e r s a l - h o t - e x a m p l e ス タ ー 数 ： 9 , 1 4 6 • react-universally h t t p s : / / g i t h u b . c o m / c t r l p l u s b / r e a c t - u n i v e r s a l l y ス タ ー 数 ： 7 6 7 • universal-react h t t p s : / / g i t h u b . c o m / D o m i n i c To b i a s / u n i v e r s a l - r e a c t ス タ ー 数 ： 2 1 1 Framework & Scaffoldings
26. 構成 APIサーバ バック エンド S3 フロント エンド レンダリング サーバ フロント エンド
27. • react-helmet • redux • react-router • webpack(server sideも) • Babel • … ライブラリ
28. • FrontでもNodeでも使えるmoduleを選択す る必要あり。 ex. isomophic-fetch, react-cookieなど • 初期表⽰（サーバサイド）でAPIコールする場 合は⼯夫が必要。 • requestのパスはフルパスにする必要がある。 • サーバサイドは再起動しないと反映されない。 （当然だけど忘れがち） • INITIAL_STATEの継承。 ハマリポイント
29. airCloset開発⾔語⽐率 85% 10% 3% 2% ⾔語⽐率 node ruby python Java ※ CTOの独断と偏⾒調べ
30. airClosetでは、 熱意ほとばしる JavaScriptエンジニア を募集しています！
31. 半歩先の 新しいライフスタイルとして、 これまでにないワクワクする ファッションとの出会い⽅を 創造します 42