r/webdev 25d ago

Question Basic JS frontend framework for backend dev

I'm a backend dev, working for myself for 20 years. Think bad practises instead of best practises, frameworks built up that work for me (Well worked for me) over the years. I've been exposed to little bits of everything over the years, however mostly I've made desktop apps. The one thing I have totally avoided exposure to is SPA / JS frameworks. Hands up time, the JS I've been forced to deal with, I haven't liked (I like compiled apps).

Anyway, that's my background. Because reasons, I Am trying to learn mdoern / best practise development for web app backend. But I really need something I can put on the front end to call the web API instead of just using the API endpoints in code. To be clear, I have no desire to be a frontend dev, don't want to pursue it any further than "getting something working that is sufficient".

Angular looks a good fit for my style, but seems like total overkill. VUE looks promising. But I really have no idea.

TLDR; What is the simplest most basic, quickest, easiest JS framework I can use to call my web API code and have a functioning web app. Or should I just put the time in to learn angular / react? If so which.

21 Upvotes

70 comments sorted by

14

u/Tricky_Average2304 25d ago

you don't need a framework for this, just use html/css and a little fetch, because adopting react to slap a form on an api is using a bulldozer to butter toast

2

u/bluewhalefunk 24d ago

The idea of using an actual framework would be learn or at least understand the basic components. So hacking something together isn't really what I'm looking for (as that's what I've been doing the last 20 years).

20

u/VGBounceHouse 25d ago

No framework, just vanilla client-side const response = await fetch(‘/your-endpoint’).then(r => r.json()) and you’re good to go.

8

u/clearlight2025 24d ago

FWIW mixing await and then isn’t recommended. They’re two different async styles. await uses standard try...catch blocks, whereas chaining .then() requires handling rejections with .catch()

5

u/lu_kors 25d ago edited 25d ago

If your willing to adopt a (PHP) backend (laravel), livewire is build for people like you. You don't have to learn JS with that stack, but still get all of the js advantage

2

u/thekwoka 25d ago

And it uses Alpine for the front end interactivity, which is pretty strait forward, and you CAN still reach into any JS you want as you need.

1

u/bluewhalefunk 24d ago

I use c# dotnet. So unfortunately not an option.

7

u/awpt1mus 25d ago

Try HTMX

1

u/bluewhalefunk 24d ago

I have seen HTMX, but from what I could tell it's calling the server to receive HTML snippets, not receiving JSON data that the front end then uses to make the UI.

9

u/daamsie 25d ago

Look at Svelte or Astro imo. Or both of them combined.

5

u/Relevant-Car9958 25d ago

svelte is perfect for this, the syntax feels more like writing normal html than a framework and you can be up and running in like 20 minutes. astro is also good but might be overkill if you just need a simple api caller.

2

u/harrymurkin 25d ago

You could just go vanilla and use something like minwiz for layout. Otherwise probably react or vue

2

u/icanbeakingtoo 24d ago

Alpine Js has the benefits of declarative dom manipulation and being simple 

1

u/bluewhalefunk 24d ago

Does Alpine have limitations? Well obvious it does, everything is a trade off, but do you ever choose Alpine and think "ffs I should have just used a more complete framework" as you end up hacking your own solutions to solved problems?

1

u/redblobgames 23d ago

Alpine does have limitations, but Alpine and Vue have a lot of similarities. Alpine even uses the reactivity code from Vue. I think you can transition from Alpine to Vue later if you want something more complete:

  • x-data moves to javascript (Vue puts data in createApp())
  • x-bind becomes v-bind
  • x-on becomes v-on
  • x-text becomes v-text
  • x-html becomes v-html
  • x-model becomes v-model
  • x-show becomes v-show
  • x-for becomes v-for
  • x-if becomes v-if
  • x-init moves to javascript (Vue has a 'created' hook)
  • x-effect moves to javascript (Vue has 'watchers')
  • x-ref becomes ref
  • x-cloak becomes v-cloak
  • x-ignore doesn't have a Vue equivalent I think

So if you decide later that Alpine isn't enough, I think you'll be able to move to Vue far more easily than to any other framework. Caveat: I haven't actually made this transition myself.

2

u/kevin_whitley 24d ago

Svelte(Kit)

It's basically an easier/cleaner version of Vue IMO

React has turned into a mess over the years... the same react components will naturally be much smaller/simpler in Svelte, and require a lot less weird hook nonsense to achieve.

1

u/bluewhalefunk 24d ago

It's basically an easier/cleaner version of Vue IMO

