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
大規模なWebの開発手法
Search
Kono Junya
May 29, 2018
Technology
1
2.3k
大規模なWebの開発手法
vsLTというLTイベントで話をしたスライドになります。
isomorphicの話とcode splittingの話をしました。
Kono Junya
May 29, 2018
Tweet
Share
More Decks by Kono Junya
See All by Kono Junya
FUJIMIのFastly活用事例集
konojunya
0
1.3k
Progressive Release by using Fastly
konojunya
1
420
WinTicketにおけるPWA at PWA Night vol.9
konojunya
4
1.5k
新卒研修を終えて
konojunya
0
500
初めてのReact
konojunya
1
360
Other Decks in Technology
See All in Technology
大規模データとの戦い方
knih
1
460
ビジネスとコード品質の接合点 そしてコード品質がそこに及ぼす影響 / The Intersections of Business and Engineering, and The Impact of Code Quality There
mtx2s
10
1k
Autopsy of a Cascading Outage from a MySQL Crashing Bug
jfg956
0
200
中央集権体制からDataOpsへの転換 / centralized-to-dataops-transformation
pei0804
7
1.5k
LLM + RAG を使った SORACOM Support Bot の裏側の歴史
soracom
PRO
1
640
業務で使えるかもしれない…!?GitHub Actions の Tips 集 / CI/CD Test Night #7
ponkio_o
PRO
24
6.9k
エンジニアブランディングチームの KPI / KPI's of engineer branding team
chaspy
1
140
サービス成長と共に肥大化するモノレポ、長くなるCI時間 / As services grow, monorepos get bigger and CI time gets longer
kohbis
5
2.1k
生成AI・LLM時代における 機械学習エンジニアとしてのキャリア戦略・開発戦略 / my-career-and-development-strategies-for-ml-engineer-2024
yuya4
4
300
実務への応用例から考える 変更に強いオブジェクト指向設計 / 20240324-ooc2024
bengo4com
7
5.3k
生成AIの不確実性と向き合うためのオブジェクト指向設計
tkikuchi1002
2
670
これまでのキャリアとこれからMLエンジニアとしてどう動くか
masatakashiwagi
0
350
Featured
See All Featured
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
Code Review Best Practice
trishagee
54
15k
Gamification - CAS2011
davidbonilla
76
4.5k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
Design by the Numbers
sachag
274
18k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
The Pragmatic Product Professional
lauravandoore
24
5.7k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
Transcript
େنͳWebͷ։ൃख๏ By Junya Kono
໊લ: Տ ७ʢίϊ δϡϯϠʣ χοΫωʔϜ: ͡ΎΜ͡ΎΜ ֶߍ: HALେࡕITֶ෦Web։ൃֶՊ झຯ: ϘϧμϦϯάɺಡॻ
࠷ۙͷྲྀߦΓͷٕज़
࠷ۙͷྲྀߦΓͷٕज़
ࠓճ࠾༻ٕͨ͠ज़
SPAॳճϩʔυ͕͍ɻ
ΛSSRΛ͍ͨ͠ɻ
ͰɺભҠͱؚ͔Ίͯ SPAͷྑ͞׆͔͍ͨ͠ɻ
ΛSPAʹ͍ͨ͠ɻ
None
Isomorphic Web Application
Isomorphic ͱͳʹ͔ SPA Client Server API SPAͱͯ͠ɺը໘ΛΫϥΠΞϯτ͕ඳը͢Δɻ
Isomorphic ͱͳʹ͔ Isomorphic Client Server API SSRͰϢʔβʔʹ͙͢ʹը໘͕ඳը͞Ε Ϛϯτ͞Ε͔ͯΒSPAͱͯ͠ৼΔ͏
ΛSSR + SPAʹͰ͖ͨ
େنͳWeb = bundle.jsͷංେԽ
None
Code Splitting
Dynamic import ʢstage-3ͷػೳͰ͢ʣ
Dynamic import const main = () => { const lib
= import(“./lib”) lib() } ඇಉظΛPromiseͰಡΈࠐΈ͢Δɻ ͜ΕʹΑͬͯɺbundle.jsʹrequire͢Δίʔυ͕ు͔ΕΔɻ
ϑΝΠϧαΠζͷܭଌ import moment from “moment” const getDate = () =>
{ return moment().format(“YYYY/MM/DD“) } export default getDate ReactͰ͍͏ͱɺͦͷϖʔδͷίϯϙʔωϯτ heavy.js
ϑΝΠϧαΠζͷܭଌ import heavy from “./heavy” const main = () =>
{ console.log(“Today is…”) console.log(heavy()) } main() ී௨ʹimportͯ͠ɺ࣮ߦͯ͠ΈΔɻ main.js 619KB
ϑΝΠϧαΠζͷܭଌ const getDate = () => import(“./heavy”) const async main
= () => { console.log(“Today is…”) const m = await getDate() console.log(m.default()) } main() Dynamic importͯ͠ΈΔ code_splitting.js 7.9KB
Code splittingʹΑͬͯ 619KB -> 7.9KB ʹϕʔεͷϑΝΠϧαΠζΛݮΒͤͨʂʂʂʂʂʂ GitHubʹίʔυ্͍͛ͯ·͢ɻ github.com/konojunya/dynamic-import-sample
None
·ͱΊ SSRͱSPAͷྑ͍ͱ͜औΓΛ͠Α͏ʂ > Isomorphic Web Application ϕʔεͷbundle.jsΛখ͘͞͠Α͏ʂ > dynamic importʢcode
splittingʣ