9 ms·

Petite-Vue – 5kb subset of Vue optimized for progressive enhancement

182 points by sshroot 5y ago

mardix 5y ago
There is also Litedom (which I created) that's in the same ballpark: https://github.com/mardix/litedom https://github.com/mardix/litedom
elamje 5y ago
We’ve been using Vue for a while now at Parq. We initially wanted to use it as a super powered jQuery, then we ended up using Vue as an SPA for part of our app (certain route served a Vue spa to users), now we are going all into the Vue ecosystem for SPA. I’m a fan of using Vue incrementally, but what you will find is that no editors I have found support Vue inside html templates well. When you use Vue as a jQuery replacement, it gives you some nicety, but it ends having pretty gnarly strings to put html inside of Vue components. Vue team, if you can get editors to support your string template syntax, that would be killer. Even better, if there was a way to use single file components without the full build step (I.e. bundle up single file components the first time they are needed by a client) and inject that right into the html template that would be amazing.
- keithnz 5y ago
  just use html templates in normal html? There's no need to use strings. eg <script type="text/x-template">
- BirdieNZ 5y ago
  Do you have an example of the problem you're describing? It sounds completely foreign to Vue to be honest, I've never encountered any issues with Vue inside HTML templates. For only serving SFCs on request, you can use something like https://vitejs.dev/ https://vitejs.dev/ during local dev, unless I'm misunderstanding, along with code-splitting.
- maxloh 5y ago
  Vue components are transpiled to JavaScript code when you build your app. Moving this step to client side makes your app take much longer to start. You also will need to ship the template compiler too, which is a few more kb. https://v3.vuejs.org/guide/installation.html#runtime-compiler-vs-runtime-only https://v3.vuejs.org/guide/installation.html#runtime-compile...
oliwarner 5y ago
Interesting. I use full Vue for this quite a lot, mount onto specific DOM points, replace their content with (most commonly) an enhanced form, or a data table. Works well, costs 30Kb plus compat layers. You can argue all day long about the cost of 30Kb, but then you put a 200Kb image in your header. Anyway, looking at the docs, my approach wouldn't be as easy in vue-petite. It looks like Components have been functionally gutted. You can still approximate something, but you seem to lose a lot of ecosystem benefits of Vue. Theirs looks great for Ultimately, this all seems like something coverage and tree-shaking should be able to do. If you're only using 5Kb of Vue, only 5Kb should be bundled. One day, eh? Until then, is the additional 25Kb actually hurting your users?
- conradfr 5y ago
  I think it's supposed to work that way in Vue 3 as you don't import the full Vue script anymore. Also as long as we're talking about Vue, people that have Vue 2 apps and missed the 3.1 release announcement (I don't remember seeing it on HN's frontpage) should check it out, there is a compatibility layer that works really well to migrate progressively. I started with this post https://blog.ninja-squad.com/2021/06/07/what-is-new-vue-3.1/ https://blog.ninja-squad.com/2021/06/07/what-is-new-vue-3.1/
  - dustymcp 5y ago
    Yeah we are still upgrading, migrating it progressively is still a chore
  - robflynn 5y ago
    I did miss this! Thank you for mentioning it. I've been putting off a Vue2 -> 3 migration for a bit now.
  - oliwarner 5y ago
    And they said Python 2 ⇒ 3 was difficult ;) Unfortunately the major blocker (for me) is the lack of IE11 support and the bloody paying customers who refuse to move off IE11. One day they'll be gone.
- 5y ago
Crazyontap 5y ago
If anyone of you guys have access to Vue mastery watch the tutorial where Evan creates a mini-version of Vue js in vanilla JS in like 15 minutes. He also explains some of the Vue optimization tricks like why they ditched the nested JSON and how Vue caches the @click handlers, etc so they don't need to check this on every digest cycle. I wish there was a free version to link here. Really interesting stuff, shows you how much thought and effort is put in by the creators to optimise so many little things which us users of the framework never even notice is happening.
- beebeepka 5y ago
  This isn't the first time I read about this video. Got link? Thanks
  - Crazyontap 5y ago
    Here is the link to it: https://www.vuemastery.com/courses/vue3-deep-dive-with-evan-you/creating-a-mini-vue/ https://www.vuemastery.com/courses/vue3-deep-dive-with-evan-... Sorry but it is locked as it's part of the paid course :(