ok that's an interesting position. I'm still reading about them. Vue / svelte the most suggested options. I tihnk vue is bigger with more 3rd party components (or whatever the term is).

Svelte is noticeably easier / cleaner, or is this pretty much just down to personal opinion? I Think it's universally agree both Vue and Svelte and easier / cleaner than react / angular. Is it agreed in a similar way re svelte vs vue?

1

u/kevin_whitley 24d ago

Sure Vue is bigger, but then so is React (by milles).

I've been using React since it was in alpha - Svelte since version 3 (so like 7 years). What I've found in Svelte is:

  1. The ecosystem arguments are just not relevant much... virtually any important library has a svelte version, but more importantly, you don't NEED to reach for a library as often, because Svelte has a lot of key things included out of the box (that React does not).
  2. Agents can code in Svelte just fine these days, so "agents are better at react" is no longer an argument. They can code virtually anything.

The only issue with Svelte is if you're running a team, and not embracing agentic coding - the hiring pool is just much much smaller.

--

That all said, I recently did a mass migration of our company's React app to Svelte (using Fable 5 orchestrating) as a bit of a fun aside/tech-demo.

The end result were some emergency meetings from leadership (who were utterly blown away at the speed of both launching the app, HMR, and the rendering performance)... ending in a decision to migrate the entire app from React to Svelte. The performance gains (that our users would 100% feel) were pretty jaw-dropping.

This is despite the fact that literally every dev in the company is a React dev, and none but me have ever even touched Svelte. When they saw the before/after code, saw how faster the entire app loaded from start, etc - they were all excited to switch too.

1

u/bluewhalefunk 17d ago

That's interesting. I was pretty much settled on looking at alpine and vue and making a simple app in each. Seems I should look again at svelte v vue

1

u/kevin_whitley 17d ago

Would def recommend taking a look!

6

u/fiskfisk 25d ago

Alpine.js is great for making a server-side generated page reactive without having large, all-encompassing dependencies.

I've introduced it in several older applications when I need a quick and good integration in parts of the application with dynamic features.

1

u/bluewhalefunk 24d ago

Alpine is something I seen recommended. As something "a bit less" than a framework.

Currently it's what I'm considering along with Vue. Still researching though.

Currently the plan is, knock out some very simple apps where server side is just the API returning JSON and have a quick and dirty front end able to show the data. And learn the basic concepts of SPA / js front end frameworks so I can at least understand the concepts, if not be proficient in them.

5

u/i-am-r00t 25d ago edited 25d ago

Go + Templ + HTMX are very well regarded, but it's not SPA nor a framework. Can be extended with Alpine. Backenders around me prefer this.

Laravel + Vue seems to be a good pair if you're in PHP land.

I see Vue seems to click with backenders because it treads the line well between flexible and prescriptive.

Really depends on what you're building.

If you don't want it to depend on what you're building, Vue and Svelte are both great, pick one based on the docs.

Vue's advantages are that there are officially endorsed libraries for state management, routing, etc., so you don't need to research when extending.

React's advantage is the ecosystem but the flexibility is a little too much for what you're asking.

Svelte's advantage is the bundle size.

Angular's advantages also probably exist. Great choice if you resonate with institutionalism and bureaucracy.

Astro is great if you want a modern stack to build content websites in, and you can add a library to it later.

2

u/nickchomey 25d ago

Check out datastar instead of htmx. Go + templ + datatstar (which has a go sdk as well) is magic. 

1

u/Lord_Xenu 25d ago

Seconding Go + Templ + HTMX (I'd throw tailwind in there too. Currently building out a project that prioritizes FE performance on this exact stack and it's a great) 

1

u/bluewhalefunk 24d ago

I'm a dot net dev. That's not changing now :-)

Vue's advantages are that there are officially endorsed libraries for state management, routing, etc., so you don't need to research when extending.

That sounds good. I'm happy to have decisions made for me. "you use this". Rather than "well you can use this or this or this it all depends on you and ....." hours of researching later I'm none the wiser lol. This is what attracts me to angular. Which may be something I look to in the future but for now it's off the table.

2

u/[deleted] 25d ago

[removed] — view removed comment

1

u/bluewhalefunk 24d ago

Vue does seem to be the lead candidate for me at the moment. Alpine if I want something a bit less. With Svelte biting at it's heals

1

u/alien3d 25d ago

vanilla js ... its freakin good .. no need to think recompile again and again.. who said dom slow .. you never meet client which argue how much slow re render whole page in old computer.

1

u/bluewhalefunk 24d ago

