
Element – A Vue 2.0-based component library for developers, designers and PMs - Dowwie
http://element.eleme.io/
======
netforay
I have actually tried to use this to build an enterprise application. Here is
what we found.

* Most of the components they provide are very basic and does not actually require them to provide it. Couple of lines of wrapper on any CSS framework like bootstrap can make half of those components.

* Most of the advanced components like DataGrid, DropDown Menus, etc are aither not available or buggy. You will get better support from thirdparty Vue components.

* There are lot of silly components like footer and header etc. There is no need for defining them except to show that it is complete UI framework. Trying to be 'Complete UI Framework' is bad choice for any UI on Web. HTML is too flexible and requirements are too diverse that no one UI library can provide everything.

We finally replaced all Element Components with standard bootstrap code. Every
thing works perfectly. And we get the benefit of 1000s people testing
bootstrap.

~~~
progx
Did you use any library for example form validation, or did you do that on you
own?

~~~
netforay
We implemented our own. We don't need more than 10 different type of fields.
So basically it will take couple of hours to create those base components to
our requirements.

The main lession I learned in JS world is, when the requirement is small,
better write it from scratch using code we find on net. Trying to integrate
different incompatible libraries will just waste our time.

------
deallocator
I really like Element but it's a shame they don't it responsive, when I tried
contributing to make things responsive they actively denied the PR saying it's
for desktop apps.

Actively refusing pull requests that make the framework responsive is a bit of
a downer for me, but overall I like what the author(s) did

~~~
coldpizza
"it's for desktop apps"

haha can you imagine if desktop users had different resolutions and aspect
ratios on their screens? oh wait...

~~~
WhitneyLand
It's an excellent point. This one response from the team is enough for me to
lose confidence in the project.

