Skip to content

Commit a07b946

Browse files
ryan-roemerryan-roemer
committed
Lots more progress
1 parent d8951af commit a07b946

1 file changed

Lines changed: 128 additions & 49 deletions

File tree

‎index.html‎

Lines changed: 128 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@
9191
Notes,
9292
DefaultTemplate,
9393
SlideLayout,
94+
SpectacleLogo,
9495
} from "spectacle";
9596

9697
import { theme, colors } from "./deck/theme.js";
@@ -112,6 +113,8 @@
112113
><${IconHtm} name=${name} fill=${fill}
113114
/></a>
114115
`;
116+
const mdEmphasis = (text) =>
117+
`<span style="color: ${theme.colors.secondary};">${text}</span>`;
115118

116119
const template = html` <${DefaultTemplate} />`;
117120
const examples = await getExamples();
@@ -194,6 +197,14 @@
194197
</${Text}>
195198
</${FlexBox}>
196199
</${Slide}>
200+
<${Slide}>
201+
<${FlexBox} height="100%">
202+
<${Link} href="https://nearform.com/open-source/spectacle">
203+
<${SpectacleLogo} size=${500} />
204+
</${Link}>
205+
</${FlexBox}>
206+
207+
</${Slide}>
197208
<${MarkdownSlideSet}>
198209
${`
199210
---
@@ -232,14 +243,18 @@
232243
`}
233244
</${MarkdownSlideSet}>
234245
${examples.legacy.slides}
235-
<${MarkdownSlideSet}>
246+
<${MarkdownSlideSet} animateListItems=${true}>
236247
${`
237248
---
238249
# And then ...
239250
240-
* **2001**: JSMin is introduced
241-
* **2010-2015**: The bundlers (_2010_: RequireJS, _2011_: Browserify, _2012_: Webpack, ...)
242-
* **2015-on**: The modern bundlers (_2015_: Rollup, _2017_: Parcel, _2020_: Vite, ...)
251+
* **2001**: A ${mdEmphasis("**minifier**")}! (_JSMin_)
252+
* **2010-2015**: ${mdEmphasis("**Bundlers**")}!
253+
* _RequireJS_, _Browserify_, _Webpack_, ...
254+
<!-- (_2010_: RequireJS, _2011_: Browserify, _2012_: Webpack, ...) -->
255+
* **2015-on**: ${mdEmphasis("**Fancier bundlers**")}
256+
* _Rollup_, _Parcel_, _Vite_, ...
257+
<!-- (_2015_: Rollup, _2017_: Parcel, _2020_: Vite, ...) -->
243258
244259
---
245260
# And now...
@@ -264,7 +279,7 @@
264279
* This is just a timeline and greatest hits.
265280
* Skipping over a ton of technical detail.
266281
* Most large scale web apps probably still **need builds**
267-
* We cheat (✨) ${iconArrow} _Buildless_ still runs **builds**
282+
* We cheat! (✨) ${iconArrow} _Buildless_ still runs **builds**
268283
269284
---
270285
# The Interesting Parts
@@ -275,34 +290,110 @@
275290
* What can you actually get away with? ${iconArrow}
276291
React? TypeScript?
277292
278-
---
293+
--- { "layout": "center" }
279294
# Another timeline...
280295
281-
* **2015**: ECMAScript Modules (ESM) released
282-
* **2018**: \`es-module-shims\` started
283-
* **2021**: Import Maps start to be supported
284-
* TODO: Insert these in!!!
285-
* _2017_: unpkg.com module flag, _2020_: esm.sh, _2017_: jspm.io, etc.
286-
* _2018_: Deno, _2022_: Bun
296+
That's a bit less well-known and a bit bumpy...
297+
298+
---
299+
# **2015**: ECMAScript Modules (ESM)
300+
301+
Named exports
302+
303+
\`\`\`js
304+
export const users = [ ... ];
305+
\`\`\`
306+
307+
Static and dynamic imports
308+
\`\`\`js
309+
// Static import
310+
import { users } from "./users.js";
311+
312+
// Dynamic import
313+
const { users } = await import("./users.js");
314+
\`\`\`
315+
316+
--- { "layout": "center" }
317+
# Let's see it!
318+
287319
`}
288320
</${MarkdownSlideSet}>
289321
${examples.modern.slides}
290322
<${MarkdownSlideSet}>
291323
${`
324+
--- { "layout": "center" }
325+
# Yay!
326+
327+
--- { "layout": "center" }
328+
# Ok, then we hit all the hard parts...
329+
330+
---
331+
# **2018**: Import Maps
332+
333+
The problem
334+
335+
\`\`\`js
336+
import lodash from "lodash";
337+
\`\`\`
338+
339+
The solution
340+
341+
\`\`\`html
342+
<${""}script type="importmap">
343+
{
344+
"imports": {
345+
"lodash": "https://esm.sh/lodash@^4.17.21"
346+
}
347+
}
348+
<${""}/script>
349+
\`\`\`
350+
292351
---
293-
# Some initial challenges
352+
# **2018**: Import Maps II
353+
354+
The problem: ${mdEmphasis("**NONE OF THAT IS IMPLEMENTED YET**")}
355+
356+
The solution: ${icon("github-logo")}[\`es-module-shims\`](https://github.com/guybedford/es-module-shims)
294357
295-
* Naming (\`next\`, \`lodash\`) ${iconArrow}
296-
Import Maps
297-
* The React problem (CommonJS vs. ESM) ${iconArrow}
298-
ESM-savvy CDNs (✨)
299-
* JSX? ${iconArrow} Meet [htm](https://github.com/developit/htm) (✨)
358+
\`\`\`html
359+
<!-- ✨ Checkout the '-shim' suffix -->
360+
<${""}script type="importmap-shim">
361+
{
362+
"imports": {
363+
"lodash": "https://esm.sh/lodash@^4.17.21"
364+
}
365+
}
366+
<${""}/script>
367+
\`\`\`
368+
369+
---
370+
# **2021**: Import Maps III
371+
372+
OK, now they finally start to be supported.
373+
374+
---
375+
# **2017+**: CDNs
376+
377+
The problem: \`react\` only ships CommonJS.
378+
379+
The solution: CDNs get more savvy with lazy ESM conversion (✨).
380+
381+
Enter \`esm.sh\`, \`jspm.io\`, \`unpkg.com\`, ...
382+
383+
<!-- _2017_: unpkg.com module flag, _2020_: esm.sh, _2017_: jspm.io, etc. -->
384+
<!-- _2018_: Deno, _2022_: Bun -->
385+
386+
--- { "layout": "center" }
387+
# Let's ship a React app!
300388
301389
`}
302390
</${MarkdownSlideSet}>
303391
${examples.react.slides}
304-
<${MarkdownSlideSet}>
392+
<${MarkdownSlideSet} animateListItems=${true}>
305393
${`
394+
--- { "layout": "center" }
395+
# How about the real world?
396+
306397
---
307398
# Performance
308399
@@ -339,50 +430,38 @@
339430
- DOM: 139 ms
340431
- Load: 139 ms
341432
342-
---
433+
--- { "layout": "center" }
434+
# What comes next?
343435
344-
# The future...
436+
We've seen the ESM-friendly world of the present.
345437
346-
* Runtimes / "the platforms" continue to evolve
347-
* _Frontend_: \`es-module-shims\`, Web Components
348-
* _Backend_: Node.js, Deno, Bun
349-
* TypeScript, WASM
350-
* Where might we head next?
438+
Where might we head next?
351439
440+
Notes: \
441+
Technologies and companies like es-module-shims, JSPM, etc. are \
442+
really pushing how much you can do without a build.
443+
444+
--- { "layout": "center" }
445+
# What can we get away with?
352446
`}
353447
</${MarkdownSlideSet}>
354448
${examples.typescript.slides}
355449
<${MarkdownSlideSet}>
356450
${`
357-
---
358-
# TODO: Content Notes
359-
360-
* More on es-import-shims future and browser directions
361-
* Folks like JSPM, etc. are really pushing how much you can do without a build.
362-
* Maybe a slide / quick analysis of perf
363-
* This presentation!
364-
* blogs-ai app
365-
* ...
366-
367-
---
368-
# TODO: Design Notes
451+
--- { "layout": "center" }
452+
# Go play around!
369453
370-
* Fun background images.
371-
* Use other typography for bigger single message (centered) slides
454+
${icon("browser")} [ryan-roemer.github.io/a-world-without-builds](https://ryan-roemer.github.io/a-world-without-builds/)
372455
373-
---
374-
# TODO: This deck
456+
${icon("github-logo")} [ryan-roemer/a-world-without-builds](https://github.com/ryan-roemer/a-world-without-builds)
375457
376-
* Spectacle link
377-
* This deck link
378-
* Look at the import map
458+
Notes: \
459+
You've probable guessed the spoiler here...\
460+
This Spectacle deck is a no-build React application that uses htm!
379461
380462
--- { "layout": "center" }
381-
# TODO: Thanks
382-
383-
[ryan-roemer.github.io/a-world-without-builds](https://ryan-roemer.github.io/a-world-without-builds/)
463+
# Thanks!
384464
385-
${icon("github-logo")} [ryan-roemer/a-world-without-builds](https://github.com/ryan-roemer/a-world-without-builds)
386465
${icon("twitter-logo")} [@ryan_roemer](https://x.com/ryan_roemer)
387466
${icon("butterfly")} [@ryan-roemer.bsky.social](https://bsky.app/profile/ryan-roemer.bsky.social)
388467
${icon("linkedin-logo")} [in/ryanroemer](https://www.linkedin.com/in/ryanroemer/)

0 commit comments

Comments
 (0)