TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

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

266 点作者 sgolestane大约 6 年前

21 条评论

insomniacity大约 6 年前
I guess we can add Uber to this list of corporate frameworks...<p><a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=18235887" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=18235887</a><p><a href="https:&#x2F;&#x2F;element.eleme.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;element.eleme.io&#x2F;</a><p><a href="https:&#x2F;&#x2F;ant.design&#x2F;" rel="nofollow">https:&#x2F;&#x2F;ant.design&#x2F;</a><p><a href="https:&#x2F;&#x2F;quasar-framework.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;quasar-framework.org&#x2F;</a><p><a href="https:&#x2F;&#x2F;at-ui.github.io&#x2F;at-ui&#x2F;" rel="nofollow">https:&#x2F;&#x2F;at-ui.github.io&#x2F;at-ui&#x2F;</a><p><a href="https:&#x2F;&#x2F;developer.microsoft.com&#x2F;en-us&#x2F;fabric" rel="nofollow">https:&#x2F;&#x2F;developer.microsoft.com&#x2F;en-us&#x2F;fabric</a><p><a href="https:&#x2F;&#x2F;vmware.github.io&#x2F;clarity&#x2F;" rel="nofollow">https:&#x2F;&#x2F;vmware.github.io&#x2F;clarity&#x2F;</a><p><a href="http:&#x2F;&#x2F;appnexus.github.io&#x2F;lucid&#x2F;" rel="nofollow">http:&#x2F;&#x2F;appnexus.github.io&#x2F;lucid&#x2F;</a><p><a href="https:&#x2F;&#x2F;ng-lightning.github.io&#x2F;ng-lightning&#x2F;" rel="nofollow">https:&#x2F;&#x2F;ng-lightning.github.io&#x2F;ng-lightning&#x2F;</a><p><a href="https:&#x2F;&#x2F;blueprintjs.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;blueprintjs.com&#x2F;</a><p><a href="http:&#x2F;&#x2F;www.jetbrains.org&#x2F;ring-ui&#x2F;" rel="nofollow">http:&#x2F;&#x2F;www.jetbrains.org&#x2F;ring-ui&#x2F;</a><p><a href="https:&#x2F;&#x2F;www.lightningdesignsystem.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.lightningdesignsystem.com&#x2F;</a><p><a href="https:&#x2F;&#x2F;elastic.github.io&#x2F;eui&#x2F;" rel="nofollow">https:&#x2F;&#x2F;elastic.github.io&#x2F;eui&#x2F;</a><p><a href="https:&#x2F;&#x2F;atlaskit.atlassian.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;atlaskit.atlassian.com&#x2F;</a>
评论 #19762023 未加载
评论 #19762617 未加载
评论 #19761599 未加载
评论 #19762037 未加载
评论 #19761725 未加载
评论 #19761731 未加载
评论 #19764820 未加载
评论 #19761459 未加载
评论 #19762737 未加载
评论 #19765092 未加载
评论 #19761978 未加载
评论 #19763587 未加载
lewisl9029大约 6 年前
The overrides pattern they describe sounds like a nightmare to maintain. It&#x27;s almost the exact opposite of how I&#x27;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.<p>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&#x27;s potentially incompatible with how you might want to evolve the component in the future. As a side effect, any sense of brand&#x2F;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&#x27;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.<p>I&#x27;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.
评论 #19763610 未加载
评论 #19763253 未加载
tomelders大约 6 年前
Nope. This is replacing composition with configs for no good reason. It&#x27;s like the people who made Grunt and Webpack teamed up to ruin React for everyone.
评论 #19760225 未加载
mmckelvy大约 6 年前
I&#x27;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.<p>I think an ideal system would have a core set of &quot;unstyled&quot; 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.<p>From there you could build UI &quot;kits&quot; that use the core functionality but each have a distinctive look and feel.
评论 #19761851 未加载
评论 #19760280 未加载
评论 #19762358 未加载
评论 #19760078 未加载
评论 #19760257 未加载
topicseed大约 6 年前
Finding a good React UX library is tough. None is ideal. Too heavy, too small, too slow, too dirty.<p>Settled on ant.design for a while, not perfect but good enough.
评论 #19772227 未加载
评论 #19762406 未加载
评论 #19761317 未加载
评论 #19761576 未加载
dmix大约 6 年前
So this is basically a component framework ala <a href="https:&#x2F;&#x2F;element.eleme.io&#x2F;#&#x2F;en-US&#x2F;component" rel="nofollow">https:&#x2F;&#x2F;element.eleme.io&#x2F;#&#x2F;en-US&#x2F;component</a> with some theming standards?<p>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&#x27;s one thing I wished ElementUI supported natively.<p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;SortableJS&#x2F;Vue.Draggable" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;SortableJS&#x2F;Vue.Draggable</a><p>[2] <a href="https:&#x2F;&#x2F;github.com&#x2F;SortableJS&#x2F;Sortable" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;SortableJS&#x2F;Sortable</a>
jscholes大约 6 年前
&gt; 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.<p>FYI, their drag and drop sample doesn&#x27;t &quot;work well with screen readers&quot;. It&#x27;s overly verbose and requires keyboard passthrough to operate. So maybe don&#x27;t take any web designers at their word when they say you can just use their framework and forget about accessibility.
revskill大约 6 年前
I&#x27;m surprised that many huge React libraries don&#x27;t expose its core Context for user to consume.<p>Context is the most important concept in React.<p>Actually, a library just need users to provide the right types of Context to be flexible.<p>I&#x27;m tired of the &quot;lock in&quot; API, in which, it doesn&#x27;t allow me to just get my context data into its arguments API.<p>In this sense, you can consider Context as the local version of Redux.
评论 #19760431 未加载
评论 #19762507 未加载
评论 #19760600 未加载
评论 #19760994 未加载
jacobr大约 6 年前
Nice, looks very well made.<p>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?<p>I think this could lead to limited adoption in some organizations because autonomies teams want to keep delivering with their current stack.<p>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.<p>All other styling could be done with Styletron, styled components, or plain CSS, whichever suits your team.
评论 #19764445 未加载
Brajeshwar大约 6 年前
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.<p>However, using someone&#x27;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.<p>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).<p>There are many good, well thought out systems. One being that of AirBNB’s JavaScript styleguide.<p>Be inspired, and possibly start with a system that has fewer restrictions, a lot of community activity behind it.
评论 #19764369 未加载
评论 #19764185 未加载
habosa大约 6 年前
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&#x27;m guessing) 99%+ of their usage through native apps. So why would I believe they&#x27;re particularly good at building for the web?
评论 #19761690 未加载
评论 #19761973 未加载
ahallock大约 6 年前
Can you use this outside of React? I&#x27;m interested in the styles, but I&#x27;m not using React.
评论 #19760569 未加载
underwater大约 6 年前
The overrides system is weird, to say the least. Any consumer can change styles and erbitrary HTML attributes deep inside a component&#x27;s DOM tree<p>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?<p>It feels like stuffing the worst parts of jQuery and old-school CSS back into React.
petraeus大约 6 年前
Why do they call it a &quot;design system&quot; instead of a framework .. you know like 99% of the web does
评论 #19759554 未加载
hsavit1大约 6 年前
Unfortunately the accordion component is not smooth at all. Otherwise, a valiant effort.
aphextron大约 6 年前
CSS-in-JS is an unmaintainable disaster. Write your SCSS, keep it modular, and import it as a JS object with sass-loader.
评论 #19762535 未加载
sbhn大约 6 年前
Horay, finally, where do i throw my money,
d357r0y3r大约 6 年前
Imagine creating this beast of a &quot;framework&quot; and not even using TypeScript or Flow. What are you thinking?<p>Edit: It does use Flow.
评论 #19760068 未加载
评论 #19760511 未加载
评论 #19759980 未加载
Theodores大约 6 年前
This article makes a lot of noise about Uber&#x27;s commitment to accessibility. So I am led to believe that this new React gizmo is fully accessible.<p>Yet Uber can&#x27;t be bothered to make efforts to get basic accessibility right on the page that tells us this.<p>The main content is not in a &lt;main&gt; element, this &lt;main&gt; element being the landmark that tells people using assistive technologies where the main content is.<p>Then the navigation links, e.g. in the footer are not in &lt;nav&gt; elements.<p>The code sample in the middle is an image. It should be in a &lt;figure&gt;, &lt;pre&gt;formatted and in a &lt;code&gt; block for accessibility.<p>It is a bit hypocritical to write an article about how wonderful your product is for accessibility and not make it accessible.
评论 #19761103 未加载
warent大约 6 年前
My favorite part about Base Web is that it&#x27;s broken.<p>How to reproduce:<p>1. Visit the official website <a href="https:&#x2F;&#x2F;baseweb.design&#x2F;" rel="nofollow">https:&#x2F;&#x2F;baseweb.design&#x2F;</a><p>2. Click &quot;Welcome&quot; on the sidebar.<p>3. &quot;An unexpected error has occurred.&quot;<p>No thanks, Uber. Your community of broscience engineers permanently lost me as a customer after the Susan Fowler writeup, and I&#x27;m not interested in your buggy technology either.
评论 #19760944 未加载
评论 #19761114 未加载
wsdfsayy大约 6 年前
It looks pretty nice. My pet peeve with &quot;modern&quot; web design is that it has become, objectively, very effeminate. Uber tends to leans more neutral to slightly masculine.
评论 #19760979 未加载