------
patleeman
For anyone looking for a lightweight responsive library, Bulma
[http://bulma.io/](http://bulma.io/) is a great option. It pairs with Vue
quite well since it's a CSS only library.

Note: I'm not affiliated with them, just using them on my latest project.

~~~
naiv
It's looking good, one thing that bothered me as it's css only is that form
elements like checkboxes and radio buttons need to be styled separately
([https://github.com/jgthms/bulma/issues/44](https://github.com/jgthms/bulma/issues/44))

~~~
tracker1
If more component libraries went with the following structure...

    
    
        <label>
          <input type="radio" />
          <span>Label Text</span>
        </label>
    

It's easy enough to target the input/span as children of label for custom
styling, without having to use JS or some weird wrangling of classes and
structure.

------
azurelogic
I tried using Element on my current project and, like other commenters, found
it to lack enough responsive utilities to make it useful. Then I stumbled upon
Quasar ([http://quasar-framework.org/](http://quasar-framework.org/)). It's
responsive, supports Cordova and Electron, and it looks good. I rarely switch
frameworks mid-project, but this was well worth the effort.

~~~
rrhyne
Looks really good. I usually judge a library by it's data table. This one
seems surprisingly featured.

------
lima
Question for HN: I'm a systems developer and want to play a bit with frontend
development (writing frontends for custom tools I built).

What framework + feature-complete component library is recommended in 2017?

React? Vue? Polymer? Plain JS with intercooler.js? I feel a bit overwhelmed.

~~~
ergo14
I would suggest Polymer. Web Standards based - has comprehensive library of
elements and polymer itself is a tiny library.

I've had very good experience with it - if you know html/JS you will feel at
home.

As for being "feature complete" \- it has probably best implementation of
material design elements and you can find a ton of other element on
[https://www.webcomponents.org/](https://www.webcomponents.org/).

It is also interoperable with other solutions like jquery/angular/aurelia and
others.

~~~
netforay
Polymer is built for the world without Vue.js or React. They are slow and
heavy weight compared to very very optimized DOM operations done by Vue.js or
React.

I think the time for Polymer is gone, and it is better to forget that it
exists.

~~~
Touche
I mean, custom elements just shipped in Chrome a few months ago and are
shipping in Safari soon. Firefox is in active development. So a bit too soon
to say a technology's time has passed when it hasn't really had a chance up
until this point.

~~~
tdumitrescu
Chrome has had Custom Elements since v33, almost 3 years ago. Maybe you're
thinking of the latest (v1) iteration of the spec?
[http://caniuse.com/#feat=custom-elements](http://caniuse.com/#feat=custom-
elements)

~~~
Touche
Yep, v0 doesn't count, it's a legacy Chrome-only feature for now.

------
progx
Used it since some weeks. Good documentation and examples, don't be afraid of
many chinese chars in the doc or on github issue, they try to write everything
in english too.

Always got quick response when i had issues.

Great advantage, which is not so exposed, is, that the form system has a good
(i think well known) validation system integrated. Developers did not need to
build own hacky solutions or search other libraries that work mostly not good
with an external UI.

------
WhitneyLand
Desktop only framework seems like a bad idea.

\- How can you be sure you won't be asked for a mobile or responsive version
down the road? People change requirements all the time.

\- If you want to ever work on other type of projects you now have to learn
two when one may have sufficed

\- Community size is a huge factor for contributions and momentum, and desktop
only limits your community size

For this framework it would be more useful if they offered a single component
for a data grid. That's more work than the rest of the framework combined.

------
tuyguntn
Developers are creating lots of UI libraries but after sometime they lose
traction and support for this library abandoned, bug fixes/improvements will
be halted. If so, why create so many libraries instead of writing yet another
theme for bootstrap. Best example is material ui kits, they are a lot, but
only 2 or 3 of them are still continuing development

~~~
Etheryte
While I agree with the sentiment in general, I don't think Bootstrap is a
great solution either. It's very easy for a project to outgrow Bootstrap at
which point it becomes a burden instead of an asset.

~~~
jdhendrickson
Could you expound on what you mean? How is it easy to outgrow Bootstrap?

~~~
thirdsun
I'm not OP and I made the experience with Zurb's Foundation but the problem
isn't specific to the framework.

In my opinion you'll run into issues with these kitchen sink frameworks once
you try to do something custom - customizing elements and components feels
like fighting the framework at a certain point and once you realize that it's
hard to get out.

I don't recommend using Bootstrap or any other framework unless you're very
certain about future requirements.

Here's a nice talk on the topic:
[https://www.youtube.com/watch?v=Mea2jIXQEFk](https://www.youtube.com/watch?v=Mea2jIXQEFk)

~~~
tracker1
I find that using the SCSS/Less source for bootstrap is less fighting... the
layout/structure is pretty easy to use internally, for the most part,
everything I need for creating additional controls starts from variables and
utilities.

~~~
thirdsun
But you would break all that once it comes to updating the framework, wouldn't
you? With Foundation it was either that or constantly overriding framework
defaults. Once you took a look at the rules in the browser inspector / dev
tools you saw many of them leading to conflicts and it felt very messy despite
end results working out.

~~~
tracker1
I usually copy the variables/utils to my project (often just the variables)...
when updating minor/point version updates, it's usually a quick diff against
the framework version to see what's been added/changed. Major versions are
usually close to a rewrite of the rendering templates/components, so that's
the case regardless.

I have my own bootstrap.scss, with my own variables/utils... the rest point to
the framework versions... It's pretty easy to do and works out _really_ well
imho. Of course, I often only change a few colors, and tweak some of the font
defaults.

------
pdxandi
I've been using this library for the last few weeks in two different Vue.js
projects and it's awesome. The English documentation is still being written,
but the components are really well thought out and complete. These folks made
a beautiful, solid UI library.

------
shaydoc
Vue is really nice to develop in. I have led the push to adopt Vue in our
company now. It is very well put together and along with WebPack is really
improving our entire setup. It definitely provides the kind of standards we
need to grow our team around.

~~~
shaydoc
Also this is a very well put together component library. I will definitely be
investigating it more.

------
rpbertp13
Element seems heavily inspired by Ant Design for React [1], which came out of
Ant Financial/Alibaba.

It's a project by Ele.me, a Chinese food delivery company. Alibaba and Ant
Financial invested $1.25B in it last year [2].

[1][https://ant.design/docs/react/introduce](https://ant.design/docs/react/introduce)

[2][http://www.wsj.com/articles/alibaba-ant-financial-to-
jointly...](http://www.wsj.com/articles/alibaba-ant-financial-to-jointly-
invest-1-25-billion-in-ele-me-1460545990)

------
GordonS
I get a 404 when opening any of the linked pages in a new tab, since the URLS
are missing a '#'.

------
uranusjr
Don't want this to sound like bashing, but the website doesn't work very well
on mobile (hover and active states act weirdly, menu very clumbersome, etc.),
and I assume the same can be said about the toolkit. Hopefully this is an area
the author(s) plan to work on.

UPDATE: Just realised this is developed by a Chinese food delivery service
ele.me (饿了么). I visited their website and found its developers made it
completely without RWD in mind. This explains things…

~~~
deallocator
unfortunately it's not, they even actively refuse PR that attempt to make
components responsive

~~~
uranusjr
Unfortunate indeed. I get that making things work well on both desktop on
mobile is difficult (if not impossible), but at least the UI should be somehow
usable. The nav works so poorly on my phone I can’t even browse all the pages
on the site. Guess I’ll continue my search for a good UI toolkit for my Vue
projects somewhere else. :(

------
z3t4
In a project I work on right now I use no XML/HTML. I love HTML and it's great
for static web pages/documents and for "old school" server side rendering. But
for a SPA with real time and dynamic updates, it's the wrong tool. It's much
faster appending the elements to the DOM. Lexical scope and closures plus
being able to call functions that returns elements in JavaScript makes it fun.

------
skocznymroczny
I like that this one has a tree component, it seems like most widget sets
(SemanticJS and Bootstrap and everything Material included) forget about the
tree.

~~~
imafish
Actually, I have seen multiple libraries aimed for desktop UI that implement
trees. Seems that trees somehow were lost in the transition to web
applications.

------
prezjordan
Sadly this library seems pretty poor for accessibility :(

------
usaphp
Since I started using rem for font sizes I just can't go back to px, I find
rem so much better for responsive websites and would recommend it to anyone
who did not try it yet.

~~~
Kiro
What's the benefit? I don't like having to calculate how big things will be
(by converting base font + rem to px) while with px I know immediately.

~~~
usaphp
You don't have to calculate anything, 1 rem is 16px by default, but you can
set html font size to 62.5% and it will be 10px, so if you need something to
be 20px (if you are used to px sizes) - you can just set it to 2rem and it
will render as 20px. It's not a matter of calculation but just a matter of
getting used to how big is 1 rem.

The biggest benefit is that you can target specific screen sizes with
different html font-size values using @media queries, so for example for
bigger displays you can set html font-size to 120% and it will result in
automatic increase of size of all the elements where font-size or paddings etc
are set with rem. Same goes for mobile devices, for examples all the headers
will go from being 40px font-size to say 25px, just by changing an html tag
font-size value, you don't have to target any elements individually, it will
be automatic.

For me it was one of the best discoveries to increase productivity, when
building responsive designs.

~~~
Kiro
Cool, thanks! I will try it out for my next project.

------
GordonS
I love how comprehensive the set of components is - trees, tables with lots of
options, sliders, date and time pickers with range support, carousels...

I was going to give Vue.js a try for my next project anyway, so I'll be giving
serious consideration to using this instead of my default choice (Bootstrap).

~~~
GordonS
Ah, I hadn't noticed that it's touted for desktop apps... and isn't
responsive. Might give it a miss then..

------
LeoNatan25
What does "eleme.io" even mean? How sad of state are we that everyone feels
compelled to use these nonsense "io", "me", "to", etc. domains just because
they are "hip".

~~~
overcast
It means the domain squatters own just about every single word of every TLD at
this point.

~~~
weka
I can attest to this fact. Many domain squatters sit on four, five and even
six letter premium .com/.org./.net domains waiting for their payday that never
comes because no one will ever pay that much money when the alternative is to
use another domain name.

And of the people that CAN pay that money, what happens is they send a notice
of their newly-established IP being used in a domain and they get it with the
help of the registrar.

It's ridiculous to expect a person pay $1000+ for a domain when they go 'oh,
we'll just use another domain name!'

People are dumb.

edit: spelling

------
Jonovono
"Just for Product Designer" ? Some weird copy going on.

~~~
RivieraKid
Author is Chinese apparently.

~~~
Etheryte
Vue.js has a large traction in China since the creator speaks Chinese and all
the docs are available in it as well.

------
naiv
Besides the already mentioned UIs I am also watching
[https://vuetifyjs.com](https://vuetifyjs.com) , looks promising.

------
ryanmarsh
If I click the link to a new UI lib from my phone and the demo is janky as
fuck I'm not going to pull it into my project. Maybe I'm just being an
asshole.

------
capkutay
Any other PMs on here that can vouch for this as a solid prototyping tool? My
current prototyping options are either too time-consuming or too
restricting...

------
dsarch
Hello!

Sorry for bringing this issue here and I'm sure many may not understand my
point... but, after reading some posts about objectification of women (like
this one: [http://www.heroicgirls.com/de-objectify-women-comics-
guide](http://www.heroicgirls.com/de-objectify-women-comics-guide)), could the
woman in the homepage picture be drawn differently?

I'm sure it was not intentional and it may be seem as a small issue for some
people, but I know women who do not like to be represented that way.

Thanks for understanding =)

Btw, I really like the page design! It is great =)

------
sergiotapia
I thought this would be like a tool to build a styleguide for your
application. Not an actual framework like Twitter Bootstrap. :(

------
kevindqc
The links at the top (Guide, Component, Resource) fail when trying to right-
click -> open in a new window :(

------
k__
When I found this, I thought it was for WebComponent based and for all
frameworks.

------
viach
How is it comparing with taking, say, Semantic-UI, and use it with Vue?

------
threefour
If you have to use a command line to install it, it's not for designers and
PMs.

