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