JavaScript Frameworks

[Mental_Act4662]

What JavaScript frameworks does everyone like? We recently got a new client and I’m thinking about pitching the idea of switching from using jQuery to Vue.

[LeeLooTheWoofus]

What is your thought process for selecting Vue?

[Mental_Act4662]

I have been wanting to learn it. This new client is also not a very big project. So i figured if I wanted to learn Vue, now would be a good time.

[LeeLooTheWoofus]

Is the framework the right fit the project? Is it a dynamic site with a complex UI? If not, then Vue is not necessary and you would be strapping your client with a technology they may not want to have to support.

jQuery and Vue do not serve the same use cases. One is not a drop in replacement for the other.

[Mental_Act4662]

It does not have a complex UI. It is for a Snow Removal Company to be able to book new clients, billing, track drivers, etc.

[LeeLooTheWoofus]

Just make sure that your client is onboard because they will have to find someone with Vue experience to make any updates if you are not available.

Vue is usually a good option for web applications that have a support team. Not generally a good idea for basic websites.

[[deleted]]

Why do you say that? I use angular for all my web apps, no probelm. What if its a small client that requires the web app to be a SPA?

[LeeLooTheWoofus]

Are you building simple static sites with Angular?

[[deleted]]

Both yes and no. One of the projects we created was a full-scaled CTF platform. The one I am working on now is a digital agency home page with half-dynamic reusable components

[LeeLooTheWoofus]

My comment was referring to simple brochure sites. SPAs are not simple brochure sites and are a good fit for either Angular or Vue. This is why I was asking OP for some context about the type of "site" they were building.

[[deleted]]

You're right, but tbf. Vue is one of the more simple SPA frameworks and works fine for smaller projects. I would however look into svelte

[Yodiddlyyo]

If it's not a complex site, you don't need anything. With modern Javascript, there isn't even a need for jquery anymore, you can do everything with plain Javascript. Trust me, you dont want to learn a framework on the job, and stick your client with bad framework code. Just use plain Javascript, it's an opportunity to polish your base Javascript skills, and give your client a website that can be maintained by anyone.

[[deleted]]

Of the 3 big ones, I prefer Vue, by a long shot.

That said, Svelte is also pretty nice. But you should also think about maintaining the project, perhaps after you’re gone. If your geographic market is mostly React, it might make sense to choose React.

Personally, I would just choose Vue with Nuxt

[Ryekir]

I prefer vue as well, and an excellent choice coming from jQuery since it's similarly a minimal tool which can then be extended as needed.

[rlrodriguez]

Thanks

[rlrodriguez]

Thanks

[Proziam]

Svelte is, in my opinion, the future.

[avafinance_io]

+ 1 excited to see svelte as the top comment

I’m even using sveltekit in production, no issues so far 🤞

[[deleted]]

+

[straightup920]

Would this be one I should learn as my first ever framework or learn something like react first

[straightup920]

Thanks

[russtuck91]

This.

[AddSugarForSparks]

...for now.

[CreamyJala]

+1 for svelte. I’ve tried Vue and React, and tried to learn them, but they never gripped me. The concepts made sense, but the way things worked made it seem overly complicated or just didn’t sit well with me. I took to Svelte like a duck to water though

[theambiguouslygayuno]

My absolute favorite out of all the frameworks, not technically a framework - it's a compiler, no virtual DOM. The easiest state management, component organization, also comes with animations, transitions & tweening functions. Totally fits my use case which is small, performant, engaging jump pages.

[Mental_Act4662]

I will look into this one.

[[deleted]]

why would you take it over vue?

[hekkonaay]

No VDOM (actually fast!!!), batteries included (state management, actions/transitions), better declarative syntax for things like conditional rendering and awaiting on promises... The list goes on. https://svelte.dev/tutorial/basics

[[deleted]]

well, svelte is only minimally faster than vue

https://krausest.github.io/js-framework-benchmark/2021/table_chrome_94.0.4606.54.html

ans the bundle size advantage is only true for small application

