Ask HN: How can a BE/infra developer handle the FE side of personal projects?

I'm in the same boat as you: backend and infra are my areas of focus.

I spent a lot of time digging into the Javascript ecosystem trying to find a framework that I actually enjoyed using. There just weren't any. I've come to the conclusion that I just really don't enjoy working with javascript (and related tools, languages, etc) at all.

I've had a lot of fun with Flutter, though. Here's a quick overview if you're not familiar: https://www.youtube.com/watch?v=lHhRhPV--G0

It's easy to get started, there are numerous learning resources out there (I really liked https://appbrewery.com/p/flutter-development-bootcamp-with-d...), and it's opinionated without being opaque. You can install the SDK and have a hello world app up and running in like 5-10 minutes (including tight VS Code integration, hot reload, etc -- all of that stuff works out of the box). You still have to think about responsive design and state management and stuff like that, but it's not too difficult to reason through it even if you don't have any prior frontend experience. It even comes with a library of pre-styled components (Material Design) that you can just _use_ without having to make decisions.

People are going to complain about a ton of things about Flutter, but I encourage you to give it a go (if for no other reason than it's a good example of opinionated, powerful tooling that you can just _use_ without having to fiddle with it).

I'm in the same boat, good with be and infra, mediocre at best with fe (I've accepted that I just don't enjoy it much). I've taken to very minimal UIs in just vanilla js, html, and almost no css. Basically, punt on the ui until it's something worth doing; if the project turns real either you'll find someone to make a pretty UI quick since the functionality is there, or you'll learn yourself.

Bonus, using ai to write css is much quicker than combinatorially trying every css layout option like I usually do since I never remember that stuff.

Lower your standards for your front end.

Make tech and project decisions that minimise the importance of a front end. For example an api is something you can launch and make a business out of. You can also make a business where instead of selling people software they use to do X, you do X for them using your software. Or take a look at Midjourney. Huge deal in AI generated images and their "frontend" is a Discord bot gated by a Stripe payment page.

Instead of spending a lot to pay someone else to do it, consider paying a little bit to make it easier for you to do it. Shell out for the premium library, third party api, theme, etc that makes getting your front end done just that little bit easier.

This thread is like a team of scientists from an advanced spacefaring civilisation stranded on a stone age planet and discussing out how to start a fire with their tricorders

Ok a bit tongue in cheek :P But honestly for most things you can use a web server in a language of your choice and spit out HTML. For the HTML design there are templates and frameworks responsive out of the box (bootstrap etc). If you need any in-page wizardry there are well documented javascript libs you can drop in. This approach still works for most applications.

I’ve been using Hotwire, stimulus and bootstrap (tho tailwind would work just as well) to build interactive front ends on top of rails without getting bogged down in over engineering.

Hotwire can be used outside of rails.

And LiveView is a similar framework from the elixir/Pheonix community (and probably now available for other languages).

Adding htmx to this list https://htmx.org/

>I’ve been using Hotwire, stimulus and bootstrap... on top of rails

This is what I use as well. As a backend guy, it makes front end development a breeze.

Just make your backend server write out html, the year 200x way. You can add JavaScript for some dynamism. Add css framework, I personally like “no class” css frameworks these days.

I've used it as an excuse to learn front-end stuff. I wouldn't use no code or builders if learning is your goal. If you want it to be productive then they are good. Very much "master the rules so you can break them" attitude needed IMO.

Modern front end isn't that compelling to me but at least there's a lot of tooling to make something OK quickly. I just picked something with a good tutorial (sveltekit and tailwind) and it got me to a good enough point.

There are some low/no code tools for generating HTML or react components, but at some point you need to glue it to your backend and tie things together. That tends to be most of the work.

You also probably need the whole account signup/login flow, billing, and other fun things, which generally need their own UIs. There there are more options, like using the Amazon Cognito UIs, but it still tends to be surprisingly involved.

I’m the opposite of you, always been happy on the frontend, backend is a bit of a black box.

If you can already code you can probably fake it til you make it and learn yourself.

P.s if you just want to shoot your ideas past someone, maybe get a little help figuring out where next with a frontend, my sites in my bio, feel free to say hi.

Depending on your language of choice, it might be worth looking at seeing if it compiles into web assembly.

If it does, and if the binary sizes aren't too large (both can be a problem for some languages) then you might be able to create your frontend using wasm, using your preferred backend language.

In this system, what is WASM drawing the UI to?

I've never tried it, but apparently some bindings exist, e.g. https://github.com/rustwasm/wasm-bindgen

So you can either try manipulating the DOM w/ some bindings or draw to canvas.

It replaces most (but not all) of the javascript. So you can manipulate dom elements, draw to a canvas, etc.

There is still some javascript requirement as the wasm approach generally needs some JS setup bits in order to have things work. Languages that can compile to wasm should already have that pretty well figured out by this stage though. In theory. ;)

