$30 off During Our Annual Pro Sale. View Details »

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

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

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

Yamagishi Kazutoshi

December 08, 2018
Tweet

More Decks by Yamagishi Kazutoshi

Other Decks in Technology

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