Live data from Hacker News

Evergreen: a React UI Framework built by Segment

evergreen.segment.com

61–70 of 309 posts

Re: Evergreen: a React UI Framework built by Segment

#61
post #51

always hilarious to see the dumb dependencies that these projects have https://github.com/sindresorhus/arrify https://github.com/JedWatson/classnames

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 have a "util.js" file for helpers like this.

Re: Evergreen: a React UI Framework built by Segment

#62
post #51

always hilarious to see the dumb dependencies that these projects have https://github.com/sindresorhus/arrify https://github.com/JedWatson/classnames

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.

Yeah, my React code is currently littered with conditions and `classNames.join(' ')`. I'm going to start using this library.

Re: Evergreen: a React UI Framework built by Segment

#64
post #57

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?

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

Re: Evergreen: a React UI Framework built by Segment

#65
post #50

Earlier quoted context omitted.

Curious what your issue with classnames is? Is it just because it’s a small and simple module (50 lines of code)?

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…

Roll your own, untested function vs a small, widely used library with a well-understood, well-tested API that your devs have a good chance of being familiar with already. I too want to avoid bloated npm dependencies but this seems like a fair engineering trade-off..

Re: Evergreen: a React UI Framework built by Segment

#66

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?

Not sure about interactive functionality. But it basically means it provides ready-made React components.

Re: Evergreen: a React UI Framework built by Segment

#67

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?

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.

Re: Evergreen: a React UI Framework built by Segment

#68

I wish people would stop making UI frameworks in , 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.

I guess we're all looking forward to your open source web components library!

Re: Evergreen: a React UI Framework built by Segment

#69
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?

If you pick one made by a big company, it should be fine.

That's what I thought when I integrated Google Wave into my companies workflow...

/s

Re: Evergreen: a React UI Framework built by Segment

#70
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…

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