CSS-in-JS is an unmaintainable disaster. Write your SCSS, keep it modular, and import it as a JS object with sass-loader.
CSS-in-JS allows for easy JS-based code-splitting (if you've got that setup) and inlining critical CSS on the page.
Base Web, Uber’s New Design System for Building Websites in React
91–100 of 156 posts
Re: Base Web, Uber’s New Design System for Building Websites in React
#92I'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 be…
I'd be interested in this.
Re: Base Web, Uber’s New Design System for Building Websites in React
#93Earlier 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…
That feels a bit strange as a design philosophy; the point of components is that they encapsulate implementation and offer a simple, unambigious interface for configuration.
If someone needs a component to do something it doesn't do, that's a sign that the primitives are wrong and the component needs to be refactored. Punting the solution back to product teams is prioritising short terms wins at the expense of long term pain.
Imagine if we extended this philosophy to other paradigms: every method and property on a class is public and overridable, just in case we need to change the behaviour.
Re: Base Web, Uber’s New Design System for Building Websites in React
#94CSS-in-JS is an unmaintainable disaster. Write your SCSS, keep it modular, and import it as a JS object with sass-loader.
CSS-in-JS allows for easy JS-based code-splitting (if you've got that setup) and inlining critical CSS on the page.
>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.
Re: Base Web, Uber’s New Design System for Building Websites in React
#95I 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?
They don’t use it anymore
https://www.quora.com/What-CSS-framework-does-Twitter-use-in...
Re: Base Web, Uber’s New Design System for Building Websites in React
#96I 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.…
Design Systems Repo [0] keeps a good list. I've submitted Base Web for inclusion.
Re: Base Web, Uber’s New Design System for Building Websites in React
#97Finding 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'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.
Re: Base Web, Uber’s New Design System for Building Websites in React
#98Earlier quoted context omitted.
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…
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};
}
})}>Re: Base Web, Uber’s New Design System for Building Websites in React
#99Earlier quoted context omitted.
CSS-in-JS allows for easy JS-based code-splitting (if you've got that setup) and inlining critical CSS on the page.
>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.
Generally 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.
Re: Base Web, Uber’s New Design System for Building Websites in React
#100I'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.
Yes, theoretically you can ignore props and state, because context could replace both.