I built the same app 10 times // Which JS Framework is best?

  Рет қаралды 2,425,490

Fireship

Fireship

Күн бұрын

I built a simple app with 10 different JavaScript frameworks... Learn the pros and cons of each JS framework before building your next app github.com/fireship-io/10-jav...
#javascript #webdev #top10
🔗 Resources
Full Courses fireship.io/courses/
Performance Benchmarks github.com/krausest/js-framew...
Source code github.com/fireship-io/10-jav...
📚 Chapters
00:00 JavaScript Frameworks
00:53 1. Vanilla
04:21 2. React
07:48 3. Angular
10:15 4. Vue
12:18 5. Svelte
14:16 6. Lit
16:11 7. Stencil
17:18 8. Solid
18:35 9. Alpine
20:17 10. Mithril
🤓 Install the quiz app
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
🔥 Watch more with Fireship PRO
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font

Пікірлер: 3 400
@webcodingoprogrammingtips2090
@webcodingoprogrammingtips2090 2 жыл бұрын
Interesting fact: 3 new JS frameworks were released while you watched this video
@Angerfist1996
@Angerfist1996 2 жыл бұрын
Interesting fact: this joke is old and overused.
@ajayChauhan-nt5xm
@ajayChauhan-nt5xm 2 жыл бұрын
I made a full fledged web app using phaser 😂
@rankarat
@rankarat 2 жыл бұрын
😂
@tcarrotgaming1639
@tcarrotgaming1639 2 жыл бұрын
I read this comment while I was waiting for the ads to end. I hadn’t yet watched the video, and you’re saying 3 JS frameworks were released? In literally no time flat!? Because that sounds accurate.
@akpokemon
@akpokemon 2 жыл бұрын
@@Angerfist1996 username checks out Edit: oh I thought it was "AngerFirst"...like you're an angry reactionary. oh well. Still fits.
@wlockuz4467
@wlockuz4467 2 жыл бұрын
Thank you for making this video, I always felt overwhelmed by all of these frameworks and you helped me come to realization that all of them suck, so I am going to create my own Javascript framework tonight.
@kubak3381
@kubak3381 2 жыл бұрын
It might seem stupid, but it's pretty much the only sane thing to do
@husseinmahmodi2247
@husseinmahmodi2247 2 жыл бұрын
hahahahaha
@coolaj86
@coolaj86 2 жыл бұрын
I'm in the same boat, actually. The DOM has come a long way in the last 10 years. Example of a few things we have now: querySelector, insertAdjacentHTML, data-xxxx, css variables I think it's possible to have a small, lightweight "framework" where all the hoopla is just handled in the DOM and the documentation is MDN because it's just DOM. I could be wrong.
@___xyz___
@___xyz___ 2 жыл бұрын
"I need javascript" It's already too late, man. At this rate, you're not gonna make it.
@thalibmuhammad9519
@thalibmuhammad9519 2 жыл бұрын
gonna file tons on issue for this
@MouseCodes
@MouseCodes 2 жыл бұрын
For me, a back-end developer with c#. this video is really overwhelming. Hats up for JavaScript folks for dealing with all that mess.
@afsstuff472
@afsstuff472 2 жыл бұрын
.NET?
@MouseCodes
@MouseCodes 2 жыл бұрын
@@afsstuff472 yeah
@MouseCodes
@MouseCodes 2 жыл бұрын
@@afsstuff472 Definitely, it's not. do your search and you will figure out that Microsoft is updating it yearly and it has become widely used at top notch companies as it became cross platform and doesn't run on windows only anymore.
@afsstuff472
@afsstuff472 2 жыл бұрын
I must study about it. I entered Software Engineering 6 months ago only. I don't have much knowledge.
@MouseCodes
@MouseCodes 2 жыл бұрын
@@afsstuff472 It's ok dude. Keep going, wish you the best of luck.
@mihalis1010
@mihalis1010 2 жыл бұрын
The problem with JS frameworks is that most of them are plenty good enough to fill most needs, and it becomes really hard to decide which one to use until you reach and edge case situation much later down the line.
@poopityscooper2116
@poopityscooper2116 8 ай бұрын
Then fourth dimensional traveling WEB3 microinteractable clusterfuck becomes a trendy idea amongst designers and then you have to create your own framework.
@han1218
@han1218 6 ай бұрын
That's why you pick the most popular one that will most likely be maintained the longest so it's easier to find documentation on it and get support. They all do the same thing.
@user-vk7sc6zz6c
@user-vk7sc6zz6c 4 ай бұрын
C'est la vie.
@mattgilstrap7295
@mattgilstrap7295 4 ай бұрын
Agreed
@joshredgrift5133
@joshredgrift5133 3 ай бұрын
Have you run into any particular edge cases with React?
@MartinJaszczuk
@MartinJaszczuk 2 жыл бұрын
"You'll end up building your own shitty JS framework, and the last thing the world needs is another JS framework." -This is literally GOLD and I can't stop laughing.
@Justin73791
@Justin73791 2 жыл бұрын
I'm not entirely sure this is true. In 99% of cases yes, but it's the developers who cause the problems. I've worked on a very complex app written in vanilla JS, and all we had was a "helpers" file that was ~2000 lines of code, which made common js problems (like creating a node with classes easier). Everyone was taught to use containment modules that resolved promises, and you could chain these promises to do some really cool stuff without worrying about the timing of loading assets, database latency, user interaction ect... The app had a heavy use of WebGL and Wasm, and the initial developers found most frameworks got in the way of dealing with these technologies, so I'd still argue vanilla JS has it's place. As long as you can create proper subsystems that don't explode into your own bloated mess of a framework.
@JeppeBeier
@JeppeBeier 2 жыл бұрын
This just motivates me further towards making another shitty JS framework
@davidchandra8722
@davidchandra8722 2 жыл бұрын
on point
@herrbasan
@herrbasan 2 жыл бұрын
Well, if you build you own framework, but don't share it .. it's called "tooling" and is what i do :)
@davidchandra8722
@davidchandra8722 2 жыл бұрын
@@herrbasan xD there is no such things. If you create a concept or structure or system whatever you call it, its a framework. keep it to yourself or share with other has nothing to do with it
@andreas543
@andreas543 2 жыл бұрын
This was the best video on JS frameworks I've ever seen.
@henrypowell3496
@henrypowell3496 2 жыл бұрын
@@Drpanda533 react is good but I hate Facebook, so i don't use it
@NotTheLastOne
@NotTheLastOne 2 жыл бұрын
@@Drpanda533 vue has shortcomings and its community is not able to support it as well as react ? does it feel like this using vue ?
@Drpanda533
@Drpanda533 2 жыл бұрын
@@NotTheLastOne you're wrong. And yes I do.
@ariosetiawan173
@ariosetiawan173 2 жыл бұрын
Agreeee
@leila-codes
@leila-codes 2 жыл бұрын
Absolutely agree! Thanks so much for taking the time Fireship! Actually seeing the same app in action all these frameworks is an absolutely superb way to demonstrate strengths and weaknesses
@elyorbekkhudaybergenov2511
@elyorbekkhudaybergenov2511 7 ай бұрын
After watching this video I have decided to create my own JS Framework where you will only be allowed to use 1 giant JS file. Once you pick my new framework, you will be too busy trying to figure out which line does what and will have 0 time to research other JS libraries. 100% developer retention. STONKS 📈
@hankersoree
@hankersoree 2 ай бұрын
is your framework ready?
@elyorbekkhudaybergenov2511
@elyorbekkhudaybergenov2511 2 ай бұрын
@@hankersoree yes but the world is not ready for my framework yet 😉😌
@mushrifsaidin
@mushrifsaidin Ай бұрын
*slow clap*
@broomybroomybroomy
@broomybroomybroomy Жыл бұрын
Thanks for introducing me to Svelte. I sat down and played with it for fun, remaking an app I already made with React. I basically got as far as I did with days of React work in a few hours in Svelte without even having any experience with it at all.
@tranceyy
@tranceyy Жыл бұрын
Hello world?
@broomybroomybroomy
@broomybroomybroomy Жыл бұрын
@@tranceyy A little more involved than that 😉
@oscarpetersson5324
@oscarpetersson5324 Жыл бұрын
@@broomybroomybroomy it might be because you have already built that path in your head. Remaking seems like it's always faster, than building from scratch...
@heroe1486
@heroe1486 Жыл бұрын
@@tranceyy That would mean Hello Worlds take days in React
@heroe1486
@heroe1486 Жыл бұрын
@@oscarpetersson5324 But the penalties of not knowing the new framework should largely overcome that
@erwinheitzman9854
@erwinheitzman9854 2 жыл бұрын
My mind is blown on how someone actually decided to compare these tools in the shortest amount of time while showing all the important things along the way. Extremely well done and many thanks! 🙏
@Pthphap
@Pthphap 2 жыл бұрын
Even shorter with playback x1.5 :)
@ontheruntonowhere
@ontheruntonowhere Жыл бұрын
@@Pthphap I put it on 2x and slow it down to .5x when he's talking.
@vitvitvitvitvitvitvitvit
@vitvitvitvitvitvitvitvit 4 ай бұрын
@@Pthphap cant watch in x1.5 :(
@ludovictrottier425
@ludovictrottier425 2 жыл бұрын
This video has convinced me to never become a frontend developper.
@kostiatretyak
@kostiatretyak 2 жыл бұрын
on the other hand - since no one knows how the framework you are using works and what job you are actually doing - it is easy to be a frontend developer as no one controls you and you can put any estimate you want :) that's not a joke. One PM friend of mine always complains about fronted devs - they take always a lot of time and he cannot control them :)
@Justin73791
@Justin73791 2 жыл бұрын
@@kostiatretyak A major problem of the tech industry in general....
@Kiba114
@Kiba114 2 жыл бұрын
why? you need to only know 1 and you are good to go for most companies. its often react or angular or vue and they will often look if you know any of these, not all or the one they need even at times.
@ManojKumar-iu3zh
@ManojKumar-iu3zh 2 жыл бұрын
What did u decide! Backend""-" ?
@nushankodikara
@nushankodikara 2 жыл бұрын
Shame on you! We are into that
@leoncampa
@leoncampa Жыл бұрын
This video will be extremely inimidating for beginners, so I hope to share my 2 cents. 1) Start by learning Vanilla JS. It will suck. It will be painful... but you will learn a ton about actually reading and understanding JS code, and will have a much easier time learning any framework that uses it. 2) DON'T try to learn all these frameworks. Pick one, and go with it. Currently, React, Vue and Angular are by far the most popular. Pick ONE of those. 3) Become good at it. Stay updated on it. And commit to it to the death during your education phase. 4) Create a personal portfolio that uses your framework and provides anywhere from 5 - 10 demo projects. Try to incorporate some back end functionality on at least half of those. 5) Start applying to jobs hat use your framework. These are generally mentioned in the description. If the job description asks you to know other frameworks as well, apply to them anyway, and mention them on your resume because job filters will filter you out if you don't. 6) If you're selected, you will be asked for an interview. Make Sure to ask what frameworks would be on it. If they ask you to know other frameworks for the interview, crash course study it then. If not, ignore it until you get the job. Only study the framework IF you ever find yourself needing it. Otherwise, you will spend your entire life studying frameworks, getting lost in the different methodologies and never becoming an expert at any.
@mona-xf5mr
@mona-xf5mr Жыл бұрын
I am at point 2 right now and want to step into web 3 development eventually. Would any of those frameworks suffice or is one better than another. I see more developers using react online and they've begun using next.js as well.. There's always new libraries popping up and its overwhelming.
@JamieR
@JamieR Жыл бұрын
​@@mona-xf5mr React, Angular and Vue have been around the longest and aren't going away any time soon by the looks of it. Jumping on new ones as they pop up can be exciting, but it's not feasible for bigger companies. Changing a library means the entire staff has to have time off actually writing code, to learn new languages, unify their code and make it work across the entire app. Like Leon said, pick one of the three and go with it. Choose the one you feel is the easiest to work with. You can always change down the road when you master one, as it will be way easier hopping over to another at that point. I'd also focus on one solid project, like a bug tracker vs making 5-10 smaller demos.
@spectre_9
@spectre_9 7 ай бұрын
I started learning vanilla JS, building smaller apps and such. Leveled up React later and used extensivly, including NextJS. Did this for a few years, then applied for a job that used Angular. Never touched Angular before in my life but with all my previous background, it wasn't too hard. Had a solid understanding of JS and components, some new things to learn how Angular does its thing, but passed the interview and got hired. So now I'm an Angular developer. So point is, if you have solid understanding of the basics, you can switch between these frameworks quite easily.
@charlesmagno28
@charlesmagno28 7 ай бұрын
@@JamieRso after learning html css and js, go straight for react?
@igorlerinc3510
@igorlerinc3510 7 ай бұрын
yea exactly. Because if you become really good in one framework, then you will know it's inner workings and will understand decisions why framework do things it does. And next time if you need other framework, it will be easier to pick up, because you already went in depth in one framework and understand why it's made it is. And after all, HR only sees what you can build, and not that much what tech you used (ofc they look at that, but if they see that you managed to do something impressive with some framework, then they have no doubt you will be able to do same in that other framework as well. Like, if you build spaceship, they will be impressed, even if they ask for React job, and you did it in Svelte. It's still hard work, and requires a lot of understanding and headache to work with framework, to understand everything to build it. They will hire you, because you are talented, and you will be able to make same spaceship in their framework they use.
@cvcvka588
@cvcvka588 2 жыл бұрын
On Vanilla JS never ever set the innerHTML of an element based on user input. This could cause xss vulnerabilities. Instead use textContent or innerText.
@kmichal456
@kmichal456 Жыл бұрын
I was just going to submit the same comment
@GavHern
@GavHern 2 жыл бұрын
my favorite is svelte since it just feels very well optimized for ease of development and I like that its very forward-thinking. I think we will see much more work done in the build step going forward.
@srujangurram
@srujangurram 2 жыл бұрын
Really hope it goes viral ! Not just for hobby projects but in serious stuff too
@andrewcathcart
@andrewcathcart 2 жыл бұрын
Just need more people to start using it so there's more material online / better docs / more bug fixes.
@lored6811
@lored6811 2 жыл бұрын
my heart says svelte but my wallet says react :(
@GavHern
@GavHern 2 жыл бұрын
@@andrewcathcart I think the docs are great and the tutorial is even better though it never used it haha
@GavHern
@GavHern 2 жыл бұрын
@@lored6811 I feel that. I never really got into react but I'm tempted to build stuff with it just for the resume and potential job. I feel it's most likely id go for Vue though since the syntax is a little nicer in my opinion
@dallenbaldwin3484
@dallenbaldwin3484 2 жыл бұрын
I started using Svelte the other night and was blown away with how lightweight and easy it was. I've always loved Vue and Svelte feels like an even more lightweight version of Vue.
@davidchandra8722
@davidchandra8722 2 жыл бұрын
i think it suit backend engineer also right?
@sumitpurohit8849
@sumitpurohit8849 2 жыл бұрын
@@davidchandra8722 No it's for frontend only
@davidchandra8722
@davidchandra8722 2 жыл бұрын
@@sumitpurohit8849 what i mean is, its easier to be used by backend engineer since it focus more on basic html and the svelte itself. No need to learn new workflow/beviour like React for example
@michawancke4974
@michawancke4974 2 жыл бұрын
introduced in Vue 3.2 looks kinda similar to svelte
@markhaus
@markhaus 2 жыл бұрын
Depends really. Svelte is ultimately a compiler with associated syntax which is different from both Vue and React. I like that fact because we have enough virtual DOM frameworks out there and for less complex projects having a virtual DOM with an associated engine is so overkill in complexity it’s not even funny. Personally I go React where I actually need actually need complex front ends or a really broad ecosystem like electron or react native. Everything else I go to svelte. TLDR for that reason I think if you’re from the backend world you might be best off starting with svelte because there’s a lot less complexity to manage. But something like react is good to know eventually because as fragmented as the JS world is it’s about as close to a lingua Franca we’ve had since jQuery
@CalicoArchives
@CalicoArchives Жыл бұрын
I like Svelte and understand why it would be considered the most loved framework based off of this overview. It looks like the best in regards to user friendly design for Javascript developers in general. Their compiler style design makes it so they can continuously improve performance under the hood which is pretty sweet.
@dillydadally
@dillydadally Жыл бұрын
I'd recommend avoiding Svelte at all costs personally. It's very enticing because it easily has the best syntax and format for defining components, but after using it for a while in a real app I was so frustrated I nearly gave up on frontend frameworks altogether. It has two major problems. First, while the syntax is the simplest to grasp, all the stuff it's doing under the hood with the compiler makes it very finicky, easy to break, difficult to debug, extremely complex, etc. Everything I did created an often nondescript error - not in my code but in engine code - and I could never get my IDE to reliably stop at a breakpoint and step through the code. I ended up spending half my time just fighting with the platform to get it to compile. Second, and even more serious, they have a fundamental design decision that makes it take longer to develop in than normal js code. The components themselves are just invisible wrappers removed at compile time (so you can't target them in CSS) and they purposely make it very difficult to style anything inside the component from outside it. They want you to write a property and expose it for anything you want to change inside the component - which just isn't realistic to work with. Want to position your component in the UI? Wrap it in a div and target the div and hope the children don't require any special positioning styles. Want to target the children inside your component's slot with a few styles? Wrap it in a div and target the children of the div. Worst of all, want to create a component that's a button with a little extra functionality but still want to be able to style it? Have fun rewriting every single style property a button has one by one in a long list - and even then you can't apply a class to style them. They're just properties on the component.
@omarjimenezromero3463
@omarjimenezromero3463 Жыл бұрын
@@dillydadally wow, i now understand why most people search something they can crush with their hands instead to break apart the machine to know why the automatic proccess did not do it good.
@reikooters
@reikooters Жыл бұрын
I've used Svelte for 2.5 years now with the Routify library for routing. I found both Svelte and Routify very easy to get into and use. In that time, I've only encountered one bug with Svelte and it turned out that they had already found and fixed the issue and I just needed to update to the latest version. I haven't experienced the issues with styles that the guy above mentioned, because I tend not to have inline styles in the component. Instead, 1) I used css from a template I found or bought online - so basically I already had all styles I needed in a global css file and just needed to use the right elements and classes in the html, exactly the same way you would if you were building a webpage with regular HTML/javascript. I did this on my first 3-4 projects. 2) Since then I've started using Tailwindcss which gives you loads of helper classes to style anything the way you want (and is also customizable if you need more), and follows the same compiler mindset that Svelte does, where your css file is compiled using only css classes from Tailwind that you're actually using in your project, rather than having a giant css file of everything from a template like I was using before. Been using that for 9 months now and I haven't looked back. There is also the new SvelteKit, which is an official library that has routing etc. I haven't used it yet so can't comment, and haven't really had a reason to switch since I'm happy with what's offered by Routify. The downside is as per the video, Svelte has a smaller community, so sometimes when looking for a library to do something you want, there isn't one available for Svelte. However, since your code is compiled to vanilla JS anyway, you can simply find a library for vanilla JS that doesn't have dependencies on say JQuery, then without much effort just make your own component that uses that library to have the html elements/inputs and javascript to do the init/destroy/etc using that library, as well as the props that you want for configuration and binding, then you use that component wherever you want it in your application. Also, I guess this applies to all the frameworks, but once you've made a component, you can just copy and paste the file into another project and use it. So the more I use the framework the quicker it is to get new projects going.
@dillydadally
@dillydadally Жыл бұрын
@@reikooters Honestly I need to follow up on my original comment a little. I've used Svelte daily at work since I made that comment. I realized a couple things. First, I learned Svelte and Sveltekit together and didn't really separate the two in my mind. Now that I have, I realized most of the issues I've had related to debugging, engine complexity, and finicky behavior is mostly Svelte-kit and not Svelte. A lot of it has to do with the poorly written load function and strange behavior around the soup of static, SSR, and SPA rendering. Svelte-kit at this point is still not even version 1.0, so some rough edges are expected, and they just announced a big rewrite before 1.0 that is going to address some of the issues I had, (such as the aforementioned load function). Still, the official browser tools are abandoned and don't work and I can't get debugging to work properly in my IntelliJ IDE. There's a debugger keyword that lets you pause execution, but it's not ideal. Again, these issues might change as Svelte-Kit matures. Second, I stand by my original claim that the component structure of Svelte is monumentally stupid when it comes to targeting and styling components in the same way you would a normal element, as well as having to expose properties of underlying elements one by one rather than just extending one of the elements. Judging by the complaints and thumbs down on comments by the devs about it and the massive amounts of issues opened about it, I'm not the only one. There's a proposal that is being considered that might make this better. Having said that, if you just use Svelte and not Svelte-Kit (or wait for it to further develop), and you find ways to work around the component styling issues (i.e. use Tailwind and never target the components or add classes to them), then Svelte is very good and probably the best thing out there.
@arachnojoe
@arachnojoe Жыл бұрын
​@@dillydadally I spent over a year working with Svelte and agree with the first issue but not the remaining issues. The first problem with learning Svelte is that you have to learn the good and bad ways of doing things. For example, don't create components having state that varies by page, instead embed a new component per page with page-specific state. I found state management pretty easy for the post part, but every once in a while the magic under the hood gave me a huge headache trying to figure out why things were misbehaving. Sometimes I wasn't sure of the right way to arrange state and ended up duct-taping a solution that passed the tests despite my not understanding why. On the issue of styles, it took me a while to learn that the sharing named CSS classes across pages was not suitable for Svelte or any component framework. Rather, in component frameworks, style should be local to the component. In fact, the way you establish consistent style is by defining components and using those components consistently. What style would you like buttons? Figure it out and make a button component, rather than define it in CSS for reuse across different button renderings. This is a best practice across all component frameworks, not just Svelte. The popular tailwind CSS library takes advantage of this way of developing components and can only be used this way. I used Bootstrap for that project but swore I'd use tailwind for subsequent component frameworks to make my life easier.
@radekwysocki7875
@radekwysocki7875 Жыл бұрын
I love the ammount of control + z that had to be done for this video!
@anonymous_31045
@anonymous_31045 Жыл бұрын
why it can't be 2 screen mirroring and , he might be copying everything from the other one.
@stephenstuder1053
@stephenstuder1053 2 жыл бұрын
Happily a Vue developer, but spending some free time with Svelte in hopes that it catches on! Thanks for the great overview!
@amontomi
@amontomi 2 жыл бұрын
Me too now :(
@axetroll
@axetroll 2 жыл бұрын
How do you use libs for the ui like material ui?
@amontomi
@amontomi 2 жыл бұрын
Now I think Vue us better than Svelte
@encoder6717
@encoder6717 2 жыл бұрын
No offence but, your statement is the epitome of why frameworks suck! Stagnation because something "new and shiny" comes along that DOES the same bloody thing lol!
@stephenstuder1053
@stephenstuder1053 2 жыл бұрын
@@encoder6717 I don’t believe in the scarcity mindset. If svelte is good it should grow, but just because it grows doesn’t mean other frameworks die. All the good stuff should catch on IMO. Established frameworks aren’t going anywhere unless they stop being useful for solving problems.
@parasshah195
@parasshah195 2 жыл бұрын
Svelte is amongst my favourite, mainly because of how native it feels when developing, and also very performant.
@SandwichMitGurke
@SandwichMitGurke 2 жыл бұрын
@given I use vitejs for building svelte and never have problems with building
@dc22199x
@dc22199x 2 жыл бұрын
@given sveltekit
@Michi-go5xi
@Michi-go5xi Жыл бұрын
Myself spent a month creating a TODO list app using Angular Material, and I gotta say yes... The learning curve is kinda big but once I got used to it I can say it has an awesome and really organized way to do stuff!
@spaceexplorer319
@spaceexplorer319 Жыл бұрын
Just one clarification, in the Vanilla Js code, you should not call "addTodos" for every item of todoData. Because in that case, whenever you refresh it, the localstorage will get populated with twice of the current data. Instead just call a function to display the data every time we refresh. Something like, this function displayTodo(todo) { const li = document.createElement('li'); li.innerHTML = todo; todoList.appendChild(li); } Rest everything is Awesome!!! 💯💯💯
@ankurheble
@ankurheble 2 жыл бұрын
The audacity with which this guy says that this video might be outdated is the truth of JavaScript world 😂. Love your videos. Don't think we would've been even 5% of the developer we are today without content creators like you. Hats off 🙏
@rk_nyra
@rk_nyra Жыл бұрын
💯💯💯
@PenguinjitsuX
@PenguinjitsuX 2 жыл бұрын
This video is freaking incredible! Anytime someone asks "what framework should I use", I can just point them to this. Thank you for taking the time to learn and explain so many frameworks, It makes it really easy to make the decision and is just really interesting to see too. One thing to note though, is that if you're looking for a software engineering job rather than just building a hobby project, react might be the way to go because many companies use it and will look for candidates with react experience.
@MrC0MPUT3R
@MrC0MPUT3R 2 жыл бұрын
I've used angular professionally since angularjs to develop and maintain multiple apps at multiple companies. Its opinionated structure is a lifesaver. It's easily my favorite framework.
@aqualinespirit90
@aqualinespirit90 2 жыл бұрын
Regarding the Vanilla JS, you can call the function to submit the form within the HTML tag, so you can see easily the functionality ( which you said cant be done ). Instead of form.submit, etc. You create a function that will be called in the html tag, so the code goes like this: function onSubmit(event) { event.preventDefault(); addTodo(input.value); input.value = ''; } Then in the form tag you simply put So, that means you can see clearly by looking at the html that form is doing something when submitted also, you dont have to querySelect the form anymore since you dont use it in the script, that saves you a few extra lines of code.
@BrotherPatrix
@BrotherPatrix 2 жыл бұрын
When I was watching the video and heard "There is no way to see if this form has an event listener attached to it...", your comment was my immediate reaction. Edit: Just so you guys know, I left a comment explaining what a lot of people seem to agree about his JavaScript presentation, not being fair while I explained my choice using my helper libraries with RxJS in the most maintainable way possible, without creating my own framework. Guess what, he deleted the comment! So I guess this channel is misrepresenting JavaScript or being a sellout for some frameworks. Was going to subscribe, but if he deletes people's opinion, then I'm just gonna select to not recommend this channel for me.
@noptin
@noptin 2 жыл бұрын
Doing it this way means you're adding your functions to the global scope which is not a good idea
@Meleeman011
@Meleeman011 2 жыл бұрын
Lol I told him to use a web component but this blows my answer out of the water nice dude
@mosesnandi
@mosesnandi 2 жыл бұрын
How about using onclick to call a function?
@noptin
@noptin 2 жыл бұрын
@@mosesnandi inawezekana but iko considered a bad practice
@pedroalonsoms
@pedroalonsoms 2 жыл бұрын
It would be nice if you apply this idea on mobile frameworks as well, like trying making a todo app in react native, flutter, ionic, native, etc.
@honor9lite1337
@honor9lite1337 2 жыл бұрын
Flutter all the way..
@asharkhan6714
@asharkhan6714 2 жыл бұрын
KMM soon
@Gameplayer55055
@Gameplayer55055 2 жыл бұрын
Actually i like react native because java is big scary idiotic slowpoke shit
@ashiksaleem360
@ashiksaleem360 2 жыл бұрын
@@Gameplayer55055 3 billion devices says otherwise
@salehmir9205
@salehmir9205 2 жыл бұрын
This comment needs more likes
@Kevin192291
@Kevin192291 2 жыл бұрын
I am really excited to learn Svelte, it will be my next thing to learn.
@adrianguntherkeedle6860
@adrianguntherkeedle6860 Жыл бұрын
I'm only 50 seconds in and I'm stupendously impressed with the quality and sheer magnitude of how helpful this will be. Choosing what framework to use completely froze me from making a choice in the beginning - Analysis paralysis. Whish I'd seen this sooner.
@keremardcl6759
@keremardcl6759 Жыл бұрын
I am only 5 words into your comment and really impressed with the way you use the language.
@Burncd
@Burncd 2 жыл бұрын
Love the video! Great comparison! I only have one different thing to say about the Vanilla approach. You could use a element and get the from there. Is still a shitty way but easier (I think) to understand. Still, I think I get why you took that approach Keep up the good work!
@fckngcheetah
@fckngcheetah 2 жыл бұрын
I personally love vue, but excited to hear your opinion!
@ccost
@ccost 2 жыл бұрын
you havent even watched it..
@fckngcheetah
@fckngcheetah 2 жыл бұрын
@@ccost yeah thats why i say "excited to hear your opinion" and not "i agree with you" :)
@SeadoooRider
@SeadoooRider 2 жыл бұрын
@@ccost 😂😂 true
@michaelpumo83
@michaelpumo83 2 жыл бұрын
Awesome video but for anyone wondering about Vue...he's using the older syntax for components. In Vue 3, you have a "hooks-like" API called the composition API which people more familiar with React may enjoy more. It's also very inspired by Svelte. You also do not need to write directives like v-on:submit. You can simply write @submit. And, you do not need to bind with v-bind:key="todo", you can simply do :key="todo" and omit the v-bind entirely. Just some little nice bits I thought I'd make people aware of.
@butterfly7562
@butterfly7562 2 жыл бұрын
Different design philosophy, these simplifications may be a mental burden for novices
@kirk1240
@kirk1240 2 жыл бұрын
Noticed that as well, vue 3 is better but its a bit fragmented and confusing with the multiple APIs
@shankar7435
@shankar7435 Жыл бұрын
Excellent info I was looking for so many months because of lack of clarity what exactly JS does and especially WHY in that way. This video explains it all. Thanks.
@cymonevo344
@cymonevo344 2 жыл бұрын
You save a lot of my time for trying and figuring it out all those JS frameworks. I think I will love react and svelte, also I don't really into web component after watching this video. Thanks. Great content as always!
@protochaos5331
@protochaos5331 2 жыл бұрын
Dude, I've come to love this channel on how it just gives you every tool you might need, and THEN teaches you how to pick one based on pros and cons A very concise and extensive guide for JS!
@Codethier
@Codethier 2 жыл бұрын
as someone who finds dealing frontend an absolute chore angular gets my vote, because at the end of the day all i have to deal with is angular, which is at least consistent
@sstream17
@sstream17 2 жыл бұрын
Maybe you find frontend a chore because you're using Angular 😂
@spacecat4474
@spacecat4474 2 жыл бұрын
Coming from React, I find Angular to be such a chore, especially when you wrap Ionic on top of it 😂
@edwinscharfe6917
@edwinscharfe6917 2 жыл бұрын
I completely agree. I used to work with Java, but decided to learn angular simply out of interest. Coming from the Backend, it's really amazing. TypeScript is the best thing to happen to JS in my opinion, and I really like the strict and logical way Angular apps are structured. Also, the fact that it comes with so many things like routing is nice, because I can just use what was intended and therefore works instead of having to make decisions at every point about what third party library to use. Yes, it's less freedom than with other frameworks, but more freedom of choice always comes with more freedom to fuck up as well, so that's something I can live with.
@borknagarchile
@borknagarchile 2 жыл бұрын
This is an amazing simple way to give an overview of all these libraries/frameworks out there
@rafasoaresms
@rafasoaresms Жыл бұрын
I understand you were going for the simplest approach for each framework, but I feel Vue could’ve benefited from at least a mention of the shorthand syntax (most experienced Vue developers will write :value vs v-bind:value and @submit vs v-on:submit) and , which brings it much closer to Svelte, by declaring state and methods as top-level variables and functions. Otherwise, great comparison!
@ryft_music
@ryft_music Жыл бұрын
Composition API is also nicer imo
@dkyo
@dkyo 2 жыл бұрын
I'm an old school developer and after years of polishing my own set of javascript tools, I find very difficult to adopt something game changing like React, but this Alpine looks great, easy to adopt. Thank you.
@holthuizenoemoet591
@holthuizenoemoet591 2 жыл бұрын
As a backend dev with litte js framework experience, the concept of alpine looks really nice
@rp2804
@rp2804 2 жыл бұрын
Yup
@ericofabriciogomes
@ericofabriciogomes 2 жыл бұрын
I’m with you
@senmingwu
@senmingwu 2 жыл бұрын
Why would having lightweight JS in HTML be interesting / relevant for a backend dev? Multiple front end components in one place?
@ruhnet
@ruhnet 2 жыл бұрын
@@senmingwu It's because we're often already very used to dealing with raw HTML, so just "adding on" a few things isn't so foreign as switching how we think about how the page is shown/delivered---i.e. messing with components/client side routes/virtual DOM/etc.
@senmingwu
@senmingwu 2 жыл бұрын
@@ruhnet Ohh, thank you!
@zurvey
@zurvey 2 жыл бұрын
What a STUNNINGLY good video! When you consider everything that could have been said about 10 different Javascript frameworks, it is borderline miraculous that you could make this video so short and helpful. VERY well done!
@p0r5ch3911
@p0r5ch3911 Жыл бұрын
I get that every framework looks more complicated when you only know JS, but when you work with them it makes your life so easy and is such a blessing. Stuff magically creates itself and all your values change when stuff happens and can be reused in you entire project. It speeds up development and is better readyble and maintainable. It can be really fun too.
@etherealicer
@etherealicer 5 ай бұрын
But at least in this video... another limitation might be that he doesn't know the basics. You can add onsubmit on the form with plain JS too (one of his biggest gripes with plane JS).
@DanSoloha
@DanSoloha 2 жыл бұрын
That "so this video will probably be outdated by the time you finish watching" actually made me lol
@frankkevy
@frankkevy 2 жыл бұрын
I just admire how talented you are. What a great and fun video to watch! I'm personally a React guy but I've never enjoyed learning about other framework that much, thank you!
@donlogan4031
@donlogan4031 2 жыл бұрын
every video from fireship is top notch. Something in the narration, presentation, make every topic captivating and useful.
@TechWaltMD
@TechWaltMD 2 жыл бұрын
Thank you for this video! As a newbie to webdev, this content helped me decide which framework to start with.
@alextheheck
@alextheheck 2 жыл бұрын
Great content as always. You have an ability to break topics down to the essentials in a way few other channels featuring JS/TS content do. The best part there obviously being the information density you manage to convey.
@RealSquidicus
@RealSquidicus 2 жыл бұрын
Just as a tip for solid, you shouldn't use `todos.map(...)` as it remaps the whole array when anything changes, if you use the component from solid it will actually only render items which update and leave the rest alone - stuff like that is what makes it so performant!
@fayaz2956
@fayaz2956 2 жыл бұрын
link please?
@System0Error0Message
@System0Error0Message Жыл бұрын
problem with web languages is how vague their data are. when you need to loop through something, an array is always faster than map. If you need to search for something, a map is always faster. If you need to loop through but add and remove elements on the whim, you want a list. but to web languages whenever you define an array, its a map.
@theRecoder0704
@theRecoder0704 Жыл бұрын
@@System0Error0Message this comment is not referring to maps/hashtables as a data type, this is about the map function that applies an operation to every element of an array
@aaronhenderson4566
@aaronhenderson4566 Жыл бұрын
This video is pure fire. Such a useful comparison and presented in a very compact efficient video.
@chrisanderson687
@chrisanderson687 Жыл бұрын
Svelte is just so clean and simple! I love it!
@StreamProjects
@StreamProjects 2 жыл бұрын
Final size? Great comparison. Despite tiny app, it would be good to compare the final size, to see just how heavy some of the frameworks are.
@SirMeowric
@SirMeowric 2 жыл бұрын
Lit works alongside other frameworks, which means it can integrate into an existing app and access a data store / cache. It's also great as a standalone framework. However, Stencil combines the compile and bundle steps together, which makes it only suitable for stand-alone elements. For a dedicated web app, there's no reason to consider Stencil over Lit. Custom elements also work great on their own for things that don't need data binding, like svg icons, and allows re-use between different applications regardless of framework.
@christopherderrell8470
@christopherderrell8470 2 жыл бұрын
100% agreement with this. Since their rebranding earlier this year, Lit has shown even more how capable it is of handling more complex applications on its own. I’d encourage every UI/UX developer to try it out.
@emonymph6911
@emonymph6911 2 жыл бұрын
How is Stencil and Lit different from React when it comes to creating custom elements? Why not just do it with react?
@christopherderrell8470
@christopherderrell8470 2 жыл бұрын
@@emonymph6911 It comes down to native support for me. Web Components, Shadow DOM APIs and are meant to be a native way for your browser to handle your own fit-for purpose functionality, and native is generally harder to break long-term (even if it's not initially easier to build). I only have Lit experience, and the way the tagged template literals work is very intuitive.
@GregorGonzalez
@GregorGonzalez 2 жыл бұрын
Finally! I needed this so much. This comparison helps a lot to relate to those js frameworks.
@ZeldriFR
@ZeldriFR Жыл бұрын
Note that in Vue 3 with the composition API, you can declare methods, reactive data without the export default ... Way more simple
@Aganar
@Aganar Жыл бұрын
Yeah, Vue 3 is awesome. :D
@l1nussimracing981
@l1nussimracing981 Жыл бұрын
oh didn't know that, thank you
@muhammadhassankiyani8953
@muhammadhassankiyani8953 Жыл бұрын
Wow, I just ditched Angular and jumped to Vue for this reason. NOT!
@finderofbears
@finderofbears Жыл бұрын
@@muhammadhassankiyani8953 no one asked
@TheRebel2014
@TheRebel2014 2 жыл бұрын
This has been fantastic for me. As an OPS person generally, this was a great overview to catch me up to work with our front end team. Thank you!
@TamskyIsHere
@TamskyIsHere 2 жыл бұрын
I'd love to learn and try VUE or angular, probably my next ones to learn by myself! By the way, your videos are amaizing, i'm not an english speaker but I still understand everything you say and as an ex-editor I can tell your videos have a looot of work behind them. Keep the work on! You're an inspiration
@Voidstroyer
@Voidstroyer 2 жыл бұрын
Considering he is one of the few people who speaks as quickly as he does on rather complicated subjects and you understand everything he says, I would say that you are an English speaker (even if English is not your mother language)
@nicejungle
@nicejungle 2 жыл бұрын
Thank you, that's exactly what I'm looking for ! For my current goals, Alpine is the winner
@kellybmackenzie
@kellybmackenzie Жыл бұрын
Alpine looks so neat!! Thank you for making this video, as a beginner it helped me a lot!! I love it!
@mfaizsyahmi
@mfaizsyahmi 2 жыл бұрын
I've been too scared to touch any of the frameworks, but now that you've shown the pros and cons of all the big ones, I'm swayed to go for Vue. Thanks!
@Bluepaccao
@Bluepaccao 2 жыл бұрын
Another thing to consider is what companies in your area are using, which may help you if you are developing to get a job.
@darter1990
@darter1990 2 жыл бұрын
First 5 minutes about VanillaJS are a MUST; I finally got the perfect answer when somebody says that modern front-end web development is easy and uselessly sophisticated. Thank you Jeff. React guy anyway. I love it.
@MarkConstable
@MarkConstable 2 жыл бұрын
Absolutely wonderful. Thank you for putting together this comparison.
@zb4238
@zb4238 2 жыл бұрын
Great way presenting the gist of different frameworks in a pinch but choosing one takes a lot more than a simple todo list implementation. When you make bigger projects with complex pages and have the requirement of supporting the client for at least 10 years while still updating and adding to the solution one doesn't just jump the next new framework. I know from experience picking anything outside React or Angular would be close to suicide or extremely risky for anything but some pet project. Vue is a runner up and could find a spot in the sun for one and done type of projects. All others I would give them another look in after 3-5 years no less.
@Grageth
@Grageth 2 жыл бұрын
That little "Use protection" easter egg was freaking priceless. We definitely don't need any more unwanted frameworks. Wrap it up boys and girls.
@handerson171
@handerson171 2 жыл бұрын
Great one as always Jeff!!! I used to be a big Vue fan but I got turned off by Vue 3's composition API. I went back to react for large apps but I definitely think svelte is the best. Vue 3's script setup just became stable and I'm looking forward to see it improve even more. You rock!!!
@samislam2746
@samislam2746 2 жыл бұрын
I was fanatic about using only vanilla javascript, so I ended up creating 3 frameworks, a typescript similar thing, a react similar thing and a MERN framework thing. Non of them completed till the end, but what I can tell you from my experience is that if you're just starting to learn, learn the vanilla and the abstract way of doing things until you reach to a point where you'll realise that you need some sort of code splitting or a dependent module to handle a particular functionality in your app. Later on, during the business, don't start by doing things from scratch, but use a framework instead, or you'll end up creating your own framework at the end as what fireship said.
@un_defined
@un_defined 2 ай бұрын
why should I waste time to understand obvious thing, that it's easier to use jsx instead of handwriting
@venkat2002
@venkat2002 2 жыл бұрын
I admire your wit and editing skills, I will hire you specifically for that. 👏👏
@MansuetudoDei
@MansuetudoDei 2 жыл бұрын
That was AWESOME! On a side note - are you planning a merch line for your channel? Would gladly buy a T-shirt to support you :) Thank you so much for everything you do for the community!
@valjura552
@valjura552 2 жыл бұрын
This was awesome! I would have loved to see Ember included as well - I know it's not 'cool' anymore but its still got a lot of die-hard users out there!
@DhakshinDooliv
@DhakshinDooliv 2 жыл бұрын
I am one of them. Ember is the best! Ignoring Ember in a JS framework comparison is like ignoring Rails in a Ruby framework comparison. Ember is the most productive front-end framework IMHO. 👆ALL THE GOOD IDEAS HERE WILL END UP IN EMBER. ITS JUST A MATTER OF TIME. kzbin.info/www/bejne/eafdXmyZmMufgbM
@mamiayadi4850
@mamiayadi4850 2 жыл бұрын
@@DhakshinDooliv no !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
@carldrogo9492
@carldrogo9492 2 жыл бұрын
Die hard users? You mean hipsters.
@ChaoticNeutralMatt
@ChaoticNeutralMatt 2 жыл бұрын
@@carldrogo9492 lmao good jest.
@communityband1
@communityband1 2 жыл бұрын
The framework I want, which I don't think exists, is one which takes raw HTML/CSS files and compiles them into TypeScript class modules that expose methods and properties for operating on the elements that I mark as significant. Building an application would then be a code-centric process, similar to vanilla JS dev, but without the mess of "hooking up" the UI pieces to the code. It could be made fancier by adding annotation features that instruct the compiler in how to set up the classes, such as variable binding, or perhaps marking a as a container for SomeComponent instances which would then convert to a strongly typed Array property on the class. The actual script code for the components wouldn't be a part of the components at all. Instead it would be up to developers to design their applications in the way that makes most sense. The UI components would just be composable pieces you instantiate and operate on. For example, you would conceivably have a ToDo class module that has a ui property of type ToDoUI which you assign an instance of this generated class. You could still keep things organized, but the application structure wouldn't be guided by the UI. Reusability should be high as well since the application logic code would be completely decoupled from the generated UI pieces. If anybody knows of a framework like this, I'd love to check it out!
@Chob_PT
@Chob_PT 3 ай бұрын
Trying to grow the skills form PHP + jQuery to something more 2023, this video really helped cast a net and see what's the approach that most "Clicks" for that next step. Personally it'll be Alpine. And thanks for the video!
@Joachimbj
@Joachimbj 2 жыл бұрын
In vue 3, the code would have been more or less identical with svelte (except for the html). I guess they're doing something right since less code usually means less bugs 🐛
@LetrixAR
@LetrixAR 2 жыл бұрын
Composition API
@Aedaeum
@Aedaeum 2 жыл бұрын
This is exactly what I was thinking, I just finished converting all my components over to script setup syntax and it's so easy to prototype new components and work on old ones. I have to wonder though...did Evan You take inspiration from Svelte or was it a happy coincidence? lol
@solvedfyi
@solvedfyi 2 жыл бұрын
@@Aedaeum He did. He always makes his inspirations clear. When Vue 3 Composition API was announced, the RFC included a comparison to Svelte. *After* that he came up with and it was clearly an answer to Svelte
@orkhepaj
@orkhepaj 2 жыл бұрын
true 0 code = no bugs
@SeanClarkeMusic
@SeanClarkeMusic 2 жыл бұрын
As soon as I discovered Svelte I dropped everything else for all new projects (where I have a choice)
@andreasnulein782
@andreasnulein782 2 жыл бұрын
Same
@Rituraj-vw2rk
@Rituraj-vw2rk 2 жыл бұрын
Same
@anupjoseph7368
@anupjoseph7368 2 жыл бұрын
Same
@SandwichMitGurke
@SandwichMitGurke 2 жыл бұрын
Same
@alexiglesias_me
@alexiglesias_me 2 жыл бұрын
Same
@nikthough3110
@nikthough3110 Жыл бұрын
Thank you so much for this. Now off to finishing with the development of my programming language.
@xbsidesx
@xbsidesx Жыл бұрын
Great video! The only thing is that when the app first load, if you put a todo inside a localStorage without checking if it's already there, you'll be re-adding stuff to your localStorage, duplicating things in every reload. Or maybe you should just delete the todos that were there after getting them so you don't need to re-check every time (at cost of performance, but not the focus here).That little thing distracted me the whole video. Other than that, really great stuff. Thank you for sharing it!
@yuvadius
@yuvadius 2 жыл бұрын
You don't have to add an event listener to the form in that way when working in Vanilla. You can just use the onSubmit attribute and then you don't have to search for the event listener.
@marc_joan
@marc_joan 2 жыл бұрын
The idea is to simulate what js frameworks do, and state management is one of them, so that’s why he made it like that
@flipsnap
@flipsnap Жыл бұрын
You also just add an id to the form which is descriptive. Personally, the vanilla javascript is the best in this video.
@sharpfang
@sharpfang Жыл бұрын
@@marc_joan Maybe, but IMO the main idea is to build the app that does the assigned task in the best way available in given environment. And ignoring convenient features of the environment and doing things roundabout way just to simulate other environments does a disservice to presenting that environment. If you have a wide collection of hammers and nails, smacking a screw with the handle of a screwdriver will sure prove the screw is a lousy nail and the screwdriver is a lousy hammer...
@brunoais
@brunoais Жыл бұрын
​@@marc_joan Why simulate how frameworks do when showing how to do with JS directly? Doesn't make sense. He's comparing how to achieve with different means. He's not explaining how frameworks execute the work. You can even notice that he doesn't really solve most of his complaints. Sometimes even, he says a framework is OK, even though they have the exact same problem that he complaints about vanilla JS: 1:56: If it's so, then just use the on* attributes 2:54: Why is he doing it like that?!?! There's so easy ways for the li tag. If he doesn't like createElement, he can use tags 3:05: He never shown a way to keep it coupled. As in: the HTML is the source of truth etc... Even though it's usually called "Vanilla js" it doesn't mean "no libraries allowed". It just means the syntax and such is by using javascript and then DOM. With or without a library to assist with the process.
@brunoais
@brunoais Жыл бұрын
@@flipsnap I think his vanilla one is done in a way that shows he's either being deceptive or he just doesn't know (potentially out of practice) how to leverage the HTML and the DOM framework.
@escobarcampos
@escobarcampos 2 жыл бұрын
Great work in this video! I've used Vue quite extensively, and now I'm mixing Stimulus (mostly backend developer here). Would love to see Stimulus compared to these. What impressed me about it is that is very useful to migrate legacy apps and you can "mix" it with other JS frameworks
@agl1925
@agl1925 11 ай бұрын
Hehe - just say you still love Ruby on Rails (still awesome for back-end) and developer happiness.
@lako2023
@lako2023 2 жыл бұрын
Congrats, 2021! You've splintered the market into many different pieces. It's so crazy that every couple of months some new framework/tech comes along that wants to reinvent the wheel and 99% of the projects that are being built with it simply do not require it / do nothing that could not have been done before. Often new frameworks also start with a promise ("smaller", "faster", "less clutter") but end up exactly like the previous frameworks since down the road people realize how much is actually missing in the initial stage. My projects use modern but vanilla JS on a traditional stack and I run websites with many millions of pages + users that load usually quicker than many of those websites (usually nothing more than basic playgrounds) built on React, Vue etc. Oh and I don't need new need developers that dabble in yet another new framework all the time.
@hashtagPoundsign
@hashtagPoundsign Жыл бұрын
I am slowly switching my frame of mind from "I'll do everything myself from scratch, because I am a control freak" to "Ain't nobody got time for that!"
@rahulc0dy
@rahulc0dy 2 жыл бұрын
Folks out there finding it difficult to develop in a single framework. This guy out of somewhere built it in 10 frameworks. 😂😂😂😂. Dude seriously how much time did this video take. Absolutely loved it. ❤️❤️❤️❤️
@orkhepaj
@orkhepaj 2 жыл бұрын
well this is very basic stuff
@goeland4585
@goeland4585 2 жыл бұрын
I don't want to sound uuh... But this was like the readme page of each of those githubs. Maybe second page of google level
@jeromenancyfr
@jeromenancyfr 2 жыл бұрын
@@goeland4585 It is not that hard on paper, but honestly doing it 10 times while explaining everything is nerve cracking.
@bluex217
@bluex217 2 жыл бұрын
Most of us don't have the time to learn 10 frameworks, basic or not..
@adamfarmer7665
@adamfarmer7665 2 жыл бұрын
Svelte and Solid looks like the bests.
@DioneMohammed
@DioneMohammed 2 жыл бұрын
Adam, you use React right ? 😏
@butterfly7562
@butterfly7562 2 жыл бұрын
I think so too, it feels like an evolution Vue -> Svelte React -> Solid
@mrsurver1890
@mrsurver1890 2 жыл бұрын
Pardon me, but I love your photo profile 😍
@AbhishekBM
@AbhishekBM 2 жыл бұрын
@@mrsurver1890 beluga?
@PhilipAlexanderHassialis
@PhilipAlexanderHassialis 2 жыл бұрын
@@butterfly7562 My thoughts exactly. When I was taking a quick course on Svelte my first impression was "wow, a Vue that works". Also, Solid looks amazing. These 2 guys should get more attention from the dev community, they are really amazing takes on their predecessors.
@saraili3971
@saraili3971 Жыл бұрын
It's so needed for beginner who has been overwhelmed by so many choices of frontend frameworks. I wish I had seen this video earlier.
@DontFollowZim
@DontFollowZim 2 жыл бұрын
One of the things I love AND hate about Vue is they're evolving a lot. They saw Reacts hooks, liked them, and made the Composition API. They saw how much people loved the way Svelte was doing things, so they added which significantly simplified things when using the Composition API and now they are even more similar than before. But there are caveats: lots of evolution means either updating a lot of old code, or falling behind. We've now got Pinia instead of Vuex and Vite instead of Vue CLI and Webpack... There has been a lot to keep up with in the last year.
@josephcoulam3326
@josephcoulam3326 Жыл бұрын
Nuxt's state system is a little nicer to work with than Vue 3's Pinia, and you can dev out an SPA too. The folder structure is nicer, and they have auto imports. Highly recommend moving towards nuxt and sacking Vue3 off altogether.
@KemalAhmedIsAwesome
@KemalAhmedIsAwesome Жыл бұрын
Composition API in my experience is a distraction to be friendly to developers coming from react. Hooks is great for react but vue lifecycle handlers is already more robust
@explosiveboner3494
@explosiveboner3494 Жыл бұрын
As much as I freakin' love the Composition API, I agree 100% with anything you said. It's always good when a framework sees something nice from somewhere else and got "inspired" (read: copied). BUT, Vue took it a little too much by literally rewriting the framework and making everything that preceded it obsolete. We have a VERY different way to init an app between Vue 2 and 3, we have so many libraries that still not yet supported in Vue 3, Vuetify 3 was so late to the party (still love it though), and many other problems. It's honestly very suprising for me to feel the DX difference between 2 and 3. The tooling, semantics, plugins, etc. I love Pinia, I love Vite, I love Vue 3 in general, I still think Composition API is a right choice though. It's very refreshing after a headache of React Hooks, callbacks, memo, effects, and that other stuff. But yeah, as a framework that's already considered mature in 2020, they evolved a bit too much and too fast.
@3ull
@3ull 11 ай бұрын
I believe vue.js was born out of doing things better or right from studying react and angular. I see this continuing which is a good thing. Although it won’t be on the cutting edge, it’s done well and is close.
@EidosGaming
@EidosGaming 2 жыл бұрын
I really liked Angular for having everything out of the box, as well as the "forced" project structure since I'm bad at architectural decisions. I really have an eye on Svelte and Solid tho! I'm obsessed with performances, and I love that these frameworks have compilers and no runtime
@SandwichMitGurke
@SandwichMitGurke 2 жыл бұрын
yes svelte is a lot of fun to work with
@OzzyTheGiant
@OzzyTheGiant 2 жыл бұрын
I like Angular structure but I hate the insane amount of files it generates for one component, so that's why I prefer Vue instead.
@SirDamatoIII
@SirDamatoIII 2 жыл бұрын
Working with Angular daily, and Vue for my alt projects. I have to say I prefer Vue, the footprint for Angular is massive, and although fine for an app, it’s just not a catch all for web projects. Vue is flexible and has a good sized community, it’s also independent so no corporate overlord behind it. It’s also way easier to get going with it, as the learning curve is way lower.
@EidosGaming
@EidosGaming 2 жыл бұрын
@@OzzyTheGiant I agree, that's also a reason why Svelte catches my eye. You put everything in one file while separating html, css and js like angular
@John_dg
@John_dg 2 жыл бұрын
Angular is for real work, others are for fun. A big and long project using react or others will be impossible to manage on medium/long term. Angular was built for that, ive been working on enterprise projects with Angular for about 4 years and will keep doing so until the framework dies.
@cdrini
@cdrini 2 жыл бұрын
Fantastic summary! Really impressive you were able to go through that many frameworks! One BIG difference I've felt between Lit and Vue (which I use regularly), which is indicative of a bigger paradigm between all these frameworks, is that Vue supports full reactivity whereas Lit only support reactive rendering. More specifically, this means that there's no way in Lit to create a reactive variable that depends on other reactive variables. You have to manually create hooks that update other variables when one changes. In Vue, you can with the "computed" field; it detects reactive variable dependencies and keeps things up-to-date. Svelte is the same as Vue, and React is the same as Lit. Extending your sample app to include a count of the total number of todo items would showcase this difference. When I was mainly working in Vue, I thought all these frameworks were likely very similar, but in reality this difference is actually kind of important to me. Vue behaves like one giant spreadsheet (which I love), and the code is much less brittle when I don't have to manually define the dependency graph in the code.
@amcmillion3
@amcmillion3 2 жыл бұрын
I've been using React for awhile and it is great but I have been playing with Svelte recently and I have to say it is absolutely fantastic.
@ibgib
@ibgib Жыл бұрын
Great video. Appreciate the 💙 thrown in for Ionic!
@michaeleaster1815
@michaeleaster1815 2 жыл бұрын
Wonderful video that no doubt _did_ take a ton of effort: thank you! My current favourite is Angular. I like opinionated frameworks and the reactive aspect (with RxJS) is incredibly powerful. That said, I have only dabbled with some other frameworks (e.g. React, Svelte).
@curiouslycory
@curiouslycory 2 жыл бұрын
Thanks for another great video. As a veteran developer your content really helps me keep up to date on the newest concepts without spending hours doing tutorials. I really appreciate it!
@lautarogarcia8038
@lautarogarcia8038 2 жыл бұрын
As an Angular developer I tried really hard to switch to react but find it frustrating every time. I come from an OOP background in java that's why. I understand why pure js developers would prefer react. Also, there is a lot of job competition in react, whereas angular is not that common so thats an advantage if you are good at it.
@johnkucharsky6927
@johnkucharsky6927 2 жыл бұрын
What if you are good at react?
@allparis8067
@allparis8067 4 ай бұрын
should I go for vue js or Angular?I have beginner skills in both.My intentions are higher paid/ easy to get type of jobs.
@vibovitold
@vibovitold 3 ай бұрын
I'm an Android dev with a strong OOP background (C# before my Android days, then obviously Java and finally Kotlin). I used React in the form of React Native, for cross-platform development. I believe the core idea is the same. I like the concept of state reducers (it had been known as the MVI pattern on Android, or Model-View-Intent), and the functional approach. I think I understand the architecture. I've designed one real-life, commercial app using that pattern (in Kotlin). However, I just don't particularly like how the specifics of it are implemented in React. It felt very clunky and non-intuitive to me. That could be me and insufficient experience, but that was my impression. I also think that JavaScript simply isn't a great language to begin with, and never has been. Not unlike PHP back in the day - it's enormously popular, but It doesn't owe this popularity to some inherent design qualities. It's other factors that have caused it. (Yes I know there's TypeScript, which addresses a lot of JS shortcomings.)
@Eugene2044
@Eugene2044 Жыл бұрын
In Alpine you can only use x-for inside tag, it'll not work with any other tag according to the documentation
@JR-mk6ow
@JR-mk6ow 2 жыл бұрын
6:08 "personally, I love the simplicity of that" I swear I never saw the App.js file with less that 60 lines of code/tags for State Listeners, ModalManagers, Errors Handlers, redux, etc etc
@marcgentner1322
@marcgentner1322 2 жыл бұрын
Absolutely love your vids! Keep it going you're 🔥
@thatsalot3577
@thatsalot3577 Жыл бұрын
I find react, very flexible to work with, especially with the hooks, JSX and styled components, you can pretty much do anything you already knew in JavaScript.
@ahmetertugrulkaya7134
@ahmetertugrulkaya7134 Жыл бұрын
Thanks for the video, im a backend leaning student that wants to go full-stack so thanks for comparing different frontend frameworks. All said alpine sounds easy enough to learn and say "hey, im full-stack"
@yourix2
@yourix2 2 жыл бұрын
I prefer Vanilla JS however my JS projects are pretty simple like making banners and maybe making an animation intro for a website with GreenSock. However when it comes to complex application makes a whole lot of sense to use a framework. Great video!
@tonipejic2645
@tonipejic2645 2 жыл бұрын
I like svelte the best so far, but solid looks interesting too, I might try it
@suvetar
@suvetar Жыл бұрын
Some work you put in here my Dude! Thank you!
@eduardboiko7219
@eduardboiko7219 Жыл бұрын
Really cool video, thank you, at last I can get first look at all the frameworks I had no chance to use
@Qrzychu92
@Qrzychu92 2 жыл бұрын
Great video! I would love similar comparison with non-JS frameworks: Elm, SAFE stack (F# compiled to JS, but you can share code with F# backend), Blazor (WebAssembly) and I'm sure you would find more :)
@KnorxThieus
@KnorxThieus 2 жыл бұрын
+Flutter(Dart)
@zade69420
@zade69420 2 жыл бұрын
Svelte is definitely my favourite framework to use, but i still often en up going with React because the libraries that I need don't have Svelte-compatible versions or don't work very well with Svelte
@punkweb
@punkweb Жыл бұрын
Mithril, when running it through a build tool such as parcel as opposed to just including the script tag is severely underrated. Especially when you set it up to use jsx rather than hyperscript. I definitely prefer it over React.
@durgaprasady8044
@durgaprasady8044 2 жыл бұрын
+Flexibility -Decision Fatigue 👍 Thanks for your efforts ;)
I built 10 web apps... with 10 different languages
14:23
Fireship
Рет қаралды 1,4 МЛН
God-Tier Developer Roadmap
16:42
Fireship
Рет қаралды 6 МЛН
Osman Kalyoncu Sonu Üzücü Saddest Videos Engine Dream 18 #shorts
00:29
Osman Kalyoncu
Рет қаралды 13 МЛН
YOU WILL GET 100 STARR DROPS! #100StarrDrops
01:43
Brawl Stars
Рет қаралды 21 МЛН
Why is this number everywhere?
23:51
Veritasium
Рет қаралды 1,4 МЛН
I tried 10 code editors
10:28
Fireship
Рет қаралды 2,7 МЛН
You probably won’t survive 2024... Top 10 Tech Trends
8:56
Fireship
Рет қаралды 1,6 МЛН
JavaScript Framework Tier List
40:57
Theo - t3․gg
Рет қаралды 229 М.
SEO for Developers in 100 Seconds
11:52
Fireship
Рет қаралды 581 М.
How to OVER Engineer a Website // What is a Tech Stack?
11:20
Fireship
Рет қаралды 2,2 МЛН
How to get rich as a solo software developer - The Ultimate Guide
8:51
Angular vs React: which should you choose?
6:26
Kodaps Academy
Рет қаралды 99 М.
Vue.js: The Documentary
34:45
Honeypot
Рет қаралды 1,5 МЛН
React VS Svelte...10 Examples
8:35
Beyond Fireship
Рет қаралды 485 М.
😳Dyson, ЧТО С ЛИЦОМ?🤡
0:36
Demin's Lounge
Рет қаралды 1,2 МЛН
Как исправить!? #tools #usa #энерголикбез #секрет
0:54
Александр Мальков
Рет қаралды 597 М.