Mastodonのフロントエンド実装 / Frontend of Mastodon

Frontend Conference Fukuoka 2018 (https://frontend-conf.fukuoka.jp/) で話した内容になります。

Transcript

1. Mastodonの フロントエンド実装 山岸和利 (ykzts)
2. Mastodonとは
3. Mastodonとは ActivityPubとOStatusに対応したウェブアプリと繋がるミニブログ実装です。 ミニブログはTwitter流行以降に雨後のタケノコのように沢山出てきましたが、大半のも のはそれほど流行することなく消えていきました。MastodonはActivityPubやOStatusの ような共通規格のプロトコルに対応しているため他の実装と連携することができます。 Mastodonと同じくActivityPubやOStatusに対応している実装にはGNU socialや Pleroma、Micro.blogといったものがあります。
4. 使われている技術 • Ruby on Rails • webpack (Webpacker) • React + Redux • Immutable.js • Sass • etc...
5. 使われている技術 • Ruby on Rails • webpack (Webpacker) • React + Redux • Immutable.js • Sass • etc...
6. Webpacker?
7. // config/webpack/production.js process.env.NODE_ENV = process.env.NODE_ENV || 'production' const environment = require('./environment') module.exports = environment.toWebpackConfig()
8. // config/webpack/environment.js const { environment } = require('@rails/webpacker') module.exports = environment
9. // config/webpack/environment.js (custom) const { environment } = require('@rails/webpacker') environment.config .set('resolve.extensions', ['.ts', '.js']) environment.loaders .append('ts', { test: /\.ts$/, use: 'ts-loader' }) module.exports = environment
10. WebpackerのDSLはとにかく自由度がない • Rails Wayに乗ることで誰が書いても似たようなもの になる • 集団開発では役に立つかもしれない • Rubyぽさがどうしても出ているのでフロントエンド開 発者の人は違和感しか抱かない……と思う
11. $ rm config/webpack/*.js
12. Mastodonでは WebpackerのDSLを使っていません
13. MastodonとWebpacker • Mastodonの config/webpack/*.js ではWebpacker のDSLを一切使っていません • webpack.config.js をwebpackの作法にそのまま 沿って書いています • WebpackerのRakeタスクやViewのHelperだけ使っ ています
14. $ rm config/webpack/*.js
15. 使われている技術 • Ruby on Rails • webpack (Webpacker) • React + Redux • Immutable.js • Sass • etc...
16. 説明できていない要素が まだまだあります!
17. 気になったことがあれば 懇親会等で聴いていただければ
18. 終