
Clarity Design System for Angular 2 - qHydra
https://vmware.github.io/clarity/index.html
======
jaffoneh
Hi HN, I lead the Clarity team. Would love to get your opinion and feedback!
Clarity is fully open source (we open sourced it this morning). Our repo is
here: [https://github.com/vmware/clarity](https://github.com/vmware/clarity).
You can also take a look at the Clarity Seed for a quick way to start building
Clarity-based applications: [https://github.com/vmware/clarity-
seed](https://github.com/vmware/clarity-seed)

~~~
merb
Even if you are VMWare with thousands of developers, do you really think that
you can keep up with the speed of development from Angular?

~~~
jaffoneh
Hi merb, could you elaborate a little more on why you think it is a challenge
to keep up with the speed of development from Angular?

I am not sure if there is confusion here but those components are built on
_top_ of Angular 2. We use and love Angular 2. In fact, we talk and work with
the Angular team and both Angular and Clarity are open source projects. We
contributed and would like to continue to contribute back to Angular as well!

------
water42
Hi Clarity team,

What would you say the primary motivation in switching from material2 or
ng2-bootstrap to clarity would be? At my work we have an Angular 2 app still
in development and have been rather dissatisfied with the available component
libraries so far. We're at a point where it wouldn't be unreasonable to switch
UI frameworks.

Additionally it looks like you have only implemented some of the material
design spec. What was the reason for this / why not go full material?

~~~
jaffoneh
Hi water42, I think material2 and other frameworks are fine frameworks and are
worth your consideration.

We really built Clarity because we were in your position. No framework out
there was able to provide us with what we needed to ship high quality,
enterprise software but with modern and consumer-like UIs. We needed that
framework to care deeply about user experience (not just provide code) and we
wanted to make sure that framework is flexible enough that teams across the
company (before we open sourced) can have the ability to understand it, build
on top of it, etc.

We really looked around and every time we found something it had a part of the
puzzle but not really enough of a part that we can depend on it.

Clarity does not depend on material (the design language), we are definitely
inspired by material and others but we're building an end to end design system
which includes the user experience and visual language aspects. Behind the
components and patterns is a ton of research that we've doing throughout the
past few months (and sometimes years depending on the data we have) and want
to continue to do. One of our goals is to also share that research in case you
can reach different conclusions so the community is able to keep us moving in
the right direction.

~~~
water42
Thanks for the quick reply!

It would definitely be useful to publish the research behind the design
choices you've made. As a developer with not a lot of design experience that's
something I would be interested in.

~~~
jaffoneh
Yeah, we definitely feel that and want to address that use case. Some of that
research is shared today in places like patterns and for every components (if
you scroll enough in the page) but more research is coming in the next few
days/weeks. We want you (as a developer) to be able to not just use the code
but if you'd like, be able to fully understand the UX guidelines behind
building a Clarity applications and go a step further by explaining why given
the research/assumptions we have.

------
jbigelow76
This is a very nice looking set of controls with a lot of functionality. Thank
you to the Clarity team for the contribution to the community. I've got a
project in the works that has been screaming for something other than vanilla
bootstrap :)

~~~
jaffoneh
Thanks! Please let us know if we can help in anyway and if you have the time,
we'd love to listen to feedback on both: the design system itself as well as
the tools you used to use it. As a quick note, we've also open sourced
Clarity-seed alongside Clarity to make it easier to get apps up and running on
Clarity: [https://github.com/vmware/clarity-
seed](https://github.com/vmware/clarity-seed) so that might be worth a look
too!

------
hacktothefuture
Great work! I like Material but this looks super slick and it feels like the
documentation is more understandable. The design is really clean. I will
consider this heavily when we upgrade our current ng1 app. Well done.

~~~
jaffoneh
Awesome. Glad you like it. Make sure to share feedback with us as you go
through that. We'd love to continue to improve the system itself as well as
the documentation!

------
Mokwa
I'm not able to use it with angular-cli, could you enhance your instalation
steps for the current angular-cli?

~~~
jeeyun
Hi Mokwa, thanks for your feedback. We shied away from recommending angular-
cli in the very early stages, but now that it's become more stable, I see that
it would be valuable to add that in our documentation. We'll be working on it
very soon. I filed an issue for it on Github if you are interested in
subscribing to it:
[https://github.com/vmware/clarity/issues/79](https://github.com/vmware/clarity/issues/79).

------
Bahamut
Disclaimer: I am on the ng-bootstrap team

The demo website loads very slow :( .

I would recommend looking at [https://ng-bootstrap.github.io/](https://ng-
bootstrap.github.io/) for some code design of some of these components - as
far as I can gather looking at the source code of Clarity, it appears to not
be AoT-compliant, a big thing going forward with Angular due to the immense
perf benefits it brings, and opens up the gate for also being able to use Web
Workers/Service Workers.

~~~
jaffoneh
Hi Bahamut, welcome! we'd love to chat with you guys (feel free to reach out
to me with a DM on twitter). We'd love to share what we learned and learn from
what you learned!

As for the slowness of the page, this is GitHub. It is currently down :(

As for AOT, that's definitely a priority for us (we were talking about it as a
team yesterday and are working hard to make it a possibility for Clarity so
we're definitely on the same page there).

~~~
robwormald
ng core team here, feel free to reach out to me on twitter if you need any
help getting this done - @robwormald

~~~
jaffoneh
hey robwormald, will definitely do. We will actually reach out sometime
today/this week!

------
bertan
As a system designed for "designers" with guidelines, I expected something
like Material Design from Google. However, I am very disappointed, even the
website UX is very designer unfriendly IMHO. I cannot see a download link or a
direction for it in the home page for the mentioned Sketch file.

~~~
kimshibal
RTFM. [https://vmware.github.io/clarity/get-
started/](https://vmware.github.io/clarity/get-started/)

------
methyl
Looks good, but comparing to other systems like this one but for React, it
looks it's relying on plain HTML structure to compose layouts vs. using
components system to generate and encapsulate HTML. From what I know Angular 2
supports components so I wonder why is this not leveraged here?

~~~
eudes
I think what might be happening is a small confusion between our deliverables.
Some teams we worked with wanted to use as much of Clarity as possible but
couldn't switch to Angular in the short term, so we made sure we could deliver
"Clarity UI" and "Clarity NG" separately.

Clarity UI is pure CSS: you just include it on your page, use the correct
markup and classes and our styles will be applied. Kind of like using
Bootstrap without their JS (most of us have done this).

Clarity NG depends on Clarity UI for styling, but provides full-blown Angular
2 components with the correct markup in their templates, two-way binding, ...
That's the easiest way to use Clarity, but it forces you to use Angular.

Unfortunately, our documentation doesn't split the two yet, it starts with the
pure HTML/CSS version and then showcases the Angular 2 components after that.
Probably explains the confusion.

I hope this helped!

~~~
methyl
> Unfortunately, our documentation doesn't split the two yet, it starts with
> the pure HTML/CSS version and then showcases the Angular 2 components after
> that. Probably explains the confusion.

That's where the confusion come from, thanks for explanation!

------
g_mulholland
Looks very nice. I am super keen to look at this for a project I am about to
kick off.

------
choward
Am I blind or is there no date-picker? That's the only reason I'm looking for
an alternative to angular2-material.

~~~
jaffoneh
Hi choward, you are not blind! :) We're working on a date picker. If you have
specific requirements (especially around localization) we'd love to hear it to
make sure we consider it but it is in the works1

------
luck_fb
Looks nice, might just try it in my next project!

