DEV Community

Cover image for I created a Quiz app using Svelte and now I cannot go back to any other framework.

I created a Quiz app using Svelte and now I cannot go back to any other framework.

Manan Joshi on November 24, 2019

Update: I have updated this project with animations and corrected the logic behind the app. You can find the most up to date version here and the ...
Collapse
 
juancarlospaco profile image
Juan Carlos

Svelte or Nim for Frontend. ❤️

Collapse
 
manan30 profile image
Manan Joshi

Svelte all day long.

Collapse
 
mandaputtra profile image
Manda Putra

Nim? nim-lang?

Collapse
 
juancarlospaco profile image
Juan Carlos

Yes Nim lang nim-lang.org
Svelte is great, but Svelte cant do Backend, Nim can do Backend, and Frontend.
:)

Thread Thread
 
mandaputtra profile image
Manda Putra

Wow, yeah nim is a good language. Good to hear someone using it on production server. Nice.

Thread Thread
 
thebeachmaster profile image
Arthur Kennedy Otieno

For Backend you can use Sapper... It's build by the Svelte team and is just as simple, fast and as lightweight.

Thread Thread
 
mandaputtra profile image
Manda Putra

No no nim-lang is another new language, like a scripting language. You can check that out on their website, its like C++ replacement. Not a frontend framework

Thread Thread
 
juancarlospaco profile image
Juan Carlos

Nim can do Frontend, thats what I use.

Going to check Sapper now, thats interesting.

Thread Thread
 
mandaputtra profile image
Manda Putra

Oich I though you use nim for your API too, I'm sorry

Collapse
 
opshack profile image
Pooria A

Great post thanks for sharing.

I don't get this part tho:

"making it orders of magnitude faster than frameworks or libraries that ship with a virtual DOM implementation"

Wasn't the whole premise of VDOM to make things faster since DOM is slow?

Collapse
 
manan30 profile image
Manan Joshi • Edited

Long story short: Diffing isn't free


Explanation

The main reason we have been using things like VDOM is to compare if the data has changed or not and if so when to re-render the new changes. There are many diffing algorithms that are fast and we would update something if it has changed, but updating things directly will always be faster. In libraries like React the virtual DOM tries to compare its state with the current DOM state and if there is any difference it will ask the reconciler to apply those changes to the DOM. The part where it gets slow is the reconciliation phase. This is because diffing isn't free. It is nothing but just pure overhead. For more info, this is what the react docs have to say about virtual dom and this is what Svelte has to say about it.

Collapse
 
opshack profile image
Pooria A

Thank you for the answer, the article on the Svelte website makes total sense. I guess I need to learn more about how Svelte is updating the DOM without any diffing algo.

Collapse
 
narenandu profile image
Narendra Kumar Vadapalli

Having script, style and
Html all scoped in the same component seems to be similar to Vue! Not used Vue a lot, but is the usage expressions also similar? Eg:iterable with #each

Collapse
 
manan30 profile image
Manan Joshi

I also haven't used Vue a lot but the one major difference between Svelte and Vue is that Svelte is a compiler and not a framework.

Collapse
 
redeemefy profile image
redeemefy • Edited

I like they way Svelte approaches the web. This is more align with the lean web thinking.

Collapse
 
manan30 profile image
Manan Joshi

Agreed 100%.

Collapse
 
redeemefy profile image
redeemefy

It is so difficult to fight the industry. Nowadays we think that every problem is a nail and we want to use the Ract/Vue hammer to do the job.

Collapse
 
inozex profile image
Tiago Marques

I think Vue3 is gonna have a similar way of working in terms of component file

Collapse
 
manan30 profile image
Manan Joshi

Yes true. At the end of the day it's just semantics.

Collapse
 
pomfrit123 profile image
***

It wont compile, it asks for a utils.js file

Collapse
 
manan30 profile image
Manan Joshi

As I wanted to keep this article small all files haven't been included.

I have not added all the files from the project in this post but if you would like to reference the code at any moment it is available here.