Live data from Hacker News

Base Web, Uber’s New Design System for Building Websites in React

eng.uber.com

121–130 of 156 posts

Re: Base Web, Uber’s New Design System for Building Websites in React

#121

I guess we can add Uber to this list of corporate frameworks... https://news.ycombinator.com/item?id=18235887 https://element.eleme.io/ https://ant.design/ https://quasar-framework.org/ https://at-ui.github.io/at-ui/ https://developer.microsoft.com/en-us/fabric https://vmware.github.io/clarity/ http://appnexus.github.io/lucid/ https://ng-lightning.github.io/ng-lightning/ https://blueprintjs.com/ http://www.jetbrains.…

You seem to trying to express a negative response to the fact that these companies create design frameworks. I'm interested as to why you feel this way?

I didn't read it that way at all, it's simply highlighting that there's a large number of options to chose from! It's great that more companies are publishing their design frameworks, although part of the reason for doing this is certainly to attract talent.

Having partially reviewed a couple of these, I'd say quality varies quite a bit so be sure to dig through the code to see if you'd be comfortable helping maintain that. Always be sure to review the license! For example, Microsoft Fabric is MIT, but the assets (fonts and icons) are under a separate license.

Re: Base Web, Uber’s New Design System for Building Websites in React

#122
post #9

I've been searching for a basic React UI component system for awhile now. There are a lot of systems available, but each one has significant drawbacks to the point I end up just rolling my own. I think an ideal system would have a core set of "unstyled" components with the necessary functionality baked in. That way the overall aesthetic is up to you, but a lot of the painstaking UI work (e.g. showing, hiding, and hig…

For the past few years, i’ve been building “reusable component libraries” and I can say with confidence that they’re a massive waste of time. When you get into it, the UI usually the least difficult problem to solve in an app. The real challenge is state management, control flow, and wrangling sode effects. Alas, people are still wedded to the idea that UI is where all the time is wasted. The truth is, it’s always be…

FYI, Material UI is working on the issue as well [0].

[0] https://twitter.com/olivtassinari/status/1120818781058686979

Re: Base Web, Uber’s New Design System for Building Websites in React

#123
post #106

Earlier quoted context omitted.

https://gist.github.com/tajo/a84d96f248d454d1226e12bb07c8157...

That is not better. Just look at what you've created vs the idiomatic way of accomplishing the same thing with vanilla React. It's a new DSL on top of React that just adds unnecessary noise. It over complicates what should be a simple task. Why do I have to specify "List" twice? And what sort of magic is "component" performing? What are children now? Do they not exist anymore? And what does "overrides" mean in this c…

