Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Mastodonのフロントエンド実装 / Frontend of Mastodon
Yamagishi Kazutoshi
December 08, 2018
Technology
4
440
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
460
Mastodonを支える技術 / Technology of Mastodon
ykzts
0
170
Other Decks in Technology
See All in Technology
スタートアップと技術選定と AWS
track3jyo
PRO
2
330
ラブグラフ紹介資料 〜プロダクト解体新書〜 / Lovegraph Product Deck
lovegraph
0
240
Modern Android dependency injection
hugovisser
1
130
JDK Flight Recorder入門
chiroito
1
500
2024卒_freee_エンジニア職(ポテンシャル採用)_説明資料
freee
0
230
#JP_Stripes Sapporo Stripeの活用例を色々ご紹介します!
miu_crescent
0
110
約6年間運用したシステムをKubernetesに完全移行するまで/Kubernetes Novice Tokyo
isaoshimizu
5
840
Meet passkeys
satotakeshi
1
110
What's Data Lake ? Azure Data Lake best practice
ryomaru0825
2
740
JJUG2022_spring_Keycloak (Red Hat Single Sign-on)
tinoue
0
200
ひとりでも安定して 組織を変える活動を続けていくための ストレスマネジメント
pastelinc
0
840
サイボウズの アジャイル・クオリティ / Agile Quality at Cybozu
cybozuinsideout
PRO
4
2.3k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
269
11k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
From Idea to $5000 a Month in 5 Months
shpigford
373
44k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Atom: Resistance is Futile
akmur
255
20k
Done Done
chrislema
174
14k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Designing for Performance
lara
597
63k
Rails Girls Zürich Keynote
gr2m
86
12k
The Mythical Team-Month
searls
209
39k
Six Lessons from altMBA
skipperchong
14
1.4k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
126
8.5k
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...
説明できていない要素が まだまだあります!
気になったことがあれば 懇親会等で聴いていただければ
終