Rails + TypeScript + React + Hypernovaで始めるSSRライフ

Rails Developers Meetup 2018 Day 3 Extreme

Transcript

1. Rails + TypeScript + React + Hypernovaで始めるSSRライフ Rails Developers Meetup 2018 Day 3 Extreme @hatappi
2. About me • Yusaku Hatanaka (@hatappi) • Speee, Inc • Ruby, Go, TypeScript, etc. • Roppongi.rb organizer • Vimmer (vimと同じ年) • 煎り⼤⾖が好き
3. 今⽇話すこと • 作成したシステムの全体像 • どういった技術選定を⾏ったのか • 開発の苦労話 • etc
4. 今⽇話さないこと • 何を作ったのかの詳細 • 懇親会で聞いてください
5. プライベートで 開発してますか？
6. • Red Chainer • キュレーションサービス <= 今回話す • Slackで使うアンケートシステム • 家庭内Railsアプリ(ゴミ出しとかエアコンの遠隔操 作) • etc
7. Motivation • 技術的な検証の場がほしかった • 設定上はいけるはず！
 でも実際に反映したらどうなるのか知りたい！ • toCやってみたい • Rubyでキメていたい
8. システム全体像 • Nginx, Rails, Puma on EC2 • コンテンツはS3に保存されて おりCloudFront経由で配信 • fluentdはnginxのログから GoogleBotなどを切り出して Datadogにメトリクスを送っ ている
9. Datadog ダッシュボード
10. システムを
 運⽤するにはお⾦が必要
11. EC2 : t2.small $22 RDS : db.t2.small $40 ALB, CloudFront, etc.. $18 $80 約8,800円 ⾒積もり
12. た、⾼い
13. 会社からのサーバー費⽀給 システムの運⽤費 0円!!
14. 使っている技術 • React • TypeScript • Hypernova
16. React • A JavaScript library for building user interfaces • Facebookが2011年にニュー スフィードに導⼊し2015年 にオープンソースとして公開 • JavaScriptの中にHTMLを記 載するJSXを利⽤できる +49
17. なぜReactなのか？ • 基本的にはslimで書くが⼀部分だけコンポーネント に置き換えたい • 極⼒コンポーネントをステートレスにする • 数週間後の⾃分が⾒てもわかるΑ͏ʹ • ΍ͬͯΈ͔ͨͬͨ
19. TypeScript • Microsoftが開発したオープンソースのプログラミン グ⾔語 • Javascriptが動的型付けなのに対してTypeScriptは静 的型付け • コード補完も効く • TypeScriptͰॻ͔Εͨίʔυ͸tscΛ༻͍ͯ JavaScriptʹίϯύΠϧ͢Δ
20. なぜTypeScriptなのか？ • 型があることで明らかなエラーを防ぐことが出来る • 数週間後の⾃分がこの値は⽂字列？数値？といっ た曖昧さから解放される • やってみたかった
21. Hypernova
22. Hypernova • JavaScriptコンポーネントをSSR(サーバーサイドレ ンダリング)するためのライブラリ • AirbnbがOSSとして公開している • https://github.com/airbnb/hypernova
23. Hypernova • hypernova/server • nodejsで作られたHTTPサーバー • コンポーネント名とpropsを受け取りHTMLを返す • hypernova/react • サーバー、クライアント両⽅で動作するhypernova/server⽤のイ ンターフェースを提供 • hypernova/ruby • hypernovaサーバーと連携するためのgem • Rails⽤にhelperなどを提供する
24. HypernovaとRails
25. なぜHypernovaなのか？ • サーバー側でのエラーはブラウザで表⽰される • GoogleBotと仲良く出来る • JavaScriptを解釈してくれるようになったとはいえ100%ではな い！ • 例:)GoogleにインデックスされたタイトルがJavaScriptが動作した ものもあれば、そうでないものも • やってみたかった • 以前使ったことはあったが0から⼊れてみたかった
26. 開発の苦労話
27. サーバーとクライアントで 描画されるものが違う • 極⼒サーバーとクライアントで差異がないように！ • どうしても差異が出てしまう場合は componentDidMount()などで処理を⾏う
28. ⾃分が何を考えていたのか忘れる • プライベートに限らず⾃分が何を考えていたのか忘 れてしまう https://kibe.la/ja ·ͩܗʹͳΒͳ͍ΞΠσΞͳͲ ະདྷͷࣗ෼ͱͷ৘ใڞ༗͸Kibela΁ https://blog.hatappi.me ٕज़తͳΞ΢τϓοτͳͲܗʹ ͳΔ΋ͷ͸ϒϩάͰެ։
29. AWSの値段が⾼い問題 • ⽉に$80くらいのはずが$100超え • CloudWatchͷGetMetricsData API͕ݟʹ֮ ͑ͷͳ͍ྉۚ
30. AWSの値段が⾼い問題 • Datadogが使っているサービスのメトリクスも CloudWatch経由でとるようになっていた
31. AWSの値段が⾼い問題 • 安くはなったけど1⽇$2はまだ⾼い。。。
32. デザイン出来ない問題 • デザイン全く出来ない • Bootstrap ?? • jQueryを使うことが前提となってると今回は厳し い • 0からCSSを書き始めるのはもっと厳しい
33. デザイン出来ない問題 • BULMA - https://bulma.io/ • CSS3標準のFlexboxをベースとしたOSSのCSSフ レームワーク • レスポンシブデザインにも対応
34. 作業時間の確保 • 平⽇は仕事 • 休⽇は家族と過ごしたり まとまった時間がとれない中
 どうやってプライベートでコードを書くか
35. 作業時間の確保 “Write Code Every Day - John Resig”
 https://johnresig.com/blog/write-code-every-day/ • 毎⽇ 1commit、1PRを⽬標にして少しづつでもコー ドを書き続けられるようにする • 無理はしない
36. まとめ • SSRはGoogleとも仲良くできるしHypernovaを使うと現 時点では初期設定以降困ったことは起きていない • プライベートの開発 • 楽しむ • 無理をしない • サーバー費1万円⽀給は最⾼ • 平⽇に⼀⼈だと作業出来ないという⽅は...
37. ⼀緒にもくもくしませんか？ IUUQTSPQQPOHJSCDPOOQBTTDPNFWFOU