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
650
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
730
Mastodonを支える技術 / Technology of Mastodon
ykzts
0
320
Other Decks in Technology
See All in Technology
On Your Data を超えていく!
hirotomotaguchi
2
670
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
13k
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
300
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
650
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
190
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
4
270
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
510
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
1
440
ServiceNow Knowledge Learning Rise up
manarobot
0
210
ここが嬉しいABAC ここが辛いよABAC #再解説+補足編
masahirokawahara
1
270
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
0
160
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
Facilitating Awesome Meetings
lara
42
5.6k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Visualization
eitanlees
136
14k
Building Applications with DynamoDB
mza
88
5.6k
RailsConf 2023
tenderlove
4
540
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
We Have a Design System, Now What?
morganepeng
43
6.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Teambox: Starting and Learning
jrom
128
8.4k
Building Your Own Lightsaber
phodgson
99
5.7k
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...
説明できていない要素が まだまだあります!
気になったことがあれば 懇親会等で聴いていただければ
終