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
510
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
530
Mastodonを支える技術 / Technology of Mastodon
ykzts
0
210
Other Decks in Technology
See All in Technology
cdk deployに必要な権限ってなんだ?
kinyok
0
190
CES_2023_FleetWise_demo.pdf
sparkgene
0
130
SmartHRからOktaへのSCIM連携で作り出すHRドリブンのアカウント管理
jousysmiler
1
120
SSMパラメーターストアでクロススタック参照の罠を回避する
shuyakinjo
0
7.9k
書籍を書きました。 そう、VS Codeで。
takumanakagame
4
4.6k
OVN-Kubernetes-Introduction-ja-2023-01-27.pdf
orimanabu
1
460
2年で10→70人へ! スタートアップの 情報セキュリティ課題と施策
miekobayashi
1
680
マイクロサービス宣言から8年 振り返りとこれから / Eight Years After the Microservices Declaration A Look Back and A Look Ahead
eisuke
2
310
OpenShift.Run2023_create-aro-with-terraform
ishiitaiki20fixer
1
360
オブザーバビリティのベストプラクティスと弥生の現状 / best practices for observability and YAYOI’s current state
yayoi_dd
0
160
あつめたデータをどう扱うか
skrb
2
170
JAWS-UG 横浜 #54 資料
takakuni
0
220
Featured
See All Featured
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
128
8.8k
For a Future-Friendly Web
brad_frost
166
7.8k
Build your cross-platform service in a week with App Engine
jlugia
221
17k
Bash Introduction
62gerente
601
210k
Into the Great Unknown - MozCon
thekraken
2
300
YesSQL, Process and Tooling at Scale
rocio
159
12k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Designing with Data
zakiwarfel
91
4.2k
Keith and Marios Guide to Fast Websites
keithpitt
407
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
239
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
182
15k
Visualization
eitanlees
128
12k
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...
説明できていない要素が まだまだあります!
気になったことがあれば 懇親会等で聴いていただければ
終