21 ms·

Evergreen: a React UI Framework built by Segment

593 points by ggregoire 8y ago

tptacek 8y ago
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 8y ago
  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.
  - mmmeff 8y ago
    Please stop trying to make these terrible CSS systems like tailwind work. They are a massive anti-pattern for any sane CSS system.
  - mdgrech23 8y ago
    I'm a tailwind fan but that was straight shilling and unrelated to the discussion at hand.
    - chrisweekly 8y ago
      "shilling"? wat I have no affiliation. And it's pretty uncharitable to say that mentioning tailwind (or other functional css systems) is "unrelated" to a discussion of approaches to applying css to web applications... sigh.
    - dang 8y ago
      This comment breaks the site guidelines. Please review https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html and follow the rules when posting here.
- crgwbr 8y ago
  Blueprint.js is decent for desktop-like web apps. If you need to support mobile, then it requires a bit extra work.
- BruceM 8y ago
  There's also Ant Design (https://ant.design/ https://ant.design/).
- zdragnar 8y ago
  Ant is quite nice, and is loaded with controls. I've wanted to toy with blueprint, but their desktop-centric focus (which makes sense, given the backing company) steered me away a bit. https://ant.design/ https://ant.design/ is the main page, https://ant.design/docs/react/introduce https://ant.design/docs/react/introduce for react, and for angular: https://ng.ant.design/docs/introduce/en https://ng.ant.design/docs/introduce/en
  - BruceM 8y ago
    They have Ant Mobile! https://mobile.ant.design/ https://mobile.ant.design/
    - deleted 8y ago
      [deleted]
- deleted 8y ago
  [deleted]
- adpirz 8y ago
  Semantic UI - https://react.semantic-ui.com/ https://react.semantic-ui.com/
rukittenme 8y ago
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.
ianhawes 8y ago
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/
- shimms 8y ago
  Thanks - that's a great list. Some of them (atlaskit, MS fabric, Jetbrains, vmware etc) are geared towards building an integration withing those company's products. Whilst they can be used independently (without assets in Fabrics case, and other restrictions in the others), my take is the Evergreen (and ant, etc) are geared towards isolated products, similar to Bootstrap. If you're building an addon for use in an Atlassian product, or an Office 365 product, these are a great way to stay consistent with the host application's look and feel.
  - threeseed 8y ago
    Definitely be careful when using some of them e.g. Atlaskit because they are designed specifically for integration. And if you use it for something else you may not comply with the license.
- hardwaresofton 8y ago
  I can recommend Element (the top of the list) -- I've used it on two projects now and it's been pretty refreshingly easy to use and relatively easy to integrate with (when you need to hook into components to make them act a certain way, for example a paginated table).
andreygrehov 8y ago
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 8y ago
  Blueprint from Palantir is also a solid framework built on TypeScript. It's desktop-first which is quite different from most
  - tejasmanohar 8y ago
    Would you not consider Evergreen desktop-first, too? It doesn't really provide any constructs out-of-the-box for responsiveness AFAICT.
keyle 8y ago
Great, but not a single clickable item works in Safari :'D
- tejasmanohar 8y ago
  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.
- M4v3R 8y ago
  It was same here, latest macOS/Safari. Weirdly enough now I visited the page again and it works.
ericnkatz 8y ago
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!
petemill 8y ago
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?
chrisparton1991 8y ago
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.
- deleted 8y ago
  [deleted]
- UntitledNo4 8y ago
  "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 8y ago
    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 8y ago
      Did you try it on mobile? It actually does seem to use the native selector and not the custom one for me
      - onion2k 8y ago
        I did, and it doesn't on my Android phone.
sdegutis 8y ago
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.
sgt 8y ago
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 8y ago
  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 8y ago
    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 8y ago
      they're sticking with the old reddit because the information density is much higher. it's a design problem.
      - nik736 8y ago
        Not only that, for me in Safari the new reddit barely works and is not loading things very fast or sometimes at all.
    - wallawe 8y ago
      This could also be due to a poor implementation of event listeners for scrolling, e.g. not throttling, which isn't necessarily a React issue.
      - wild_preference 8y ago
rahimnathwani 8y ago
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?
- deleted 8y ago
  [deleted]
- humbleMouse 8y ago
  Don't ask questions like that. /s
- Spiritus 8y ago
  Not sure about interactive functionality. But it basically means it provides ready-made React components.
  - rahimnathwani 8y ago
    I think the_duke answered my question. The reason I asked it is that, if you're building an HTML+CSS framework for use in React, then why wouldn't you separate out the HTML+CSS part, and then depend on this. That way it would be easy to re-use 90% of the work, if you then want to use the components with Vue or some other framework, or even for plain static pages.