As a person reading this who was ready and waiting to celebrate a better standard way to override custom components... These two examples are night and day. Vanilla is way less convoluted. There better be a very convincing argument (and I guess I'll go read the official Uber reasoning) that explains why this extra magic is necessary.

Re: Base Web, Uber’s New Design System for Building Websites in React

#124
post #120

The overrides pattern they describe sounds like a nightmare to maintain. It's almost the exact opposite of how I'd design the API for a set of reusable components: provide a minimal API surface to cover existing use cases, and evolve the API deliberately to cover new use cases as they arise. Allowing users to override arbitrary styling parameters is a recipe for disaster in a reusable component, because once you star…

I get this concern and I used to have a very similar feeling about it. Uber had an older React component library that was more locked down in a way you pretty much described. Number one complain was "not easy to customize" and that probably applies for every component library out there. You describe render props as a "middle ground". For us, it is the last resort / nuclear option (as described here https://baseweb.de…

Do you use any sort of visual comparison tools or snapshotting in CI to catch regressions caused by changes to Base? Seems like this would remove any (technical) objections to having overrides.

Re: Base Web, Uber’s New Design System for Building Websites in React

#125
post #120

The overrides pattern they describe sounds like a nightmare to maintain. It's almost the exact opposite of how I'd design the API for a set of reusable components: provide a minimal API surface to cover existing use cases, and evolve the API deliberately to cover new use cases as they arise. Allowing users to override arbitrary styling parameters is a recipe for disaster in a reusable component, because once you star…

I get this concern and I used to have a very similar feeling about it. Uber had an older React component library that was more locked down in a way you pretty much described. Number one complain was "not easy to customize" and that probably applies for every component library out there. You describe render props as a "middle ground". For us, it is the last resort / nuclear option (as described here https://baseweb.de…

I can appreciate that you guys weighed the tradeoffs and decided that giving users freedom to override arbitrary styles is worth the cost of whatever breakage might result from that decision as you upgrade the library. We're all engineers who build things to solve real world problems at the end of the day, and I don't have any of the context that led up to your decision, so I can't say for certain that I'd have weighed those tradeoffs any differently if I were in your shoes and have to cater to the whims of thousands of engineers with differing opinions on how things should be done.

However, I have to disagree with your characterization of render props as "the freedom to completely replace the guts of your component". Offering a render prop API should be an explicit decision to fundamentally stop treating that branch of the render tree as part of the "guts of your component". It's a decision to delegate to users on how to best render that part of the component.

Of course, you're right that in a vacuum, that would equate to throwing up our arms and asking users to figure it all out on their own as to how to implement the styling and functionality of that part of the tree.

However, when we're the maintainer of a component _library_, we're in the unique position where we can provide additional, complementary components that provide styling and functionality for users to use to implement that part of the tree, composed with their own custom components when appropriate, without having to build everything from scratch.

These components usually start out as the same components that used to reside in that part of the tree in the original parent component. By decoupling them from the parent, they're then immediately able to start providing their own explicit interfaces that can be evolved independently from the parent without risk of breaking usages on implementation detail changes.

Of course, users are free to simply not use those components because they might not address whatever problem they need to solve. Rather than taking that as a failure of the approach, I'd take that as a triumph because it demonstrates that this approach gives users the flexibility to experiment with how best to solve their particular problems within the confines of the isolated subsection of the original component without affecting the maintainability of the component itself. And we as library maintainers are then able to examine the various custom components created for those use cases to see if any particular implementation is suitable for extracting directly into the library, or at least learn from them when building new reusable components to support those use cases officially (and users are free to choose to adopt those new components at their own pace, without any fear of things breaking under their feet).

This is why I point to this approach as the middle ground. Component composition is a much more sustainable mechanism to provide to users for customization, in my opinion, compared to arbitrary overrides. In fact, if anything, I'd consider arbitrary overrides to be the nuclear option here, because once we start offering that option, people are going to start using our components ways that we can't possibly ever fully anticipate, so we end up having to _really_ throw up our arms as maintainers and start saying things like "We don't consider changed styles as a breaking change".

Re: Base Web, Uber’s New Design System for Building Websites in React

#126
post #124
post #120

Earlier quoted context omitted.

I get this concern and I used to have a very similar feeling about it. Uber had an older React component library that was more locked down in a way you pretty much described. Number one complain was "not easy to customize" and that probably applies for every component library out there. You describe render props as a "middle ground". For us, it is the last resort / nuclear option (as described here https://baseweb.de…

Do you use any sort of visual comparison tools or snapshotting in CI to catch regressions caused by changes to Base? Seems like this would remove any (technical) objections to having overrides.

The folks behind Storybook created a product for that: https://hichroma.com/

Re: Base Web, Uber’s New Design System for Building Websites in React

#127
post #70

Earlier quoted context omitted.

A big part of the goal with the overrides mechanism was to provide usable components out of the box that could optionally be modified if something needed to be changed for a given use case. You can use the components as is, using props if you're ok with the out of the box style/functionality/etc, without ever touching overrides. The overrides provide a standardized interface to changing the component internals across…

But you’re still creating a suite of components that can be composed to create a specific instance of a date picker. Except with the override config, you’re now complicating and limiting the simple and versatile concept of composition. Your components now need to follow some pre established and short sighted rules in order to understand how to manage their own children. To use the example in the article, lets say you…

I don’t see the problem? Override the option component with a new one that adds a checkbox or radio if a specific combination of parameters is passed:

Re: Base Web, Uber’s New Design System for Building Websites in React

#128

The overrides pattern they describe sounds like a nightmare to maintain. It's almost the exact opposite of how I'd design the API for a set of reusable components: provide a minimal API surface to cover existing use cases, and evolve the API deliberately to cover new use cases as they arise. Allowing users to override arbitrary styling parameters is a recipe for disaster in a reusable component, because once you star…

Note that the above mostly applies to company/product specific component libraries where maintaining design/brand consistency is of great importance. For components meant for public consumption, I personally would only use libraries that yield _all_ rendering decisions to the user: not just styling, but the components being rendered as well as the way in which those components are composed. Usually that means providi…

I think there's a big difference between Downshift and Base Web. Downshift is a low-level component offering powerful behaviors that you can use to build your own UI widgets, etc. Base Web looks more like a set of ready-to-use UI widgets. You use it because you specifically want a button that's styled and works the Uber Base Web way. Uber wants all of their buttons to look consistent, so obviously Base Web is going to have styling built into it. Maybe Base Web's button could be implemented using Downshift. If you don't want Base Web's button styling, then you're not Base Web's target audience. You're probably best off implementing your own button using Downshift too.

Re: Base Web, Uber’s New Design System for Building Websites in React

#129
post #27
post #23

Earlier quoted context omitted.

My only issue is TS usage with extremely large/complex components/containers. For example, files around 500 lines of code, I've temporarily removed TS, done a few other optimizations (ternaries for obvious If/Else statements, etc) to reduce to ~200-230 lines total. The file is instantly easier to reason about and modify. I wish there was a plugin that just did this automatically so you could toggle it back on when do…

Basically a complex version of this example, done over and over, for larger methods. togglePanel = (newTogglePanelComponentState: Boolean) => { return this.setState({ panelToggleState: newTogglePanelComponentState }); } togglePanel = bool => this.setState({ panelToggle: bool })

I don't understand what you're trying to demonstrate with your example. Your TS(?) example is needlessly complicated, and syntactically invalid.

Here's a better TS implementation:

  togglePanel = (panelToggle: bool) => this.setState({ panelToggle })

Re: Base Web, Uber’s New Design System for Building Websites in React

#130
Referencing and being inspired by someone‘s Design System is a good thing. Try looking at a bunch of them to get a better perspective.

However, using someone's Design System may not always be a good choice. Unless, they are lean, non-directional and are mostly patterns that you can adapt to any tech stack or systems. For instance, Google’s Material Design Philosophy is a good starting point and you can leverage it as your base system. You’ll still need to understand the WHYs of the principles. Without understanding the core principles and the WHYs, you’ll be dependent on it in the wrong fashion.

Here is an example without trying to single it out from the other Design Systems. Sometime back, I studied Ant.Design to see if I can adapt to a massive product overhaul. Unfortunately, I realized that it is a system more specific to the way AliExpress does and think about their design. And technically it was in LESS (CSS Pre-Processor).

There are many good, well thought out systems. One being that of AirBNB’s JavaScript styleguide.

Be inspired, and possibly start with a system that has fewer restrictions, a lot of community activity behind it.

Post reply on HN