Frontend Conference Fukuoka 2018 (https://frontend-conf.fukuoka.jp/) で話した内容になります。
Mastodonのフロントエンド実装山岸和利 (ykzts)
View Slide
Mastodonとは
MastodonとはActivityPubとOStatusに対応したウェブアプリと繋がるミニブログ実装です。ミニブログはTwitter流行以降に雨後のタケノコのように沢山出てきましたが、大半のものはそれほど流行することなく消えていきました。MastodonはActivityPubやOStatusのような共通規格のプロトコルに対応しているため他の実装と連携することができます。Mastodonと同じくActivityPubやOStatusに対応している実装にはGNU socialやPleroma、Micro.blogといったものがあります。
使われている技術● Ruby on Rails● webpack (Webpacker)● React + Redux● Immutable.js● Sass● etc...
Webpacker?
// config/webpack/production.jsprocess.env.NODE_ENV = process.env.NODE_ENV || 'production'const environment = require('./environment')module.exports = environment.toWebpackConfig()
// config/webpack/environment.jsconst { environment } = require('@rails/webpacker')module.exports = environment
// 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
WebpackerのDSLはとにかく自由度がない● Rails Wayに乗ることで誰が書いても似たようなものになる● 集団開発では役に立つかもしれない● Rubyぽさがどうしても出ているのでフロントエンド開発者の人は違和感しか抱かない……と思う
$ rm config/webpack/*.js
MastodonではWebpackerのDSLを使っていません
MastodonとWebpacker● Mastodonの config/webpack/*.js ではWebpackerのDSLを一切使っていません● webpack.config.js をwebpackの作法にそのまま沿って書いています● WebpackerのRakeタスクやViewのHelperだけ使っています
説明できていない要素がまだまだあります!
気になったことがあれば懇親会等で聴いていただければ
終