Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Rails + TypeScript + React + Hypernovaで始めるSSRライフ
Search
hatappi
July 14, 2018
1
1.9k
Rails + TypeScript + React + Hypernovaで始めるSSRライフ
Rails Developers Meetup 2018 Day 3 Extreme
hatappi
July 14, 2018
Tweet
Share
More Decks by hatappi
See All by hatappi
RubyではじめるGraphQL
hatappi
0
740
RubyでChainerつくってます!!
hatappi
2
1.3k
TDDな個人開発
hatappi
0
250
できるだけ楽して楽しくRails開発しよう
hatappi
2
290
EKSにRailsをのせた
hatappi
1
1.1k
RubyとApache Arrow
hatappi
0
2.1k
Red Chainerを なぜ作って今後どうするのか
hatappi
2
2.1k
Fargateで夢は見られるのか
hatappi
1
2k
個人サービスをFargateに移行したよ
hatappi
1
600
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
What's in a price? How to price your products and services
michaelherold
242
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
How GitHub (no longer) Works
holman
310
140k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Embracing the Ebb and Flow
colly
83
4.4k
Six Lessons from altMBA
skipperchong
26
3.3k
Typedesign – Prime Four
hannesfritz
39
2.3k
Design by the Numbers
sachag
277
19k
Transcript
Rails + TypeScript + React + Hypernovaで始めるSSRライフ Rails Developers Meetup
2018 Day 3 Extreme @hatappi
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 $22 RDS : db.t2.small $40 ALB, CloudFront,
etc.. $18 $80 約8,800円 ⾒積もり
た、⾼い
会社からのサーバー費⽀給 システムの運⽤費 0円!!
使っている技術 • React • TypeScript • Hypernova
None
React • A JavaScript library for building user interfaces •
Facebookが2011年にニュー スフィードに導⼊し2015年 にオープンソースとして公開 • JavaScriptの中にHTMLを記 載するJSXを利⽤できる +49
なぜReactなのか? • 基本的にはslimで書くが⼀部分だけコンポーネント に置き換えたい • 極⼒コンポーネントをステートレスにする • 数週間後の⾃分が⾒てもわかるΑ͏ʹ • ͬͯΈ͔ͨͬͨ
None
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 ·ͩܗʹͳΒͳ͍ΞΠσΞͳͲ ະདྷͷࣗͱͷใڞ༗Kibela https://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