Recently I've been trying multiple different JavaScript frameworks, ranging from React to Angular. But the one which has stood out the most to me a...
We're a place where coders share, stay up-to-date and grow their careers.
It looks very cool, but i take a look at their homepage and saw an example where css html and js is all put in a ".stelve" file and thats the point i dont like because it seems kinda confusing and not clear to me. Also i like more "component" based design where a component has all stuff splitted in their own files and all result together in a "component".
That's the main point of the template section of the article :p
then may i should invest more than 5 minutes and take a closer look at the site
I personally prefer all the stuff in the same file, but that's just more of a preference
Its ok in a small project but if youre working on large enterprise software which produces a lot of income, you want the code base as understandable as possible in less time.
I find them equally understandable, but not everyone does.
Isn't that the objective of Svelte? It's perfectly understandable on bigger projects. A single .svelte file is a single component. Whatever CSS or JS that's in it handles the styling or behavior of that specific component (scoped styling). Then you build your app using those building blocks. It seems more understandable than having them all in separate files.
Might want to take a 2nd look. Svelte is very cool. Thanks Hannah.
Svelte doesn't really have an opinion about how you manage your styles. AFAIK you still need the style tag, but you could use PostCSS to import an external CSS file.
Not really revolutionary - Svelte is very much like RiotJS which is now approaching version 5 and has been around much longer (since 2013)
Never heard of RiotJS! Maybe I'll give a try sometime.
Thank you for your interest in Riot!
Riot.js is simple riot against complicated frontend.✊🔥
Riot is close to standards like web components and that's learning curve is so small.
It has only 3 template directives(if, each, is) and all template expressions are "just JavaScript".
Please try if you interest, and please post review if you like it.😃
I tried svelte before, didn't work out for me because i have to work with legacy code (html generated server side), doesn't make sense for the compilation process etc. At the time svelte couldn't help me so I opted for vuejs. Riotjs looks quite interesting, but with vuejs3 comes out (half bundle size) I guess the only difference is virtual dom vs non virtual dom. I would love to try out riot though, I like its simple directives and explicit behavior. Not sure if it's worth switching at this point though.
Yeah I know Riot.js. I love it!
You're right!👍
Current maintainer has been improving Riot.js about 5 years, that contribution is commendable.
Your comment will enpower him who made the following tweets.
twitter.com/gianlucaguarini/status...
Yes, and also Marko ... we all are mount on shoulders of giants
Yes, the syntax is similar, but I think Svelte has a build to Web Components, Svelte/store with intuitive two-way binding, and other ergonomic innovations.
Riot can also build Web Components, and has many other innovations
Riot is compiled or it runs on the client ?
Can be precompiled, or compiled on the client - up to you
GREAT !! ... I will take it a look, thank you very much for the good reference
React is a library, not a framework, since your code doesn't live inside of it; and same goes for Svelte. A framework is a software that manages the full application lifecycle and calls your code at the right moments.
Svelte is supposed to be a compiler ... but anyway, all of them are frameworks (or they can be seen as framework) because all of them dictate a way to work (thus “frame” work) ... and does not matter if they are formally a compiler, a library or a ... framework ... all of them are “tools for the web” if you may ... so no need to discuss with the whole Internet that React is a library 😅
Out of curiosity, have you actually tried using Svelte with Sapper for a production app? I was really hyped when I've heard about Svelte and I read the docs etc but now, when I'm actually building something with it, it doesn't feel so great... :(
Sapper isn't version 1 yet. But it works nonetheless. Whats the issue you are facing?
It's nothing major, more like lot of small annoying things.
And yeah, I'm aware that it's still an early stage. I'm not saying that Svelte is bad and you shouldn't use it :) Just describing my experience so far :)
What are some of the small issues you're facing?
Great article!
The first point makes me uncomfortable though because comparing framework sizes out of context seems unfair to me.
Bundle size is important! Even with extensions/add-ons they're still going to be bigger. No matter the project I'm working on the bundle size will be affected, but I get your point!
Yes I don't say bundle size isn't important, but it should be compared with the same features.
Building the same app (and an app that reflects real world apps) with several frameworks and comparing the result size seems for example more adequate.
I see, sorry for the misunderstanding.
I agree. At 180k on a 2mbs Wireless network we're talking :
2mbs = 1 byte / .000004 seconds x 180k = 720ms.
200mbs = .007ms.
I think the big advantage of ReactJS is Hook, which allows us to use third party libraries like Adobe Spectrum with no hassle.
react-spectrum.adobe.com/blog/intr...
If it's a small app that can be build with one person, in that case svelte could work. but if you need a lot of functions that cannot be developed from scratch, React hook libs from many third parties help a lot.
That's the whole point of using Svelte. Most of the React's bandages or hooks or component life-cycles were required because React in its core design wasn't actually able to do things efficiently.
In Svelte you don't do that because you don't NEED to!
Talking about the above library. Yes. Svelte has a growing eco-system compared to React's matured one. But I don't see hooks as a good thing. They complicate things and make the code a mess.
I'm glad to see I'm not the only one to whom JSX just 'feels' wrong.
I use it everyday at work. It is wrong.
JSX a little bit shorter:
Don't need two declaration to write one thing.
I don't personally like arrow functions for this sort of thing.
Yes you right that is attitude depend. I use arrows most of times, speciel this cases:
where I can use dependency injection with arrow functions chain.
This is fine if you don't use TypeScript ;)
While putting XML into JavaScript might seems odd to you - it was part of E4X standard and was working in browsers long time ago. Then the feature was removed, but JSX is fully inspired by this feature.
Anyway - Svelte is great framework that can save a lot of time and have little magic comparing to React and others. I'd recommend to try it with smart web server and build tool hqjs.org it supports Svelte and many other frameworks out of the box.
Keep hearing good things about Svelte still waiting for more adoption though. Not many jobs available for it outside of niche start ups. I remember when Vue was the new kid on the block it took a while for it to compete with React. Svelte still has some way to go if it wants to catch those two plus Angular.
I like Svelte I thought it was pretty clever. Only problem I saw was support for legacy browsers like IE11. After adding all the polyfills needed it was about the same bundle size as a Vue app. So I decided to stick with Vue 2/3 until we are 100% off IE11 which looks like another year or two. This way i get the benefit of using templates and I only need Babble and a promise polyfill.
"One thing that has always irked me when it comes to the most popular frameworks (Angular, React, Vue) is the use of a virtual DOM" => There is NOT Virtual Dom in Angular.
However, I love your article.
Ah i was mistaken, thanks for the correction!
Svelte is awesome!
I agree with all of your points. I will say this however, I like to consider each framework as a car type. Angular is a Cadillac
Svelte is a Jaguar
My blog too...
A bit overkill; reminds me of how my (mostly static) website runs on a web application framework because I just needed an excuse to use it xD
Isn't overkill, as I plan on adding more stuff to it (such as a github project list, etc)
Nice. Thanks for writing!
Hi Hanna, one small correction. Angular does not use Virtual Dom.
Just watch youtu.be/AdNJ3fydeao and you would be really tempted to learn svelte.
Totally agree, I really like svelte!
I think Svelte will replace React these are the next gen frameworks as well as
Malina.js
blog.logrocket.com/framework-free-...
Thanks for sharing! Skimmed through the tutorial and it looks to me like more or less “traditional” templating engine with conditionals and loops in HTML. Am I wrong?
am I the only one who likes JSX? when I use JSX I feel more comfortable to manipulate the HTML and it feels more natural when your entire app is written in javascript.
I like JSX, I'm just not extremely used to it.
I've been trying it on and off since the release and everytime I'm impress by it. Just never had a project where I could use it
I have been watching Svelte with keen interest. I currently use Ractive JS which is one of Rich's previous projects. It feels like a natural progression from Ractive to Svelte.
Regarding bundlesize, react-dom should be included for the react bundle. React don't work without it. Preact is smaller than the react ui library.
I see, I didn't know which libraries are included together as the react cli usually handles it for me lol
setState, over complex yuk
What do you think of Svelte vs a vanilla SSG like 11ty?