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

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

Transcript

1. Mastodonの
   フロントエンド実装
   山岸和利 (ykzts)
   

   View Slide

2. Mastodonとは
   

   View Slide

3. Mastodonとは
   ActivityPubとOStatusに対応したウェブアプリと繋がるミニブログ実装です。
   ミニブログはTwitter流行以降に雨後のタケノコのように沢山出てきましたが、大半のも
   のはそれほど流行することなく消えていきました。MastodonはActivityPubやOStatusの
   ような共通規格のプロトコルに対応しているため他の実装と連携することができます。
   Mastodonと同じくActivityPubやOStatusに対応している実装にはGNU socialや
   Pleroma、Micro.blogといったものがあります。
   

   View Slide

4. 使われている技術
   ● Ruby on Rails
   ● webpack (Webpacker)
   ● React + Redux
   ● Immutable.js
   ● Sass
   ● etc...
   

   View Slide

5. 使われている技術
   ● Ruby on Rails
   ● webpack (Webpacker)
   ● React + Redux
   ● Immutable.js
   ● Sass
   ● etc...
   

   View Slide

6. Webpacker?
   

   View Slide

7. // config/webpack/production.js
   process.env.NODE_ENV = process.env.NODE_ENV || 'production'
   const environment = require('./environment')
   module.exports = environment.toWebpackConfig()
   

   View Slide

8. // config/webpack/environment.js
   const { environment } = require('@rails/webpacker')
   module.exports = environment
   

   View Slide

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
   

   View Slide

10. WebpackerのDSLはとにかく自由度がない
    ● Rails Wayに乗ることで誰が書いても似たようなもの
    になる
    ● 集団開発では役に立つかもしれない
    ● Rubyぽさがどうしても出ているのでフロントエンド開
    発者の人は違和感しか抱かない……と思う
    

    View Slide

11. $ rm config/webpack/*.js
    

    View Slide

12. Mastodonでは
    WebpackerのDSLを使っていません
    

    View Slide

13. MastodonとWebpacker
    ● Mastodonの config/webpack/*.js ではWebpacker
    のDSLを一切使っていません
    ● webpack.config.js をwebpackの作法にそのまま
    沿って書いています
    ● WebpackerのRakeタスクやViewのHelperだけ使っ
    ています
    

    View Slide

14. $ rm config/webpack/*.js
    

    View Slide

15. 使われている技術
    ● Ruby on Rails
    ● webpack (Webpacker)
    ● React + Redux
    ● Immutable.js
    ● Sass
    ● etc...
    

    View Slide

16. 説明できていない要素が
    まだまだあります!
    

    View Slide

17. 気になったことがあれば
    懇親会等で聴いていただければ
    

    View Slide

18. 終
    

    View Slide