Funny, as a BE developer I can build pretty much any backend at any scale. But a dynamic website? Fuuuuuck.

A friend of mine had done this. A back end fellow who has picked up front end development. I can’t speak much to his toolkit beyond “React”. But he’s also found some components that he’s content with.

Similarly I’ve been doing a lot of GUI work work recently. I’m also a back end person. I’m also not very detailed person. So, GUIs aren’t really my game. My work is desktop JavaFX, not the web, however.

But, at some level, a UI is a UI when it comes down to bringing it to life.

If there’s anything I can convey to make it easier, I think the singular concept important to a solo GUI project is momentum. GUIs are a grind.

Similarly, though, “seen one, you’ve seen them all”. But as someone starting out, you haven’t seen any. That’s why once you get moving, it can go much faster, as you just keep repurposing and copying stuff you’ve already done.

To get there though, you just need to start. Take a bit of time to sketch out, say, 5 screens that try and capture a good chunk of the functionality you like. A CRUD screen, a status page, simple table/report, roughed out navigation, etc.

With the rough (very rough) mockup, find some stuff you like online, likely a toolkit or framework, and make some static pages. Do not spend a lot of time on this part. The goal here is to move forward and make progress. It’s easy to get trapped and distracted, but, especially on the web, making the screens look different can be really easy to change.

Finally, start bringing the pages to life. Again, pick a tech and just dig in. Once you’ve brought the pages to life, you’ll be much more critical about what worked and what didn’t if you decide to look at another front end toolset. Even if you do later change your kit, you can probably keep your mock-ups.

But if you follow through, in the end, you have high level, functioning examples of a good chunk of your big block UI parts, using your code, that you understand, against your backend. You know a bunch of things that work, and, as well, a bunch of things that don’t.

Having the mock-ups gives you built in, methodical list of things to check off. Gotta make each field work. This helps keep you focused.

This will take a spectacular amount of time. GUIs are choked with detail. But work through this and “you’ve seen it all”. Everything else is a variation of what you’ve already done. You’ve built up a lot of momentum that can give you more rapid progress.

But those first screens, they’re the nut. They’ll be a lot of work.

Htmx.org and a minimum css style sheet.

Done and done.

I’d recommend using a template engine like Pug / EJS with a bootstrap like CSS framework.

More generally, try to think of your sever as sending a static HTML document for each web request and much of the UI complexity automatically shifts to the backend.

For simple web frontend chatGPT is worth a try. Ask to generate template using tailwindcss, i've only tried it a little and i do already know basics, but it's suprisingly effective for simple layouts.

Depending on project but my default is Laravel. You can make pretty decent non-SPA frontend using mix of html, Blade templates, and some basic javascript (though you can do that with any framework).

have you tried cljs and reagent? it’s a different vibe.

my bootstrap: https://github.com/nathants/aws-gocljs

the project: https://reagent-project.github.io/

Is it frontend, information architecture, design or product ideas? Often frontend skills get the blame.

Do you have an email address or a contact method?

Why not learn these skills? If they're just pet projects it doesn't matter if they don't look perfect right away.

What is your backend stack?

What about partnering with a frontend person on a % of future profits basis? Maybe going to some dev/JS meetups and pitch your ideas there?

Depending on what exactly you're trying to launch, it may only take a few hours/days of work. If it's interesting in its own right, does some community good, or even just has a good risk/reward ratio (i.e. the frontend person puts in a few hours of work upfront for the potential of X% later on), you might get a few bites.

--------------------------------------------------------

As a former full-stack dev now focused on the frontend, I'm in a similar (but reversed) situation... I don't enjoy working on backend stuff, but frontend side projects are very quick to whip up for me (can get a page up and running in a couple minutes, a workable prototype in an hour or two, typically).

That's largely thanks to recent startups like Vercel, Netlify, Gatsby, Remix, Astro, etc. that have taken it upon themselves to improve the frontend (at least JS/React) developer experience. The vendor support adds a LOT of quality-of-life such that it's no longer as difficult as it was 3-5 years ago to spin up new MVPs.

As an example, my stack is often:

- Vercel for hosting, because they take a Git repo and host it for you in a couple clicks and manage everything. Free or cheap ($20/mo) at MVP stage.

