The problem with writing a shell script to fetch and download NPM packages is that it won't do so in parallel. I'm sure that's fine if you only depend on one or two packages, but dependency explosion is practically a feature of the NPM ecosystem, and that'll stretch the script runtime. Not to mention fetching packages that you already downloaded, and no compatibility with outside tooling like Dependabot for automatic updates.
Modern SPAs without bundlers, CDNs, or Node.js
11–20 of 170 posts
Re: Modern SPAs without bundlers, CDNs, or Node.js
#12I also sometimes enjoy this approach of starting from absolutely nothing. Instead of taking the path of starting with DOM manipulation and then going to a framework as necessary, I've kept really trying to make raw web components work, but kept finding that I wanted just a little bit more. I managed to get the more I wanted -- sensible template interpolation with event binding -- boiled down to a tag function in 481…
An even simpler bit of sugar over the DOM that I embed whenever I need just a little bit of JS:
function $E(t,p,c) {
const el=document.createElement(t)
Object.assign(el,p)
el.append(...c)
return el
}
const button = $E('button', {onclick: () => alert('click!')}, [
$E('img', {src: '/assets/icon-lightbulb.png'}, []),
'Ding!',
])
Re: Modern SPAs without bundlers, CDNs, or Node.js
#13The problem with writing a shell script to fetch and download NPM packages is that it won't do so in parallel. I'm sure that's fine if you only depend on one or two packages, but dependency explosion is practically a feature of the NPM ecosystem, and that'll stretch the script runtime. Not to mention fetching packages that you already downloaded, and no compatibility with outside tooling like Dependabot for automatic…
You could easily use something like GNU Parallel:
Re: Modern SPAs without bundlers, CDNs, or Node.js
#14What about the production build? I guess Importmap paths at least would need adjustment.
Not strong on the frontend that's why genuinely curious.
Re: Modern SPAs without bundlers, CDNs, or Node.js
#15It warms my heart to see frontend web dev maturing like this, it really does. Kudos to the author for putting this out there, that shell script is nifty.
One trick I've used is to `npm install` my dependencies as normal but bundle them with esbuild, while also generating a typescript definition file. This gives me one file I can import in vanilla JS but also lets me check my JS with typescript.
Re: Modern SPAs without bundlers, CDNs, or Node.js
#16I think Vue.js is an excellent choice for this. They recommend bundlers and the default import doesn't come with the template compiler but the template compiler is fast enough to run when loading the page, and the vue template syntax looks clean inside a template string IMO, especially if you take care to minimize logic in templates.
Re: Modern SPAs without bundlers, CDNs, or Node.js
#17Browser support: https://caniuse.com/mdn-html_elements_script_type_importmap
Re: Modern SPAs without bundlers, CDNs, or Node.js
#18I appreciate the principled avoidance of over-tooling and dependencies. importmap is neat!
edit: In the same vein; cross-linking to "Writing JavaScript without a build system (jvns.ca)" https://news.ycombinator.com/item?id=34825676
Re: Modern SPAs without bundlers, CDNs, or Node.js
#19Doesn't work in Safari!
Re: Modern SPAs without bundlers, CDNs, or Node.js
#20is this the right place to shill a similar thing? (I use preact without bundlers for a while; also fast enough typescript without bundlers)
UPD:
- Preact template: https://github.com/wizzard0/naked-preact
- node/browser TypeScript loader: https://github.com/wizzard0/t348-loader