- jdefelice 5y ago
  So you have a link to this? Sounds interesting and potentially a good way to understand vue under the hood.
- krono 5y ago
  Looks like the video is locked behind a paywall. Sounds interesting though, would be awesome if you could give us the gist of how he went about it!
manigandham 5y ago
This progressive enhancement is exactly why I prefer Vue and find it so productive. 95% of apps are best built as server-side rendered with reactivity on top of each page as needed (instead of the JS/SPA monstrosities we have today). Nice to see an even lighter version optimized for this use-case.
- ergo14 5y ago
  Then maybe look at https://lit.dev/ https://lit.dev/ it might be perfect solution for you, stencil i've heard is also nice. Since its custom-elements you just add custom tags and they will self upgrade.
  - brylie 5y ago
    Lit elements looks nice and it's good to see first-class support for WebComponents. I'm just a bit concerned about having to write declarative HTML in JavaScript functions. Mixing declarative and imperative code can lead to some unwieldy templates so I prefer am approach with minimal templating enhancements sprinkled into standard HTML. What would be an approach, similar to Vue, to enforce the separation of imperative business frim declarative layout definitions using LitElement, Polymer, or similar WebComponents frameworks?
    - ergo14 5y ago
      You could probably separate those with tooling.
- bnt 5y ago
  For me, no build step is a huge selling point.
- johnnypangs 5y ago
  Where did you get 95% from?
- onion2k 5y ago
  Vue doing this is awesome, but it isn't really a good reason to prefer it. Server side rendering with progressive enhancement is available in pretty much every major JS framework. Heck, the latest version of React can do SSR with late loading and late binding to make content load even faster. https://github.com/reactwg/react-18/discussions/37 https://github.com/reactwg/react-18/discussions/37
Fudgel 5y ago
There's also Alpine.js which is trying to be a simpler version of Vue. It even uses Vue's reactivity engine. https://alpinejs.dev/ https://alpinejs.dev/
- aloisdg 5y ago
  This is indeed addressing a similar scope to Alpine, but aims to be even more minimal. petite-vue is less than half the size of Alpine. petite-vue has no transition system (maybe this can be an opt-in plugin). Alpine is developing its own ecosystem and likely will diverge more from Vue in the future. petite-vue aligns with standard Vue behavior whenever possible, so it's less friction moving to standard Vue if needed. It's intended to cover the progressive enhancement use case where standard Vue is less optimized for nowadays. quoted from the link
tarsinge 5y ago
That could be the perfect solution for my Rails dev. Sprinkling views with Vue feels more natural and in line with Rails philosophy for me than the pseudo SPA approach of Stimulus. I hope it will gain traction in the community.
BiteCode_dev 5y ago
htmx + petit-vue + tailwind lets your write your entire site in a modern way without leaving your html file. Now, it may result in an unmaintainable mess in the long run, there is always a threshold for those things.
midrus 5y ago
By using this, how do you prevent the initial render (before js runs) the blink showing the user the raw template? That's a big drawback, isn't it?
- JZumun 5y ago
  According to petite-vue's readme, it supports the `v-cloak` directive [0], which is how vue recommends you hide the unprocessed template before it is mounted. For more complicated logic, I think working with the @mounted event might work. [0] https://v3.vuejs.org/api/directives.html#v-cloak https://v3.vuejs.org/api/directives.html#v-cloak
  - midrus 5y ago
    Makes sense. Thanks!
- deleted 5y ago
  [deleted]