- Next.js (Vercel's open-source React framework) will handle frontend tooling, routing, type checking, and linting for you with a single command (`npx create-next-app`). Starting the server is one more command (`next dev`) and your page is up and running.

- For the UI layer, I'd recommend either starting with one of their prebuilt templates (https://vercel.com/templates/next.js) and modifying it as needed

OR using a modern component system like https://mui.com/ or https://ant.design/ or https://chakra-ui.com/ instead of trying to learn and write your own component and JS+CSS code. Using one of these systems will allow you to compose complex apps out of well-made, well-documented, easy-to-use primitives, making it much easier to focus on business needs rather than basic frontend components and infra.

The basic MUI system, for example, is totally free. You can find third-party apps built on top of it (https://mui.com/store/#populars) and pay a one-time license fee to essentially "fork" them, getting a prebuilt working app that you just attach your backend API calls to.

There are also low-code extensions of these frameworks (meaning you start with a GUI, plan out your app that way, but still have access to the source for future advanced changes). One example is https://mui.com/toolpad/

----------------------

Is this a lot? Yes and no. React has a learning curve of its own, but it can take the place of having to learn raw HTML and CSS. (Yes, you eventually should know those things for debugging and polishing, but they are largely a level of abstraction below what you really need for a basic MVP).

Once you learn React, its primary value isn't that it's a great language (opinions differ) but that it has a humongous ecosystem of third-party vendors, free open-source libraries (basically any component you might think to build is probably already available on npm), and a wide availability of devs from hobbyists to full-timers.

Others in this topic will suggest going away from Javascript as much as possible (and using things like HTMX or backend-to-HTML solutions like the old days). That's fine, but you lose out on the rich ecosystem of React and Javascript, so you end up having to build more yourself -- which is what you're trying to avoid in your case.

My own 2¢: As someone who grew up with HTML and made websites since the birth of Javascript and CSS, the web has always been messy. It's always been a semi-open ecosystem controlled by a few major companies (whether that's Netscape or Microsoft or Sun or Adobe, or these days Google and Apple), so it very much suffers from design-by-bullying. Whoever is the power player of the decade gets to add their favorite technologies that everyone else is forced to adopt. Thus the web became a hodgepodge of document markup systems poorly fitted for modern apps, with various hacks on top of hacks built to satisfy some big company or another's in-house needs. Sadly, that means going "vanilla HTML+JS" doesn't leave you with much, just the shattered legacy of poor historical decisions.

React at least helps by encouraging componentization and abstraction of UI elements to functions, using cleaner data models (actual variables and objects) vs direct DOM manipulation (using page content as a store of state).

We've gone through many generational shifts in approach, from the raw HTML days of Geocities to the you-build-it, we-host-it approach of Godaddy and its ilk, to the "all in one" CMSes like Wordpress or Drupal. These days, (if you want there to be), there can be a pretty clear separation between backend and frontend systems, and with that specialization came a bunch of startups (mentioned above) whose approach is "let us help you build it as best as we can, so you can focus on business logic instead of basic UI and infra". After 20 years of doing this, the current state of the web developer experience is actually my favorite so far. HTML and CSS suck for building apps (as opposed to documents), and although Javascript is a lot better since ECMAscript v6 (ES6), it is still inextricably tied to the DOM (and thus HTML elements) unless you use an abstraction like React.

It's the difference between writing something like:

```

import {Datatable} from 'third-party-ui-kit'

``` (Where it'll look good enough out of the box, plus give you filtering and sorting etc. for free, all with good documentation and support)

vs writing your own table generator, HTML and CSS for every cell/row/column. Could you do that? Sure. All the modern hosts will still support that sort of document. It's just a pain to write and maintain.

Skimmed past most of what you wrote, but noticed this

``` import {Datatable} from 'third-party-ui-kit' ```

I don't know what "third-party-ui-kit" you had in mind, but that looks an awful lot like the lib I wrote. Basically very similar to datatables.net but written from scratch from React but accepts the same backend API (so you don't have to rewrite your server responses). Only 583 lines of code to recreate. It's got sorting and everything, even the shift-click multi-sort.

Cool! What's your lib called?

The one I was thinking of was from MUI (because it works well with their other components) but there are a bunch out there.

Here are some options:

- Streamlit for very simple frontend, you can code in Python.

- TailwindCSS + Vue. Very easy to pickup and you can learn only a small part of it to get your website working. (There are many templates of components to get you going quickly).

I'm actually the opposite, I know some frontend but struggle to get backend working for my side projects.