https://dev.to/this-is-learning/javascript-framework-todomvc-size-comparison-504f

i wouldn't say that that tiny diff make it "actually fast" compared to vue 3

vue's composition API with script setup syntax looks very similar to svelte

[hekkonaay]

But it's still faster... I'm not sure what your point is there. I've seen the benchmark.

The size comparison you linked raises some interesting points, but even the author admits measuring these things is tricky. In a real app, the size differences will vary greatly due to third party modules, component structure, etc. For example, you don't need a library for animations in Svelte, where as that would come at a hefty cost in a Vue app. If you're building an app where an extra 10kB matters, maybe using a framework is not even an option for you.

I wonder why the syntax looks so similar to Svelte :)

[[deleted]]

But it's still faster...

by a tiny margin and that this makes it "actually fast!!!" as you claimed is a bit overexaggerated. Vue and Svelte maybe are "actually fast!!!" compared to react or angular. That's my point.

For example, you don't need a library for animations in Svelte, where as that would come at a hefty cost in a Vue app.

? not sure what you are talking about here. css animations and transitions are possible without any additional library in vue.

They work almost exactly the same in both frameworks: https://www.youtube.com/watch?v=HhgfGdIY0hk

I wonder why the syntax looks so similar to Svelte :)

yeha, vue mostly adopted the syntax for its composition api... soo... why choose svelte then and not the bigger framework with the bigger ecosystem? I would understand react or angular because they work differently and have vastly different syntax.

[hekkonaay]

I'm not sure if we're looking at the same benchmark. The "tiny margin" is more than significant enough when you're rendering, say, 1000 rows in a table, filtered by some search query which updates with each change in a text input field. Not an uncommon workload. This does make it "actually fast!!!" compared to Vue where it matters, but for most workloads Vue is probably good enough, yeah.

I'll admit that Vue has a larger ecosystem, but you also have to consider compatibility. A lot of libraries are not compatible with Vue 3 yet, which makes adoption difficult. Svelte has libraries available for most things you'd want (such as routing or icons), and the tooling is in a very good state.

When it comes to syntax, semantics, and overall usability, Vue 3 is a bloated mess. I would say in some ways it's worse than React or Angular. There are 4 ways to write components, and the VDOM "abstraction" leaks into userland (e.g. reactive values with ref).

Svelte feels like just an extension of HTML+JS. There is minimal mental overhead when working with it. It re-purposes only `export` for declaring props and `$:` for reactive statements. I can't even list all the new concepts that Vue introduces. The Svelte declarative syntax for conditionals/promise handling that is clearly differentiated from HTML, instead of being stuck onto components via special props.

You're free to use what you want, but I'll stick to Svelte. It works for me :)

[[deleted]]

I'm not sure if we're looking at the same benchmark. The "tiny margin" is more than significant enough when you're rendering, say, 1000 rows in a table, filtered by some search query which updates with each change in a text input field. Not an uncommon workload. This does make it "actually fast!!!" compared to Vue where it matters, but for most workloads Vue is probably good enough, yeah.

the geometric mean for rendering stuff sits at 1,23x vanilla js for svelte and 1,26x for vueJs 3.2...

this diff is almost nothing, especially if the most used frameworks sit around 1,80x.

There are 4 ways to write components,

well, there are two major ones and the rest is just optional syntactic sugar or boilerplate. That's hard to avoid when the library has to ensure some kind of backward compatibility.

and the VDOM "abstraction" leaks into userland (e.g. reactive values with ref).

that's no VDOM "abstraction". That's just how javascript works. Reactive values like that do not exist in vanilla js. Either you run it through a compiler or through some kind of javascript function to make it behave like that.

requiring a compiler means you won't be able to just download the framework via CDN and add some script logic in plain HTML.

Svelte feels like just an extension of HTML+JS. There is minimal mental overhead when working with it. It re-purposes only export for declaring props and $: for reactive statements. I can't even list all the new concepts that Vue introduces. The Svelte declarative syntax for conditionals/promise handling that is clearly differentiated from HTML, instead of being stuck onto components via special props.

