
Evergreen: a React UI Framework built by Segment - ggregoire
https://evergreen.segment.com
======
ianhawes
This list was posted a few weeks ago, but here is a fairly definitive list of
similar UI frameworks:

[https://element.eleme.io/](https://element.eleme.io/)

[https://ant.design/](https://ant.design/)

[https://quasar-framework.org/](https://quasar-framework.org/)

[https://at-ui.github.io/at-ui/](https://at-ui.github.io/at-ui/)

[https://developer.microsoft.com/en-
us/fabric](https://developer.microsoft.com/en-us/fabric)

[https://vmware.github.io/clarity/](https://vmware.github.io/clarity/)

[http://appnexus.github.io/lucid/](http://appnexus.github.io/lucid/)

[https://ng-lightning.github.io/ng-lightning/](https://ng-
lightning.github.io/ng-lightning/)

[https://blueprintjs.com/](https://blueprintjs.com/)

[http://www.jetbrains.org/ring-ui/](http://www.jetbrains.org/ring-ui/)

[https://www.lightningdesignsystem.com/](https://www.lightningdesignsystem.com/)

[https://elastic.github.io/eui/](https://elastic.github.io/eui/)

[https://atlaskit.atlassian.com/](https://atlaskit.atlassian.com/)

~~~
dmortin
The question is: how many of these will be maintained several years later? Can
you build a long term project on these?

Or the expectation is that one has to make a new UI anyway every several years
to keep up with the changing fashion, so rewrites are inevitable?

~~~
Cthulhu_
Sure, if it works now, it'll work ten years down the line as long as they're
not doing anything nonstandard.

There's a big fear that projects that become unmaintained suddenly stop
working; this isn't correct.

Besides, all webapps are rebuilt in a 3-5 year cycle anyway so it really
doesn't matter.

~~~
pjmlp
Do you feel like rewriting a bunch of webapps written in Perl/modapache around
early 2000?

I know of at least one company with such a stack. Just like I know others with
Web Forms, Stucts, SEAM, JSP, Zope and many other stacks in production.

Not everyone re-writes their webapps, specially in companies where software is
a cost center and totally unrelated to their main business.

~~~
codingdave
Sure, I'd be happy to. Converting apps from an old platform to a newer
platform is reliable work, and I've done my share of it over my career. It
often is structured as temporary projects, so I've had the opportunity to
travel to short-term gigs in new cities while I build out platform conversion
plans.

Sure, not everyone re-writes old apps. But enough companies do it to make it a
decent professional specialty to cultivate. And it doesn't hurt knowing both
the modern stacks and multiple generations of legacy stacks when working with
large organizations. Sign me up.

------
subsection1h
Issue #1: When I scroll down the list of components, click a link to view a
component and then go back to the list, I'm positioned at the top of the page,
not down where I scrolled to. This is an issue with many (most?) JavaScript-
rendered pages that I visit, and it's the main reason why I hate content sites
(not web apps) that use JavaScript-rendered HTML.

Issue #2: Many (most?) of the form components show no indication of being
selected when using keyboard navigation. This is the main issue I have with
most web UI toolkits. (For example, Semantic UI is a notorious offender, even
though it's frequently recommended at HN, including multiple times in the
comments on this page.)

Issue #3: There are multiple problems in Firefox, including two carets
displayed in each Select component.

Issue #2 and #3 almost make me miss the notices that used to be displayed at
the bottom of web pages, such as "Best viewed in Internet Explorer 4 at
800x600 resolution". A lot of pages nowadays should have a warning like "Best
used in Chrome with a mouse or touchscreen".

~~~
freyr
Issue #4: Go to the Tables page, click a header on the example table, the
entire page disappears.

------
ernsheong
I wish people would stop making UI frameworks in <some non-standard framework
name>, and instead make it web components based with vanilla JS/very light lib
dependency, so that everyone can enjoy the benefit. React is becoming a bubble
of its own, and it's exclusive.

~~~
Natela
I agree very much. However there are two points that make it difficult : \-
Virtual Dom. It simplifies a lot the creation of components. And components
that are made for a VDOM are very different from those made without VDOM in
mind. \- Data Binding. There are multiple ways to bind data to your
components, once again this might influence the way components are made.

Those are not standard, some people like VDOM other not, and not everybody
want to bind data the same way. So if we all contributed components in vanilla
JS / Web Components, this still doesn't solve what should the API of those
webcomponent look like.

~~~
Touche
This is confusing. The only difference between if this were a web component vs
a React component is that the consumer would not capitalize the name. Instead
of `<Button appearance="primary">` they would do `<evergreen-button
appearance="primary">`. That's it.

~~~
exogen
Not at all true. Where's your onClick? People want their buttons to actually
do things, right?

With Web Components you're back in the land of saving element references,
querySelector, addEventListener, and string-only attributes. It sucks. If you
want something more like what React provides, where attributes (props) can be
objects, functions, other React elements, etc. then you need to use a library
(e.g. Polymer) that's just as non-standard as React is.

~~~
Touche
Nope, you're wrong. onClick works with web components just the same way as it
does with any other element. Proof:
[https://codesandbox.io/s/j3jmkr98pw](https://codesandbox.io/s/j3jmkr98pw)

~~~
exogen
That uses React to attach onClick, so obviously yes. I'm saying without React.
You said:

> The only difference between if this were a web component vs a React
> component is that the consumer would not capitalize the name. Instead of
> `<Button appearance="primary">` they would do `<evergreen-button
> appearance="primary">`.

If you're not using React, you obviously can't do `onClick={...some function
here...}` with Web Components, you have to use the shitty DOM APIs.

~~~
exogen
I guess I see what you're saying that web components can seem be _consumed_ as
expected from a React app. I thought we were talking about not using React at
all.

But I would expect this still would not work as expected with props like
`children` or other props that accept React elements. It seems like the web
component would be expecting Node instances, not React elements. Since
components can decide whether or not to render their children, they wouldn't
be backed by Nodes yet when the web component received them. So it seems like
it'd have to know whether it's dealing with React and use ReactDOM.render
directly.

------
rahimnathwani
Why are these UI frameworks tied to React, rather than working for any
HTML+CSS site (as with Bootstrap)? Do they provide interactive functionality
that requires React or similar?

~~~
andrewingram
Probably because the people making them are using React, and first and
foremost they're making it for themselves.

~~~
rahimnathwani
That was my guess, but the_duke's comment makes me think there is more to it.
I'll have to look at the code to see if the React components do anything more
than apply HTML templates with associated CSS styles.

~~~
andrewingram
Some of them require run-time JavaScript, like the popovers and select boxes.
And largely the value here is in the comprehensive component API, rather than
just the HTML/CSS it spits out.

------
chrisparton1991
Evergreen looks quite nice, but their website isn't responsive and that gives
me pause when considering it for my own projects. The components themselves
may work fine, but I can't be sure without digging in further.

Just something to consider if you're looking at using Evergreen.

~~~
UntitledNo4
"Currently there is no opinionated way to construct responsive layouts in
Evergreen. In the case of responsive layouts you might want to simply use a
div with a class name and use breakpoints in CSS — or potentially a CSS-in-JS
solution."

[https://evergreen.segment.com/components/layout-
primitives](https://evergreen.segment.com/components/layout-primitives)

~~~
onion2k
Responsive design isn't just adding breakpoints.

It's responding to the device and the ways the user will interact with it. For
example, the combobox example in Evergreen doesn't actually use a <select> in
the background, so users on mobile devices will actually have to use the
dropdown implementation rather than the browser displaying a proper native
mobile select. That's a _much_ worse experience. Not to mention Evergreen will
be _completely_ inaccessible for users who need assistive technology, which
potentially poses legal issues...

~~~
statictype
Did you try it on mobile? It actually does seem to use the native selector and
not the custom one for me

~~~
onion2k
I did, and it doesn't on my Android phone.

------
laurent123456
That's a minor thing but when I press the back button on one of the
documentation pages it takes 6 seconds to go back (first it changes the title
of the tab then it seems to wait for 6 seconds, probably parsing and running
several MB of JavaScript). Sometimes the tab titles is blinking and displaying
"Evergreen" and "Components - Evergreen" very quickly during these 6 seconds.

You'd think in 2018 going back to a page would be a solved problem, but
apparently each new framework needs to re-solve this in a new orignal way.

~~~
virtualmic
This doesn't happen for me, it is pretty quick. I am in India and on a 40 Mbps
connection.

~~~
laurent123456
My connection is fast enough too. I'm on Firefox though, so maybe that's the
"issue", if their framework is designed to work mostly on Chrome and not the
other browsers.

~~~
virtualmic
Yes, I am looking at it in Chrome on Ubuntu.

Just tried it in Firefox 62 on Ubuntu. Works good there too.

------
sgt
I've wondered about React, although I haven't used it myself. I know that the
new Reddit was written using React components, and it's very slow. Is that a
React problem (i.e. is it hard to write fast web apps) or is it a Reddit
problem (or both)?

~~~
ttty
React is fast. If you are not experienced in react you'll make a mess because
they work against its principles.

To me the Reddit web app is fast, the show part I think is the server side.

~~~
sgt
There may be some fast components in the Reddit web app, but I think there
must be a valid reason why so many users are switching to the old Reddit (not
just because of the way it looks, but due to performance complaints). I just
went in and even scrolling through Reddit comments is laggy. Switching to old
mode is like day and night.

~~~
wp381640
they're sticking with the old reddit because the information density is much
higher. it's a design problem.

~~~
nik736
Not only that, for me in Safari the new reddit barely works and is not loading
things very fast or sometimes at all.

------
siftikha
always hilarious to see the dumb dependencies that these projects have

[https://github.com/sindresorhus/arrify](https://github.com/sindresorhus/arrify)

[https://github.com/JedWatson/classnames](https://github.com/JedWatson/classnames)

~~~
yuchi
While I can understand your skepticism on the first one, the second package is
actually very useful. It doesn't just concatenate strings filtering out falsy
values, it supports the whole old AngularJS class format. You can, for
example, pass an object {string:booleanish} and it will add only the keys
whose values are truthy.

Pretty neat, actually.

~~~
anonytrary
> You can, for example, pass an object {string:booleanish} and it will add
> only the keys whose values are truthy.

Why is this something you can't do on your own in a few lines of code?

    
    
      const classNames = (o, c=[]) => {
        for (let k in o) if (o[k]) c.push(k) // booleanish
        return c.join(" ")
      } 
    

This is not cool at all! Why import a trivial function over NPM to do this for
you? Better to _lower your dependency count_ and have a "util.js" file for
helpers like this.

~~~
darekkay
I get the "dependency hell" issue in Javascript world, but why would I rewrite
this particular utility? It's well tested (both unit and field tested),
includes edge cases and has zero dependencies. As a dependency, I will also
get any future bug fixes or features if I wish to. An even better example is
lodash. Would you really rewrite every util you need just for the sake of not
having external dependencies?

~~~
Aeolun
Probably because the scope is so small that you _could_ actually rewrite it
yourself. And then together with all these other toy libraries, stick it in
one big one that covers everything you need in terms of convenience functions.

------
breytex
Does anyone knows a react ui framework which also includes concepts for more
high-level interfaces? Not only atoms and molecules, but also "organisms" and
"pages" as a compound of several components?

I feel like, a lot of ppl still create horrible UIs based on good components,
because they lack the bright overview.

~~~
apoorvgarg
This might be useful [https://github.com/ant-design/ant-design-
pro](https://github.com/ant-design/ant-design-pro)

------
keyle
Great, but not a single clickable item works in Safari :'D

~~~
tejasmanohar
Are you on macOS? I can open the dialog via button example here
([https://evergreen.segment.com/components/dialog](https://evergreen.segment.com/components/dialog))
on macOS Safari 12.0.

------
Scirra_Tom
We made our own: [https://editor.construct.net/#open=kiwi-
story](https://editor.construct.net/#open=kiwi-story)

Responsive (in terms of interaction with components) and lightweightedness
were our top priorities when we started developing (~3 years ago) and no third
party solutions seemed to fit the bill back then. Always a fear as well of
reliance on third parties for such an important part of the product - is a
very large technical risk for the entire business.

We're pleased with the results, our entire app is smaller than the Apple
homepage (usable after ~1MB of network transfer) and often starts up faster
than our C++ native Windows predecessor. Bloating third party solutions could
add significant %'s onto the download size - the example HN React Clone is a
comparible size to our product:
[http://www.hnclone.win/](http://www.hnclone.win/)

There was a lot of resistance from users initially when we announced the
future of our product would be in the browser and not the native desktop app
they were currently using, but we do get emails from users saying after using
it for a while they forget they are working in the browser which is amazing.

If we started developing today, I think we'd still roll our own.

~~~
tln
Is it internal only?

~~~
Scirra_Tom
Yes, no plans to do anything with it for now

------
jefozabuss
Seems like under the hood it uses blueprint for Icon, checked if they have a
similar issue as blueprint with icons (no tree shaking) and yep:

[https://github.com/segmentio/evergreen/blob/master/src/icon/...](https://github.com/segmentio/evergreen/blob/master/src/icon/src/Icon.js)

------
tptacek
So far, I'm aware of Material-UI, Grommet, Bootstrap, and this for React. Are
there others worth knowing about?

This looks good, though it also feels like it leans towards native controls;
see Select vs. Select Menu, for instance. Material and Grommet have a unified
style thing going on that this doesn't seem to. But this has more controls and
seems more mature.

~~~
chrisweekly
Depends if you want a UI _kit_, vs the right tools to make a great custom
design system. For the latter, take a look at tailwindcss.

------
georgecalm
I think it's a beautiful, thought out, polished and well built set of UI
components. If that's what I needed for my next project, I wouldn't hesitate
to use it. The docs are excellent too. There's so much attention to detail
here. There's an immense amount of love poured into this project, even the
code snippets are interactive.

------
andreygrehov
This one is actually quite cool. I like it more than Ant. Given the number of
GitHub stars, it looks like the framework has been around for quite a while.
Never heard of it. One thing that I like about Ant.Design is that it's written
with TypeScript. Wonder why Segment decided to go with JS, given that they
position it for Enterprise apps.

~~~
ui-explorer12
Blueprint from Palantir is also a solid framework built on TypeScript. It's
desktop-first which is quite different from most

~~~
tejasmanohar
Would you not consider Evergreen desktop-first, too? It doesn't really provide
any constructs out-of-the-box for responsiveness AFAICT.

------
petemill
Nice library, organization and write-ups. They don’t seem to talk about
responsive though. Since size, typography and spacing are all passed as exact
values, how do they imagine providing different values for different devices
or windows? Conditionals in JS?

------
janimo
In a fresh create-react-app project, their getting started example that
includes only a button results in a minified js of 570K. Apparently the whole
of Blueprint.js is included as a dependency. Shouldn't tree shaking take care
of this seamlessly?

~~~
nullbyte
Tree shaking isn't automatically supported for CSS. You can use third party
tools like PurifyCSS though.

~~~
janimo
It's the js bundle that is large.

------
sdegutis
When I saw this the other day, one of the first things I tried was Ctrl-N/P to
navigate its auto-complete lists, but it didn't work, so I sent a pull request
with the underlying library Downshift
([https://github.com/paypal/downshift/pull/596](https://github.com/paypal/downshift/pull/596)).
I think adding little touches like this helps to show that a library author
pays attention to detail. I know that it's only programmers who would use that
keyboard shortcut, but that still probably numbers in the tens of thousands of
potential users.

------
crystaln
I don't think I would support this in an engineering organization. There are
so many people focused on solving these problems, that I believe not being
able to make an existing solution work well is for lack of trying. I'm a bit
out of the loop on React, however if I had to guess Segment would be better
off investing in adapting an existing framework, no matter how nice this one
might be.

------
acarl005
Looks like they improved a ton with the v4.0 release. I used this just a few
months ago and it was painful. Undocumented components, lack of basic
customization, some bugs. Seems like that stuff has been addressed. I remember
Evergreen adding about 60kB to my bundle size though (mostly due to its
icons). I hope that's been reduced.

------
ergo14
Great, another UI framework that will not work with Vue, Marko, Angular,
LitElement or basicly anything else than react. When will the trend stop :/

Can't we embrace web components already and have those UI frameworks work in
all popular solutions out there? Every time something new comes out existing
solutions are being rewritten from scratch.

~~~
no1youknowz
I suppose since it's open source, then there is nothing stopping anyone from
porting it to Vue?

~~~
ergo14
That was my point, we should not need to rewrite this over and over.

------
muhneesh
I use Material UI, but I'm definitely stealing your color palette - great
defaults.

------
sandGorgon
Ant.Design is one of the most popular design systems, by counting the number
of react themes on Themeforest. It is fairly complete and comes with a lot of
design elements for data-intensive usecases (like grids, tables, etc)

------
Justsignedup
I genuinely wish these frameworks wrote a why. There's say bootstrap. Etc.

Why specifically this one?

I take it the main thing is their methodology for applying styles rather than
css classes which might or might not make the code more readable.

------
tomelders
Popover menus and drop-downs should disappear when the user scrolls the page.

Also, custom select inputs always ignore a big percentage of the functionality
that native select inputs deliver.

------
ericnkatz
I've been following the repo for quite some time and playing around with it
locally. Very very well made UI Framework/Component Library.

Props to @jeroenransijn, @rowno and others!

------
rukittenme
This is really cool! I've been firmly locked on the backend for the past 5
years. I think this library will finally bring me back to the browser.

------
heshamelaj
The website is not responsive . Why ?

~~~
dbbk
Segment isn't designed to be used on mobile.

~~~
pxtail
Nowadays that is kinda laughable and almost disqualifies project

~~~
dbbk
No, it's called being pragmatic.

------
Kiro
Where can I see one page with all the components?

------
lewich
yet another ambitious web framework...

------
bengrunfeld
Here's another framework, that raps around a library, that wraps around
another framework, that wraps around another library.... please... stop making
me learn new things to keep myself relevant in the vertigo-inducing swirling
vortex that is Javascript.

------
subbz
What I don't get: Why is it just for React?

~~~
vmware513
Same question here. Is this the honest reality nowadays, that only one
frontend library/framework became "the standard"? It looks to me, that React
is "the winner" and most of us should focus on this, because others just come
and goes... Is that true?

~~~
ergo14
People were saying that about jquery too. Vue is gaining a lot of traction
too. This year it is STILL react being the one with biggest userbase, but that
might not be true in a year or two. This discussion pops out every once in a
while, IMO there is no "we should focus just on this" in IT world, landscape
is ever changing.

