Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Mastodonのフロントエンド実装 / Frontend of Mastodon
Search
Yamagishi Kazutoshi
December 08, 2018
Technology
4
800
Mastodonのフロントエンド実装 / Frontend of Mastodon
Frontend Conference Fukuoka 2018 (
https://frontend-conf.fukuoka.jp/
) で話した内容になります。
Yamagishi Kazutoshi
December 08, 2018
Tweet
Share
More Decks by Yamagishi Kazutoshi
See All by Yamagishi Kazutoshi
MastodonとActivityPubとそこから繋がる世界 / Mastodon and ActivityPub
ykzts
0
890
Mastodonを支える技術 / Technology of Mastodon
ykzts
0
400
Other Decks in Technology
See All in Technology
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
6
2.4k
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
140
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
360
解析の定理証明実践@Lean 4
dec9ue
0
180
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
240
"サービスチーム" での技術選定 / Making Technology Decisions for the Service Team
kaminashi
1
170
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.3k
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
130
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
140
Model Mondays S2E03: SLMs & Reasoning
nitya
0
100
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
270
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
The Cult of Friendly URLs
andyhume
79
6.5k
Embracing the Ebb and Flow
colly
86
4.7k
Building an army of robots
kneath
306
45k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Why Our Code Smells
bkeepers
PRO
337
57k
Docker and Python
trallard
44
3.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Transcript
Mastodonの フロントエンド実装 山岸和利 (ykzts)
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...
使われている技術 • Ruby on Rails • webpack (Webpacker) • React
+ Redux • Immutable.js • Sass • etc...
Webpacker?
// config/webpack/production.js process.env.NODE_ENV = process.env.NODE_ENV || 'production' const environment =
require('./environment') module.exports = environment.toWebpackConfig()
// config/webpack/environment.js const { 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だけ使っ ています
$ rm config/webpack/*.js
使われている技術 • Ruby on Rails • webpack (Webpacker) • React
+ Redux • Immutable.js • Sass • etc...
説明できていない要素が まだまだあります!
気になったことがあれば 懇親会等で聴いていただければ
終