Frontend for Backend Engineers

As a backend engineer I usually run away from from anything ui and ux. I am very comfortable in my Golang and Java cave. I open IntelliJ and keep creating classes, subclass them make beatuiful abstractions and interfaces.

But I for the life of me cannot make a beautiful looking UI.

I tried a lot of UI frameworks went on a JS, CSS journey and figured it out. I figured out the shortest and most productive path to UI development for backend engineers.

The no 1 key skill for backend guys in fronted: DO NOT SEARCH GOOGLE ANYTHING UI, JUST BELIEVE THIS ARTICLE

There is a new something release in Javascript work every week, everything is blazing fast and revolutionary. Dont trust it ! Dont even go looking for it

UI framework

React + Javascript / Typescript + JSX

Dont debate it, start using it now !. Dont read javascript bros telling you which React vs Angular vs Vue vs Svelte is better. Its not !

In react there is virtual DOM, you create components using JSX, component can be passed props and they can have state. Thats it ! Thats all you need to know, you are a backend engineer remember. Cut short your debate time and start using React.

React is backed by facebook, has a big ecosystem of libraries, tools and has a lot of jobs. Its over we wont discuss it now, ok ?

Using Ionic you will also be able to create mobile apps using the same react codebase.

CSS

Tailwind CSS

Just learn tailwind css, thats it, you will be writing sensible common sense things in side divs which will make your ui look amazingly decent. Dont even dare to go to css first, just take the advice and thank me later.

How to make your UI look really good

Use UI component libraries. There are 2 types = React components which depend on React and cannot be used without it and CSS only components which can be used with any framework. Start with Daisy UI, its just tailwind css + html, you write all the click handling code in Javacript.

UI components

• Daisy UI
• Hyper ui

React UI component components

• shadcn

UI component for serious

• Flowbite + pro to move fast

Icons

• Phosphoricons
• lucide
• Heroicons
• Feathericons
• Simpleicons