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
770
RubyでChainerつくってます!!
hatappi
2
1.3k
TDDな個人開発
hatappi
0
260
できるだけ楽して楽しくRails開発しよう
hatappi
2
290
EKSにRailsをのせた
hatappi
1
1.1k
RubyとApache Arrow
hatappi
0
2.1k
Red Chainerを なぜ作って今後どうするのか
hatappi
2
2.2k
Fargateで夢は見られるのか
hatappi
1
2k
個人サービスをFargateに移行したよ
hatappi
1
620
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
The Pragmatic Product Professional
lauravandoore
31
6.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Facilitating Awesome Meetings
lara
50
6.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Agile that works and the tools we love
rasmusluckow
327
21k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
380
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
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