Inviz 5y ago
Always surprised by lack of mention of preact in these threads. Preact is to react is what petite-vue, but with no compromises.
geenat 5y ago
Consider https://htmx.org/ https://htmx.org/

182 points by sshroot 5y ago

There is also Litedom (which I created) that's in the same ballpark: https://github.com/mardix/litedom https://github.com/mardix/litedom

elamje 5y ago

We’ve been using Vue for a while now at Parq. We initially wanted to use it as a super powered jQuery, then we ended up using Vue as an SPA for part of our app (certain route served a Vue spa to users), now we are going all into the Vue ecosystem for SPA. I’m a fan of using Vue incrementally, but what you will find is that no editors I have found support Vue inside html templates well. When you use Vue as a jQuery replacement, it gives you some nicety, but it ends having pretty gnarly strings to put html inside of Vue components. Vue team, if you can get editors to support your string template syntax, that would be killer. Even better, if there was a way to use single file components without the full build step (I.e. bundle up single file components the first time they are needed by a client) and inject that right into the html template that would be amazing.

keithnz 5y ago
just use html templates in normal html? There's no need to use strings. eg <script type="text/x-template">
BirdieNZ 5y ago
Do you have an example of the problem you're describing? It sounds completely foreign to Vue to be honest, I've never encountered any issues with Vue inside HTML templates. For only serving SFCs on request, you can use something like https://vitejs.dev/ https://vitejs.dev/ during local dev, unless I'm misunderstanding, along with code-splitting.
maxloh 5y ago
Vue components are transpiled to JavaScript code when you build your app. Moving this step to client side makes your app take much longer to start. You also will need to ship the template compiler too, which is a few more kb. https://v3.vuejs.org/guide/installation.html#runtime-compiler-vs-runtime-only https://v3.vuejs.org/guide/installation.html#runtime-compile...

oliwarner 5y ago

Interesting. I use full Vue for this quite a lot, mount onto specific DOM points, replace their content with (most commonly) an enhanced form, or a data table. Works well, costs 30Kb plus compat layers. You can argue all day long about the cost of 30Kb, but then you put a 200Kb image in your header. Anyway, looking at the docs, my approach wouldn't be as easy in vue-petite. It looks like Components have been functionally gutted. You can still approximate something, but you seem to lose a lot of ecosystem benefits of Vue. Theirs looks great for Ultimately, this all seems like something coverage and tree-shaking should be able to do. If you're only using 5Kb of Vue, only 5Kb should be bundled. One day, eh? Until then, is the additional 25Kb actually hurting your users?

conradfr 5y ago
I think it's supposed to work that way in Vue 3 as you don't import the full Vue script anymore. Also as long as we're talking about Vue, people that have Vue 2 apps and missed the 3.1 release announcement (I don't remember seeing it on HN's frontpage) should check it out, there is a compatibility layer that works really well to migrate progressively. I started with this post https://blog.ninja-squad.com/2021/06/07/what-is-new-vue-3.1/ https://blog.ninja-squad.com/2021/06/07/what-is-new-vue-3.1/
- dustymcp 5y ago
  Yeah we are still upgrading, migrating it progressively is still a chore
- robflynn 5y ago
  I did miss this! Thank you for mentioning it. I've been putting off a Vue2 -> 3 migration for a bit now.
- oliwarner 5y ago
  And they said Python 2 ⇒ 3 was difficult ;) Unfortunately the major blocker (for me) is the lack of IE11 support and the bloody paying customers who refuse to move off IE11. One day they'll be gone.
5y ago

Crazyontap 5y ago

If anyone of you guys have access to Vue mastery watch the tutorial where Evan creates a mini-version of Vue js in vanilla JS in like 15 minutes. He also explains some of the Vue optimization tricks like why they ditched the nested JSON and how Vue caches the @click handlers, etc so they don't need to check this on every digest cycle. I wish there was a free version to link here. Really interesting stuff, shows you how much thought and effort is put in by the creators to optimise so many little things which us users of the framework never even notice is happening.

