$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
make_frontend_properly_spa.pdf
Search
mtblue81
November 22, 2018
Programming
0
2.7k
make_frontend_properly_spa.pdf
mtblue81
November 22, 2018
Tweet
Share
More Decks by mtblue81
See All by mtblue81
3Dアバターを楽しもう!@burikaigi2024
mtblue81
1
1.1k
手触りの良いUIを 名刺表現の巻
mtblue81
0
180
JavaScriptメタプログラミング勉強会 #metapro_es
mtblue81
0
420
Other Decks in Programming
See All in Programming
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
syumai
6
2.1k
[堅牢.py #1] テストを書かない研究者に送る、最初にテストを書く実験コード入門 / Let's start your ML project by writing tests
shunk031
12
7.1k
AIコードレビューがチームの"文脈"を 読めるようになるまで
marutaku
0
350
Building AI Agents with TypeScript #TSKaigiHokuriku
izumin5210
6
1.2k
認証・認可の基本を学ぼう前編
kouyuume
0
190
堅牢なフロントエンドテスト基盤を構築するために行った取り組み
shogo4131
8
2.3k
React Native New Architecture 移行実践報告
taminif
1
150
令和最新版Android Studioで化石デバイス向けアプリを作る
arkw
0
380
Socio-Technical Evolution: Growing an Architecture and Its Organization for Fast Flow
cer
PRO
0
320
【CA.ai #3】Google ADKを活用したAI Agent開発と運用知見
harappa80
0
290
ID管理機能開発の裏側 高速にSaaS連携を実現したチームのAI活用編
atzzcokek
0
210
複数人でのCLI/Infrastructure as Codeの暮らしを良くする
shmokmt
5
2.2k
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.3k
BBQ
matthewcrist
89
9.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
69k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
It's Worth the Effort
3n
187
29k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Six Lessons from altMBA
skipperchong
29
4.1k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.1k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Transcript
> ϑϩϯτΤϯυΛ͖ͪΜͱ41"ʹ͍ͨ͠ʂ 4BOTBOº.5FDI/JHIUʙϨΨγʔγεςϜʹཱ͔ͪ͑ʂʙ
!NU@CMVF !.U#MVF
None
None
None
None
+49ԽϩδοΫ ίϐʔ
JSX ES5 ES5 ϓϦίϯύΠϧ
ίϯϙʔωϯτ άϩʔόϧͳελΠϧ 結果...
理想 •コンポーネントは独⽴させたい •構成 •スタイル •ロジック •(SSRなどを除いて) SPAにアプリサーバはいらない ファイルサーバにアップロードするだけ 8FC$PNQPOFOUT
改善プラン 1.CSSファイルをコンポーネント(JS)に合わせる 2.CSSクラス名でスタイルの影響範囲を抑える 3.JS,CSSをどちらもnode.js側でビルドする
CSSファイルをコンポーネント(JS)に合わせる 1.まずは空ファイルでJSと同名CSSを準備 2.新規作成コンポーネントではスタイルはそこに B@DPNQPOFOUKT B@DPNQPOFOUDTT
CSSクラス名でスタイルの影響範囲を抑える 1.ファイルパスと同等のクラス名を定義する (BEMのBlock相当) 2.コンポーネントJSXの最外でクラス名を付与 B@DPNQPOFOUKT B@DPNQPOFOUDTT
CSSクラス名でスタイルの影響範囲を抑える 1.ファイルパスと同等のクラス名を定義する (BEMのBlock相当) 2.コンポーネントJSXの最外でクラス名を付与 B@DPNQPOFOUKT B@DPNQPOFOUDTT SFOEFS \ SFUVSO
EJWDMBTT/BNFbB@DPNQPOFOU` ʜ EJW B@DPNQPOFOU\ CBDLHSPVOEHSBZ ʜ MJOUͰωετΛ੍ݶ ^
JS,CSSをどちらもnode.js側でビルドする
JS,CSSをどちらもnode.js側でビルドする \ lCVOEMFKTzlCVOEMFYYYYKTz lCVOEMFDTTzlCVOEMFZZZZDTTz ʜ ^ CVOEMFYYYYKT CVOEMFZZZZDTT
つらかったところ 1.CSSファイルをコンポーネント(JS)に合わせる 2.CSSクラス名でスタイルの影響範囲を抑える 3.JS,CSSをどちらもnode.js側でビルドする
つらかったところ طଘͷڊେͳCSSͱίϯϙʔωϯτΛʹΒΊͬ͜͠ͳ͕Β CSSׂΛ͍ͯͬͨ͠ ͓͓Αͦ2ϲ݄͘Β͍ʁ ؆қతͳϨάϨογϣϯ߲Λઃ͚ͯνΣοΫ ڞ௨ͳ෦Ͱ͖Δ͚ͩSCSSͷmixinԽͯ͠ಀ͛ΔͳͲ
まとめ 改善プランをやってみたら - コンポーネント指向での開発ベースができてきた - ビルドプロセスをRailsからNodeに移せた
でもまだまだ道半ば ੩తܕ͚ 443 #'' &&ςετ
ͦͷଞʹReact͇ReduxͰͷʹ͍ͭͯ աڈͷεϥΠυͰհ͍ͯ͠·͢ IUUQTXXXTMJEFTIBSFOFU4IVIFJ"PZBNBSFBDUSFEVYBUFJHIU IUUQTTQFBLFSEFDLDPNNUCMVF KBWBTDSJQUNFUBQVSPHVSBNJOHVNJBORJBOHIVJOVNCFSNFUBQSPFT
None