DDD.rb #11 (Rails with React) という Mastodon のコードリーディングに参加したので、そのメモです。
インストールがほとんどでコードリーディングはほとんどできなかったので、大まかな読み方の話だけで、あまり突っ込んだ話はありませんでした。
メモ
- 次回は DDD.rb #12 RDRA for DDD ワークショップ! - DDD.rb | Doorkeeper (RDRA はラドラと読むらしい)
- マストドン評判とは!SNS初心者が安全にMastodonを楽しむ方法の最初の方が参考になる
- ローカルで起動するには docs/Running-Mastodon/Development-guide.md のリンク先の Development guide を参照
- vagrant も手軽
- 開発環境のメールは https://github.com/ryanb/letter_opener を使っている
- master だと jquery-rails が消えている
- master だと .foreman と Procfile.dev で streaming のサーバーなども起動する
- 今の master は cld3 でエラーになりやすい
- 基本的に v1.3.3 のタグで試そうという話に
- react のルーティングは
./app/assets/javascripts/components/containers/mastodon.jsxをみる -
<Route path='getting-started' component={GettingStarted} />とか - 翻訳が難しい話 (連合とか未収載とか)
- docker を使うなら docker-compose.yml を直接書き換える代わりに docker-compose.override.yml が使える
getElementById
- HTML ソースに
<script id='initial-state' type='application/json'>がある -
getElementByIdで検索 -
app/assets/javascripts/components/containers/mastodon.jsxにconst initialState = JSON.parse(document.getElementById("initial-state").textContent);とある
react のソースの読み方
- react のページのざっくりとした見分け方は HTML ソースがやけに少ないときは react (登録ページなど devise 由来のページは react を使っていない)
-
data-react-classがついてるところに差し込まれている - react のルーティングは
./app/assets/javascripts/components/containers/mastodon.jsxをみる -
<Route path='getting-started' component={GettingStarted} />とか -
localhost:3000/web/は残してlocalhost:3000/web/getting-startedを開くと出てくる -
<Route path='blocks' component={Blocks} />はimport Blocks from '../features/blocks';なのでapp/assets/javascripts/components/features/blocks/index.jsxにある
ストリーミングは?
-
app/assets/javascripts/components/api.jsxにクライアントがある -
axios(アクシオス) を使っている -
AuthorizationでBearerトークンを渡している - サーバー側は
streaming/index.jsにある (トップ直下) import WebSocket from 'ws'- nginx などで受けて rails と振り分けられてここにくるので
wssではなくwsのみ
storybook とは?
- 直下に storybook ディレクトリがあるのでその話題
- 動くスタイルガイド?
その他
-
app/controllers/authにdevise関連 -
UserとAccountが別にある -
app/controllers/apiに API 関連
package.json
-
chaiはいろいろなものを入れる必要がある - rails を使う人はよく使っているらしい
-
sinonもテストのライブラリでスタブを使いたいからではないか
ActionCable
- actioncable という node (npm) のモジュールがある
- 開発元は https://github.com/rails/rails/blob/master/actioncable/package.json らしい
- サーバー側とクライアント側で同じ名前なので紛らわしい
- npm の方の actioncable はあまり情報がない
Disqus Comments