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

81–90 of 156 posts

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

#81

Post by Theodores »

lhorie wrote: post #48
Theodores wrote: post #41

This article makes a lot of noise about Uber's commitment to accessibility. So I am led to believe that this new React gizmo is fully accessible. Yet Uber can't be bothered to make efforts to get basic accessibility right on the page that tells us this. The main content is not in a element, this element being the landmark that tells people using assistive technologies where the main content is. Then the navigation li…

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…

It is not difficult to put a in Wordpress with some code inside it.

Some things you either have or you don't. Accessibility is one of those things. Either you think it is actually important or you don't.

The Uber comms team also need to be living and breathing accessibility. It is part of what comms is about.

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

#82

Post by hombre_fatal »

eropple wrote: post #33
revskill wrote: post #25

Earlier quoted context omitted.

It's important, because you don't need to care about props vs state, instead, just consume the context deep in your component tree. One use case, is, suppose you have two independent contexts at two branches, now, if you want to share those data to 3rd branch, you just create new context with value from the first two contexts.

IMO, context does a lot to remove the value of MobX from React applications. Not necessarily Redux; Redux gives you some additional stuff, particularly around state tracking and rewinding. But I haven't seen a MobX project where a judiciously used context doesn't solve the same problem within the React-specific ecosystem.

The value of mobx is that you implicitly link each component to its data dependencies by dereferencing arbitrary paths into your storage objects in the render() function so that the component rerenders only when data at those paths change.

Does the Context achieve this as well? From a quick search, the Context seems to force rerender of any consumer on any change.

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

#83

Post by miksuv »

tomelders wrote: post #79
miksuv wrote: post #72

Earlier quoted context omitted.

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

What you describe in the first paragraph is exactly what you can do with overrides as well. Again, it gives you access to any subcomponent in the component and you can replace it with your own component.

Note, that you can replace a single layer and pass the "children" through OR "replace the whole branch" of subcomponents when NOT passing the children through.

Also all overrides get various state props. For dnd-list, it can be something like $isDragged, so you can conditionally render different things.

At the same time, every Base Web component is exporting all these subcomponents. For example, component DND List also exports:

- StyledRoot - StyledList - StyledItem - StyledLabel - StyledCloseHandle - StyledDragHandle

https://baseweb.design/components/dnd-list/#overrides

You are free to use these Styled subcomponents and recompose them any way you wish. You can build your own component from scratch (this approach works great for tables) or you can use overrides and utilize existing state handling etc.

Give me specific example: What customization of dnd-list you can't make with the existing overrides API and what other API would allow you to do that better.

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

#84

Post by davidbarker »

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…

Reach UI (https://ui.reach.tech), made by Ryan Florence, might be a good start. It has the functionality (and accessibility) for modals, dropdowns, etc., but without heavy styling. I'd been looking for something like it for a long time.

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

#85

Post by TheRealPomax »

warent wrote: post #44
impostir wrote: post #3

Earlier quoted context omitted.

React is the framework and their design system uses a specific set of rules within the React framework to build consistent end UI/UX.

React is not a framework. It's just a view library.

React is a view library, _with an opinionated methodology_ and congrats: now you have a framework.

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

#86

Post by lhorie »

Theodores wrote: post #81
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…

It is not difficult to put a in Wordpress with some code inside it. Some things you either have or you don't. Accessibility is one of those things. Either you think it is actually important or you don't. The Uber comms team also need to be living and breathing accessibility. It is part of what comms is about.

Who is "you"? Me personally, the team behind BaseWeb, the comms team, Uber as a whole? Companies by definition can't "care" since they are emotionless entities, so you must mean a physical person. But physical people within a large organization might care about different things with different degrees of priority or be prevented from doing the best thing (tm) for various reasons. But we all already knew that.

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

#87

Post by rahimnathwani »

topicseed wrote: post #18

Finding a good React UX library is tough. None is ideal. Too heavy, too small, too slow, too dirty. Settled on ant.design for a while, not perfect but good enough.

I noticed that Ant Design has support for React Native: https://rn.mobile.ant.design/

But I'm confused. I thought one of the main selling points of React was that you use JS but are actually rendering native components (not lookalike ones). Does Ant Design for RN build on native components for each platform, or are they created from scratch (like Flutter)?

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

#88

Post by ggreer »

yesimahuman wrote: post #26
ahallock wrote: post #6

Can you use this outside of React? I'm interested in the styles, but I'm not using React.

This is why Web Component interest is growing, especially w/ enterprises and large teams. The killer app for WC's is building Design Systems that don't force specific frontend framework decisions.

I've gotten into quite a few debates about this at work and I still don't get why some people are proponents of web components. If you're already a React shop, web components don't seem to be worth the trouble.

1. Web components don't always have the same properties and events as native DOM elements. React provides a ton of conveniences around native elements such as (onChange, defaultValue, className, etc). React even normalizes events across browsers (https://reactjs.org/docs/events.html). If I'm writing a React component that renders a web component, I lose most of those conveniences. The times I've tried using web components at work, I've been bit by issues like web components emitting custom events instead of onclick/onchange/onblur/etc. I've also encountered a web component that was supposed to behave like an input, but element.value didn't return the same thing as element.getAttribute('value').

2. Web components tend to be imperative while React is declarative. That means I have to use a ref to keep a handle on the web component and call functions on it. In many cases, I also have to keep some state in the parent React component to track the web component's internal state.

3. React's lifecycle methods fire when the web component is rendered, not when the web component is "ready". I've had issues where componentDidMount fires, but my ref to the web component doesn't yet have attributes that a normal DOM element would have (such as .value). This makes React's lifecycle methods far less useful and forces me to write guards that aren't necessary with a native DOM element or another React component.

4. It's still not clear to me how web components are supposed to communicate with each other. With React you're either setting state, passing in different props, using context, or using a library like redux (which injects shared state & actions as props). React's solution to this problem is well-structured, understandable, and exposed in React dev tools. With web components, it's still the wild west.

5. Web components accept attributes (which are text only) and slots. React components accept props which can be strings, objects, components, functions, arrays... pretty much anything. If I'm writing a React component that renders a web component, my brain has to switch out of React mode and into web component mode. I get no propTypes validation and I occasionally have to manually translate data between React world and web component world.

In practice I've also encountered issues with development velocity. At work, the team writing web components has taken months to implement basic things such as inputs and callouts. None of their web component code is in production yet. In the same amount of time, a smaller team of devs has used React to build more components and has shipped them to prod.

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

#89

Post by simplify »

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.

Context IS NOT the most important concept in React. It's basically CSS cascading. Not something you want to introduce into your project so easily.
Post reply on HN