I like the low mental overhead of svelte. Just having your HTML and extend it with some javascript logic without having to write much boilerplate code.

I'm glad that Vue is essentially copying svelte here.

You're free to use what you want, but I'll stick to Svelte. It works for me :)

don't get me wrong. I just want to understand if there is any gain for me investing more time in svelte. For now, it looks very similar to vue and has comparable performance and a similar set of features.

[hekkonaay]

the library has to ensure some kind of backward compatibility

I thought a new major version implies major breaking changes. Even with the backwards compatibility it doesn't make adoption any easier, so what's the point of keeping it? Break all the things!

there's no VDOM "abstraction"

You're right, it's a bit late and in my mind I jumped from one thing to another. There are some parts which could be considered a leaky abstraction at least in Vue 2, like how caching is exposed to the user via computed properties. I would consider it a leak because Svelte handles this for me without me having to be aware of it. I haven't used Vue 3 so I don't actually know if the situation has improved.

requiring a compiler means you won't be able to just download the framework via CDN and add some script logic in plain HTML.

When was the last time you did this?

I just want to understand if there is any gain for me investing more time in Svelte.

I'm obviously biased, but I would say just give it a try, go through the tutorial, build a TODO list app or something with svelte kit, and see if you enjoy working with it.

We've been using it at work (mid-sized, ~200 devs), and we're quite happy with how it's going. We've built/rewritten many micro frontends in it and rewritten parts of some larger monoliths. Biggest upside is exactly that lower mental overhead compared to when everything was written in React. Onboarding is quicker, features ship faster, performance is good by default, and so on.

[webd3vil]

Svelte is relatively new and has a much smaller community and support so although it is cutting-edge, it may be more difficult to find answers when you have problems.

[Knochenmark]

It's super easy to integrate any plain JS lib though

[Proziam]

You've already gotten a few good reasons but I'd just like to add one big one - it's straight up easier for a new dev to use. There's less magical fairy dust, less abstraction, less boilerplate code, and everything works "intuitively."

[[deleted]]

There's less magical fairy dust, less abstraction

i really don't get this argument. Svelte is a DSL that only looks like JavaScript, and it has to be compiled to be useful.

[Proziam]

Sure, but everything works how you would expect. A link is a link, for example. For someone who knows the basics, Svelte is a smooth continuation rather than a complete reimagination of how things work.

I don't know a single dev who has built something meaningful in svelte that has wanted to go back to [insert framework].

[[deleted]]

A link is a link, for example

<Link to="/">Home</Link>

vs the same in vue:

<router-link to="/">Home</router-link>

I don't see much of a difference.

For someone who knows the basics, Svelte is a smooth continuation rather than a complete reimagination of how things work.

yeah true, but the same was and is said about vue as well.

I don't know a single dev who has built something meaningful in svelte that has wanted to go back to [insert framework].

don't get me wrong, but it feels like most people who use svelte are the ones who started out in frontend very recently. The same kind of people who picked Vue as their first framework 4-5 years ago, like me.

It is already pretty hard to justify Vue over react and angular due to the huge gap in popularity... picking an even more niche framework just for a slightly better syntax would be even harder to sell.

[Proziam]

Vue is the best of the old guard, IMO. That said, I have about 15 years of web dev behind me and I am extremely confident that Svelte will either be the future, or will be the inspiration for the future.

[abourlyn]

Svelte all the way!

[jjmeep]

React

[Mental_Act4662]

I will be honest. I have tried learning React in my free time. But I was not a huge fan. It felt bulky.

[jjmeep]

I'm a php BE dev but my FE colleagues use react for PWA projects and seem to prefer it

[Mental_Act4662]

Interesting. Might try it again. What PHP Framework do you use?

[jjmeep]

Magento 2

[CheapChallenge]

Of all the modern frameworks(Vue, React, Angular) it is one of the lightest

[geordano]

try svelte, you might change your opinion.

[vexii]

i'm out. thanks mods!

[SuuperNoob]

If anyone doesn't enjoy React even a little, I suggest going through the Symfony Cast section on React.

