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
830
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
910
Mastodonを支える技術 / Technology of Mastodon
ykzts
0
420
Other Decks in Technology
See All in Technology
GoでもGUIアプリを作りたい!
kworkdev
PRO
0
150
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
330
データ戦略部門 紹介資料
sansan33
PRO
1
3.7k
生成AI時代のセキュアコーディングとDevSecOps
yuriemori
0
100
フレームワークを意識させないワークショップづくり
keigosuda
0
190
AIツールでどこまでデザインを忠実に実装できるのか
oikon48
6
3.4k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
技育祭2025【秋】 企業ピッチ/登壇資料(高橋 悟生)
hacobu
PRO
0
110
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
350
AWS IoT 超入門 2025
hattori
0
340
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
5
910
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
320
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
4 Signs Your Business is Dying
shpigford
185
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Building Applications with DynamoDB
mza
96
6.7k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Bash Introduction
62gerente
615
210k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Code Reviewing Like a Champion
maltzj
526
40k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Scaling GitHub
holman
463
140k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
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...
説明できていない要素が まだまだあります!
気になったことがあれば 懇親会等で聴いていただければ
終