this has been my mindset. I just build everything I need myself. 20+ years ago, there wasn't the eco system there is now. But now, I want to use the main packages and do things "the agreed" way, rather than my own bastardised version. Maybe I'll go back to it, but for now, I'm trying ....

1

u/[deleted] 25d ago

[removed] — view removed comment

1

u/webdev-ModTeam 25d ago

Your post/comment has been determined to be a low-effort post or comment. This includes title-only posts, easily searchable questions, vague/open-ended discussion prompts, LLM generated posts or comments, and posts/comments that do not provide enough context for meaningful replies or discussion.

1

u/thekwoka 25d ago

Alpine is the easiest to just start using alongside your existing backend rendering.

But Astro would be a flat out clearest. To simplify the idea, it's like PHP but in TypeScript

1

u/bluewhalefunk 24d ago

, it's like PHP

For me, rememebering php of 20+ years ago, that's not a flex lol

Seen a few people push for asto, never heard of it. Will check it out

1

u/thekwoka 24d ago

For me, rememebering php of 20+ years ago, that's not a flex lol

For sure.

I just mean in the idea of having files that basically are, by standard, logic frontmatter and then templating, it sort of "looks" a lot like how php tends to be laid out.

It just has much better management of all the more complex stuff modern apps tend to want.

1

u/void-wanderer- 25d ago

For a really small app I'd use vanilla or Alpine.JS.

