I realize there are categories such as styling kits, frameworks or UI libraries, but are there any that stand out as diamonds in the rough for quality of developer life or productivity rate in their category or overall?
I'm very productive with React, but I've also had a lot of practice with the React style of thinking (data passed down from parents, state management, JSX syntax). There are tools that make your life easier, like create-react-app[0], that let you focus on learning the framework and not worry about the process (webpack, babel, etc.).
When learning something new, especially when there are so many ever-changing tools for front end work, I'm a fan of limiting the scope of new material to just the thing I'm focused on understanding. Similarly, you'll see React and Redux as a unit nearly everywhere, but it's worth it to work with and learn React on its own before adding the additional learning curve of Redux. I find it's important to understand the problem a tool is solving before adopting that tool. Kind of like building a web app without a framework to understand why it's helpful!
I also use TypeScript, but not to make me more productive in the short-term. It actually takes a little more time for the initial development, but I view it as a worthy investment that benefits the next person to work with the code, be it another developer or me in a few months.
Any link you'd suggest for a starter in UI who wants to start with React JS and has worked always in backend (PHP / DB / OS stuff when developing)?
I am aware of JS and do minor contributions to libraries but those are very basic level (compared to what library of the size of ReactJS)
But if you are past that, I would suggest Vue. I have not used it myself, but lots of colleagues tell wonders about how easy, comfortable and fast it is to built things on it.
There are doubts about it being production-ready for larger companies and projects, but it seems to be the king of productivity nowadays.
Ember has 3 core projects (Ember, Ember-CLI, Ember-Data) that deal with Routing, Data Store, Build Tooling, Templates, everything you need to build a SPA application. Things are built to work together so most of the times, things just work.
The framework has been around since 2011 and keeps getting better/modern. I've started an app in 2015, with Ember 1.13, and I've been upgrading since (currently on 3.0).
There are a lot of community addons for most situations (date-pickers, select, deploy, analytics, etc... you can get a sense by browser ember-observer.com)
I am in the same boat backend dev who needs to do some front end. I now have an app to maintain with an Angular monstrosity on the front end. I can see why everyone dropped it, I am still trying to work out where all the hype came from 5 or 6 years ago.
If you are looking for employment options then React seems to be the way to go.
After that, I'd pick one of Angular, React or Vue and see where it takes you.
If I wanted to learn more, I really liked the purescript book [1]. It made many concepts I wanted to learn in Haskell click. I am not sure I would be confident enough to try to deliver a project in it, but I know some people do, I really liked the presentation of Claudia Doppioslash contrasting Elm and Purescript [2]
The CSS modules is to teach you how to write CSS that is tightly scoped, but something like BEM or styled components could do the same thing. Avoid global styles.
I'd also learn a tiny bit of functional programming. JS isn't quite a functional language, but lends itself nicely to simple functional patterns. React is also explicitly functionally influenced. Think composition over inheritance. Don't go overboard.
TypeScript or Flow for type checking are probably a good idea. TypeScript is far more supported, but kind of encourages the OO style. I prefer Flow, but most will say TypeScript won.
I will also say VSCode is a really great editor for JS and front end development.
Vue doesn't seem to be robust enough yet for larger projects, and I personally just don't fancy React's syntax.
If you want to just be able to get from 0 understanding of front-end to making a working demo, you really need basic HTML/CSS/JavaScript. It's like trying to write a book before you learn to read.
I'm sick of writing markup and stylesheets (react jsx is basically html with a little sparkle).
Flutter integrates styling markup and business logic in such a wonderful way, I've never witnessed. It results in an extremely productive development cycle.
And then there's the intellij integration which is just crazy good.
Bottom line I never have to think about styling and logic differently. Almost no context switches. With stuff like react, there's at least 3, maybe 4 context switches.
I use React because I mostly develop React Native apps and React web apps. Vue doesn't have anything close to React Native. React has a slight edge over Vue when compared to availability of components(npm packages). Thus I maintain JS sanity.
I've been meaning to learn Vue but haven't had the time.
