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
2.1k
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
Cloudflare を活用して変わったメルカリの開発体験 / How Cloudflare Changed Mercari's Development Experience
hatappi
1
610
RubyではじめるGraphQL
hatappi
0
840
RubyでChainerつくってます!!
hatappi
2
1.4k
TDDな個人開発
hatappi
0
300
できるだけ楽して楽しくRails開発しよう
hatappi
2
330
EKSにRailsをのせた
hatappi
1
1.2k
RubyとApache Arrow
hatappi
0
2.4k
Red Chainerを なぜ作って今後どうするのか
hatappi
2
2.3k
Fargateで夢は見られるのか
hatappi
1
2.2k
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Become a Pro
speakerdeck
PRO
28
5.4k
How STYLIGHT went responsive
nonsquared
100
5.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Code Reviewing Like a Champion
maltzj
524
40k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Statistics for Hackers
jakevdp
799
220k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Speed Design
sergeychernyshev
31
1k
Fireside Chat
paigeccino
37
3.5k
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