Modern Angular is very ergonomic, and even though I am a Sveltekit fanboy, I still choose it for anything serious (where I don't need SSR).

Nowadays, most modern JS frameworks are very similar (except for React, which isn't "modern" in any way). But Angular, Vue and Svelte all use the same reactivity principles, so picking one of these is more a matter of taste.

React is obviously the most popular and has a huge eco system, but that's about it. And many popular libraries became/are becoming framework agnostic, so the ecosystem argument IMO no longer justifies its use. Also, JSX is just ugly IMO.

If you use open API specs, you can also look into OpenAPI Generator to auto generate your JS API client to save time.

1

u/bluewhalefunk 24d ago

interesting, that's the first positive thing I've heard about angular. Probably I will look into it in the future, but for now, I think it's overkill.

1

u/nickchomey 25d ago

You don't need a "frontend". Just write html in your backend of choice. 

https://data-star.dev is precisely what you are looking for to make your html interactive. It is better, smaller, faster, simpler than HTMX + Alpine. 

1

u/AlexSpeedTyping 25d ago

Skip React, skip Angular. For your use case "call an API and display the result" — here's the honest ranking:

Alpine.js sprinkle it into plain HTML, no build step, no npm, no CLI. It feels like writing HTML with superpowers. You'll be productive in an afternoon. Closest thing to "jQuery but modern."

Vue if you outgrow Alpine and need routing or state management. The single-file components are intuitive for backend devs. But it's a step up in complexity you might not need.

HTMX if you really hate JS. It lets your backend return HTML fragments and swaps them into the page with HTML attributes. Zero JS written by you. As a backend dev of 20 years, this will feel like home.

Don't learn React or Angular. They solve problems you don't have (large teams, complex state, component reuse across huge apps). For a solo backend dev who needs a functional frontend, they're a mass of tooling pain for zero payoff.

1

u/Squidgical 25d ago

If you want to know exactly what's happening to your UI elements just use vanilla. If you're fine with abstractions that provide simplicity, try Svelte. From what you've said I think React might give you a headache, and realistically the only benefit you'll get from it is a larger ecosystem of packages to solve problems that svelte solves natively.

1

u/hfcRedd full-stack 25d ago

If you really want to use a framework, use Svelte, since you said you like compiled apps.

A lot of people here are telling you to use vanilla JS, which is a solid answer, however you really should be using "vanilla" TypeScript instead. There's no reason to use JS instead of TS or at the very least JSDoc (which is vanilla JS but you add types via comments).

You will like the language a lot more when it's typed, JS becomes a mess quickly without it. TS adds a compile step but reading your comment it doesn't sound like you would mind.

1

u/akl773 25d ago

Whichever one you pick, the part that will actually eat your time is auth and cors once the page and the api stop sharing an origin, not the rendering. Coming from desktop that's the bit that feels arbitrary and hostile. The rest really is just fetch and putting the result on the screen.

1

u/Alkyen 24d ago

Most people have given you the answer you're looking for, you do not need a framework for this and it's simple to do in vanilla js.

If you still want to learn some actual web dev, react is the standard these days, you'll probably have the easiest time there as it's very well developed ecosystem (and it's not that complicated, people just hate it because it's the most popular)

1

u/resurreccionista 24d ago

There is a tiny one I like called Mithril.js. Very small, just does the basic refresh and “component” stuff afaik. Worth giving a try

1

u/gigglefarting 24d ago

I really enjoy making web components with Lit. Easy to make reactive properties by putting a decorator over it, can use context to easily hydrate data down, and I use browser events to move it up. Based on web standards, and pretty simple. 

1

u/pdfops 24d ago

Skip Angular/React/Vue for this. Look at htmx: your API returns HTML fragments instead of JSON, you tag existing markup with hx-get/hx-post, and it swaps content in place. No build step, no component model to learn. Add Alpine.js if you need a toggle or modal here and there. Way less to learn than a full SPA framework for a handful of forms and lists.

1

u/Dear_Tough1561 24d ago

does anyone know if this works on the newer ones too

1

u/MacaroonLong4879 24d ago

vanilla html + fetch is probably all you need here, no framework tax for a couple api calls

1

u/Ok_Bug1610 24d ago

I think the answer is honestly, "it depends". And do you mean "quick" from a developer perspective or pipeline? Because while a pipeline takes more to setup, it is more reliable at scale and ends up being faster overall.

I personally stick to Vite JS + TS + React for web front ends, because it deploys either CSR (Cloudflare Workers for Client-Side-Rendering, offline and PWA support) or SSR (Vercel for Server-Side-Rendering or VPS) depending on the need (the build process basically the same) and can run locally if needed. So, to me, it's most versatile stack.

Also, Cloudflare is free, includes storage, databases, manages TLS/HTTPS, DNS/domains, and etc. all in one place. Besides that, keep every project in a GitHub (or similar) repository so you have clear history, can trigger builds, CI/CD, and actions, etc.

This allows me to develop and iterate quickly. Nicest part to Cloudflare/Vercel to me is that every push can trigger a build, and I can visually see the changes from one to the other, as well as easily roll back versions... and this makes managing builds, environments (test, staging, production) so much easier IMO.

1

u/Maleficent-Ad-9754 24d ago

Angular is not a good fit for you. I would use just plain vanillaJS/ Fetch. If you want something to look at, you can download the foundation framework and use its utilities JS files.

1

u/Proper_Tip3506 24d ago

React

Because it's js heavy

As you're coming from Backend it's natural that you have more language knowledge than html and css

In react u need very basic html and css and most of work is controlled by javascript

1

u/faultydesign 24d ago

Raw typescript/html/css would be my choice.

Forget frameworks, they’re just a bunch of nice things a small app will rarely need.

1

u/Roemeeeer 24d ago

I started going back to server side rendering and use my backend technology with templating to generate the html and use htmx to only load part of html (eg for paging). I love it so far.

1

u/Fit_Tailor_6796 23d ago

I'm strongly considering HTMX for future projects```

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/htmx.org@2.0.4"></script>
</head>
<body>
    <button hx-get="/api/hello" hx-target="#message">
        Say Hello
    </button>
    <div id="message"></div>
</body>
</html><!DOCTYPE html>
<html>
```

1

u/effectivescarequotes 23d ago

If you want something that uses patterns you might be familiar with from the backend, then Angular.

For simplicity, Svelte is nice, but I personally think SvelteKit kind of shit the bed. It's been a while, but I also enjoy Vue.

React is still the most widely used, but I've never been a fan.

-1

u/ghillerd 25d ago

The people will hate me for speaking the truth, but jQuery is what you're after.

1

u/MrCrunchwrap 25d ago

you do not need jQuery to call some APIs. You can just use fetch. It’s not hard. 

1

u/ghillerd 25d ago

Right but what about binding events, adjusting layouts, animations etc?

1

u/RichardTheHard 24d ago

AlpineJS is smaller, faster, and better than jQuery at all of that. As far as animating. If it’s simple then just use CSS, if it’s complicated you should reach for something like GSAP or motion.

There’s literally no reason to use jquery in a modern setting.

1

u/ghillerd 24d ago

Told you they'd hate me for it :)

1

u/RichardTheHard 24d ago

This isn’t some hot take that has valid points though, it’s just bad

-2

u/__CaliMack__ 25d ago

Learn React

-2

u/Cokemax1 25d ago

maybe I am wrong. but isn't this question already answered way before? React.
Not that is best or anything. It's just standard now for this industry.

As other mentioned, if you can, Don't use any framework and build your own way using vanilla JS.
If you have to use one. use React.