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

C582b722e015633f7900083f8ea75732?s=47 hatappi
July 14, 2018
1.2k

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

Rails Developers Meetup 2018 Day 3 Extreme

C582b722e015633f7900083f8ea75732?s=128

hatappi

July 14, 2018
Tweet

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

  15. None
  16. React • A JavaScript library for building user interfaces •

    Facebookが2011年にニュー スフィードに導⼊し2015年 にオープンソースとして公開 • JavaScriptの中にHTMLを記 載するJSXを利⽤できる +49
  17. なぜReactなのか? • 基本的にはslimで書くが⼀部分だけコンポーネント に置き換えたい • 極⼒コンポーネントをステートレスにする • 数週間後の⾃分が⾒てもわかるΑ͏ʹ • ΍ͬͯΈ͔ͨͬͨ

  18. None
  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