- the_duke 8y ago
  They are not CSS frameworks in the sense of Bootstrap. They are React component frameworks for common functionality with a unified style approach. Something purpose-built for React is usually much better than something where React is bolted on to an existing framework, like Reactstrap (React + Boostrap) because those usually are built with jQuery and just handle state and functionality in a way that's not easy to integrate with React cleanly, so you end up re-implementing the actual functionality again.
- andrewingram 8y ago
  Probably because the people making them are using React, and first and foremost they're making it for themselves.
sandGorgon 8y ago
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)
siftikha 8y ago
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
- voltagex_ 8y ago
  Is there a way to see what code in the project actually uses these dependencies? I gave up on learning Typescript for another 6 months after a starter template dragged in 400 dependencies.
  - siftikha 8y ago
    Most low effort way is to search the repository on GitHub for the require. Also worth noting the ones I listed aren't transitive dependencies. Those are both explicit dependencies of this project
  - maaaats 8y ago
    Why would that matter for learning typescript..?
    - Aeolun 8y ago
      If using typescript requires 400 dependencies, it’s a non-starter, and learning it is off the table until your boss forces you to.
      - voltagex_ 8y ago
        A Microsoft template for Vue+Typescript (which I've since learned was unmaintained) pulled in 400 dependencies.
- city41 8y ago
  Curious what your issue with classnames is? Is it just because it’s a small and simple module (50 lines of code)?
janimo 8y ago
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 8y ago
  Tree shaking isn't automatically supported for CSS. You can use third party tools like PurifyCSS though.
  - janimo 8y ago
    It's the js bundle that is large.
georgecalm 8y ago
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.
jefozabuss 8y ago
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/src/Icon.js https://github.com/segmentio/evergreen/blob/master/src/icon/...
ernsheong 8y ago
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.
- blumomo 8y ago
  I guess we're all looking forward to your open source web components library!
  - krikou 8y ago
    This is already a start: https://www.webcomponents.org/ https://www.webcomponents.org/
- bthornbury 8y ago
  My first thought was that this is a UI Framework (Evergreen) built on UI Framework (React) built on a UI Framework (js + html). No real point here, but I do find it curious that there is this tendency to build new UI frameworks all the time. Personally, I still like html + js (and I have used React).
  - deltron3030 8y ago
    3 Different things. html, css & js are like raw materials, React is processing these raw materials, and a UI components or design systems are the result you get if you mix the React process with manual labor. The're frameworks and design systems. A React UI framework refines or enhances the React process to build UI components or design systems. Bootstrap e.g. is 2 things in 1, it's a process/framework and design system that sits directly on top of html, css & js.
- emixam 8y ago
  I've been working on a tiny vanilla js lib focused around web components: https://github.com/maximebf/gousse.js https://github.com/maximebf/gousse.js. It includes a set of components using Bootstrap: https://github.com/maximebf/gousse.js/blob/master/examples/ui.html https://github.com/maximebf/gousse.js/blob/master/examples/u...
subsection1h 8y ago
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 8y ago
  Issue #4: Go to the Tables page, click a header on the example table, the entire page disappears.
laurent123456 8y ago
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 8y ago
  This doesn't happen for me, it is pretty quick. I am in India and on a 40 Mbps connection.
  - laurent123456 8y ago
    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 8y ago
      Yes, I am looking at it in Chrome on Ubuntu. Just tried it in Firefox 62 on Ubuntu. Works good there too.
Kiro 8y ago
Where can I see one page with all the components?
subbz 8y ago
What I don't get: Why is it just for React?
- vmware513 8y ago
  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 8y ago
    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.
- wild_preference 8y ago
  Well, how do you propose this sort of framework work with them since it needs its own Javascript? At which point it can offer a better experience by at least tying in to one framework (like letting you drive a component's state with props).
ergo14 8y ago
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 8y ago
  I suppose since it's open source, then there is nothing stopping anyone from porting it to Vue?
  - ergo14 8y ago
    That was my point, we should not need to rewrite this over and over.
- deleted 8y ago
  [deleted]
lewich 8y ago
yet another ambitious web framework...
breytex 8y ago
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 8y ago
  This might be useful https://github.com/ant-design/ant-design-pro https://github.com/ant-design/ant-design-pro
tomelders 8y ago
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.
Scirra_Tom 8y ago
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 8y ago
  Is it internal only?
  - Scirra_Tom 8y ago
    Yes, no plans to do anything with it for now
Justsignedup 8y ago
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.
heshamelaj 8y ago
The website is not responsive . Why ?
- dbbk 8y ago
  Segment isn't designed to be used on mobile.
  - pxtail 8y ago
    Nowadays that is kinda laughable and almost disqualifies project
    - dbbk 8y ago
      No, it's called being pragmatic.
muhneesh 8y ago
I use Material UI, but I'm definitely stealing your color palette - great defaults.
deleted 8y ago
[deleted]
bengrunfeld 8y ago
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.
acarl005 8y ago
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.
crystaln 8y ago
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.

593 points by ggregoire 8y ago

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 8y ago
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.
- mmmeff 8y ago
  Please stop trying to make these terrible CSS systems like tailwind work. They are a massive anti-pattern for any sane CSS system.
- mdgrech23 8y ago
  I'm a tailwind fan but that was straight shilling and unrelated to the discussion at hand.
  - chrisweekly 8y ago
    "shilling"? wat I have no affiliation. And it's pretty uncharitable to say that mentioning tailwind (or other functional css systems) is "unrelated" to a discussion of approaches to applying css to web applications... sigh.
  - dang 8y ago
    This comment breaks the site guidelines. Please review https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html and follow the rules when posting here.
crgwbr 8y ago
Blueprint.js is decent for desktop-like web apps. If you need to support mobile, then it requires a bit extra work.
BruceM 8y ago
There's also Ant Design (https://ant.design/ https://ant.design/).
zdragnar 8y ago
Ant is quite nice, and is loaded with controls. I've wanted to toy with blueprint, but their desktop-centric focus (which makes sense, given the backing company) steered me away a bit. https://ant.design/ https://ant.design/ is the main page, https://ant.design/docs/react/introduce https://ant.design/docs/react/introduce for react, and for angular: https://ng.ant.design/docs/introduce/en https://ng.ant.design/docs/introduce/en
- BruceM 8y ago
  They have Ant Mobile! https://mobile.ant.design/ https://mobile.ant.design/
  - deleted 8y ago
    [deleted]
deleted 8y ago
[deleted]
adpirz 8y ago
Semantic UI - https://react.semantic-ui.com/ https://react.semantic-ui.com/

rukittenme 8y ago

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.

ianhawes 8y ago

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/

shimms 8y ago
Thanks - that's a great list. Some of them (atlaskit, MS fabric, Jetbrains, vmware etc) are geared towards building an integration withing those company's products. Whilst they can be used independently (without assets in Fabrics case, and other restrictions in the others), my take is the Evergreen (and ant, etc) are geared towards isolated products, similar to Bootstrap. If you're building an addon for use in an Atlassian product, or an Office 365 product, these are a great way to stay consistent with the host application's look and feel.
- threeseed 8y ago
  Definitely be careful when using some of them e.g. Atlaskit because they are designed specifically for integration. And if you use it for something else you may not comply with the license.
hardwaresofton 8y ago
I can recommend Element (the top of the list) -- I've used it on two projects now and it's been pretty refreshingly easy to use and relatively easy to integrate with (when you need to hook into components to make them act a certain way, for example a paginated table).

andreygrehov 8y ago

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 8y ago
Blueprint from Palantir is also a solid framework built on TypeScript. It's desktop-first which is quite different from most
- tejasmanohar 8y ago
  Would you not consider Evergreen desktop-first, too? It doesn't really provide any constructs out-of-the-box for responsiveness AFAICT.

keyle 8y ago

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

tejasmanohar 8y ago
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.
M4v3R 8y ago
It was same here, latest macOS/Safari. Weirdly enough now I visited the page again and it works.

ericnkatz 8y ago

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!

petemill 8y ago

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?

chrisparton1991 8y ago

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.

deleted 8y ago
[deleted]
UntitledNo4 8y ago
"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 8y ago
  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 8y ago
    Did you try it on mobile? It actually does seem to use the native selector and not the custom one for me
    - onion2k 8y ago
      I did, and it doesn't on my Android phone.

sdegutis 8y ago

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.

sgt 8y ago

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 8y ago
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 8y ago
  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 8y ago
    they're sticking with the old reddit because the information density is much higher. it's a design problem.
    - nik736 8y ago
      Not only that, for me in Safari the new reddit barely works and is not loading things very fast or sometimes at all.
  - wallawe 8y ago
    This could also be due to a poor implementation of event listeners for scrolling, e.g. not throttling, which isn't necessarily a React issue.
    - wild_preference 8y ago

rahimnathwani 8y ago

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?

deleted 8y ago
[deleted]
humbleMouse 8y ago
Don't ask questions like that. /s
Spiritus 8y ago
Not sure about interactive functionality. But it basically means it provides ready-made React components.
- rahimnathwani 8y ago
  I think the_duke answered my question. The reason I asked it is that, if you're building an HTML+CSS framework for use in React, then why wouldn't you separate out the HTML+CSS part, and then depend on this. That way it would be easy to re-use 90% of the work, if you then want to use the components with Vue or some other framework, or even for plain static pages.
the_duke 8y ago
They are not CSS frameworks in the sense of Bootstrap. They are React component frameworks for common functionality with a unified style approach. Something purpose-built for React is usually much better than something where React is bolted on to an existing framework, like Reactstrap (React + Boostrap) because those usually are built with jQuery and just handle state and functionality in a way that's not easy to integrate with React cleanly, so you end up re-implementing the actual functionality again.
andrewingram 8y ago
Probably because the people making them are using React, and first and foremost they're making it for themselves.

sandGorgon 8y ago

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)

siftikha 8y ago

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

voltagex_ 8y ago
Is there a way to see what code in the project actually uses these dependencies? I gave up on learning Typescript for another 6 months after a starter template dragged in 400 dependencies.
- siftikha 8y ago
  Most low effort way is to search the repository on GitHub for the require. Also worth noting the ones I listed aren't transitive dependencies. Those are both explicit dependencies of this project
- maaaats 8y ago
  Why would that matter for learning typescript..?
  - Aeolun 8y ago
    If using typescript requires 400 dependencies, it’s a non-starter, and learning it is off the table until your boss forces you to.
    - voltagex_ 8y ago
      A Microsoft template for Vue+Typescript (which I've since learned was unmaintained) pulled in 400 dependencies.
city41 8y ago
Curious what your issue with classnames is? Is it just because it’s a small and simple module (50 lines of code)?

janimo 8y ago

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 8y ago
Tree shaking isn't automatically supported for CSS. You can use third party tools like PurifyCSS though.
- janimo 8y ago
  It's the js bundle that is large.

georgecalm 8y ago

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.

jefozabuss 8y ago

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/src/Icon.js https://github.com/segmentio/evergreen/blob/master/src/icon/...

ernsheong 8y ago

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.

blumomo 8y ago
I guess we're all looking forward to your open source web components library!
- krikou 8y ago
  This is already a start: https://www.webcomponents.org/ https://www.webcomponents.org/
bthornbury 8y ago
My first thought was that this is a UI Framework (Evergreen) built on UI Framework (React) built on a UI Framework (js + html). No real point here, but I do find it curious that there is this tendency to build new UI frameworks all the time. Personally, I still like html + js (and I have used React).
- deltron3030 8y ago
  3 Different things. html, css & js are like raw materials, React is processing these raw materials, and a UI components or design systems are the result you get if you mix the React process with manual labor. The're frameworks and design systems. A React UI framework refines or enhances the React process to build UI components or design systems. Bootstrap e.g. is 2 things in 1, it's a process/framework and design system that sits directly on top of html, css & js.
emixam 8y ago
I've been working on a tiny vanilla js lib focused around web components: https://github.com/maximebf/gousse.js https://github.com/maximebf/gousse.js. It includes a set of components using Bootstrap: https://github.com/maximebf/gousse.js/blob/master/examples/ui.html https://github.com/maximebf/gousse.js/blob/master/examples/u...

subsection1h 8y ago

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 8y ago
Issue #4: Go to the Tables page, click a header on the example table, the entire page disappears.

laurent123456 8y ago

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 8y ago
This doesn't happen for me, it is pretty quick. I am in India and on a 40 Mbps connection.
- laurent123456 8y ago
  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 8y ago
    Yes, I am looking at it in Chrome on Ubuntu. Just tried it in Firefox 62 on Ubuntu. Works good there too.

Kiro 8y ago

Where can I see one page with all the components?

subbz 8y ago

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

vmware513 8y ago
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 8y ago
  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.
wild_preference 8y ago
Well, how do you propose this sort of framework work with them since it needs its own Javascript? At which point it can offer a better experience by at least tying in to one framework (like letting you drive a component's state with props).

ergo14 8y ago

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 8y ago
I suppose since it's open source, then there is nothing stopping anyone from porting it to Vue?
- ergo14 8y ago
  That was my point, we should not need to rewrite this over and over.
deleted 8y ago
[deleted]

lewich 8y ago

yet another ambitious web framework...

breytex 8y ago

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 8y ago
This might be useful https://github.com/ant-design/ant-design-pro https://github.com/ant-design/ant-design-pro

tomelders 8y ago

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.

Scirra_Tom 8y ago

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 8y ago
Is it internal only?
- Scirra_Tom 8y ago
  Yes, no plans to do anything with it for now

Justsignedup 8y ago

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.

heshamelaj 8y ago

The website is not responsive . Why ?

dbbk 8y ago
Segment isn't designed to be used on mobile.
- pxtail 8y ago
  Nowadays that is kinda laughable and almost disqualifies project
  - dbbk 8y ago
    No, it's called being pragmatic.

muhneesh 8y ago

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

deleted 8y ago

[deleted]

bengrunfeld 8y ago

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.

acarl005 8y ago

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.

crystaln 8y ago

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.