8 ms·
A React implementation of Spectrum, Adobe’s design system
- cosmotic 6y agoRegardless of the react aspect, Adobe could use some lessons on usability fundamentals. This design system's use of pervasive fade animations and low contrast are rather upsetting.
- aylmao 6y ago+1 on these shortcomings, though I think it's also worth celebrating what they do right. Namely, I'm glad the system has the concept of "desktop" and "mobile" scales, and doesn't use the same size components for every platform. They also differentiate between touch and cursor hit areas, which is neat [1]. https://spectrum.adobe.com/page/platform-scale/ https://spectrum.adobe.com/page/platform-scale/
- duxup 6y agoIs it me / my environment or is the low contrast nature of that design just really hard to look at / read?
- jiofih 6y ago417KB minified :|
- devongovett 6y agohey everyone. I work on React Spectrum. Happy to answer any questions. :) I'd also point to our introductory post where we discuss the architecture. I think the most interesting thing is that you can reuse most of the behavior, accessibility, etc. without our design in your own component library using our hooks. https://react-spectrum.adobe.com/blog/introducing-react-spectrum.html https://react-spectrum.adobe.com/blog/introducing-react-spec...
- gedy 6y agoNice work, thanks for sharing.
- mdgrech23 6y agoHello - I may be blind but I don't see any examples of what the components look like on actual screen. Is there a storybook or something?
- devongovett 6y agoEach component page has live examples. e.g. here's Button https://react-spectrum.adobe.com/react-spectrum/Button.html https://react-spectrum.adobe.com/react-spectrum/Button.html
- de6u99er 6y agoGreat work, looks really good and useful! Will try it out tomorrow. Thank you for contributing to open source.
- treis 6y agoCan you give a few sentences of why someone would want to use this?
- devongovett 6y agoI think it's more likely that people will want to use the React Aria and React Stately libraries that underpin this than React Spectrum itself, unless you're wanting to match the Adobe look and feel for some reason (e.g. plugin developers). React Aria and React Stately provide Hooks that give you a lot of the behavior, accessibility, internationalization, etc. features out of the box, but let you completely customize the styling and rendering in your own components. Here's an example I made of using the hooks with Tailwind CSS to build completely custom components with full accessibility in a very small amount of code: https://codesandbox.io/s/tailwind-react-aria-3ngmw https://codesandbox.io/s/tailwind-react-aria-3ngmw.
- rp36 6y ago
- harel 6y agoOne of the things that I always find missing in these libraries/collections is a date/time picker. I know these are available via many separate projects, but it's nice if one picks a collection like that, that all inputs are homogeneous.
- devongovett 6y agoOur date picker is in progress right now actually. Should be available relatively soon. Date pickers are one of the most complicated components, especially due to internationalization/accessibility requirements.
- harel 6y agoI appreciate their complexity and applaud your efforts. Good stuff.
- de6u99er 6y agoCan confirm. Date pickers and tables with pagination and sort/pagination functionality are hard. Had to input my birthday recently and the web-form only allowed input via the date picker which started with the current date. The year had small minus and plus buttons next to it. This did not only make me feel old while I was clicking through the years, but it also cost me valuable time. About tables, most developers forget that a paginated table needs to do search sorting on the data provider side. Sorting and searching through the visible 20 entries isn't helpful at all IMO.
- ggregoire 6y agoWill it have moment.js as dependency like react-dates? Do you also plan to make a DateRangePicker and a TimePicker?
- devongovett 6y agoNo, moment is not a dependency. We're using the native Intl.DateTimeFormat APIs that are built into browsers now. This makes sure we support internationalization properly, but without the giant locale data needing to be downloaded. And yes, we have a DateRangePicker and TimePicker as well.
- spankalee 6y agoThere's also a cross-framework web components implementation for the Angular, Vue, Svelte, Ember users out there: https://opensource.adobe.com/spectrum-web-components/ https://opensource.adobe.com/spectrum-web-components/
- sandgraham 6y agoHaving spent the past couple years working on a large design system, I am most excited about @react-aria and @react-stately. There is huge potential for allowing resource constrained teams to build out a truly customized DS in a fraction of the time. Even for a well resourced team, these hooks can make extending their existing DS and borrowing complex behavior much simpler/faster. The biggest challenge for a DS at scale is in how you can adapt it to the infinite edge cases that a product eventually uncovers- while staying consistent and leveraging existing code. I think these libraries offer the best model yet for achieving this. Congrats to @devongovett and the team at Adobe for realizing these ambitious projects and successfully open-sourcing them.
- temuze 6y agoThis is great! It would be nice to make `react-primitives` compatible with this as well: https://github.com/lelandrichardson/react-primitives https://github.com/lelandrichardson/react-primitives. I hope every UI platform gets a react-like library and becomes compatible with react-primitives. It would be really nice to write things once and make it compatible on every platform instantly.
- ChrisLMB 6y agoWhy is there never a simple screenshot of anything? I just wanted to see and example of what Spectrum usually looks like
- deleted 6y ago[deleted]
- kcoop 6y agoThere are live demos on the individual component pages that should give you what you're looking for.
- tantaman 6y agoNot sure if its because I've been using React for the last 6 years and I've "fallen out of love" or it is actually starting to show its age but... React, which was once the greatest thing to happen to UI frameworks, now looks like a very leaky abstraction. The prevalence of `useMemo` and `useCallback` to get around perf issues, `useEffect` to try to interact with event systems outside of React, and `useRef` to save things that don't quite work when persisted in the component's state. I'm watching Svelte with interest these days. It seems like we're ~1 year away from Svelte, or a framework very much like it (one that moves concerns into the compiler), taking off and revolutionizing things the way React did 7 years ago.
- cheez 6y agoInteresting, hadn't looked into Svelte. I do agree that something _like_ it can be useful in the future. I currently have my own framework that does this at compile time for non-UI code for performance reasons. Previously, Weblocks did something similar for Lisp IIRC.
- crubier 6y agoI disagree. So far NO other UI library/framework than react offered the “interface as a function of state” paradigm. All others (Svelte, Vue partially) are based on templates with their ad-hoc syntax for ifs and maps/loops and so on. This is a non starter for me. I will consider other things than react, as long as they use this concept of interface as a function of state. This is non negociable for me at this point.
- dbbk 6y agoCan you clarify what you mean by "interface as a function of state"? All the templated-frameworks still fit this definition... they are reactive to the state of your component. In fact, they are more performant than React because their template syntax provides static analysis, so the app can be optimised at compile time.
- atrilumen 6y agoChoo-Choo! https://choo.io https://choo.io
- jpsimons 6y agoThey lost me at "css-loader". How about just import your components and they style themselves? The whole philosophy of React is JS-first and really, JS-only.
- Bishonen88 6y agoIs there a listbox component similar to a pivot table slicer from excel? One which would always show the complete list (or part of it), be multi selectable with a drag functionality and one in which elements can be made semi-transparent to indicate that they’re empty/missing. I’m looking for something like that since ages. A native select is the closest thing I can find but it has many limitations irt styling...
- dmitryminkovsky 6y agoVery nice to look through. Does anyone have a list of React "design systems"? I was not familiar with this term. Also, I am wondering: looks like there is https://spectrum.adobe.com https://spectrum.adobe.com. What is the purpose of Spectrum without an implementation like this? Why would Spectrum be a public published thing, considering that only Adobe makes Adobe products?
- hardwaresofton 6y ago"design systems" in recent frontend parlance is generally colors + fonts + screen wids + methodology + components (usually) that all fit a certain visual style/philosophy. Material Design can be considered a "design" system. While the pieces of design systems make sense in and of themselves (you can argue for a clearer, easier to read font), I think a lot of bullshit gets dragged in along with people wanting to embrace "design systems" for the sake of doing it, or because it looks good on a resume "X designer built a design system at Y company". If I were to think even more cynically than usual, you can think of design systems as bundles of components. > What is the purpose of Spectrum without an implementation like this? > Why would Spectrum be a public published thing, considering that only Adobe makes Adobe products? Cynically -- marketing for adobe, and some easy press, internally maybe a deliverable for the design/frontend teams that was on the roadmap for this quarter. Less cynically -- other companies can choose to use Adobe's design system instead of creating their own, also everyone benefits if Adobe has done stuff that goes above and beyond the usual bundle-of-components (ex. their React Aria[0] effort). [0]: https://react-spectrum.adobe.com/react-aria/index.html https://react-spectrum.adobe.com/react-aria/index.html
- rozenmd 6y ago> What is the purpose of Spectrum without an implementation like this? > Why would Spectrum be a public published thing, considering that only Adobe makes Adobe products? From what I've seen, design system teams at MegaCorps are usually at most 10 people, in an org of thousands of internal engineers and external contractors that may be consuming their product. Discoverability is pretty important, otherwise engineers will try and get around the guard rails your system imposes. Also yeah, it helps for recruiting frontend developers.
- wiradikusuma 6y agoWe should standarize these "UI themes" so that other frameworks don't get left out (e.g. easy for Angular/Vue to use this). In Java world, it's called SPI (Service Provide Interface), like API but the opposite.
- zelly 6y agoIt's called Web Components, a standard built into browsers for many years now which means it will be backwards-compatible in perpetuity.
- chrismorgan 6y agoWeb Components only really covers half the picture here. Libraries like this provide integration with their chosen framework, including tying events into however the framework should do such things, and places where data flows without DOM nodes (e.g. if a widget renders based on some dynamic data source that isn’t child elements). Often you could do this with Web Components, but it would substantially harm expressivity and/or performance. Also you can generally make the implementation lighter and faster if you implement it within the framework, especially if the way you make Web Components uses a different framework (so now you have n+1 frameworks on your page).
- zelly 6y agoWeb Components can be barebones, use no dependencies, do all DOM manipulations directly. That would give you vanillajs performance. It won't be easy to scale to big components this way--the use case is small components with minimal state, something like a time picker at most. Integrating the Web Component into React should not be much harder than integrating an <video> element. At best, do nothing or at worst, create a Ref and attach an event listener. The benefit is this would work across all other JS frameworks. Web Components are primitive, like the C ABI, but everyone can speak it, like the C ABI.
- deleted 6y ago[deleted]
- noeltock 6y agoDevon, thanks for sharing and congratulations on the release! Nice to see Adobe push more open-source work, is that something we can expect more of (vs the proprietary software)?
- pjmlp 6y agoFor those that rather not delve into React, there is also a CSS version, framework free implementation. https://opensource.adobe.com/spectrum-css/index.html https://opensource.adobe.com/spectrum-css/index.html
- edem 6y agoFor someone who hears about Spectrum the first time...what is this stuff? It is not explained on the site either, like I was supposed to know.
- driton 6y agoThe more competition there is in this space, the better, and this looks like a very nicely polished solution right from, the get-go. I would definitely give this a go for smaller projects, as an alternative to MaterialUI or ant.