Svelte
Aurelia 1
Our great sponsors
Svelte | Aurelia 1 | |
---|---|---|
535 | 0 | |
66,516 | 11,746 | |
0.9% | -0.0% | |
9.5 | 3.2 | |
6 days ago | 2 months ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
Svelte
-
Thoughts on Svelte
> One example is being able to pass templates around.
Yeah I agree. It's not a big deal but I kinda miss this from JSX.
There was some discussion about adding templates or even components inside other components but it all feels very inelegant and not very Svelty.
> The $ label is one technical reason why I would be hesitant to adopt Svelte for larger projects. It's a core part of Svelte that you can't always avoid, and I think the potential for introducing bugs through it is high to start and very high at scale.
The reactivity system in Svelte is really a joy to use, once you get used to it there's no turning back.
But the author did hit one of the ugliest pain points about it. Svelte can NOT correctly infer transitive dependencies when the variable being updated is inside a function. Meaning that the variable itself will be reactive (it will be invalidated every time it's assigned, even inside a function) but Svelte is not using that information to build the dependency graph, and falls back to the order in which the reactive blocks were defined, which may or may not be right.
I created this issue https://github.com/sveltejs/svelte/issues/5190 a couple years ago documenting it.
It's not so common, but when it bytes you it's pretty nasty.
The workarounds I found are the following
These are the workarounds I found:
- a repl with the issue: https://svelte.dev/repl/640736d3c91d40d3971afcc3eef8b25e?ver...
- workaround 1: manually reorder statements, need to figure out by yourself (and maintain!) the dependency graph: https://svelte.dev/repl/3ecd6aa918e045999db32d379270fc1c?ver...
- workaround 2 (my favorite): provide a redundant update as "hint" to tell the compiler that setY updates y: https://svelte.dev/repl/cbf98bb35f5e4dd4b037d13254853c90?ver...
(thanks to TylerRick for this: https://github.com/sveltejs/svelte/issues/5190#issuecomment-...)
in practice it means to do something like: `$: { setY(x); y = y };`
- workaround 3: put the update operations in order in a single block (it's just the workaround 1 with improved legibility, IMHO): https://svelte.dev/repl/074df362bb934312bbe6fd3aeccab771?ver...
I still think we could do better, at least explaining the issue and how avoid to fall into it (perhaps some linting warning?)
But I really hope svelte developers start considering this an issue to solve, it's inconsistent (meaning the variable is reactive but that reactivity is not taken into account to order the operation in "topological order" (Hey, I learnt about that from one of Rich's presentations, see https://rethinking-reactivity.surge.sh/#slide=19) and as I said before, when you stumble upon it is not so easy to understand what's going on.
- Introducing react.dev: the new React docs site!
-
Closing, Cloning, or Disabling the Shadow DOM
[1] The question of removing the shadow DOM or creating the topic has been reported at the webcomponents/polyfills repository under issue #82 , and svelte/sveltjs issue #1748 .
-
We have started a new Svelte component library inspired by tabler.io: YeSvelte
I opened an issue on Svelte's GitHub here and they didn't like that feature :)
-
Need an advice for frontend framework (beginner in frontend development)
But if you're going to be guaranteed coding all your components from scratch anyway, i'd recommend svelte instead. Because it has less bloat (no vDOM / less complicated state lifecycle to care about), and is easier to style without other libs like tailwind or vanilla-extract.
-
Build a High-Performing Ecommerce with Svelte and Medusa Backend
The next step is to create and set up a new Svelte project for the ecommerce project. This Svelte commerce will use SvelteKit since it is the recommended setup method.
-
Svelte and Tailwind for building Chrome Extension
Svelte is a JavaScript framework that compiles your code into efficient JavaScript that surgically updates the DOM. It is a compiler that converts your code into a more efficient version of itself.
-
[AskJS] How much CS knowledge does a frontend dev really need?
If I were starting something, (or even if I were incrementally moving over pages from a larger project as they were touched), I would use Svelte / Svelte Kit 100% of the time. It's effectively a language (the use of JS/TS, CSS, and HTML together but nicer) with a compiler rather than a runtime framework. It's dead simple and it produces insanely small and performant output by default. Both of those have excellent tutorials you can use right on their website without installing anything.
-
Question: Where does Nuxt 3 fit in, in 2023?
In 2023 there are a wealth of developer options for front-end: React, Vue, Svelte, Solid and many more.
Aurelia 1
We haven't tracked posts mentioning Aurelia 1 yet.
Tracking mentions began in Dec 2020.
What are some alternatives?
Alpine.js - A rugged, minimal framework for composing JavaScript behavior in your markup.
solid - A declarative, efficient, and flexible JavaScript library for building user interfaces. [Moved to: https://github.com/solidui/solid]
lit - Lit is a simple library for building fast, lightweight web components.
lit-element - LEGACY REPO. This repository is for maintenance of the legacy LitElement library. The LitElement base class is now part of the Lit library, which is developed in the lit monorepo.
Next.js - The React Framework
qwik - The HTML-first framework. Instant apps of any size with ~ 1kb JS
awesome-blazor - Resources for Blazor, a .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly.
SvelteKit - web development, streamlined
Gatsby - The fastest frontend for the headless web. Build modern websites with React.
stencil - A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
React - The library for web and native user interfaces
astro - The all-in-one web framework designed for speed. ⭐️ Star to support our work!