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

101–110 of 156 posts

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

#101

Post by revskill »

hombre_fatal wrote: post #82
eropple wrote: post #33

Earlier quoted context omitted.

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.

You can use library like reselect to optimize. The job of context is simple: implicitly passing down value to deep component.

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

#102

Post by manigandham »

abalone wrote: post #68
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.…

Dumb question maybe but why is Bootstrap (from Twitter) not on this list? What are the inclusion criteria?

It was originally my list of interactive frontend component libraries that I now keep track of here: https://gist.github.com/manigandham/34154e63dc3c1b8747fab40d...

If you want style guides and design systems then the link by "oedmarap" is much better.

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

#103

Post by sbr464 »

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

There’s a surprisingly small amount that are using both React and Styled Components, so I welcome the addition. (Whatever the intent of this post is)

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

#104

Post by manigandham »

chrischen wrote: post #58
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.…

I've been evaluating most of these frameworks, and as far as I know Base UI is the smallest and lightest out of all these: https://bundlephobia.com/result?p=baseui@6.15.1

They're all still big and bloated (like including big sets of icons) but you should only only include what you're using. Tree shaking with webpack and babel and a css optimizer can trim them down significantly.

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

#105

Post by Improvotter »

wuliwong wrote: post #76
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?

>insert xkcd framework reference<

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

#106

Post by miksuv »

tomelders wrote: post #98
miksuv wrote: post #83

Earlier quoted context omitted.

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…

You're out of your mind if you think that's an better way to compose components. How would you do something like this? { switch(listItem.type) { case 'foo': return {listItem.title} ; case 'bar': return {listItem.title} ; default: return {listItem.title} ; } })}>

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

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

#107

Post by lewisl9029 »

simplify wrote: post #89
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.

I wouldn't go as far as to say Context is the most important concept in React, but it's also not nearly as bad as CSS cascading.

Context is fully opt in. A Context provider upstream will have no observable effect on your downstream components unless you have a component that explicitly chooses to consume _that particular context_.

I think you're thinking of the old Context API where everything merged onto the same shared context object and read from it implicitly. _That_ was a nightmare, hence why it was never recommended for general use, but the new API doesn't suffer from the same issues.

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

#108

Post by [deleted] »

tomelders wrote: post #98
miksuv wrote: post #83

Earlier quoted context omitted.

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…

You're out of your mind if you think that's an better way to compose components. How would you do something like this? { switch(listItem.type) { case 'foo': return {listItem.title} ; case 'bar': return {listItem.title} ; default: return {listItem.title} ; } })}>

[deleted]

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

#109

Post by tomelders »

miksuv wrote: post #106
tomelders wrote: post #98

Earlier quoted context omitted.

You're out of your mind if you think that's an better way to compose components. How would you do something like this? { switch(listItem.type) { case 'foo': return {listItem.title} ; case 'bar': return {listItem.title} ; default: return {listItem.title} ; } })}>

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 context? Passing children to a component is not an "override".

I think you're drunk on your own hype buddy. Maybe this all makes perfect sense to you, but it looks like garbage to me.

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

#110

Post by wes-k »

dwaltrip wrote: post #61
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.

Any other good candidates? This is something I really need to look into soon.

I work with blueprint and I find it to be pretty incredible. Typescript based, fairly comprehensive, good docs, easy to use.
Post reply on HN