24 ms·
Base Web, Uber’s New Design System for Building Websites in React
- petraeus 7y agoWhy do they call it a "design system" instead of a framework .. you know like 99% of the web does
- impostir 7y agoReact is the framework and their design system uses a specific set of rules within the React framework to build consistent end UI/UX.
- warent 7y agoReact is not a framework. It's just a view library.
- TheRealPomax 7y agoReact is a view library, _with an opinionated methodology_ and congrats: now you have a framework.
- tomelders 7y agoNope. This is replacing composition with configs for no good reason. It's like the people who made Grunt and Webpack teamed up to ruin React for everyone.
- Klathmon 7y agoI 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 mean anything on it's own (at least to me it doesn't).
- tomelders 7y agoOk, 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; <label {...native}> <p>{foo}</p> </label> ``` Combine that with default props and you’re good to go. There’s already a way to allow components to take multiple types of children. ``` <Select render={ blah => { return <CustomOption>{blah}</CustomOption> }} /> ``` And there’s already a multitude of ways to adapt styles based on props, the most obvious of which is StyledComponents. In addition, this highlevel config is brittle. It means parents must be coupled to their children, and children coupled to their parents. And where does this config end? How deep does the nesting of this configuration go? Here’s my opinion; if you think you need this sort of configuration to properly wrangle your UI, then you’ve failed to grasp the point of React and the true power of composition. React components are just functions. Preferably pure functions. Once you strip away the JSX, you should be left with something that resembles functional programming (albeit taken to an extreme thanks to JSX’s goal of emulating HTML). Props are parameters. We’ve all come across code where functions take complex and convoluted objects as arguments that trigger an explosion of calls that are near impossible to track or reason about. This override solution is the first step in towards turning React into the kind of tool that it usurped. It has the stench of ExtJs and it’s ilk. This “solution” was created by people who believe all problems are better solved by abstraction. As programmers, our time is spent on the edge cases. Our text book prefect algorithms and mathematically sound functions are exposed as frauds the second they’re exposed to user input. Our carefully crafted UI libraries fall to pieces when the designers choose to break their own rules. For configuration to work, it requires god level foresight and will eventually become Turing complete in itself. Config is for the birds. Declarative code has always been the answer.
- SubFuze 7y agoA 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 the entire component library. That approach may be overkill for simple components that are trivally composable (Card for example), but is incredibly powerful for a component like Datepicker where you may want to change styles or functionality of a deeply nested component without exposing a massive top level props interface.
- d357r0y3r 7y agoImagine creating this beast of a "framework" and not even using TypeScript or Flow. What are you thinking? Edit: It does use Flow.
- miksuv 7y agoIt does use Flow.
- mmckelvy 7y agoSigh. I really wish people would just accept the fact that JavaScript is a dynamically typed language and stop making things unnecessarily difficult.
- d357r0y3r 7y agoTo people who understand what static typing does and the problems it solves, this statement is the equivalent of "Hitler did nothing wrong."
- codr7 7y agoYou're ignoring the fact that many already went through that phase and ultimately decided that complexity is the only enemy worth fighting in software. It always pays off to take a closer look at the things you can't think or say, to ask why.
- d357r0y3r 7y ago> You're ignoring the fact that many already went through that phase and ultimately decided that complexity is the only enemy worth fighting in software. No, this doesn't match my experience. The people who resist types are usually web designer types who haven't actually worked with type systems at all so they view it as ivory tower nonsense - complexity for complexity's sake. There is the occasional person who worked with Java in college and hated it, and assumes that every language with types is just a variation on Java. This is, of course, not a very informed position.
- ahallock 7y agoCan you use this outside of React? I'm interested in the styles, but I'm not using React.
- yesimahuman 7y agoThis 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.
- hoppydays 7y agoYup this is the future. WC's are finally supported everywhere with Edge switching to chromium under the hood.
- tdhz77 7y agoDo you have a source? I’d like to explore WC, but from what I have gathered WC evangelist are dying out to React ecosystem.
- ggreer 7y agoI'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 <input> (onChange, defaultValue, className, etc). React even normalizes events across browsers (https://reactjs.org/docs/events.html 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.
- hsavit1 7y agoUnfortunately the accordion component is not smooth at all. Otherwise, a valiant effort.
- mmckelvy 7y agoI'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 highlighting elements in a dropdown menu or making sure a layout element breaks properly on mobile) is already done. From there you could build UI "kits" that use the core functionality but each have a distinctive look and feel.
- rymohr 7y agoThere’s some work being done around renderless ui components but I’ve yet to see a complete framework.
- TomMarius 7y agoRenderless? What are these good for?
- rymohr 7y agoThey're like higher-order components on steroids that handle all the heavy lifting of the logic for the component (including what _should_ be rendered) but leave the actual rendering up to you (DOM structure, style, etc). Here's a Vue example: https://banshee-ui.github.io/docs/guide/#why-banshee https://banshee-ui.github.io/docs/guide/#why-banshee
- hemantv 7y agoYou can use ant design without any css and roll up your own styles.
- slig 7y agoI've been using reactstrap and since it relies on a external bootstrap CSS for styling (i.e, manually included `<link type="text/css" ...`) you have plenty of freedom on how to style it.
- revskill 7y agoI'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.
- gramstrong 7y agoAs 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?
- revskill 7y agoIt'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.
- eropple 7y agoIMO, 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.
- deleted 7y ago[deleted]
- hombre_fatal 7y agoThe 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.
- dmix 7y agoSo this is basically a component framework ala https://element.eleme.io/#/en-US/component https://element.eleme.io/#/en-US/component with some theming standards? Edit: The drag and drop component is nice and looks well-built. I had to use vue-draggable [1] for an app recently which was just a hacky Vue layer on top of Sortable.js [2]. It's one thing I wished ElementUI supported natively. [1] https://github.com/SortableJS/Vue.Draggable https://github.com/SortableJS/Vue.Draggable [2] https://github.com/SortableJS/Sortable https://github.com/SortableJS/Sortable
- topicseed 7y agoFinding 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.
- solidr53 7y agoAnt.design is actually quite nice. I picked them for my open source project mainly because it's written in TypeScript.
- dwaltrip 7y agoAny other good candidates? This is something I really need to look into soon.
- chrischen 7y agoI've found Materia-UI to have the best code quality, most up-to-date. If you don't like Material UI theming it's also easily overridable. Downside of ant-design is that the library is huge (there was a bug recently where the whole icon library was included in the bundle!), some of the components have bugs, style/look is not easily modifiable.
- wes-k 7y agoI work with blueprint and I find it to be pretty incredible. Typescript based, fairly comprehensive, good docs, easy to use.
- insomniacity 7y agoI guess we can add Uber to this list of corporate frameworks... https://news.ycombinator.com/item?id=18235887 https://news.ycombinator.com/item?id=18235887 https://element.eleme.io/ https://element.eleme.io/ https://ant.design/ https://ant.design/ https://quasar-framework.org/ https://quasar-framework.org/ https://at-ui.github.io/at-ui/ https://at-ui.github.io/at-ui/ https://developer.microsoft.com/en-us/fabric https://developer.microsoft.com/en-us/fabric https://vmware.github.io/clarity/ https://vmware.github.io/clarity/ http://appnexus.github.io/lucid/ http://appnexus.github.io/lucid/ https://ng-lightning.github.io/ng-lightning/ https://ng-lightning.github.io/ng-lightning/ https://blueprintjs.com/ https://blueprintjs.com/ http://www.jetbrains.org/ring-ui/ http://www.jetbrains.org/ring-ui/ https://www.lightningdesignsystem.com/ https://www.lightningdesignsystem.com/ https://elastic.github.io/eui/ https://elastic.github.io/eui/ https://atlaskit.atlassian.com/ https://atlaskit.atlassian.com/
- chrischen 7y agoI'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 https://bundlephobia.com/result?p=baseui@6.15.1
- manigandham 7y agoThey'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.
- technion 7y agoThere's definitely still issues with that though. Try including one small component from material UI for example and the resulting bundle can still be quite significant because it bundles a lot to manage its theming.
- localhostdotdev 7y agoGithub's https://primer.style/ https://primer.style/ Google's https://material.io/design/ https://material.io/design/ I guess most companies have a design system in place
- wsdfsayy 7y agoIt looks pretty nice. My pet peeve with "modern" web design is that it has become, objectively, very effeminate. Uber tends to leans more neutral to slightly masculine.
- warent 7y ago"Objectively effeminate" is a phrase that makes zero sense.
- warent 7y agoMy favorite part about Base Web is that it's broken. How to reproduce: 1. Visit the official website https://baseweb.design/ https://baseweb.design/ 2. Click "Welcome" on the sidebar. 3. "An unexpected error has occurred." No thanks, Uber. Your community of broscience engineers permanently lost me as a customer after the Susan Fowler writeup, and I'm not interested in your buggy technology either.
- stronglikedan 7y agoCannot reproduce.
- warent 7y agoIt's probably because I'm using uMatrix and it's blocking something "critical" that breaks when you try to visit the Welcome page.
- Klathmon 7y agoWait so you are blocking their javascript then claiming it's broken? I was curious, and I just went in and tried blocking the google analytics, google tag manager, and everything from cdn.jsdelivr.net, and even some random scripts (like the commons.js file), and everything still worked fine as far as I could tell...
- warent 7y agoIt's loading the first-party scripts (all 58 of them), but there must be even more delivered by a CDN that it requires. https://i.imgur.com/iGqwpWR.png https://i.imgur.com/iGqwpWR.png
- randyrand 7y ago"bioscience engineers". Uber is HQ'd in San Francisco and is 95% democrat/liberal engineers. Ask someone that works there.
- Theodores 7y agoThis 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 <main> element, this <main> element being the landmark that tells people using assistive technologies where the main content is. Then the navigation links, e.g. in the footer are not in <nav> elements. The code sample in the middle is an image. It should be in a <figure>, <pre>formatted and in a <code> block for accessibility. It is a bit hypocritical to write an article about how wonderful your product is for accessibility and not make it accessible.
- lhorie 7y agoThose 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 about the thing you were trying to talk about.
- 013a 7y agoSo, 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.
- lhorie 7y agoNo, 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.
- Theodores 7y agoIt is not difficult to put a <figure> 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.
- sbhn 7y agoHoray, finally, where do i throw my money,
- underwater 7y agoThe overrides system is weird, to say the least. Any consumer can change styles and erbitrary HTML attributes deep inside a component's DOM tree This breaks encapsulation. As an app developer how do I know my change will be future proof? As a component developer how can I refactor a component or change its behaviour without breaking my consumers? It feels like stuffing the worst parts of jQuery and old-school CSS back into React.
- habosa 7y agoBefore 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?
- lucasmullens 7y agoIt's probably got more engineers behind it than the vast amount of design frameworks, given Uber's size. And some of the components feel pretty nice, so maybe try looking at the details?
- SubFuze 7y agoEven 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.
- aphextron 7y agoCSS-in-JS is an unmaintainable disaster. Write your SCSS, keep it modular, and import it as a JS object with sass-loader.
- chrischen 7y agoCSS-in-JS allows for easy JS-based code-splitting (if you've got that setup) and inlining critical CSS on the page.
- aphextron 7y ago>CSS-in-JS allows for easy JS-based code-splitting (if you've got that setup) and inlining critical CSS on the page. All of this can be accomplished without keeping your source of truth in JS config files. SCSS or CSS files can easily be loaded with Webpack and imported into your code. Then you're not giving up the simple yet powerful expressiveness of CSS selectors for a nightmare of nested JS objects.
- chrischen 7y agoGenerally CSS is loaded into your code where you require them but has to be extracted into a single bundle. If you want to it truly be loaded into your code where you use it, then CSS-in-JS is the solution and does this for you. It sounds like the main gripe you have is with syntax, and that's not really required with CSS-in-JS. The 'nightmare of nested js objetcts' can be hidden in the implementation. In fact, many libs (such as emotion) allow you to write CSS syntax using babel macros to preprocess this into javascript.
- jscholes 7y ago> drag and drop Lists are notoriously difficult to implement because browsers provide little help when developers have to build drag and drop interactions. Developers using Base Web have the peace of mind that keyboard navigation is reliable and works well with screen readers. FYI, their drag and drop sample doesn't "work well with screen readers". It's overly verbose and requires keyboard passthrough to operate. So maybe don't take any web designers at their word when they say you can just use their framework and forget about accessibility.
- lewisl9029 7y agoThe 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 start doing that, literally any change you make to the component could become a breaking change for some usage of it in the wild. There is no more explicit interface that users of the component are expected to work with that you can hide implementation details behind, as to afford you the ability to change those implementation details without breaking users, because users can just reach into your implementation details with those arbitrary parameters and change them at will, in a way that's potentially incompatible with how you might want to evolve the component in the future. As a side effect, any sense of brand/design consistency you might want to enforce through a design system goes out the window. Interestingly enough, this set of components use component-oriented CSS-in-JS, which is a pattern developed specifically to provide style isolation between components that wasn't possible (or at least not in a foolproof way) with regular CSS, yet they chose to open that can of worms back up through their API. I've found that a much better middle ground is to deliberately accept React nodes or render props in your components so that you can explicitly yield control of rendering to users for specific, isolated pieces of the component, like the contents of a modal or the individual options of a dropdown. This gives users freedom to render what they need to render, but within the confines of a consistent design framework that enforces overarching rules around consistent use of spacing, colors, transitions, etc. And such an API can still be evolved deliberately to support new use cases without the risk of breaking users unintentionally.
- lewisl9029 7y agoNote 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 providing state & handlers through a render prop API, so users can compose their own styled components in arbitrary arrangements that wouldn't be possible with an interface that only exposes specific component overrides inside of a rigid structure. See downshift as an example of a library that does this really well (https://github.com/downshift-js/downshift https://github.com/downshift-js/downshift), and contrast that to something like react-select that only offers the ability to provide overrides for specific components in its own predefined render tree (https://github.com/JedWatson/react-select https://github.com/JedWatson/react-select). Perhaps on top of that you can also provide a reasonable styled default, but not offering low level control of rendering is usually a deal breaker in my book when picking third party components to work with.
- Brajeshwar 7y agoReferencing 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.
- bradleyhb 7y agoWhat’s meant by non directional ?
- Brajeshwar 7y agoNow, I'm not sure if I used the right vocabulary. I meant, it has constraints which lead you one way in a singular path, their way.
- switch007 7y ago> ... and possibly start with a system that has fewer restrictions, a lot of community activity behind it. Any recommendations?
- jacobr 7y agoNice, looks very well made. It does force everyone in your organization to not only use React, but also Styletron which might be a pretty large switch for some teams. Has this been a problem? I think this could lead to limited adoption in some organizations because autonomies teams want to keep delivering with their current stack. One idea I considered is to have an Atomic CSS library for theme stuff like whitespace, color and typography, and compose those into components for React or Svelte 3 or whatever is hot right now. All other styling could be done with Styletron, styled components, or plain CSS, whichever suits your team.
- miksuv 7y agoYep. React was adopted a long time ago and it is also now the "industry winner", so no complaining there. Styletron is also older - created more than two years ago. However, CSS in JS is more controversial and there are some other more popular libraries now. We keep monitoring them and at the same time we are bringing the best features back into Styletron. Also, you could use BaseWeb+Styletron and some other CSS solution for everything else. It's not a big deal (Styletron has like 7kB). But all CSS in JS libs are very similar anyway. So overall, Base Web was not a big tech switch, React and Styletron have been already widely used.