Blaze, Vue, React and Semantic UI

One of the reason I am skeptical about React is the end quality of visual appearance and user interaction of the React apps. It feels like most of such apps’ developments were led by developers themselves and not by UI/UX people (or by poorly educated or not experienced UI/UX people then).

Even take for example MaterialUI or BootstrapUI (as most popular UI frameworks among React users) which not only both look ugly (yes, I know I am too opinionated here, but have to say it clear and loud) but also very often don’t really provide some basic things (like enhanced dropdown for example).

Semantic UI is not ideal but it is the most minimalistic (in terms of UI itself, not development) framework. Yes, it comes with jQuery and a piece of custom js code for some manipulation, like forms validation or visibility (which both are super-cool out of the box solutions). But this approach seem to contradict with React philosophy of ‘naked components’.

In this regard Semantic fits nicely into Blaze development - we have a nice callback ‘onRendered’ per template, where we can do whatever we want with whatever existing js libraries (and there are plenty of them). Yes, this approach maybe is not rendering as fast or is not as ‘clean’ under the hood as React might be, but c’mon at least we get it done fast and end result is far superior to all the custom quickly developed UI React junk that is out there in the web… :frowning:

Long story short - if you integrate Semantic UI, jQuery, a pair of ‘heavy’ js libraries (like grids, trees or charts for example) to your React app, what kind of advantage React is going to give you after all if most of user interaction will be done using the plain DOM manipulation js libraries?

I feel like this is a huge red herring because appearance of the app literally doesn’t depend on the framework you use, but there’s a Semantic UI integration with React if that helps: http://react.semantic-ui.com/

Also, I really don’t understand what you mean by “end quality of visual appearance and user interaction of the React apps” - which apps are you talking about? 5 minute tutorial apps? Facebook, Airbnb, Galaxy, etc are all built with React and look awesome.

4 Likes

You clearly want to use some kind of framework, so if you’re wanting to use one with React and give it a try, how about http://blueprintjs.com/. It’s a bit different.

1 Like

I am biased, as I don’t like React. It’s one of those things, you either like it or you don’t. We have successfully used Blaze + Semantic UI and are in production (look for ZeSchool in this forum). As you mentioned, we use onRendered to run some DOM manipulation or call Semantic-UI JS functions (e.g. accordion, modal, checkbox etc.)

That doesn’t mean you can’t do it in React, as @sashko mentioned, there is a React library for Semantic-UI. We used the official distribution of Semantic for Meteor as we can add overrides and customizations and it recompiles Semantic for us.

2 Likes

Thank you guys for the links, I knew about React Semantic UI but did not expect it to develop that fast. Though it is still not on pair with original Semantic, so not an option for a production app yet. Blueprintjs looks much better compared to Material UI and Bootstrap. Will keep an eye on it.

So that you understand the complexity of things I am dealing with you can check this grid. There is also React version of the grid, so if the trend stays, technically ‘almost everything’ can be covered with React within next year or so… Except legal issues with Facebook React license seem still to be a concern…

Wow. This is a pretty thorough framework.