What UI components everyone uses?

#1

Hello,

I’m wondering what UI components everyone uses for their projects (mid-to-large scale)? I’m working with Aurelia for over a year and the only thing, I feel is lacking, is choice of UI components. I was looking for quite a time for UI frameworks that would suit me, but I didn’t manage to find anything decent and complete.

At the end, on one of my projects, I have settled down with fairly customized Bootstrap 4, making my own wrappers where needed, but it lacks some advanced controls. I’m starting new project now, but after seen the situation didn’t change much, I’m considering to use Vue, which has pretty good selection of UI components (Vuetify is my choice now).

For Aurelia I have tried these components:

  1. Kendo UI - visually not appealing, many visual glitches and inconsistencies.

  2. DevExtreme - well, they don’t provide any wrappers, so I had to make my own or use it via JQuery. They are more consistent, and if they supported Aurelia out of the box, I would probably use them.

  3. Materialize-CSS - we were using them on another project, but we weren’t very happy with them. There were many workarounds needed to get anywhere. I’m not sure they are ready for production.

  4. Aurelia UX - ok, I didn’t really try them. It took me almost an hour to find an online demo. After that I have tried few basic components. It was obvious it is all work in progress, almost every component has a problem. I’m not sure it is created by people experienced in UI. The progress is incredibly slow, so I don’t think they will be usable in 2018.

It’s a shame there is so little quality and choice in Aurelia UI component ecosystem, because the framework itself is very enjoying to work with.

Either way, as stated at the start, I wonder what do you guys use and are you happy with it?

Thanks.

PS: To complete my storm of complaints, the Discourse wasn’t the best choice for a community “forum”. :slight_smile:

#2

What would you think is better option for community forum ? Is the feeling of discourse what makes it not ?

#3

@tom.shane

check out this thread

#4

Materialize-Css via the bridge - 2 projects

#5

unfortunately this is not mobile first.

#6

I have tried both bootstrap (3 & 4) and materialize in fairly large business applications in the past 2-3 years. I usually excluded the JavaScript and just worked directly with the SCSS files to customize and add behavior.

Over time I’ve stopped seeing the benefit of having a pre-made UI framework / components in Aurelia and lately I’m just including a minified version of Semantic UI, manually modifying/extending and adding behavior as I see fit.

What I’ve found in the course of 2-3 years of working with Aurelia is that on the long term for any given project, UI components and frameworks end up working against me.

Aurelia makes doing really advanced stuff so easy that those frameworks like bootstrap and materialize end up being nothing more than a limiting factor. I’d always find myself working around them, or eventually just ditch them completely in favor of making my own (better) components, which exactly meet the requirements of the task at hand.

I may add in GSAP if I need some really fancy animations but most of the times I just stick to vanilla JS in Aurelia. Plenty of good examples around, way easier to customize. Performs many times better as well.

#7

I’m with you, I reviewed all the main frameworks and they were too generic, I found creating more specific components useful, even date pickers.

Although for prototyping they’re good.

#8

I’m using bootstrap 4 with a material theme and Kendo ui for more advanced controls. I’ve found the kendo controls to work pretty well for the most part.

#9

We are using SyncFusion

#10

Same here. Bootstrap 4 as a base but don’t use their JavaScript.

For anything basic, a custom element can be put together in a very little time. When you want to do anything out of the ordinary, premade controls just get in the way.

#11

hey mate, what has been your experience with syncfusion? i am a mostly backend c# guy who wants to launch an MVP with aurelia + syncfusion, from my brief dabbling so far i think its my best bet, but any feedback you might have would be greatly appreciated

#12

Regarding Discourse, admittedly, yes, it just feels unusual at first. For instance, when composing my first post, I couldn’t see preview, since it was hidden behind welcome message and I didn’t realize I have to close it. This hurt my experience. :slight_smile: Now, when I spent some time looking around, it’s not that bad.

Now to the topic. I see a lot of people are not using 3rd party components at all, creating their own. I find it very unproductive. I rather carefully choose components that cover most of my needs and just create specials or what’s missing.

I’m often using advanced grids, pivots, charts and other controls. It’s not something you create in few hours.

#13

Agree, but those things are hard to be generic. In the end, I still found I need to maintain my own components (yes they are time consuming), instead of spending more time on understanding other people’s components and fighting their abstraction which is just painfully slightly different from what I need.

#14

data-grids, wysiwyg editor, charts…

well maybe input polifils like calendar and color
something that you actually want to just work and not maintain the code base

a div with a drop shadow? don’t need a component for that.

actually having components might make a prototype look good and production ready when it is not.
having ugly bare ui surfaces the logic 1st.
(-:

#15

They seem good and support is good, however, I wished they had more aurelia examples. Everything that I’m working on must be highly configurable and most of the examples are not set up that way. That being said, they have a lot of controls and I like what I’ve used so far. I’ve used the menu, the splitter, the grid, and the chart so far.

#16

I created this datagrid last year:

Simple demo:
https://vegarringdal.github.io/vGridDemo/

Docs in the readme.
Tried to do a lot on my second try

  • virtual scolling (browser is limit of rows…)
  • multisort & filtering
  • highligh rows with contr & shift + mouseclick
  • locked columns to left/right
  • multi grouping
  • menu on header/rows
  • option for custom html in cells/rows
  • no dependencies except Aurelia-framework

Looks like some like it, got some stars, but Im sure some will also hate it :smile:

#17

I’m try to use mostly pure js plugins with a own created or available aurelia wrapper.

  • ag-grid: very rich grid component
  • flatpickr as datepicker/timepicker component

For charts i’m currently looking at britecharts. For now i’m still using c3.js

#18

It’s always a balancing act when picking components. For simple components, I tend to roll my own. Sometimes I’ll pull in something from GitHub. The problem that I find with most components is that once the authors try to accommodate too many scenarios, the complexity goes way up, and the ability to troubleshoot goes down.

I’ve tried just about every one of the big component libraries out there (Telerik, Syncfusion, DevExpress, etc) and to make it worth the money, you need to be all in with their ecosystem. Sometimes that means a degree of lock-in. It’s like learning Angular vs Aurelia. With Angular, you are learning Angular, but with Aurelia, you are learning JavaScript. Every time I’ve tried, they work for 90%, but that last 10% is either impossible or takes a very long time.

The big issue where I work is data grids. Some people think that everything must be a data grid, and that the only solution is to use an omnibus grid that can do anything, and every project should use it. However, this means the grid is complex to get working, and you are stuck if it can’t do what you need, or has a bug. Although, @vegarringdal has a nice one. In fact, many of the Aurelia grids are fairly clean and simple.

Before this rant goes too far, I’d just say that start by applying YAGNI, and use the simplest possible solution. Only go bigger if you actually will make use of the extra functionality.

#19

@devingoble thx

Making something that everyone likes/fit everyone need is impossible :slight_smile:
Thats why I tried to make my grid datasource so it can be replaced, and roll their own, although I dont have much docs about this. (datasource/selection, gridConnector & grid).
But think current datasource can do most since Ive tested it work fast with replace everything etc/add with grouping etc :slight_smile:

But for anyone trying out any frameworks, do you self a favor and take heap snapshots in chrome in demos, and when u test, it going up isnt bad if it goes down mostly again :slight_smile: (some stuff takes time to go down…)

#20

we use material-components-web with https://github.com/SpringflowNL/aurelia-mdc-elements