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
noteのフロントエンドApp分割
Search
kozo yamagata
June 21, 2021
Programming
15
34k
noteのフロントエンドApp分割
noteでの大きくなりすぎたNuxt.jsのアプリケーションを分割する取り組みについて
kozo yamagata
June 21, 2021
Tweet
Share
More Decks by kozo yamagata
See All by kozo yamagata
コーヒー好きのエンジニアが自宅で焙煎を始めた話
kozo002
0
180
Other Decks in Programming
See All in Programming
議事録の要点整理を自動化! サーバレス Bot 構築術
penpeen
3
1.6k
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.2k
クラシルを支える技術と組織
rakutek
0
190
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
120
AccessorySetupKitで実現するシームレスなペアリング体験 / Seamless pairing with AccessorySetupKit
nekowen
0
200
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
140
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
110
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.2k
Current States of Java Web Frameworks at JCConf 2025
kishida
0
490
CSC305 Lecture 01
javiergs
PRO
1
380
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
100
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
11k
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Transcript
None
noteのフロントエンドApp分割 2021-06-21(mon) 山形孝造
3 受託開発会社でエンジニア、フリーランスを経て 2020年3月にnote入社 ☕コーヒーを自宅で焙煎したり、農園に行ったりするくらいにスキ フロントエンド・エンジニア
山形孝造 (やまがた こうぞう) note.com/zochang twitter.com/kozo002 github.com/kozo002
note フロントエンド Appの課題 4
note inc. 初期:Ruby on Rails + AngularJS 5 Railsのassets上に実装されたSPA
なつかしのCoffeeScriptで書かれていた
note inc. - SSRできない - Headless browser で html生成してSEO対策 -
動作が遅い - WebpackではなくSprockets - CoffeeScriptで書かれている - モダンなJSに追いつけない => Nuxt.jsへ乗り換え 2018年夏頃から 6 問題点
note inc. - AngularJSはほんの一部残っている - 全て移行するのは時間の問題 - Nuxt移行チームは解散 - 僕が入社したのはこの後
=> AngularJS時代の問題は全て解決 Nuxt移行ほぼ完了 🎉 7
note inc. 新たな課題発生 😇
note inc. - AngularJS実装の機能+新機能がNuxt上に存在 - コード量が凄まじいことに - 😈ビルドが長い -
ローカルで開発着手できるまで時間がかかる - 途中で落ちる - デプロイが遅い - 影響範囲が広い - バタフライエフェクトのような障害が発生したことも - パフォーマンスが低下 - SEOにも悪影響 - パフォーマンス対策は別軸で進めている 9 Nuxt実装による現在の課題 💀
フロントエンド App分割 10 2021年2月から開始
note inc. - 新しい機能はNext.jsで実装中 - そのうち本体も分割していく - Nuxtを今すぐ捨てるわけではない - 🔥共通Componentsをどう解決するか
- 共通スタイル - Router問題 => これらの問題を解決していく 💪 フロントエンドApp分割 11
note inc. - Web Componentsを検討した - Stencil.jsを使ってみた - バンドルサイズがでかい -
SSRできない - Svelteを採用 🎉 - バンドルサイズが小さい - 試しにButtonを実装してみた - Stencil.js 36.8KB - Svelte 5.5KB(React adapterを含む) 共通Componentsをどう解決するか 12
note inc. - Svelteを採用 🎉 - TypeScript が気持ちよく書ける - Webpack
config を書けば Nuxt.js/Next.js 上で動く - SSR/Hydrationも簡単にできる => Github Packagesでライブラリ化 共通Componentsをどう解決するか 13
note inc. SvelteをReactで動かす例 14 svelteファイルがimportのために Webpack loaderを追加する 基本的にはtargetに要素を与えて
newするだけで動く ※実際にはもう少し対応が必要です ※これはSSRに対応していません
note inc. SvelteをVue(ver2系)で動かす例 15 svelteファイルがimportのために Webpack loaderを追加する 基本的にはtargetに要素を与えて
newするだけで動く ※実際にはもう少し対応が必要です ※これはSSRに対応していません
App分割をやって 見えてきたこと 16
note inc. - 新しいFramework/Libraryの知識 - 課題解決の引き出しになる - ビルドシステムを読み解く力 - 問題解決能力に直結
- 実装力 - コードを書くスピード、習熟度 - フットワーク - 分析力 - 成果物が求めていたものかを確かめられる 求められる技術と知識 17
note inc. - 個人的な想いから、アイデアを作る - 歯磨きしてる時、頭を洗っている時、散歩している時 - 仲間に相談すると同意を得られる - 単純にSlackでつぶやくだけ
- アイデア+αされてブラッシュアップされる - 上長に相談すると時間が得られる - 残業しなくて済む - お墨付きで改善を進められる - 小さく始めて少しずつ周りを巻き込む - すばやく試そう、つねにリーダーシップを、おおきな視点で考えよう まわりの協力が不可欠 18
19 noteの フロントエンドエンジニアを 募集中です 採用情報 https://open.talentio.com/1/c/note/requisitions/det ail/11493
None