Evergreen: a React UI Framework built by Segment

Post by yuchi » Wed, Oct 17, 2018, 6:48 AM UTC

anonytrary wrote: post #61

yuchi wrote: post #51

Earlier quoted context omitted.

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.

> 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 hav…

  export default function classNames(...args) {
    return args.filter(valid).map(single);
  }

  function valid(arg) {
    return arg && (!Array.isArray(arg) || arg.length);
  }

  function single(arg) {
    if (typeof arg === 'string') {
      return arg;
    } else if (Array.isArray(arg)) {
      return classNames(...arg);
    } else {
      return Object.keys(arg).filter(k => ………

Post by anonytrary » Wed, Oct 17, 2018, 6:56 AM UTC

city41 wrote: post #71

anonytrary wrote: post #59

Earlier quoted context omitted.

I was curious so I checked out their Github page. I found this example: classNames('foo', 'bar'); // => 'foo bar' classNames('foo', { bar: true }); // => 'foo bar' classNames({ 'foo-bar': true }); // => 'foo-bar' classNames({ 'foo-bar': false }); // => '' classNames({ foo: true }, { bar: true }); // => 'foo bar' classNames({ foo: true, bar: true }); // => 'foo bar' ... var btnClass = classNames({ btn: true, 'btn-pres…

My usage is typically const cmpClass = classnames('componentsMainClass', props.className, { dynamicClassesHere }); I like that the component's main class stands out and is easy to find, that allowing the consumer to pass along their own class is trivial, and that the dynamic classes are grouped together. So I'd argue multi argument and falsy thinning are welcome features. I've never used array flattening. Does it rea…

  classNames({
    mainClass: true, // first key is main class
    [props.className]: true, // derived
    otherClass: true, // rest
    yetAnotherClass: true // ...
  })

Post by anyzen » Wed, Oct 17, 2018, 6:59 AM UTC

jameslk wrote: post #80

dmortin wrote: post #30

Earlier quoted context omitted.

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?

They're open source right? Would you expect to build your own design language, responsive/accessible components, documentation and maintain it any better than an open source solution?

Post by jhall1468 » Wed, Oct 17, 2018, 7:03 AM UTC

sdegutis wrote: post #34

acemarke wrote: post #25

Earlier quoted context omitted.

We've been happy with http://react.semantic-ui.com/ so far.

I liked Semantic-UI a lot in terms of looks , but the React aspect of it is separate, so even though it's done by the same people as the core team, it inherently always lags behind a bit in feature completeness. I especially ran into this with transitions and animations, and migrated to Blueprint.js instead, which I was extremely happy with from a feature-completeness perspective, but which I couldn't figure out how…

Post by sumnulu » Wed, Oct 17, 2018, 7:07 AM UTC

bthornbury wrote: post #82

alexchamberlain wrote: post #70

Earlier quoted context omitted.

Playing devil's advocate, why is lowering your dependency count a good thing?

Dependencies have cost. You have to monitor for updates, notify the maintainer(s) of any bugs, keep an eye out for security vulnerabilities, and sometimes ( gasp ) even step through them with a debugger. Doing that for one dependency is bad enough, but for 100s it's a nightmare. Personally, I prefer to just pull the pieces I need out of an open source library (unless it's very well maintained, or huge). It's like doi…