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