Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

eng.uber.com

Post reply on HN
Print view View original

71–80 of 156 posts

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

#71

Post by tomelders »

mmckelvy wrote: 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 been easy to put a button on a screen. But making that button do something? That is a much bigger problem. I’d argue that 99% of the effort of putting a button on a screen goes into implementing whatever that button does. But stakeholders don’t understand that. They think buttons just do the thing they do, so when it takes six weeks to put a button on screen, they naturally assume that a reusable component library that includes a button will somehow shave days and weeks off a project.

Which is why they gravitate towards UI libraries. And then they introduce a new problem that wasn’t there before. They want us to use Material UI, but they want us to make it look different. And they want a bunch of extra UI elements to boot. So not only do we still have all the original problems of creating an app, we’re now on the hook for turning some implementation of Material UI into something that fits with with our architecture, but is also completely different.

So while I hate UI libraries, I recognise that they’re something inflicted on a team. So I’ve started work on a UI library designed specifically to address this problem. It’s a UI library that’s meant to be changed and easily customised by it’s consumers. It’s minimal functionality and minimal styling. I’ll announce it here on HN when I think it’s ready. It may never be ready because not only is it a difficult problem to solve, I’m also very lazy.

But anyway, I say all this because I hear what you’re saying, and I’m working on it.

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

#72

Post by miksuv »

tomelders wrote: post #66
Klathmon wrote: post #15

Earlier quoted context omitted.

I really hate dismissive comments like this. They laid out pretty well what problems this is trying to solve, why they want it that way, the benefits it has, and some of the tradeoffs it makes. Saying it "replaces composition with configs for no good reason" is not only wrong (they still heavily use composition here, it even makes it more powerful in some ways from what I can tell so far), but also doesn't really mea…

Ok, fair enough. It was a drive by shooting of a comment. So here’s a more considered criticism. There’s already a way to overwrite props in react. Just use props. If you need to expose the native API of the underlying element, do this (does HN format code?)... ``` const {foo, ...native} = props; {foo} ``` Combine that with default props and you’re good to go. There’s already a way to allow components to take multipl…

I recommend to read through this to better understand the Base Web overrides: https://baseweb.design/theming/understanding-overrides/

It actually does everything you propose.

For render props, the BaseWeb API is not but it's collapsed under a single prop overrides={{ Dropdown: { component: {...} } ... }} naming convention. This "map" includes (and gives you access) to every single subcomponent.

The same goes for "adapting styles based on props".

BaseWeb uses exactly same patterns and techniques that you mention. The difference is the naming consistency and uniformity across all components. Instead of "littering" the top level API, we have a single prop "overrides" and instead of deciding what should and shouldn't be customizable, everything is customizable. Again, without a need to keep adding new top level props.

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

#73

Post by draw_down »

gramstrong wrote: post #21
revskill wrote: post #10

I'm surprised that many huge React libraries don't expose its core Context for user to consume. Context is the most important concept in React. Actually, a library just need users to provide the right types of Context to be flexible. I'm tired of the "lock in" API, in which, it doesn't allow me to just get my context data into its arguments API. In this sense, you can consider Context as the local version of Redux.

As someone who stopped doing React development before Context became a "thing", is it possible to ELI5 in a couple sentences why it is such an important concept?

React Context is essentially scoped global props (the scope is some subtree of the overall component tree; the props are global to that subtree, any component in the subtree can elect to consume them). Why it's an important concept is that it keeps you from needing to pass props down the tree from each component to its children. This is important because often times those intermediate components don't have any concern with the stuff being passed down, so they shouldn't be concerned with data that doesn't matter to them.

Another way of passing around ~global stuff is Redux, which many people find cumbersome and difficult to understand. And by "many people" I mean me.

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

#74

Post by SubFuze »

habosa wrote: post #60

Before even looking at the details ... why would I use this? Uber is not a company that is known for great websites. They get (I'm guessing) 99%+ of their usage through native apps. So why would I believe they're particularly good at building for the web?

Even though most people's primary interaction with Uber is through the native apps, there's a ton of web applications built here. The opening line of the linked article is: "At Uber, we have hundreds of internal web applications" Additionally, there are a number of customer facing web apps from a web version of the rides app to Uber for Business to Uber Freight.

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

#75

Post by [deleted] »

insomniacity wrote: post #31

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

[deleted]

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

#76

Post by wuliwong »

insomniacity wrote: post #31

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?

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

#77

Post by tomelders »

SubFuze wrote: post #70
tomelders wrote: post #66

Earlier quoted context omitted.

Ok, fair enough. It was a drive by shooting of a comment. So here’s a more considered criticism. There’s already a way to overwrite props in react. Just use props. If you need to expose the native API of the underlying element, do this (does HN format code?)... ``` const {foo, ...native} = props; {foo} ``` Combine that with default props and you’re good to go. There’s already a way to allow components to take multipl…

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 have an Option component, but now you want a version of that component that takes two additional components under certain conditions. E.g, an icon, and a checkbox? But only when one specific Option has a specific combination of props?

How does this override system handle that? It doesn’t. Composition handles that. But if components are created with this override system in mind, they lose the ability to be composed in more complex ways than the designer of the override system imagined.

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

#78

Post by carimura »

insomniacity wrote: post #31

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

The universal certainty of expansion and contraction. Hey we all got here through it. Now we're in the expansion phase of trying to make the frontend easy again. Contraction comes next.

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

#79

Post by tomelders »

miksuv wrote: post #72
tomelders wrote: post #66

Earlier quoted context omitted.

Ok, fair enough. It was a drive by shooting of a comment. So here’s a more considered criticism. There’s already a way to overwrite props in react. Just use props. If you need to expose the native API of the underlying element, do this (does HN format code?)... ``` const {foo, ...native} = props; {foo} ``` Combine that with default props and you’re good to go. There’s already a way to allow components to take multipl…

I recommend to read through this to better understand the Base Web overrides: https://baseweb.design/theming/understanding-overrides/ It actually does everything you propose. For render props, the BaseWeb API is not but it's collapsed under a single prop overrides={{ Dropdown: { component: {...} } ... }} naming convention. This "map" includes (and gives you access) to every single subcomponent. The same goes for "ada…

I didn’t propose the solution to a Select input that you said I did. There’s no need to define multiple render props since the most complex of selects is going to be a nested tree structure. Each node of that tree can be passed as an argument to the render prop, and the render prop itself can conditionally render any number of children types.

Everything is customisable without this override solution. And I’d argue that things become less customisable with it. What if the CustomOption component needs to be customised too? This solution makes a mess of that type of composition.

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

#80

Post by lhorie »

013a wrote: post #54
lhorie wrote: post #48

Earlier quoted context omitted.

Those are issues with the CMS being used to host the blog. The blog has been around for a long time and isn't using BaseWeb. What you're suggesting is that when someone releases a library with a commitment to accessibility, they are also responsible to reach out to some completely unrelated comms-focused team, take over their CMS workflow, rewrite it entirely with the new framework, and only then make a blog post abo…

So, what you're saying is, Uber is committed to accessibility when its easy for them and there's big PR points to score. That's probably correct.

No, what I'm saying is that Uber has thousands of engineers and hundreds of web projects, and it's a bit silly to suggest that if one team releases some net positive thing, the cost/time for getting every Uber property to benefit from that thing immediately is zero, and that by not doing such trivial work, Uber is a bad bad dog.
Post reply on HN