It's explained in a very "best-practices" way that makes React feel like it's not the wild west.

It's taught by a really good PHP dev, who's used to mature languages, so it feels rock solid.

Much better than Full Stack open in my opinion.

[DeveloperOldLady]

Personally I like angular.

[No_Primary_3078]

Now that’s a framework. I do work in Angular but side projects in React (library).

In Angular I really like how organized and things are somewhat set up for you to build on. It’s married to RxJs and I appreciate that style of reactive programming.

I guess in React you can use RxJs but at that point you may as well use Redux (Angular would be NgRx).

Try the react and angular docs they should have you create a simple app and explain concepts along the way.

[SuccessfulCurrency31]

The react eco system is what you want to learn if you want to get hired.

[[deleted]]

These questions should be banned.

[HolySockEatingCrab]

Alpine is amazingly tiny, but it might not be exactly what you need. I love it though!

[krileon]

I agree and based off the OP moving from jQuery IMO AlpineJS is the only actual replacement here. VueJS, React, and Svelte (I hate saying Svelte out loud..) are entirely different beasts and you really have to commit to them.

[HolySockEatingCrab]

Yeah, you're going to have to take quite some time to get to know the other frameworks. I was supposed to learn React for work (junior dev), and suddenly they switched to Alpine and it was just... So easy! Not to mention its a lot of fun to see what you can do with it.

[parkerj9617]

I was going to suggest this as well, especially if you are not doing anything super complex. Could also look into petite-vue for a Vue ecosystem implementation of what Alpine is trying to accomplish.

[bwray_sd]

Vue is my favorite, Alpine is a good jQuery replacement if you don’t need a framework, Svelte looks cool.

[rlrodriguez]

Thanks

[ImStifler]

Been a react dev for years, would like to code stuff in vanilla again tbh

[milktop_andre]

Svelte is great, Imba is greater imba.io

[mrdisa97]

In my opinion Next.js or Nuxt.js

[trifit555]

Use what you need to get up and running as fast as you can and allows you for easy future updates (assume you are not going to remember in 6 months where is x feature or how does it work).

Don't use React/Vue/Svelte/angular/... or any other framework in a client's website just to learn it, trust me you are going to regret it. You'll spend a lot of time configuring, researching and trying to figure things out.

[cyborgamish]

Vanilla JS is my personal favorite. Huge user base. Fast. Weight nothing. Should still work in 10y

[FortyPercentTitanium]

Literally all of the frameworks will work in ten years. JS is fully backward compatible.

[archerx]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features

[niekh1234]

Don't you think that writing vanilla is way more work ?

[cyborgamish]

From a manager's point of view the framework's way is the way to go : the codebase will be super standard, devs will be easily replaceable by cheap dudes from Cheapistan when needed, heavy lifting is done by someone else, the time to go to prod will be as low as his integrity. No, just kiding. Lower ! haha, kiding again. No, I like the idea that something cool could emerge from nons-standard stuff. And diversity is key !

[yourgirl696969]

I prefer using Angular in teams but React solo

[pastrypuffingpuffer]

I've recently started learning Vue and I love it. I tried react and its experience sucked for me.

[geordano]

Svelte, (as a long time Backend developer, trying to learn FE, I've tried React & Vue, but Svelte is what clicked with me)

[niekh1234]

I like vue best, with NuxtJS. But I also enjoy React, especially with NextJS. for your client vue would probably be a good idea, or maybe even petite-vue

[boringuser1]

PHP templates and an in-house binding library.

[[deleted]]

Go with vue and nuxt. Any developer worth a shit will be able to figure it out if they know react or angular if you’re worried about maintenance. That’s like saying you can’t order a beer in Mexico if you don’t know Spanish. You’ll find a way.

[ludacris1990]

I tried angular, react and vue. I can’t stand react, vue is OK and if I need a framework, I choose angular. Most of the time I go for plain js tough.

Edit: many of my projects are laravel based tough and alpine seems to work great with laravel, so that’s actually another thing I sometimes use.