Rails + TypeScript + React + Hypernovaで始めるSSRライフ

by hatappi

Slide 1

Slide 1 text

Rails + TypeScript + React + Hypernovaで始めるSSRライフ Rails Developers Meetup 2018 Day 3 Extreme @hatappi

Slide 2

Slide 2 text

About me • Yusaku Hatanaka (@hatappi) • Speee, Inc • Ruby, Go, TypeScript, etc. • Roppongi.rb organizer • Vimmer (vimと同じ年) • 煎り⼤⾖が好き

Slide 3

Slide 3 text

今⽇話すこと • 作成したシステムの全体像 • どういった技術選定を⾏ったのか • 開発の苦労話 • etc

Slide 4

Slide 4 text

今⽇話さないこと • 何を作ったのかの詳細 • 懇親会で聞いてください

Slide 5

Slide 5 text

プライベートで開発してますか？

Slide 6

Slide 6 text

• Red Chainer • キュレーションサービス <= 今回話す • Slackで使うアンケートシステム • 家庭内Railsアプリ(ゴミ出しとかエアコンの遠隔操作) • etc

Slide 7

Slide 7 text

Motivation • 技術的な検証の場がほしかった • 設定上はいけるはず！  でも実際に反映したらどうなるのか知りたい！ • toCやってみたい • Rubyでキメていたい

Slide 8

Slide 8 text

システム全体像 • Nginx, Rails, Puma on EC2 • コンテンツはS3に保存されておりCloudFront経由で配信 • ﬂuentdはnginxのログから GoogleBotなどを切り出して Datadogにメトリクスを送っている

Slide 9

Slide 9 text

Datadog ダッシュボード

Slide 10

Slide 10 text

システムを  運⽤するにはお⾦が必要

Slide 11

Slide 11 text

EC2 : t2.small $22 RDS : db.t2.small $40 ALB, CloudFront, etc.. $18 $80 約8,800円⾒積もり

Slide 12

Slide 12 text

た、⾼い

Slide 13

Slide 13 text

会社からのサーバー費⽀給システムの運⽤費 0円!!

Slide 14

Slide 14 text

使っている技術 • React • TypeScript • Hypernova

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

React • A JavaScript library for building user interfaces • Facebookが2011年にニュースフィードに導⼊し2015年にオープンソースとして公開 • JavaScriptの中にHTMLを記載するJSXを利⽤できる +49

Slide 17

Slide 17 text

なぜReactなのか？ • 基本的にはslimで書くが⼀部分だけコンポーネントに置き換えたい • 極⼒コンポーネントをステートレスにする • 数週間後の⾃分が⾒てもわかるΑ͏ʹ • ΍ͬͯΈ͔ͨͬͨ

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

TypeScript • Microsoftが開発したオープンソースのプログラミング⾔語 • Javascriptが動的型付けなのに対してTypeScriptは静的型付け • コード補完も効く • TypeScriptͰॻ͔Εͨίʔυ͸tscΛ༻͍ͯ JavaScriptʹίϯύΠϧ͢Δ

Slide 20

Slide 20 text

なぜTypeScriptなのか？ • 型があることで明らかなエラーを防ぐことが出来る • 数週間後の⾃分がこの値は⽂字列？数値？といった曖昧さから解放される • やってみたかった

Slide 21

Slide 21 text

Hypernova

Slide 22

Slide 22 text

Hypernova • JavaScriptコンポーネントをSSR(サーバーサイドレンダリング)するためのライブラリ • AirbnbがOSSとして公開している • https://github.com/airbnb/hypernova

Slide 23

Slide 23 text

Hypernova • hypernova/server • nodejsで作られたHTTPサーバー • コンポーネント名とpropsを受け取りHTMLを返す • hypernova/react • サーバー、クライアント両⽅で動作するhypernova/server⽤のインターフェースを提供 • hypernova/ruby • hypernovaサーバーと連携するためのgem • Rails⽤にhelperなどを提供する

Slide 24

Slide 24 text

HypernovaとRails

Slide 25

Slide 25 text

なぜHypernovaなのか？ • サーバー側でのエラーはブラウザで表⽰される • GoogleBotと仲良く出来る • JavaScriptを解釈してくれるようになったとはいえ100%ではない！ • 例:)GoogleにインデックスされたタイトルがJavaScriptが動作したものもあれば、そうでないものも • やってみたかった • 以前使ったことはあったが0から⼊れてみたかった

Slide 26

Slide 26 text

開発の苦労話

Slide 27

Slide 27 text

サーバーとクライアントで描画されるものが違う • 極⼒サーバーとクライアントで差異がないように！ • どうしても差異が出てしまう場合は componentDidMount()などで処理を⾏う

Slide 28

Slide 28 text

⾃分が何を考えていたのか忘れる • プライベートに限らず⾃分が何を考えていたのか忘れてしまう https://kibe.la/ja ·ͩܗʹͳΒͳ͍ΞΠσΞͳͲ ະདྷͷࣗ෼ͱͷ৘ใڞ༗͸Kibela΁ https://blog.hatappi.me ٕज़తͳΞ΢τϓοτͳͲܗʹ ͳΔ΋ͷ͸ϒϩάͰެ։

Slide 29

Slide 29 text

AWSの値段が⾼い問題 • ⽉に$80くらいのはずが$100超え • CloudWatchͷGetMetricsData API͕ݟʹ֮ ͑ͷͳ͍ྉۚ

Slide 30

Slide 30 text

AWSの値段が⾼い問題 • Datadogが使っているサービスのメトリクスも CloudWatch経由でとるようになっていた

Slide 31

Slide 31 text

AWSの値段が⾼い問題 • 安くはなったけど1⽇$2はまだ⾼い。。。

Slide 32

Slide 32 text

デザイン出来ない問題 • デザイン全く出来ない • Bootstrap ?? • jQueryを使うことが前提となってると今回は厳しい • 0からCSSを書き始めるのはもっと厳しい

Slide 33

Slide 33 text

デザイン出来ない問題 • BULMA - https://bulma.io/ • CSS3標準のFlexboxをベースとしたOSSのCSSフレームワーク • レスポンシブデザインにも対応

Slide 34

Slide 34 text

作業時間の確保 • 平⽇は仕事 • 休⽇は家族と過ごしたりまとまった時間がとれない中  どうやってプライベートでコードを書くか

Slide 35

Slide 35 text

作業時間の確保 “Write Code Every Day - John Resig”  https://johnresig.com/blog/write-code-every-day/ • 毎⽇ 1commit、1PRを⽬標にして少しづつでもコードを書き続けられるようにする • 無理はしない

Slide 36

Slide 36 text

まとめ • SSRはGoogleとも仲良くできるしHypernovaを使うと現時点では初期設定以降困ったことは起きていない • プライベートの開発 • 楽しむ • 無理をしない • サーバー費1万円⽀給は最⾼ • 平⽇に⼀⼈だと作業出来ないという⽅は...

Slide 37

Slide 37 text

⼀緒にもくもくしませんか？ IUUQTSPQQPOHJSCDPOOQBTTDPNFWFOU