I have to admit I’m surprised on how many people seem to be against Svelte. I’m not saying stake your professional life on it but for all intents and purposes it feels amazing to work with.
It's only natural that people who don't get to pick what they'll be working with will get angry at even the slightest indication that they're stuck with a subpar piece of technology.
For me I never felt people are against Svelte but they want X they use in React and is not in Svelte. I think we should make the libraries headless and then create adapters
@@neociber24 I’m sure you are right, maybe ppl aren’t against Svelte as much as they want a React version of it so they don’t have to change the way they code. Which is understandable. For me libraries like SolidJS is the React of the future but Svelte seems more like a completely different approach.
When you are so used to complexity simplicity feels like it's a lie, like it's magic. Whenever I hear people say they'll use React over Svelte they say Svelte is just too much magic and React is just JS. But the truth is all of these frameworks are doing some magical stuff under the hood that is irrelevant to building products. Maybe with React you need to know how it works under the hood because there's just a lot of foot guns but that's a non-issue most of the time. You can do well just knowing how to build stuff with React without necessarily understanding how it works under the hood. The other day I read a comment on Twitter where someone argued that they don't like Svelte because you can't write hooks in it. Why would you need to write hooks in Svelte? You can (since they are just functions that start with "use" basically). But why? Svelte is not React. Some people seem to fail to understand that. What would be the point of creating another framework that does what React already does? Svelte is Svelte and there's the Svelte way of doing things. Don't know why someone would expect React stuff in Svelte. This whole "the downside of Svelte is it's not React, nor does it work like React" thing needs to stop.
Some JavaScript devs don't even know how to work outside of React, so I'm guessing that's a big issue. I've only used Svelte for a really small project, so I can't really comment on it as a framework/library, but my experience using it was pleasant.
@@CottidaeSEA You see. The argument are really irrelevant. If you can build a product with the thing, use the thing. It's crazy if I had to first understand the Go compiler before I can write a backend in Go.
I read a comment on Reddit where some guy said React is good for building production apps because you’re using building blocks instead of sand. Like sir, no.
I'm so happy Svelte came out when it did. As someone who finds myself leaning more toward the backend, I love how I can still make decent front ends with svelte without much fuss.
@@everythinggoes850i would say too... i am a java backend dev, yet still i wasn't using any frontend framework other than vanillajs and backend templeting engines until svelte came arrived
@@everythinggoes850 actually made productions apps on vue over react for that reason... two backend developers (me and our senior at the time) who just wanted to write frontend like javascript and not have to remember what "reactscript" is like from time to time
Yes, i almost stopped webdev, until svelte arrived.... then i regreeted going soo deep into networking, linux certifications and cyber sec only to come back to frontend due to svelte
Absolutely! Svelte saved my career. Thank fuck I'm using it for my own business, otherwise I'd be jobless since I refuse to work with the piece of shit that is React.
I could also write an article about why svelte is way worse than react because they added too many stupid abstraction layers which always break with the JS ecosystem... You don't write JS/TS anymore, you write Svelte...
Svelte is awesome. I managed to convince our company to use it for a couple of SPA projects. Prototyping is super fast. The Builds integrate well with our existing system and our designer does not even need to learn anything new since we can just take the mockup pages she builds us and throw them into some components. With a few exceptions, everything is just vanilla HTML/JS/CSS . 😍 My personal favorite is the svelte/transitions. They make navigation so much clearer and all it takes is a"transition:[style]" attribute on whatever tag, you are removing are adding.
imagine spending thousands of hours learning a piece of technology only to face the same few types of bugs that complete noobies face over and over again. react is simultaneously one of the best investments in a webdev's life and one of the worst investments in a programmer's life.
Svelte and Vue 3 are in fact very similar! 🎨 They both have a block for styling the component ➡ Vue 3 also has a State Management baked right into the framework 😄under one single API ref() Which works exactly the same as solid/store and svelte/store
Also Vue has the benefit of being completely valid JavaScript, supports native web components, and can be used without a build step, which is a godsend when you have to integrate with an annoying vendor or customer. It’s just so portable and straight forward.
yeah vue 3 with composition api was great and look like svelte, i'm always recommend it when working inteam when i'm doing solo project my bet always be svelte
I have gripes with Vue 3 though. Composition API would have been ok if they didn't focus so much on forcing the reactivity model on us. Some of us prefer to organize UI in classes, and when they killed off Class API, they neglected half of the community that chose Vue for it's previous vue-property-decorator APIs and for allowing us to use OOP principles. They lost my trust. To me Vue seems like it just wants to ride the React bandwagon because React devs can't bother learning anything else
I started with Vuejs and then went to react. I have the same arguments for why i chose Vue over react for personal projects React made me love Vue even more.
Having looked at react after angular and before vue, and after vue again.... the react ecosystem is just completely mad and react apps are steaming piles of donkey which should be buried as deep as possible where they can never be found, just like the angular ones. I'm ashamed of being part of the frontend developer community because of these spectacularly obvious crimes against humanity and programming.
@@PaulSpades If you talk about steaming donkey, the same is here with Vue, but just Vue 2. Situation is getting much better with Vue3's composition API now, which encourages the use of typescript, which enforces more typing, and therefore less donkey. Let's face it, garbage piling up is a must for any antique ecosystems, only to be cleaned up when the next breaking update comes.
20 lines in react, 4 lines in vue. You know where this is going... The mindset of how react handles reactivity, and how it throws all the responsibility of handling reactivity to the developer is just, very counter-productive in a fast paced environment. For 80% of the time we just need a value to update when the model changes, we don't care about handling the getters setters and setting signals and dependencies for that, just do it in the framework itself and expose options when we needed it.
@@MIO9_sh Yeah Vue/Svelte both good! I don't buy a lot of arguments that are made in Reacts favor these days either. > Libraries - not an issue > Performance - Worst out of all of the main ones > Big Community/Usage - Ok so JQuery is good then? In principle the idea of components: state, logic and structure/markup in a single sile makes sense but every other framework does it in a way that is easier to understand, is more performant and doesnt have a mental model that makes me want to put my keyboard through the screen. Then the latest drama about Server Components and Next App Router... just too much noise going on there for me. Svelte 4/5 by contrast: - Reduced bundle to 70% of prev version - They got the Inferno JS guy on board (as if it could be much more performant) - Typesafety actually works 🤷🏻♂
@@daedalus5070 Agreed, I knew the only way we were gonna get improved type safety and better performance is to just restart from the ground up, and Svelte is that answer. But no, React devs just being sheep, it's like arguing with Apple fanboys.
You and me both! The only way I can win the battles is by forcing Class components where possible, using a sensible state management system (no Contexts, I don't want giant component trees looking like bird wings), separating concerns as much as possible, keeping components small, and organizing code in functional components so that variables are the top, followed by closure functions (functions that don't need the outer scope get tossed out of the component or in another file), then effects, then any logic for data transformation, and finally the render. People need to learn standards, for god's sakes!
I chose to start a new company project in react, and later asked for us to change to vue - didnt happen, but we started using zustand, which made the whole project actually plausible. Vue is simply better than react - use whatever you want, but please let react die, people.
Chap called Ben Davis has been working on A Go + SvelteKit project and ended up dropping Go in the end as Sveltekit did everything he wanted. Was cool to see how much he could get done without a "Traditional" backend
@@daedalus5070Similar thing with a project im working on, i went from always-online offline-first app dev and it's so much better, so much easier to extend to online again as well
@@daedalus5070 Yep. I saw that one. Kit&Go as a double Backend doesn't make a lot of sense. I dropped Kit and not go though. A lot better than using js in the backend especially if u work with raw SQL most of the time.
@@daedalus5070 His argument for dropping Go made sense since having Go and SvelteKit in the same project was basically having 2 backends. Go might perform better in backend tasks but it's going to be a while before any performance optimizations are needed for most projects. A lot of projects suffer from premature optimization.
@@nyashachiroro2531 In my case performance was not a criteria. I decided to go with go because i like the language, it's paradigms & the tools. Writing applications with a traditional backend & go turned out to work better for me. I ran into a lot of issues with dbaas & orm's in JS. It's easier to deal with these issues in a clear seperated backend & raw SQL and not at a higher level after 17 abstractions.
Frontend development is hard because it involves a lot more art than other parts of a programming. The general public feels like they're experts in how things are supposed to work and front end devs have to deal with those expectations. Imagine that "this sucks, let me build a better one line" except it's not just from devs, but everyone that touches a device.
Not really art more like engineering. You have to architect to be fast because everybody wants fast, you have to think about whether you are building Facebook or building a mom and pop shop, you have to reason your own sanity as a developer... one problem I see lack of architectural knowledge across the board which includes knowledge of scale. I work on a project that's php last version rewritten to php new version not much changed but the previous architecture didn't scale. End of story.
@@ea_naseer It is engineering, but there is a much larger art component to it compared to systems/backend programming. No public person is going to care about your backend, hell they probably don't know/care enough to even know that there is a backend. In essence, backend development deals with computers which don't have opinions and are pretty consistent. Front end devs deals with that and people, who have too many opinions and vary so much that they tend to contradict themselves.
I took about 3 to 5 react courses on udemy/youtube and still don't understand how react works. Then I found svelte and tried to code along with youtube tutorial and it just clicked. I love its straightforward and direct approach to front end dev.
For me it was different story, read the docs, read the docs of redux, got a simple crash course, and boom, plain and easy, I mean, compared to angular(used at my job), everything feels straight forward to me.
Same here. In my case I have 2 projects with react for my girlfriend and when I have to create a new functionality I fear that I have forgotten many "tricks" to understand react...again.
This is pretty late but.. for complex projects, React truly does have a way larger ecosystem. For simple applications, definitely go with Svelte. But I recently had a pretty simple application, started it with Svelte, and then decided to add a complicated video rendering feature later down the line. The best way to do that was with remotion, which was only for react, so I had to switch to React for the whole project. Later, I worked on another application started with Svelte, and later added a feature to dynamically render components at runtime with user uploaded files. I tried so hard to do this with Svelte and it wasn't working. I switched to react and got it done with 1 line of code using the react-live library. Now I'm honestly just scared to use any other library than react, because IF you ever end up having to add a more complicated feature to your app that started out simple, you might end up having to switch over to react anyways LOL
With CSS i've learned to put a box around every single html element. Then when I'm done, i remove all the borders. It's the only way to actually know what your front end is doing. Once you've got the picture frame set up, you can make it look pretty.
Using * {outline: 1px red} is the best to understand display and position and to quickly « draw » the blocks before starting the « painting » part. I remember that this was my go-to technique and there’s not a thing that surprise me in display/position anymore thanks to this habit
When I saw Svelte 5 my eyes teared up, it's the most beautiful thing I have seen in 11 years working as a Fullstack web developer. I've seen and used ostensively AngularJS, Angular 2~17, Vue, React, Svelte, glossed over Solid and Qwik, Svelte 5 is so good, so clever, so absolutely awesome, I want it so much. Svelte 5 feels to me like "Web finally done right.", it's a masterpiece
Man, that React Wrapper paragraph really hit home with me. I used AnimeJS in a React project and had to build a useAnime hook to wrap around the functionality of animejs. Not the biggest issue and fairly simple to setup.....but.....I like that in SolidJS I can just use the god damn library, similar to Svelte.
Not a Svelte user, but let me get this straight, so at 7:57 what that $ sign means is that the gridObject gets recreated as a whole from the Grid class every time $rowData gets mutated?
@@tedchirvasiuany variable that starts with $ is a store. blocks that starts with $ are reactive code (code that rerun when any of the referenced variables change, kinda like useEffect but smarter and without needing a dependency array)
I posted a simple comparison on LinkedIn about form implementation in react vs svelte . 95% devs were agreeing with me but there we some which said : React is best cus of large community.😵💫
I use Svelte for a private project for two years. Professionally, I have to work with ReactJS and it feels so wrong. Had to work on two bugs this week, and it is so annoying when you debug a component, and it gets initialized over and over again. React is the main reason I will switch my job in September and gonna work as a Svelte developer then. 😄
100% agree on the state managment libraries. Using redux-toolkit is too much learning and writing to just abstract reducers. Async reducers? Maybe thats not a good idea idk If you really need app-wide context why not use cookies, session tokens, localstorage sqlite or anything there instead of having this clusterfuck of abstractions just to manage app state when 99% of the times web apps are glorified crud forms
i keep failing to understand what all the hate about Angular is (a part from google) it is the only one i picked up the first time i used it and whose syntax and structure is more clear to me
Did a quick 2s stack overflow search and looks like comments are actually markup (so is similar to which is invalid sytax), not only in svelte but in html. And knowing that svelte components are structured like html means that this is mostly not svelte's fault but htmls'
I'm not interested in React since the first day I saw it. That day I was AngularJS adopter and made good damn money out of it. But, when Angular 2 comes up, it make me give up on it, I still remember testing angular 2 for the Hello World, took 250Mb of node module, and taking quiite high computer resource. Then I said goodbye completely. Then Vue arise, it almost closer to AngularJS v1 and many AngularJS adopters were move to Vue. Now, I'm so happy with Svelte. It simple, sleek, no shit bullshit here and there. Everything just feels natural without steeper learning curve.
Yeah, it's a good point people have come up with so many ways to overengineer and reinvent the same things over and over that not only is Frontend complex af now, it's also well removed from the actual bundle served to the client, so you actually have no real idea what you're pushing to production just that it works somehow. I really don't like it
True. What is even more annyoing is pushing javascript everywhere even on servers - but hey never in real server always some serverless because js is not good enough. Js should stay as some scripting made for website, sprinkle of js not whole clout, but building everything from js made everything so slow, its unbearable. Facebook is slow, twitter is slow, youtube is also slow. The faster internet is the more junk is loaded to the browser.
The older frameworks made people used to complexity that anything simple feels foreign. People just don't like anything simple anymore. Someone on Twitter said Zustand and Jotai can only be used on small projects, and Redux is the one for big projects. The reason - because they are too simple for large projects. What? It's crazy. Look at Angular - so much complexity that is not necessary at all. I get that some of it is for consistency and stability but I can't see the argument for functionality. Does it need to be that complex to achieve the same goal? I doubt.
@@nyashachiroro2531 When you are switching between multiple front end projects, consistency is above everything. Context switching takes a mental toll on you. I say the same thing about programming languages in general, which is why I resolved to mastering core set of languages and frameworks and only replace them when something new and improved comes along.
I'm not a pro dev but I love svelte for my side hustle projects. Sveltekit, SkeletonUI and SuperForms are a great way to get up and running quickly. My main issue is not being able to programmatically create routes, but I imagine that will come with time.
I absolutely agree with him on grid. It works well until you need to style it. Whenever I need to do design table. I rather create flex components with fixed width and length and some scroll overflow property.
7:17 at my current job, using React, someone thought it was a good idea to write the whole UI using a JSON file... Worked great (no) until you had to add new components and interaction on the website
imagine having a literal language (JSX) for markdown and then you represent all of your markdown with JSON anyway lol the worst part is that most tutorials do this as well there are much better patterns than passing giant objects, stuff like composite components, render props, proper hooks, etc.
because people even experts conflate/misue the terms because of how binary they are and were lacking better concepts/words for everything in-between and around.
I watched this video weeks ago and when you read "".. man.. I got hit very hard. It made me think a lot on what I've been doing for the past years. All the crap I've been brainwashed with. That's the one and only reason that made me switch from React to Svelte for my projects.
Ohhhh boyyy do I have story for trading code for json... Now here I am an intern with a skewed vision of how easy react js, and i start working on creating a tab group UI component for the project. Now a tab group must have some data, let's add a data prop, it needs many buttons to run functions in the parent, BOOM add more fields... It needs to show modal pop ups and animations... Boom add more fields. This went on to the point what the tab group became a controlled component with the parent handling the entire logic, and that moment of 20 props hell it clicked.... What if, I just bundle up every thing into the data field with any type and call it a day. The code gets cleaner, I don't have to worry much about adding new props and I'll leave worrying about the code review to the future me... What's the worst that could happen?? The other interns seemed to like this idea and abused it to eternity till the point that the single component is conditionally rendering 5 different tab group styles and animations with the only way of adding new tabs was to abuse ?? on the json data. After the code reviewer went Duke nukem on our asses that week, we eventually settled on using tabData1 tabData2 ... With each prop having a type property specifying all the different implementations. And in true intern fashion, we left the company a month later
Absolutely love Svelte. I am lucky to be able use it at work. Waiting for the day Svelte slays the React demigorgon so that peace can be restored in the world
I have one project that deals with forms created by users and conditional validation also configured by users. Everything uses vanilla javascript; I only use one library for displaying PDFs and another for masked fields. There is a V2 using Angular, and it uses my cores. I don't do Angular yet; I am maintaining that project indirectly. I have to go into calls with the dev to explain how to create a proper wrapper for Angular...the thing "I don't know." I also have a nonexistent comment feature in V2 because it was already tough for me to do. It would be a monumental task in Angular, so it has been dropped. Also, my version is just faster for some reason. There is no loading screen because the form shows as soon as you land on the page. The Angular version has a nice 10-second loading animation! Fun how that works ^^
I have never used svelte before but I am considering more and more to try it out and introduce it to out team. The only thing I hate about comparing svelte and react that react is kind of "out of date". I hate when somebody says react sucks, vue sucks, etc... I would state anything about a technology without truly understanding it. I truly believe that react is amazing and it was an important milestone in the FE world and because of that and because all the good and bad it brought to the table we managed to improve and go beyond what react can provide to us. I proud and happy that I work with react, I have learnt a lot but now we have "cooler kid(s)" in the block and we might want to consider to slowly migrate or start the newer projects using these technologies.
Svelte is the boss! Svelte fan boy here. Also, you do not actually need a component library in Svelte. It provided a lot of features out of the box, like transition, animated and custom Create Events, and with Taiwind CSS, you're super packed.
Svelte Native has been around for a few years now, but when I looked into it, it seemed like the project was all but abandoned, and supposedly people on the internet don't like NativeScript, so I never tried it. What do you think of it? We're currently building a mobile app using CapacitorJS, which takes a web front end and compiles it to a mobile app. Since you can use whatever front end you want, we're using Svelte + Routify (what I've used for the past 3.5 years), as well as Konsta UI, which provides native-looking components built using TailwindCSS. But our app isn't complete/in production yet, so don't have a complete story yet on how good it is. Looks good when running in emulators though.
@@reikooters I'm working on a similar project, but using Nuxt and Vue3. Would be nice if you publish your results somewhere. Not much info on Capacitor apps in production unfortunately.
I see the same argument all the time for SolidJS. "I would use it in a heartbeat if only the community were larger." Well the community WOULD be larger if more of you would just use it! Damn chickens and eggs.
exactly! I just hate that of all things people chose to "settle" on (thanks JS fatigue!), it had to be React. Sure, it started off awesome when we had class components and solved the pain points of Angular.js, but we are in different times now. It's time to let go and focus on Svelte!
Solidjs is the fastest when it comes to working with the DOM, followed by Vue and Svelte. Applications that don't use the virtual DOM (such those made using Solidjs and Svelte) run quicker overall, although they run slower on larger programs. Vapor Mode, a feature that Vue will soon leverage to become as fast as Solidjs, will make Vue3 and Nuxt3 the most integrated frameworks in terms of both speed and ecosystem.
I never used a table/grid library my whole life and i've managed to ship enterprise products featuring pagination/ordering/cool styling just with plain old table, css and some js :)
Man, CCS3 and preprocessing like Sass/Less/PostCSS was all that's ever needed. Although I admit the svelte-style-block is nice, especially when used with PostCSS. People using and arguing for anything else just need to go back to 1995 and endure the AGE OF (TABLE) MISERY and styling attributes like font, bgcolor, background, color, foreground, fgcolor, cellpadding, cellspacing, border, etc, etc, etc... Especially Tailwind users. Those should live through those years at least 5-10 times.
As a tailwind user, my approach isn't to make a giant line of class names, but to only sprinkle it in projects where I know either I'm gonna have a lot of customization or I'm gonna customize some components from another library. This means I use it only on small websites or web apps that import something like MUI, Vuetify, DaisyUI, Angular Material, whatever.
+1 Even when I need fancier alignment, swapping elements from display inline to flex is very fast and easy to understand. Moving blocks, row-columns and grid elements around is the bane of my existence in UI.
i prefer always using flex, and with tailwind it's just one className, flex. Of course it depends what you're doing but there's nothing I haven't been able to not achieve with flex
have been doing web dev for around +15 years. My approach may be a bit of that of an artisan, and i cannot deal with modern JS frameworks. None of them. Ever since I looked at them, appeal to be a tool to do anything else than a website. It's always wrapped in magic and abstraction, you end up writting spells that after several cycles or rendering will output a code that nobody can read and is very hard to debug. I would say this modern approach is broken from the premise. People who know how to code on those often does not know the very basic concepts of just basic, plain, regular html, css or js. This set of languages (html, css and js) is the very foundation of the website and I miss the days where you just had a little bit of sugar coating on them to make your life easier: php, scss and jquery.
Question for the professionals. I just started learning front-end development at my job, and we're using React at the moment, but we're open to switching to Vue or something else entirely. Would it be a good idea to recommend Svelte to my team, or should I wait until it gains a bit more traction?
"JS with CSS is a path to hell" I used vanilla-extract on couple of my recent projects, and I think I found a good balance between style-components' overabstraction and css modules "just-enoughness". You write your styles with TS, it's scoped, lazy-loaded along with the rest of your component code, you can manage themes and global variables, you have one code standard for all the project code, because 99% of it is TS, you have intellisense and you have build-time compilation of you TS styles into regular CSS. And overall for me it just feels the right way to work with CSS in your project.
Hear me out, since you already have css as backend, and you don’t like to write css in .css files and import it, you can now use styled-components to write your css on js files. So it would be Styled-components as a backend.
Cool vid, great article, but last argument completely misses the point. One of the reasons React became so popular is that you never needed wrapper libraries! React exposed an escape hatch to the DOM using refs and this thing was a game changer (compared to the UI frameworks we had before). You basically could just copy the "get started" code from any JS library and put it in componentDidMount and you're done! Add appropriate cleanups, and there you go - you have some charts among your react components. I agree though that abundance of react wrappers is indeed a weird problem. I don't know why everyone started writing those. The beauty of react was that you didn't need an ecosystem of packages, everyone could just write pure js because it's so easy to adopt in react code.
This is excellent! The article and the reaction is spot on. React is totally overrated and Svelte/SvelteKit greatly under appreciated. Currently building a project with Svelte for the first time and I love it.
Building tower adding more where most put most before in selfaffirming loop. Is logic of termites React Termite Hivet is on top. Everyone constantly learning new versions, improvements mindboggling amount of time wasted. They are tired, everyone wants this to stop and one thing to win and offload the pain. Except majority is in the thing guaranteeing this hell continuing... while others kill each other to become the next hell. Even if it's great and optimised it can't beat the Moloch. Inertia builds the Babel Tower itself
I tried/forced to work with them all: React, Angular, Vue , Svelte. Svelte DOES HAVE A SMALL ecosystem. However, you can easily use Vue3/Nuxt which are a middleground between react and svelte and (currently) has an even bigger ecosystem than react. That VueUse is gold. And I agree.. the state-management in react is pure horseshit .. also combined with redux-saga everylittle fucking action. Total chaos. Don';t even startle me about useEffect and the limitations of JSX (if/else/loops) For now, Vue3/Nuxt is the most complete framework (tools + ecosystem). Waiting for svelte, give it 1-2 more years and it will blossom and give nobody reasons to back down. Svelte IS the future, at least for the sake of our minds not going crazy with all the react bamboozle. I AM SO SICK OF JUNIORS starting to "learn" REACT long before learning basic HTML/JS/CSS.
Nah, I feel like Vue 3 was trying to be a rip off of React. Plus, Vue 3 destroyed Class API and did not give Vue 2 devs who were using vue-class-decorator a proper migration plan while continuing to use classes. That broke my trust and is the reason I no longer use Vue. Shame too because Pinia looked god-like
I am working on an internal service for our MVP (Aerial), it is built using Sveltekit and I can use most js libraries found in npm no problem. I had never been elated in writing code until I decided to use svelte. It is simply a js framework done right.
I love Svelte conceptually and I don't care about the ecosystem But FFS, setting up a new project is a nightmare and half. I want TS, I want SCSS, I want aliases for imports, I want SPA, I want `npm run dev` and `npm run build`. Does it look like I want something extraordinary and/or u reasonable? WhyTF do I have to spend days reading (contradictory) articles to figure out how are we doing this today? (because a year old information is obsolete, but hey, it is still in the top of the search)
@@hyprsonic_dev but I have. But it comes prepackaged with SSR ideology and not exactly fit for SPA, not that it is non-doable. And if I already have a project structure it is not fun at all to rewire it to fit file-based SSR. And why would I even need an SSR in Electron app? Also, no, it has no SCSS out of the box.
I literally know the person (he is React "dev"), who could not use library which had react and vanilla versions with Vue, because it doesn't had Vue wrapper :/
I feel like all front-end tools will be easily convertable in the near future so a lot of these debates seem moot to me. Use the one that makes you the most creative and comfortable for you.
Look guys, if your already proficient and your able to deliver apps, you don’t have to switch. React is a well polished framework that is a bit over complicated as a starting point for new front end developers. Tools change over time, features get paired down, merged into larger tool chains and new ways of doing stuff happens. The world changes.
Classic React devs copium. They can't even admit that React is absurdly overcomplicated, despite other frameworks (Svelte, Solid, Qwik) showing exactly how overcomplicated React is. And no - all of the possible footguns you can make with React is not caused by it being "Just JavaScript". It's "just flawed design from the beginning"
I love this channel -- hugely entertaining and informative. As for React, It's super easy to hate on it and no question Svelte is easier to pick-up and has better DX. Still, I found myself being more productive on React after giving Svelte, Solid, and Qwik an honest try because of ecosystem (Qwik is easily my favorite). I'm going to wait it out another couple years and see how things play out before re-evaluating switching off of React.
@@OzzyTheGiant I happened upon this video again and better understand your question after re-watching. I should have been more clear. The points made in the article prime is talking about reflect almost exactly my mindset when I first excitedly dumped React for Svelte -- made many of the same points in various forums. However, after some time, I came to realization that I simply wasn't being as productive in SvelteKit (or the other shiny object framework for that matter) because 1) there was a relative lack of mindshare (ecosystem is more than just libs), 2) "equivalent" libs for svelte lacked stability/maturity/completeness of their react counterparts, and lots abandoned while things sort out, or 3) still several situation w/ no luck finding lib that existed for React that and found myself needing to implement from scratch (it's not all wrappers around vanilla js libs). UI frameworks was the big one for me, as I have zero interest in reinventing the wheel to get right something that provides zero additive value. I imagine time will address the issues I had (which is already 3+ mo dated), but as I said, I'm going to wait for things to sort out before reconsidering moving off React. If you've had a different experience, more power to you.
I use Emotion and I love it. I don't use styled components, I use the `css` attribute. Same as the vanilla `style` but with TypeScript support. Best of the two worlds. Add the Emotion theme to the mix and you have the best styling solution in my opinion. Tailwind is also nice, but I'm not a huge fan of it even though it's quicker to understand sometimes.
The reason why react is still so relevant, even for new projects is not primarily because of libraries, but all the solutions and existing discussions about common problems. Once your project grows you will face problems in svelte and even vue, which are not really discussed yet, while on the other hand solutions and discussions already exist in react. It's especially relevant for business application when you work in a company. We are using vue and I do really feel the pain when using Nuxt compared to Next.js, as it always requires more effort from your own instead of having some discussion or tooling to use straight away. For vue, i had to create way more issues on github myself than in react. I love solidjs for example, but only would use it on private fun projects. For business projects i would definetely go for react still. I do still pray for something like solid to win the game in the future, but it's just not worth it to me right now. I also do love radix and framer motion, the other framewok do not have really good alternatives to them. Also libraries like storybook will just always focus primarily on react, I had many problems with vue.
By the way, all of this is true for Vue and Nuxt too. Svelte is very similar to Vue. Want CSS? . Want transitions? . Want state management? Just use a composable function or the officially supported Pinia module. Single file components? Oh yes. Not so many wrappers needed because like Svelte, all you need to do is make sure you hook it up to its reactivity (if you need to at all). Other massive benefits? Any HTML is valid in Vue. You don't need funky JSX. Any CSS is valid in Vue too. You don't need to do JS in CSS 🤮 You feel like you're writing web technology as close as it can be to the spec.
These state management libraries are the main reason why I hate React. Yes, as you said it's not required for every project, but the project managers always need that crap for self-satisfaction. I like JSX over the weird Svelte {@const ... stuff 😅
The main question is now how to convince higher ups to rewrite our whole existing react application with sveltekit ? If this is solved then ultimately sveltekit will win as it will gain more acceptance and use
The only reason to not use Svelte today is that you will likely end up needing to create a React Native application for your project if it's half serious. But that already is a Svelte-killer
@silaspy-ff2ne svelte + capacitor, can be very slow, much slower than nativescript, also there are certain android/ios api which you won't be able to access, also also native scripts looks and feels like an actual mobile app, where as capacitor is just a webapp installed on a browser bassed app more or less.
@@shubhambhattacharjee1111 does it feel like a browser-based app because of said performance reasons, or because of web ui limitation/mismatch reasons? And are the performance problems a capacitor issue in general, or is it specifically svelte + capacitor that performs poorly?
Man, this was a great article, god forbid the day someone compares Astro to React and Svelte, talk about obvious truly great experiences where things function as intended, that's the Astro life.
I hate that useMemo, useCallback, and other useComplicatedStuff. Went from react to angular, at first its quite hard to learn angular, but then, its perfect. I want to try svelte, but all of my needs are solved by angular. SSR, one code base for web, ios, android using capacitor, great option for inline templates / styling / standalone components. For the last couple years angular has became great and simpler. State management is great with signal. It is simple and neat. Angular CLI really helps when it comes to everything. Can svelte do all of those thing easier / simpler? I really wanna try to learn it if it is.
React needs a missive ecosystem to make up for all the flaws in the framework. Svelte is fine without an ecosystem cause the framework takes care of most of the common use cases. Not to mention that wrappers aren't required
i don't know. svelte still splits the view layer, it still uses templates, it still re-invents itself from version to version with odd breaking changes like how an "if" works. it says it doesn't want hooks/signals, but not it says otherwise. it's kind of this lack of vision that separates the rest from react.
Never ever will Svelte "succeed" over React. Simply because React is good enough to create complex UIs. It has actually never been easier. I am not saying it's bad. But to overtake something existing it has to be 10x better and that's definitely not the case. It has benefits and it is different but that is not enough it will always look up to React.
My advice is to perfect JavaScript, them only learn the framework your company uses. If u switch to another company, learn the framework they use there.
Been coding both, react is simple and just works no bullshit. React is shit you have to use useMemo useCallback to improve performance. Svelte doesn't need this shit
I have to admit I’m surprised on how many people seem to be against Svelte. I’m not saying stake your professional life on it but for all intents and purposes it feels amazing to work with.
This feels like that XQCD comic where the cpu overheating was mapped onto a key and a user was mad at the people who solved the problem.
It's only natural that people who don't get to pick what they'll be working with will get angry at even the slightest indication that they're stuck with a subpar piece of technology.
For me I never felt people are against Svelte but they want X they use in React and is not in Svelte.
I think we should make the libraries headless and then create adapters
@@neociber24 I’m sure you are right, maybe ppl aren’t against Svelte as much as they want a React version of it so they don’t have to change the way they code. Which is understandable. For me libraries like SolidJS is the React of the future but Svelte seems more like a completely different approach.
I just hate JSX tbf
When you are so used to complexity simplicity feels like it's a lie, like it's magic. Whenever I hear people say they'll use React over Svelte they say Svelte is just too much magic and React is just JS. But the truth is all of these frameworks are doing some magical stuff under the hood that is irrelevant to building products. Maybe with React you need to know how it works under the hood because there's just a lot of foot guns but that's a non-issue most of the time. You can do well just knowing how to build stuff with React without necessarily understanding how it works under the hood. The other day I read a comment on Twitter where someone argued that they don't like Svelte because you can't write hooks in it. Why would you need to write hooks in Svelte? You can (since they are just functions that start with "use" basically). But why? Svelte is not React. Some people seem to fail to understand that. What would be the point of creating another framework that does what React already does? Svelte is Svelte and there's the Svelte way of doing things. Don't know why someone would expect React stuff in Svelte. This whole "the downside of Svelte is it's not React, nor does it work like React" thing needs to stop.
Some JavaScript devs don't even know how to work outside of React, so I'm guessing that's a big issue.
I've only used Svelte for a really small project, so I can't really comment on it as a framework/library, but my experience using it was pleasant.
@@CottidaeSEA You see. The argument are really irrelevant. If you can build a product with the thing, use the thing. It's crazy if I had to first understand the Go compiler before I can write a backend in Go.
I read a comment on Reddit where some guy said React is good for building production apps because you’re using building blocks instead of sand.
Like sir, no.
learn to space paragraphs please for the love of god
@@TCH534 Like what do you even mean by that sir 😂😂😂 No. Just no.
I'm so happy Svelte came out when it did. As someone who finds myself leaning more toward the backend, I love how I can still make decent front ends with svelte without much fuss.
I feel like most developers who love svelte are actually backend devs.
@@everythinggoes850 woah same here as well I love svelte and astro they just make sense
@@everythinggoes850 Wow... didnt know it was a trend lol same here
@@everythinggoes850i would say too...
i am a java backend dev, yet still i wasn't using any frontend framework other than vanillajs and backend templeting engines until svelte came arrived
@@everythinggoes850 actually made productions apps on vue over react for that reason... two backend developers (me and our senior at the time) who just wanted to write frontend like javascript and not have to remember what "reactscript" is like from time to time
Svelte needs to win... for my sanity.
Yes, i almost stopped webdev, until svelte arrived.... then i regreeted going soo deep into networking, linux certifications and cyber sec only to come back to frontend due to svelte
Whatever at this point. Just want some stable simple library.
Absolutely! Svelte saved my career. Thank fuck I'm using it for my own business, otherwise I'd be jobless since I refuse to work with the piece of shit that is React.
There is no sanity in JS.
I could also write an article about why svelte is way worse than react because they added too many stupid abstraction layers which always break with the JS ecosystem... You don't write JS/TS anymore, you write Svelte...
Svelte is awesome. I managed to convince our company to use it for a couple of SPA projects.
Prototyping is super fast. The Builds integrate well with our existing system and our designer does not even need to learn anything new since we can just take the mockup pages she builds us and throw them into some components. With a few exceptions, everything is just vanilla HTML/JS/CSS . 😍
My personal favorite is the svelte/transitions. They make navigation so much clearer and all it takes is a"transition:[style]" attribute on whatever tag, you are removing are adding.
Is your company hiring, I can do even part-time remotely
React devs wake up everyday and choose complexity
We wake up and choose not to be unemployed
@@PanosPitsi True artisans
imagine spending thousands of hours learning a piece of technology only to face the same few types of bugs that complete noobies face over and over again. react is simultaneously one of the best investments in a webdev's life and one of the worst investments in a programmer's life.
@@raianmr2843 vanilla react legit has practically 0 bugs if you start installing random npm packages you will bash your head on a wall.
@@PanosPitsiso did jquery devs 10 years ago
The world is simply not ready for this masterpiece called Svelte
Word.
Svelte and Vue 3 are in fact very similar!
🎨 They both have a block for styling the component
➡ Vue 3 also has a State Management baked right into the framework 😄under one single API ref()
Which works exactly the same as solid/store and svelte/store
Vue 3 is awesome. I also love Pinia for State Management.
Also Vue has the benefit of being completely valid JavaScript, supports native web components, and can be used without a build step, which is a godsend when you have to integrate with an annoying vendor or customer.
It’s just so portable and straight forward.
yeah vue 3 with composition api was great and look like svelte, i'm always recommend it when working inteam
when i'm doing solo project my bet always be svelte
I have gripes with Vue 3 though. Composition API would have been ok if they didn't focus so much on forcing the reactivity model on us. Some of us prefer to organize UI in classes, and when they killed off Class API, they neglected half of the community that chose Vue for it's previous vue-property-decorator APIs and for allowing us to use OOP principles. They lost my trust. To me Vue seems like it just wants to ride the React bandwagon because React devs can't bother learning anything else
@@OzzyTheGiantbut you can still use the options API??
I’ve been doing mostly front-for 20+ years now and Svelte is the only one that just clicked right out of the box.
I started with Vuejs and then went to react. I have the same arguments for why i chose Vue over react for personal projects
React made me love Vue even more.
Having looked at react after angular and before vue, and after vue again.... the react ecosystem is just completely mad and react apps are steaming piles of donkey which should be buried as deep as possible where they can never be found, just like the angular ones. I'm ashamed of being part of the frontend developer community because of these spectacularly obvious crimes against humanity and programming.
Vue is even making good strides in the simplicity department. I started with Vue, moved to React and now React and Svelte are my main. I understand.
@@PaulSpades If you talk about steaming donkey, the same is here with Vue, but just Vue 2. Situation is getting much better with Vue3's composition API now, which encourages the use of typescript, which enforces more typing, and therefore less donkey. Let's face it, garbage piling up is a must for any antique ecosystems, only to be cleaned up when the next breaking update comes.
@@MIO9_sh Type less = make more money. Weird concept for "programmers", i know.
Which one is better Vue or Svelte?
Currently doing React project and I think its time for it die off. Syntax / patterns are pure nonsense at times.
20 lines in react, 4 lines in vue. You know where this is going... The mindset of how react handles reactivity, and how it throws all the responsibility of handling reactivity to the developer is just, very counter-productive in a fast paced environment. For 80% of the time we just need a value to update when the model changes, we don't care about handling the getters setters and setting signals and dependencies for that, just do it in the framework itself and expose options when we needed it.
@@MIO9_sh Yeah Vue/Svelte both good!
I don't buy a lot of arguments that are made in Reacts favor these days either.
> Libraries - not an issue
> Performance - Worst out of all of the main ones
> Big Community/Usage - Ok so JQuery is good then?
In principle the idea of components: state, logic and structure/markup in a single sile makes sense but every other framework does it in a way that is easier to understand, is more performant and doesnt have a mental model that makes me want to put my keyboard through the screen.
Then the latest drama about Server Components and Next App Router... just too much noise going on there for me.
Svelte 4/5 by contrast:
- Reduced bundle to 70% of prev version
- They got the Inferno JS guy on board (as if it could be much more performant)
- Typesafety actually works 🤷🏻♂
@@daedalus5070 Agreed, I knew the only way we were gonna get improved type safety and better performance is to just restart from the ground up, and Svelte is that answer. But no, React devs just being sheep, it's like arguing with Apple fanboys.
I feel bad for all the developers that know React sucks but still have to face it everyday at work.
I use Vue btw.
You and me both! The only way I can win the battles is by forcing Class components where possible, using a sensible state management system (no Contexts, I don't want giant component trees looking like bird wings), separating concerns as much as possible, keeping components small, and organizing code in functional components so that variables are the top, followed by closure functions (functions that don't need the outer scope get tossed out of the component or in another file), then effects, then any logic for data transformation, and finally the render. People need to learn standards, for god's sakes!
I chose to start a new company project in react, and later asked for us to change to vue - didnt happen, but we started using zustand, which made the whole project actually plausible.
Vue is simply better than react - use whatever you want, but please let react die, people.
this is too well-timed with theo's last video
People did not like that video 😂😂😂 And I get it.
link?
@@faridguzman91 ruclips.net/video/uEx9sZvTwuI/видео.html
@@faridguzman91 ruclips.net/video/uEx9sZvTwuI/видео.html
that video was a massive react dev copium lol
Svelte(no kit) + Go(serving svelte using static) + SQLC + Postgres
LOVE
Chap called Ben Davis has been working on A Go + SvelteKit project and ended up dropping Go in the end as Sveltekit did everything he wanted.
Was cool to see how much he could get done without a "Traditional" backend
@@daedalus5070Similar thing with a project im working on, i went from always-online offline-first app dev and it's so much better, so much easier to extend to online again as well
@@daedalus5070 Yep. I saw that one. Kit&Go as a double Backend doesn't make a lot of sense. I dropped Kit and not go though. A lot better than using js in the backend especially if u work with raw SQL most of the time.
@@daedalus5070 His argument for dropping Go made sense since having Go and SvelteKit in the same project was basically having 2 backends.
Go might perform better in backend tasks but it's going to be a while before any performance optimizations are needed for most projects. A lot of projects suffer from premature optimization.
@@nyashachiroro2531 In my case performance was not a criteria. I decided to go with go because i like the language, it's paradigms & the tools.
Writing applications with a traditional backend & go turned out to work better for me. I ran into a lot of issues with dbaas & orm's in JS. It's easier to deal with these issues in a clear seperated backend & raw SQL and not at a higher level after 17 abstractions.
Frontend development is hard because it involves a lot more art than other parts of a programming. The general public feels like they're experts in how things are supposed to work and front end devs have to deal with those expectations. Imagine that "this sucks, let me build a better one line" except it's not just from devs, but everyone that touches a device.
Not really art more like engineering. You have to architect to be fast because everybody wants fast, you have to think about whether you are building Facebook or building a mom and pop shop, you have to reason your own sanity as a developer... one problem I see lack of architectural knowledge across the board which includes knowledge of scale. I work on a project that's php last version rewritten to php new version not much changed but the previous architecture didn't scale. End of story.
@@ea_naseer It is engineering, but there is a much larger art component to it compared to systems/backend programming. No public person is going to care about your backend, hell they probably don't know/care enough to even know that there is a backend. In essence, backend development deals with computers which don't have opinions and are pretty consistent. Front end devs deals with that and people, who have too many opinions and vary so much that they tend to contradict themselves.
I wouldn’t call it “development” by any means. More like copy-pasting.
@@drygordspellweaver8761 that's more a self tell than anything
@@likwidsage I could code circles around you, squid.
I took about 3 to 5 react courses on udemy/youtube and still don't understand how react works. Then I found svelte and tried to code along with youtube tutorial and it just clicked. I love its straightforward and direct approach to front end dev.
Really? I took many react courses on Udemy, front end masters and scrimba and gave up. Maybe I should I try svelte
For me it was different story, read the docs, read the docs of redux, got a simple crash course, and boom, plain and easy, I mean, compared to angular(used at my job), everything feels straight forward to me.
Same here. In my case I have 2 projects with react for my girlfriend and when I have to create a new functionality I fear that I have forgotten many "tricks" to understand react...again.
This is pretty late but.. for complex projects, React truly does have a way larger ecosystem. For simple applications, definitely go with Svelte. But I recently had a pretty simple application, started it with Svelte, and then decided to add a complicated video rendering feature later down the line. The best way to do that was with remotion, which was only for react, so I had to switch to React for the whole project. Later, I worked on another application started with Svelte, and later added a feature to dynamically render components at runtime with user uploaded files. I tried so hard to do this with Svelte and it wasn't working. I switched to react and got it done with 1 line of code using the react-live library. Now I'm honestly just scared to use any other library than react, because IF you ever end up having to add a more complicated feature to your app that started out simple, you might end up having to switch over to react anyways LOL
With CSS i've learned to put a box around every single html element. Then when I'm done, i remove all the borders. It's the only way to actually know what your front end is doing. Once you've got the picture frame set up, you can make it look pretty.
Have you ever heard about DevTools?
Dev what? I write my code on paper then use notepad.
Using * {outline: 1px red} is the best to understand display and position and to quickly « draw » the blocks before starting the « painting » part. I remember that this was my go-to technique and there’s not a thing that surprise me in display/position anymore thanks to this habit
When I saw Svelte 5 my eyes teared up, it's the most beautiful thing I have seen in 11 years working as a Fullstack web developer. I've seen and used ostensively AngularJS, Angular 2~17, Vue, React, Svelte, glossed over Solid and Qwik, Svelte 5 is so good, so clever, so absolutely awesome, I want it so much. Svelte 5 feels to me like "Web finally done right.", it's a masterpiece
Man, that React Wrapper paragraph really hit home with me. I used AnimeJS in a React project and had to build a useAnime hook to wrap around the functionality of animejs. Not the biggest issue and fairly simple to setup.....but.....I like that in SolidJS I can just use the god damn library, similar to Svelte.
Man could you please explain why do you need to create that hook? I want to get it
@@enriquejosemunozavellan5517 I had animation properties that updated so I needed it to react to those effects.
Not a Svelte user, but let me get this straight, so at 7:57 what that $ sign means is that the gridObject gets recreated as a whole from the Grid class every time $rowData gets mutated?
@@tedchirvasiuany variable that starts with $ is a store. blocks that starts with $ are reactive code (code that rerun when any of the referenced variables change, kinda like useEffect but smarter and without needing a dependency array)
I posted a simple comparison on LinkedIn about form implementation in react vs svelte . 95% devs were agreeing with me but there we some which said : React is best cus of large community.😵💫
You can link them this article now hahah
I use Svelte for a private project for two years. Professionally, I have to work with ReactJS and it feels so wrong. Had to work on two bugs this week, and it is so annoying when you debug a component, and it gets initialized over and over again. React is the main reason I will switch my job in September and gonna work as a Svelte developer then. 😄
That's about the worst situation you can get into as a coder. Knowing how Svelte works but still having to deal with React (devs) in your daytime job.
100% agree on the state managment libraries. Using redux-toolkit is too much learning and writing to just abstract reducers. Async reducers? Maybe thats not a good idea idk
If you really need app-wide context why not use cookies, session tokens, localstorage sqlite or anything there instead of having this clusterfuck of abstractions just to manage app state when 99% of the times web apps are glorified crud forms
So it's clear, Angular 16 wins.
No, Vue wins!
No one wins so long as React keeps pushing for this everything-in-JS, one way data flow, hooks agenda. When React finally dies, everyone wins
i keep failing to understand what all the hate about Angular is (a part from google)
it is the only one i picked up the first time i used it and whose syntax and structure is more clear to me
Svelte doesn't let me comment out component props, which really frustrates me every time I use it. Other than that, svelte is really nice.
What do you mean, comment out component props?
Edit: Ooh, you mean in the template. Yeah, that's a consequence of the XML spec.
its such a tiny thing but i have this problem every singular time i use svelte
@@AdroSlice would you plz eleborate i didn't fully get him
@@ko-Daegu In Svelte you can't do this: to temporarily comment out some of the props you're passing to the component.
Did a quick 2s stack overflow search and looks like comments are actually markup
(so is similar to
which is invalid sytax),
not only in svelte but in html. And knowing that svelte components are structured like html means that this is mostly not svelte's fault but htmls'
I'm not interested in React since the first day I saw it.
That day I was AngularJS adopter and made good damn money out of it.
But, when Angular 2 comes up, it make me give up on it, I still remember testing angular 2 for the Hello World, took 250Mb of node module, and taking quiite high computer resource. Then I said goodbye completely.
Then Vue arise, it almost closer to AngularJS v1 and many AngularJS adopters were move to Vue.
Now, I'm so happy with Svelte. It simple, sleek, no shit bullshit here and there. Everything just feels natural without steeper learning curve.
Yeah, it's a good point people have come up with so many ways to overengineer and reinvent the same things over and over that not only is Frontend complex af now, it's also well removed from the actual bundle served to the client, so you actually have no real idea what you're pushing to production just that it works somehow.
I really don't like it
True. What is even more annyoing is pushing javascript everywhere even on servers - but hey never in real server always some serverless because js is not good enough. Js should stay as some scripting made for website, sprinkle of js not whole clout, but building everything from js made everything so slow, its unbearable. Facebook is slow, twitter is slow, youtube is also slow. The faster internet is the more junk is loaded to the browser.
The older frameworks made people used to complexity that anything simple feels foreign. People just don't like anything simple anymore. Someone on Twitter said Zustand and Jotai can only be used on small projects, and Redux is the one for big projects. The reason - because they are too simple for large projects. What? It's crazy. Look at Angular - so much complexity that is not necessary at all. I get that some of it is for consistency and stability but I can't see the argument for functionality. Does it need to be that complex to achieve the same goal? I doubt.
maybe because you are trash developer
@@nyashachiroro2531 When you are switching between multiple front end projects, consistency is above everything. Context switching takes a mental toll on you. I say the same thing about programming languages in general, which is why I resolved to mastering core set of languages and frameworks and only replace them when something new and improved comes along.
I'm not a pro dev but I love svelte for my side hustle projects.
Sveltekit, SkeletonUI and SuperForms are a great way to get up and running quickly.
My main issue is not being able to programmatically create routes, but I imagine that will come with time.
Looks like Theo's take on anything not crappy react with nested ternaries.
I absolutely agree with him on grid. It works well until you need to style it. Whenever I need to do design table. I rather create flex components with fixed width and length and some scroll overflow property.
7:17 at my current job, using React, someone thought it was a good idea to write the whole UI using a JSON file... Worked great (no) until you had to add new components and interaction on the website
why even use a framework at that point just write the document object itself xD
imagine having a literal language (JSX) for markdown and then you represent all of your markdown with JSON anyway lol
the worst part is that most tutorials do this as well
there are much better patterns than passing giant objects, stuff like composite components, render props, proper hooks, etc.
Most of these frameworks are for UI.
Everyone is fighting one another for it.
svelte is a compiler ,react is a library
and i still dont know why they are in the top5 frameworks
Svetle is a transpiler.
because people even experts conflate/misue the terms because of how binary they are and were lacking better concepts/words for everything in-between and around.
I watched this video weeks ago and when you read "".. man.. I got hit very hard. It made me think a lot on what I've been doing for the past years. All the crap I've been brainwashed with. That's the one and only reason that made me switch from React to Svelte for my projects.
love this
Vue is amazing also. New vue3 is so ergonomic to use
Agree!
Ohhhh boyyy do I have story for trading code for json... Now here I am an intern with a skewed vision of how easy react js, and i start working on creating a tab group UI component for the project. Now a tab group must have some data, let's add a data prop, it needs many buttons to run functions in the parent, BOOM add more fields... It needs to show modal pop ups and animations... Boom add more fields. This went on to the point what the tab group became a controlled component with the parent handling the entire logic, and that moment of 20 props hell it clicked.... What if, I just bundle up every thing into the data field with any type and call it a day. The code gets cleaner, I don't have to worry much about adding new props and I'll leave worrying about the code review to the future me... What's the worst that could happen?? The other interns seemed to like this idea and abused it to eternity till the point that the single component is conditionally rendering 5 different tab group styles and animations with the only way of adding new tabs was to abuse ?? on the json data. After the code reviewer went Duke nukem on our asses that week, we eventually settled on using tabData1 tabData2 ... With each prop having a type property specifying all the different implementations. And in true intern fashion, we left the company a month later
Absolutely love Svelte. I am lucky to be able use it at work. Waiting for the day Svelte slays the React demigorgon so that peace can be restored in the world
When people talk about the ecosystem what they really mean is "My job won't pay me to know about this"
I have one project that deals with forms created by users and conditional validation also configured by users. Everything uses vanilla javascript; I only use one library for displaying PDFs and another for masked fields.
There is a V2 using Angular, and it uses my cores. I don't do Angular yet; I am maintaining that project indirectly. I have to go into calls with the dev to explain how to create a proper wrapper for Angular...the thing "I don't know."
I also have a nonexistent comment feature in V2 because it was already tough for me to do. It would be a monumental task in Angular, so it has been dropped.
Also, my version is just faster for some reason. There is no loading screen because the form shows as soon as you land on the page.
The Angular version has a nice 10-second loading animation!
Fun how that works ^^
I have never used svelte before but I am considering more and more to try it out and introduce it to out team.
The only thing I hate about comparing svelte and react that react is kind of "out of date".
I hate when somebody says react sucks, vue sucks, etc... I would state anything about a technology without truly understanding it.
I truly believe that react is amazing and it was an important milestone in the FE world and because of that and because all the good and bad it brought to the table we managed to improve and go beyond what react can provide to us.
I proud and happy that I work with react, I have learnt a lot but now we have "cooler kid(s)" in the block and we might want to consider to slowly migrate or start the newer projects using these technologies.
Svelte is the boss! Svelte fan boy here. Also, you do not actually need a component library in Svelte. It provided a lot of features out of the box, like transition, animated and custom Create Events, and with Taiwind CSS, you're super packed.
The problem with React and Angular is employers pushing them as a requirement, and some vue. We need more svelte jobs or even vanilla js jobs.
I love using Svelte Native to make iOS and Android apps!
Svelte Native has been around for a few years now, but when I looked into it, it seemed like the project was all but abandoned, and supposedly people on the internet don't like NativeScript, so I never tried it. What do you think of it?
We're currently building a mobile app using CapacitorJS, which takes a web front end and compiles it to a mobile app. Since you can use whatever front end you want, we're using Svelte + Routify (what I've used for the past 3.5 years), as well as Konsta UI, which provides native-looking components built using TailwindCSS. But our app isn't complete/in production yet, so don't have a complete story yet on how good it is. Looks good when running in emulators though.
@@reikooters I'm working on a similar project, but using Nuxt and Vue3. Would be nice if you publish your results somewhere. Not much info on Capacitor apps in production unfortunately.
I see the same argument all the time for SolidJS. "I would use it in a heartbeat if only the community were larger." Well the community WOULD be larger if more of you would just use it!
Damn chickens and eggs.
exactly! I just hate that of all things people chose to "settle" on (thanks JS fatigue!), it had to be React. Sure, it started off awesome when we had class components and solved the pain points of Angular.js, but we are in different times now. It's time to let go and focus on Svelte!
Solidjs is the fastest when it comes to working with the DOM, followed by Vue and Svelte.
Applications that don't use the virtual DOM (such those made using Solidjs and Svelte) run quicker overall, although they run slower on larger programs.
Vapor Mode, a feature that Vue will soon leverage to become as fast as Solidjs, will make Vue3 and Nuxt3 the most integrated frameworks in terms of both speed and ecosystem.
I never used a table/grid library my whole life and i've managed to ship enterprise products featuring pagination/ordering/cool styling just with plain old table, css and some js :)
Man, CCS3 and preprocessing like Sass/Less/PostCSS was all that's ever needed. Although I admit the svelte-style-block is nice, especially when used with PostCSS. People using and arguing for anything else just need to go back to 1995 and endure the AGE OF (TABLE) MISERY and styling attributes like font, bgcolor, background, color, foreground, fgcolor, cellpadding, cellspacing, border, etc, etc, etc... Especially Tailwind users. Those should live through those years at least 5-10 times.
As a tailwind user, my approach isn't to make a giant line of class names, but to only sprinkle it in projects where I know either I'm gonna have a lot of customization or I'm gonna customize some components from another library. This means I use it only on small websites or web apps that import something like MUI, Vuetify, DaisyUI, Angular Material, whatever.
i'm happiest with display: inline-block; and vertical-align: middle; you can do a lot with it.
+1 Even when I need fancier alignment, swapping elements from display inline to flex is very fast and easy to understand. Moving blocks, row-columns and grid elements around is the bane of my existence in UI.
i prefer always using flex, and with tailwind it's just one className, flex. Of course it depends what you're doing but there's nothing I haven't been able to not achieve with flex
Flex solves everything for me, even CSS grids.
i'll try that one!
have been doing web dev for around +15 years. My approach may be a bit of that of an artisan, and i cannot deal with modern JS frameworks. None of them. Ever since I looked at them, appeal to be a tool to do anything else than a website. It's always wrapped in magic and abstraction, you end up writting spells that after several cycles or rendering will output a code that nobody can read and is very hard to debug.
I would say this modern approach is broken from the premise. People who know how to code on those often does not know the very basic concepts of just basic, plain, regular html, css or js.
This set of languages (html, css and js) is the very foundation of the website and I miss the days where you just had a little bit of sugar coating on them to make your life easier: php, scss and jquery.
svelte stores are really good.
Question for the professionals. I just started learning front-end development at my job, and we're using React at the moment, but we're open to switching to Vue or something else entirely. Would it be a good idea to recommend Svelte to my team, or should I wait until it gains a bit more traction?
Did you switch to svelte? say yes.
"JS with CSS is a path to hell"
I used vanilla-extract on couple of my recent projects, and I think I found a good balance between style-components' overabstraction and css modules "just-enoughness". You write your styles with TS, it's scoped, lazy-loaded along with the rest of your component code, you can manage themes and global variables, you have one code standard for all the project code, because 99% of it is TS, you have intellisense and you have build-time compilation of you TS styles into regular CSS. And overall for me it just feels the right way to work with CSS in your project.
Hear me out, since you already have css as backend, and you don’t like to write css in .css files and import it, you can now use styled-components to write your css on js files. So it would be Styled-components as a backend.
Also sveltagen is a great gen.
Cool vid, great article, but last argument completely misses the point. One of the reasons React became so popular is that you never needed wrapper libraries! React exposed an escape hatch to the DOM using refs and this thing was a game changer (compared to the UI frameworks we had before). You basically could just copy the "get started" code from any JS library and put it in componentDidMount and you're done! Add appropriate cleanups, and there you go - you have some charts among your react components.
I agree though that abundance of react wrappers is indeed a weird problem. I don't know why everyone started writing those. The beauty of react was that you didn't need an ecosystem of packages, everyone could just write pure js because it's so easy to adopt in react code.
This is excellent! The article and the reaction is spot on. React is totally overrated and Svelte/SvelteKit greatly under appreciated. Currently building a project with Svelte for the first time and I love it.
Svelte literally saved my passion for programming.
Building tower adding more where most put most before in selfaffirming loop. Is logic of termites
React Termite Hivet is on top. Everyone constantly learning new versions, improvements mindboggling amount of time wasted.
They are tired, everyone wants this to stop
and one thing to win and offload the pain.
Except majority is in the thing guaranteeing this hell continuing... while others kill each other to become the next hell.
Even if it's great and optimised it can't beat the Moloch.
Inertia builds the Babel Tower itself
Did you realize how short is this video. Svelte is simple, understanding why Svelte is better is also simple.
I tried/forced to work with them all: React, Angular, Vue , Svelte.
Svelte DOES HAVE A SMALL ecosystem. However, you can easily use Vue3/Nuxt which are a middleground between react and svelte and (currently) has an even bigger ecosystem than react. That VueUse is gold. And I agree.. the state-management in react is pure horseshit .. also combined with redux-saga everylittle fucking action. Total chaos. Don';t even startle me about useEffect and the limitations of JSX (if/else/loops)
For now, Vue3/Nuxt is the most complete framework (tools + ecosystem). Waiting for svelte, give it 1-2 more years and it will blossom and give nobody reasons to back down. Svelte IS the future, at least for the sake of our minds not going crazy with all the react bamboozle. I AM SO SICK OF JUNIORS starting to "learn" REACT long before learning basic HTML/JS/CSS.
Nah, I feel like Vue 3 was trying to be a rip off of React. Plus, Vue 3 destroyed Class API and did not give Vue 2 devs who were using vue-class-decorator a proper migration plan while continuing to use classes. That broke my trust and is the reason I no longer use Vue. Shame too because Pinia looked god-like
I am working on an internal service for our MVP (Aerial), it is built using Sveltekit and I can use most js libraries found in npm no problem. I had never been elated in writing code until I decided to use svelte. It is simply a js framework done right.
I love Svelte conceptually and I don't care about the ecosystem
But FFS, setting up a new project is a nightmare and half. I want TS, I want SCSS, I want aliases for imports, I want SPA, I want `npm run dev` and `npm run build`.
Does it look like I want something extraordinary and/or u reasonable?
WhyTF do I have to spend days reading (contradictory) articles to figure out how are we doing this today? (because a year old information is obsolete, but hey, it is still in the top of the search)
Sounds like you haven't heard of sveltekit.
None of the things you've mentioned are problems, they are all very trivial to add.
@@hyprsonic_dev but I have. But it comes prepackaged with SSR ideology and not exactly fit for SPA, not that it is non-doable. And if I already have a project structure it is not fun at all to rewire it to fit file-based SSR. And why would I even need an SSR in Electron app?
Also, no, it has no SCSS out of the box.
I literally know the person (he is React "dev"), who could not use library which had react and vanilla versions with Vue, because it doesn't had Vue wrapper :/
The only reason i switched from backend to fullstack is because of svelte. It made everything so much easier.
I feel like all front-end tools will be easily convertable in the near future so a lot of these debates seem moot to me. Use the one that makes you the most creative and comfortable for you.
Look guys, if your already proficient and your able to deliver apps, you don’t have to switch. React is a well polished framework that is a bit over complicated as a starting point for new front end developers. Tools change over time, features get paired down, merged into larger tool chains and new ways of doing stuff happens.
The world changes.
react is a library , the constant mis-interchanging of terms is why articles/video like this get made.
styled-components was the worst idea ever
I'm using astro with svelte and i'm falling in love with front-end development again.
Classic React devs copium. They can't even admit that React is absurdly overcomplicated, despite other frameworks (Svelte, Solid, Qwik) showing exactly how overcomplicated React is. And no - all of the possible footguns you can make with React is not caused by it being "Just JavaScript". It's "just flawed design from the beginning"
Love the "is just JavaScript", my brother in christ, you just inserted HTML into your just JavaScript 😅😅😅
Skill issue tbh
@@josk8936 and perverted it up to htmlFor and className
I'm not a React Developer but I want to learn React just for React Native to develop mobile apps.
@@emptybottle1200 please do not. Learn Nuxt for SPA and use Capacitor
@Primeagen, hey, but what about "code as data" approach (read "Lisp")?
svelte sounds like vue with fewer steps
I love this channel -- hugely entertaining and informative. As for React, It's super easy to hate on it and no question Svelte is easier to pick-up and has better DX. Still, I found myself being more productive on React after giving Svelte, Solid, and Qwik an honest try because of ecosystem (Qwik is easily my favorite). I'm going to wait it out another couple years and see how things play out before re-evaluating switching off of React.
Did you even watch the video?
@@OzzyTheGiant yep, whole thing.
yeah, because it pays well 😂
@@OzzyTheGiant I happened upon this video again and better understand your question after re-watching. I should have been more clear. The points made in the article prime is talking about reflect almost exactly my mindset when I first excitedly dumped React for Svelte -- made many of the same points in various forums. However, after some time, I came to realization that I simply wasn't being as productive in SvelteKit (or the other shiny object framework for that matter) because 1) there was a relative lack of mindshare (ecosystem is more than just libs), 2) "equivalent" libs for svelte lacked stability/maturity/completeness of their react counterparts, and lots abandoned while things sort out, or 3) still several situation w/ no luck finding lib that existed for React that and found myself needing to implement from scratch (it's not all wrappers around vanilla js libs). UI frameworks was the big one for me, as I have zero interest in reinventing the wheel to get right something that provides zero additive value. I imagine time will address the issues I had (which is already 3+ mo dated), but as I said, I'm going to wait for things to sort out before reconsidering moving off React. If you've had a different experience, more power to you.
I'm using it in prod for a now large project. 👌
I also agree on state management. I feel like I hate them all. So much boilerplate
yep
I use Emotion and I love it. I don't use styled components, I use the `css` attribute. Same as the vanilla `style` but with TypeScript support. Best of the two worlds. Add the Emotion theme to the mix and you have the best styling solution in my opinion. Tailwind is also nice, but I'm not a huge fan of it even though it's quicker to understand sometimes.
The reason why react is still so relevant, even for new projects is not primarily because of libraries, but all the solutions and existing discussions about common problems. Once your project grows you will face problems in svelte and even vue, which are not really discussed yet, while on the other hand solutions and discussions already exist in react. It's especially relevant for business application when you work in a company. We are using vue and I do really feel the pain when using Nuxt compared to Next.js, as it always requires more effort from your own instead of having some discussion or tooling to use straight away. For vue, i had to create way more issues on github myself than in react. I love solidjs for example, but only would use it on private fun projects. For business projects i would definetely go for react still. I do still pray for something like solid to win the game in the future, but it's just not worth it to me right now. I also do love radix and framer motion, the other framewok do not have really good alternatives to them. Also libraries like storybook will just always focus primarily on react, I had many problems with vue.
Can we just redo the entire web in C already?
The first 6 seconds of this video are gold
By the way, all of this is true for Vue and Nuxt too. Svelte is very similar to Vue. Want CSS? . Want transitions? . Want state management? Just use a composable function or the officially supported Pinia module. Single file components? Oh yes. Not so many wrappers needed because like Svelte, all you need to do is make sure you hook it up to its reactivity (if you need to at all).
Other massive benefits? Any HTML is valid in Vue. You don't need funky JSX. Any CSS is valid in Vue too. You don't need to do JS in CSS 🤮 You feel like you're writing web technology as close as it can be to the spec.
These state management libraries are the main reason why I hate React. Yes, as you said it's not required for every project, but the project managers always need that crap for self-satisfaction.
I like JSX over the weird Svelte {@const ... stuff 😅
Svelte rocks. Try it out and spread the word :)
Hey, it’s my submission! Thanks Prime!
The main question is now how to convince higher ups to rewrite our whole existing react application with sveltekit ?
If this is solved then ultimately sveltekit will win as it will gain more acceptance and use
Never ending debate
This is quite possibly the first time I've seen prime actually be right about something.
thanks i think
Svelte n Tailwind. The world would be a bette replace if more people used them.
The only reason to not use Svelte today is that you will likely end up needing to create a React Native application for your project if it's half serious. But that already is a Svelte-killer
You can always use svelte-native, It may not be as good as svelte 4 but it's better than rn
@@shubhambhattacharjee1111 it isn't better than react native
What about Svelte + Capacitor?
@silaspy-ff2ne svelte + capacitor, can be very slow, much slower than nativescript, also there are certain android/ios api which you won't be able to access, also also native scripts looks and feels like an actual mobile app, where as capacitor is just a webapp installed on a browser bassed app more or less.
@@shubhambhattacharjee1111 does it feel like a browser-based app because of said performance reasons, or because of web ui limitation/mismatch reasons? And are the performance problems a capacitor issue in general, or is it specifically svelte + capacitor that performs poorly?
I would use svelte if it had vue3 composition API. I don’t mind DSLs for markup but modifying the JS syntax just feels weird.
Man, this was a great article, god forbid the day someone compares Astro to React and Svelte, talk about obvious truly great experiences where things function as intended, that's the Astro life.
The way React does things seem outdated now compared to these new ways of doing things
I hate that useMemo, useCallback, and other useComplicatedStuff. Went from react to angular, at first its quite hard to learn angular, but then, its perfect. I want to try svelte, but all of my needs are solved by angular. SSR, one code base for web, ios, android using capacitor, great option for inline templates / styling / standalone components. For the last couple years angular has became great and simpler. State management is great with signal. It is simple and neat. Angular CLI really helps when it comes to everything.
Can svelte do all of those thing easier / simpler? I really wanna try to learn it if it is.
React needs a missive ecosystem to make up for all the flaws in the framework. Svelte is fine without an ecosystem cause the framework takes care of most of the common use cases.
Not to mention that wrappers aren't required
i don't know. svelte still splits the view layer, it still uses templates, it still re-invents itself from version to version with odd breaking changes like how an "if" works. it says it doesn't want hooks/signals, but not it says otherwise. it's kind of this lack of vision that separates the rest from react.
I always find it amusing when non-React devs get butthurt it's still the top framework.
Never ever will Svelte "succeed" over React. Simply because React is good enough to create complex UIs. It has actually never been easier. I am not saying it's bad. But to overtake something existing it has to be 10x better and that's definitely not the case. It has benefits and it is different but that is not enough it will always look up to React.
when he said grunt and gulp...hey man this is bullsh...I felt that
You might want to check back at ag-grid and see what they provide before you say: "grid is just table"
My advice is to perfect JavaScript, them only learn the framework your company uses. If u switch to another company, learn the framework they use there.
Svelte just makes more sense and feels more minimalistic... React is a crazy over-bloated world
This way or another, one day humanity needs to decide a user-friendly web development solution. And I wish Svelte to be the ruler.
Another pain in the ass in react is one way binding. You end up with dozens of extra callback functions.
Been coding both, react is simple and just works no bullshit. React is shit you have to use useMemo useCallback to improve performance. Svelte doesn't need this shit