beebeepka 5y ago
This isn't the first time I read about this video. Got link? Thanks
- Crazyontap 5y ago
  Here is the link to it: https://www.vuemastery.com/courses/vue3-deep-dive-with-evan-you/creating-a-mini-vue/ https://www.vuemastery.com/courses/vue3-deep-dive-with-evan-... Sorry but it is locked as it's part of the paid course :(
jdefelice 5y ago
So you have a link to this? Sounds interesting and potentially a good way to understand vue under the hood.
krono 5y ago
Looks like the video is locked behind a paywall. Sounds interesting though, would be awesome if you could give us the gist of how he went about it!

manigandham 5y ago

This progressive enhancement is exactly why I prefer Vue and find it so productive. 95% of apps are best built as server-side rendered with reactivity on top of each page as needed (instead of the JS/SPA monstrosities we have today). Nice to see an even lighter version optimized for this use-case.

ergo14 5y ago
Then maybe look at https://lit.dev/ https://lit.dev/ it might be perfect solution for you, stencil i've heard is also nice. Since its custom-elements you just add custom tags and they will self upgrade.
- brylie 5y ago
  Lit elements looks nice and it's good to see first-class support for WebComponents. I'm just a bit concerned about having to write declarative HTML in JavaScript functions. Mixing declarative and imperative code can lead to some unwieldy templates so I prefer am approach with minimal templating enhancements sprinkled into standard HTML. What would be an approach, similar to Vue, to enforce the separation of imperative business frim declarative layout definitions using LitElement, Polymer, or similar WebComponents frameworks?
  - ergo14 5y ago
    You could probably separate those with tooling.
bnt 5y ago
For me, no build step is a huge selling point.
johnnypangs 5y ago
Where did you get 95% from?
onion2k 5y ago
Vue doing this is awesome, but it isn't really a good reason to prefer it. Server side rendering with progressive enhancement is available in pretty much every major JS framework. Heck, the latest version of React can do SSR with late loading and late binding to make content load even faster. https://github.com/reactwg/react-18/discussions/37 https://github.com/reactwg/react-18/discussions/37

Fudgel 5y ago

There's also Alpine.js which is trying to be a simpler version of Vue. It even uses Vue's reactivity engine. https://alpinejs.dev/ https://alpinejs.dev/

aloisdg 5y ago
This is indeed addressing a similar scope to Alpine, but aims to be even more minimal. petite-vue is less than half the size of Alpine. petite-vue has no transition system (maybe this can be an opt-in plugin). Alpine is developing its own ecosystem and likely will diverge more from Vue in the future. petite-vue aligns with standard Vue behavior whenever possible, so it's less friction moving to standard Vue if needed. It's intended to cover the progressive enhancement use case where standard Vue is less optimized for nowadays. quoted from the link

tarsinge 5y ago

That could be the perfect solution for my Rails dev. Sprinkling views with Vue feels more natural and in line with Rails philosophy for me than the pseudo SPA approach of Stimulus. I hope it will gain traction in the community.

BiteCode_dev 5y ago

htmx + petit-vue + tailwind lets your write your entire site in a modern way without leaving your html file. Now, it may result in an unmaintainable mess in the long run, there is always a threshold for those things.

midrus 5y ago

By using this, how do you prevent the initial render (before js runs) the blink showing the user the raw template? That's a big drawback, isn't it?

JZumun 5y ago
According to petite-vue's readme, it supports the `v-cloak` directive [0], which is how vue recommends you hide the unprocessed template before it is mounted. For more complicated logic, I think working with the @mounted event might work. [0] https://v3.vuejs.org/api/directives.html#v-cloak https://v3.vuejs.org/api/directives.html#v-cloak
- midrus 5y ago
  Makes sense. Thanks!
deleted 5y ago
[deleted]

Inviz 5y ago

Always surprised by lack of mention of preact in these threads. Preact is to react is what petite-vue, but with no compromises.

geenat 5y ago

Consider https://htmx.org/ https://htmx.org/