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
Bash Introduction
62gerente
608
210k
The Language of Interfaces
destraynor
154
24k
Building Applications with DynamoDB
mza
90
6.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
Writing Fast Ruby
sferik
626
61k
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