Developers, how do you approach frontend work?
I'm a backend developer by heart and trade. Most of the stuff that I have built/have plans to build requires a frontend of sorts. We're talking of course of a landing page, pricing, simple crud dashboard stuff.
Every time I try to approach this differently, yet again and again it feels like it's sinking up a ton of time and resources, even though that's not what I want to focus on.
I've tried hiring a designer and implementing it myself - took me quite a lot of time to get them right, I've had to write lots of the css components from scratch. Definitely not ideal.
Next time I've purchased a template - turns out it wasn't updated to latest version of Next.js and working with that took a lot of tweaks as well. I've also found and hired a junior frontend dev to outsource most of the painful work, but it felt like the template was more of a burden at a certain point rather than a time save.
Then I've decided to just focus on a single css framework/toolkit, learn it well so that once I have that, I can pump stuff out quickly. Currently focused on MUI, however going from ready components to an actual design is not a walk in the park - I have a hard time envisioning what the site should look like. I've checked upwork for designers that focus on MUI compatible stuff, but apparently that's not really a thing.
If I have to get something done on the backend, I can be incredibly efficient - it's very easy to tell when something is "done" - it either works or it doesn't. The visual side doesn't work that way, so it's also hard for me to plan/execute/iterate that kind of work.
The single goal I have here is building a frontend that doesn't look like shit. Wordpress/wix/etc aren't really an option here, as I need to control how the site interacts with the API's that I'm building.
Did you encounter similar problems when building out your projects? If so, what sort of approach has worked for you?
Pick a UI component library. Something like grommet is easy to get started with. For a "framework", it might help to invest the time into learning something like react. At least enough to start building out components and what not.
Hello @humblehound 👋
First of all, I really understand your pain and I’m glad to see another backend fellow struggling with frontend.
I’ve passed through this kind of problems myself in the past so here as some advices that might help.
The basics are separation of concerns and reusable components.
I’ve the habits of separating marketing pages/landing and app UI as the needs are often very different and building both with the same tool quickly becomes a pain.
Nowadays, I use Webflow for static and landing and it’s really great. SEO is builtin, responsiveness is out of the box, it’s really a great tool.
So great we are currently migrating Edith&Nous landing from React to this to move faster on marketing.
Also, I’ve opened a plan dedicated to that on bepo agency so I can help people transition quickly if needed.
For app development, the key is to go with reusable components in terms of aesthetic.
The idea is not to build a design system but work with a designer to get a sense of what would be globally beautiful with your app.
Once you have the core value of your app designed, I’ve often found out that you can easily iterate from here yourself as it’s just adapting existing pattern (box, card, forms) to the visual identity provided by your designer.
As another example, when I was at mojo, the product grew to 500k$ MRR with a very simple UI even though it was a design oriented project, so as you can see everything is a matter of balance.
Focus on providing value and keep it beautifully simple, it’s really unlikely it’s gonna be the project killer unless you are in a design niche area 😊
Thanks @axelvaindal, that's really helpful. I'll check Webflow out, I suppose that once you have some kind of aesthetic baseline provided by that on the landing page, adjusting to that on the app side is much easier than just starting from scratch, especially with a help of a designer
Hey,
I am a seasoned frontend engineer and Next expert, specialized in building early stage startups B2B products.
So first you must differentiate 2 subfields of frontend:
Next.js mostly solves the architecture & backend part of the thing. It has an interesting learning curve. The learning resources makes it very easy to start a website for a beginner devs who just need to understand React. The innovative features makes it extremely hard to understand what you are actually doing there. Not Next.js fault, it's just that the concepts involved are actually new and difficult: serverless, edge computing, server-side rendering (you may know some of them as a backend dev but SSR can trip you).
It's like learning music, you can play tunes on a piano quickly, but you'll need to wait a bit before writing your opera.
As some answered, Remix might be a bit more interesting in terms of pure learning. I don't use it professionally for the lack of staticness support (they often claim that you can reproduce that with HTTP caching but it's not 100% true, you are more limited) but love testing it. Remix developers twitters are goldmines, they are gifted and share a lot of knowledge.
Regarding Material UI, it has no less than 5 versions! So also in pretty active development. Version 5 is quite good but you see that the state of the art is still moving a lot.
It's also very opinionated, when I pick MUI, I don't try to overpersonalize the website. It's not meant for pixel perfect design.
Your goal is "is building a frontend that doesn't look like shit". One stack I could suggest would be designing with Figma, exporting to Plasmic, and then to Next.js: https://docs.plasmic.app/learn/importing-from-figma/
The code isn't perfect but the workflow is good and doesn't compromise on performance/lock-in: you still end up with a Next.js app and can have things such as SSR and friends.
UI are meant to be designed visually imo, we simply lacked tools to do that efficiently until now.
Same camp here. The sad reality is that the frontend ecosystem is just a mess that has been inheriting issues for years. The fragmentation and endless tooling makes it hard to get into, the underlying technologies require annoying amounts of boilerplating for simple things, reliability is more of "a side effect" than a quantifiable outcome - basically the opposite of all those things that made you drawn into backend whenever you started your journey.
The only way I've found to work with/around this is to apply different standards to my backend and front end work, understanding that everything I do on the frontend side will likely have a tenth of the longevity I expect from my backend code. It's really hard, but it has worked for me.
On productivity... keep trying things until you like one and stick with it. With so many frameworks and tools, something out there will work more similarly to how you think. I thought I hated React until I came across Remix. Generally, I've found to prefer the less popular technologies, and I'm sure there's a correlation to my backend background.
Last, accept that the frontend world is one of endless reusability. We're not really solving new problems here and there's no extra points for coming up with clever ways to do things (unlike with backend work), so why even bother solving anything. Copy and adapt like we did back in school, and learn by context. You'll slowly get faster.