From 60eea00b88616d9f41d4e40001b3b6c3afa35759 Mon Sep 17 00:00:00 2001 From: Joseph Montanaro Date: Tue, 15 Aug 2023 11:07:11 -0700 Subject: [PATCH] misc tweaks --- src/lib/Post.svelte | 1 + src/routes/_posts/vue-vs-svelte.svx | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/lib/Post.svelte b/src/lib/Post.svelte index 854ca12..c3ec63c 100644 --- a/src/lib/Post.svelte +++ b/src/lib/Post.svelte @@ -17,6 +17,7 @@ .subtitle { font-size: 0.9em; font-style: italic; + margin-top: -0.5rem; } diff --git a/src/routes/_posts/vue-vs-svelte.svx b/src/routes/_posts/vue-vs-svelte.svx index 81c5f43..ba16609 100644 --- a/src/routes/_posts/vue-vs-svelte.svx +++ b/src/routes/_posts/vue-vs-svelte.svx @@ -16,7 +16,7 @@ Of course, this is only possible because Vue and Svelte are really much more sim * Single-file components with separate sections for markup, style, and logic * Automatically reactive data bindings * Two-way data binding (a point of almost religious contention in certain circles) -* ...other things that I can't remember right now +* An "HTML-first" mindset, as compared to the "Javascript-first" mindset found in React and its ilk. The best way I can describe this is by saying that in Vue and Svelte, the templateOr single-file component, anyway. embeds the logic, whereas in React, the logic embeds the template. I should also note that everything I say about Vue applies to the Options API unless otherwise noted, because that's all I've used. I've only seen examples of the Composition API (which looks even more like Svelte, to my eyes), I've never used it myself. @@ -62,7 +62,7 @@ Detractors of this approach might point out that it's harder to spot things like Continuing the exploration of template syntax, Vue has some cute shorthands for its most commonly-used directives, including `:` for `v-bind` and `@` for `v-on`. Svelte doesn't really have an equivalent for this, although it does allow you to shorten `attr={attr}` to `{attr}`, which can be convenient. Which might as well bring us to: -## Data binding +## Data Binding I give this one to Svelte overall, although Vue has a few nice conveniences going for it. @@ -77,7 +77,7 @@ Oh, and two-way bindings in Vue get _really_ hairy if it's another Vue component ` ``` But _inside_ the child component: -```markup +```js export default { props: ['modelValue'], emits: ['update:modelValue'], @@ -163,4 +163,4 @@ As far as bundle size goes, it's highly dependent on how many components you're ### Ecosystem -Vue has been around longer than Svelte, so it definitely has the advantage here. That said, Svelte has been growing pretty rapidly in recent years and there is a pretty decent ecosystem these days. This blog, for instance, uses [SvelteKit](https://kit.svelte.dev) and [MDSvex](https://mdsvex.pngwn.io/). But there are definitely gaps, e.g. I wasn't able to find an RSS feed generator when I went looking.Arguably this is a lack in the SvelteKit ecosystem rather than the Svelte ecosystem, but I think it's fair to lump it together. SvelteKit is dependent on Svelte, so naturally it inherits all of Svelte's immaturity issues plus more of its own. If I'd been using Vue/Nuxt it would have been available as a [first-party integration](https://content.nuxtjs.org/v1/community/integrations). All in all I'd say if a robust ecosystem is important to you then Vue is probably the better choice at this point. +Vue has been around longer than Svelte, so it definitely has the advantage here. That said, Svelte has been growing pretty rapidly in recent years and there is a pretty decent ecosystem these days. This blog, for instance, uses [SvelteKit](https://kit.svelte.dev) and [mdsvex](https://mdsvex.pngwn.io/). But there are definitely gaps, e.g. I wasn't able to find an RSS feed generator when I went looking.Arguably this is a lack in the SvelteKit ecosystem rather than the Svelte ecosystem, but I think it's fair to lump it together. SvelteKit is dependent on Svelte, so naturally it inherits all of Svelte's immaturity issues plus more of its own. If I'd been using Vue/Nuxt it would have been available as a [first-party integration](https://content.nuxtjs.org/v1/community/integrations). All in all I'd say if a robust ecosystem is important to you then Vue is probably the better choice at this point.