
A React implementation of Spectrum, Adobe’s design system - tga
https://react-spectrum.adobe.com/react-spectrum/
======
sandgraham
Having 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.

------
harel
One 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
Our 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.

~~~
ggregoire
Will it have moment.js as dependency like react-dates?

Do you also plan to make a DateRangePicker and a TimePicker?

~~~
devongovett
No, 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.

------
devongovett
hey 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-
spec...](https://react-spectrum.adobe.com/blog/introducing-react-
spectrum.html)

~~~
mdgrech23
Hello - 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
Each 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)

------
spankalee
There'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/)

------
ChrisLMB
Why is there never a simple screenshot of anything? I just wanted to see and
example of what Spectrum usually looks like

~~~
kcoop
There are live demos on the individual component pages that should give you
what you're looking for.

------
cosmotic
Regardless 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
+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
Is it me / my environment or is the low contrast nature of that design just
really hard to look at / read?

------
tantaman
Not 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.

~~~
crubier
I 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
Can 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.

------
wiradikusuma
We 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
It's called Web Components, a standard built into browsers for many years now
which means it will be backwards-compatible in perpetuity.

~~~
chrismorgan
Web 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
Web 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.

------
dmitryminkovsky
Very 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
"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
> 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.

~~~
hardwaresofton
You might have responded to the wrong comment -- hopefully OP will see it
here, but agreed.

In the ideal situation the team of 10 produces the components/style decisions
and the resulting components that the whole company uses and then you never
see a weirdly styled/non-standard part of their offerings every again. In
practice, it can get really messy as that team can become a bottleneck for
various parts of the org trying to move in very different directions and
management gets difficult.

In the near future, once one of the design tools really nails generating
(probably React) components that devs don't hate, I think it will be much
easier for the teams of UX/Design and UI (devs putting react components on
pages and dealing with technical feasibility) to work together. It feels like
design has only recently started to receive the automation/tooling love that
devs have (tools that intelligently manage iteration, sharing designs,
"branches", etc), so once someone bridges that gap hopefully tooling gets rid
of some back and forth.

------
temuze
This 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.

------
Bishonen88
Is 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...

------
pjmlp
For 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)

------
driton
The 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.

------
noeltock
Devon, 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)?

------
edem
For 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.

------
jiofih
417KB minified :|

~~~
kcoop
That is for the full bundle - looking at the repo, the individual components
are separated into packages.

------
jpsimons
They 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.

