DEV Community

Discussion on: Use Vue to create a SPA without any Node modules

Collapse
 
aelbore profile image
Jay • Edited

i updated the example to make use goober css in js it uses prefix to share css :)
now problem solve with vue without bundler

plnkr.co/edit/tjhkcfNO15aTNhsU

Thread Thread
 
arswaw profile image
Arswaw

This is amazing! I didn't know about this. You can just import Goober from the CDN as an ES6 module and contain the CSS in a multiline string just like the template.

I think I need to update the article to reflect this. I will be sure to try this out in my projects.

I really appreciate the work you've put into this. Thanks for telling me about Goober and thanks for using my template!

Thread Thread
 
aelbore profile image
Jay • Edited

have you heard import maps? you can use polyfill i think import maps it is already in draft not sure what stage it is.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Import Maps</title>
  <script defer src="https://unpkg.com/es-module-shims@latest/dist/es-module-shims.js"></script>
  <script type="importmap-shim">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@2.6.10/dist/vue.esm.browser.js?module",
        "goober": "https://unpkg.com/goober/dist/goober.module.js?module"
      }
    }
  </script>
</head>
<body>
  <script type="module-shim">
    import Vue from 'vue'
    import App from './src/App.js'

    new Vue({
      render: h => h(App)
    }).$mount("#app")
  </script>
  <div id="app"></div>
</body>
</html>
Thread Thread
 
arswaw profile image
Arswaw

It's not on any stage because it's not on the W3C standards track. Maybe it will be picked up at some point.

I'm not sure what the benefit of this is over <script src="" or import Vue from 'vuecdn.com'

I hadn't heard of this though, and I'd like to know more.

Thread Thread
 
aelbore profile image
Jay • Edited

yeah your right its not even in draft, i think in my opinion the benefit is you dont need to type/copy or write long url and you can easily find what are your dependencies. :)
another thing is for example (module 1 dependencies of module 2, but the module 1 didnt use the URL)
module 1

import { myExportVar } from 'module-1'
Enter fullscreen mode Exit fullscreen mode

module 2

export { myExportVart }
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
arswaw profile image
Arswaw

I had thought that this would essentially replace the package.json file.

If so, then import maps bring us one step closer to building data-driven web applications without Node or NPM.

Thread Thread
 
mindplay profile image
Rasmus Schultz

It's still not on standards track, it seems - though it is available and enabled by default in Chrome and Edge.

caniuse.com/import-maps

Pretty cool - this basically is the web equivalent of package.json 🙂

The main benefit of this is not about long or short URLs - it's about ensuring that, when several modules depend on the same things, they're also loading the same versions of those things. CDNs such as Snowpack try to address this by allowing URLs with version constraints, and performing redirects, but that's a half measure - it doesn't perform or scale well, doesn't let you lock to a specific version, etc...

We really need import-maps to proliferate into a standard. By then, for the first time in the history of the web, the platform will actually be able to stand alone, without all the clunky build tools and bundlers. 😄✊

Thread Thread
 
arswaw profile image
Arswaw

That's what I'm hoping! Much of the Node.js ecosystem is designed to accommodate the missing features in JavaScript and the web browser. It's too bad, because while the transition is needed, it will be a long one.

I didn't even know that import maps were used in Chrome and Edge. That just leaves Firefox and Safari if browser developers wanted to implement this without a standard, though I would prefer the standard existed.

You want deterministic dependencies. More than once, a buggy update to a single, one-liner package has broken millions of projects in a day. It's a good thing someone else agrees.

Maybe in 5 years, all the features we're talking about today will replace NPM dependence entirely.

Thread Thread
 
denzuko profile image
Dwight Spencer

That's actually impressive that a feature from backbone and request.js is finally make it into webkit based browsers.