adw632
I was just looking at the new Adobe Spectrum 2 web components which were released a couple of days ago with an article also on Tech Crunch.
I have had an initial look and I doubt one will find a more tested and documented web component library that works across browsers and devices. Adobe has made a substantial investment in their design language and tokens with great care for keyboard navigation and accessibility of every component so it strikes me as a solid basis to build framework free web apps on. Given Adobe are literally betting the farm on it I expect it to be a solid app UI and CSS choice with long term viability:
Adobe will start rolling out Spectrum 2 by bringing it to its web and iOS apps first, starting with a first set of updates to the web apps in early 2024. Over time, it will also come to the company’s flagship desktop tools like Photoshop, Lightroom and Premiere Pro.
In total, Adobe plans to bring its new design language to well over 100 apps. Rolling out a new design system across such a wide number of applications is never an easy task. Just look at how long it took Google to bring its Material Design system to the majority of its services. Still, Adobe expects to be able to roll out Spectrum 2 to quite a few applications in 2024.
Abobe provide both web component explorer and a CSS explorer as you can also style html without the web components, storybooks also available.
I am looking at experimenting with Adobes web components in conjunction with Chris Nelsons (@superchris) live_elements. Live elements improves the ergonomics of working with web components which he covers in his ElixirConf talk.
I think its exciting that with web components we can build rich framework free UI’s using component collections like Adobe Spectrum 2 and Shoelace.
Web Components just may be the right strategy to filling a large gap in the Phoenix ecosystem which currently lacks a capable component library.
Where Next?
Trending in Discussions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Supporting innovation across the BEAM ecosystem.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #blog-post
- #elixirconf-us
- #elixir-ls
- #ai
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 10- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
superchris
Definitely let me know how it goes! I am curious to hear feedback from people using LiveElements and LiveState. Just one thing to point out, there is also (confusingly) a Rails project called live_elements. I think that Fly.io article is talking about the Rails thing not my project.
adw632
Yes it mentions live view and then discusses a rails add on so I removed that reference.
I will be moving forward with the current Adobe Spectrum components as Spectrum 2 won’t land until next year, but at least I’ll be ready for it.
I plan to publish a step by step starter project so others can also explore this path.
Sebb
I wanted to try shoelace and LV for a long time now, but the first steps seem hard.
Spectrum it did not know but it looks amazing.
If you have anything to share to get others going, it would be greatly appreciated!
adw632
I have a starter project and step by step instructions on setting it up which I will publish and link to on ElxirForums once the festivities settle down.
I also have some minor PRs to submit that were required to make everything work nicely with LiveElements.
Sebb
Looking forward to it.
The spectrum web components are great. If you can show a good way to make it work nicely with LV (eg replace put-flash with their toaster, control modals and popovers, …) it’ll be amazing.
Question: I did not find anything but marketing announcements for Spectrum 2 - is there anything else?
adw632
It will launch in the new year, but setting up for Spectrum V1 will be more or less ready for v2.
I have experimented with Shoelace and Spectrum and I am now looking at the IBM carbon design system which includes app shell / navigation components that the others leave out and a huge focus on accessibility. Their documentation and design guidance is very comprehensive too.
user20230119
I tried using data-tables from carbon web components and tables with selectable rows in spectrum web components. When LiveView mounts, both tables work fine (rows select, columns sort). After the LV hydrates when the socket connects, the tables lose sorting and the checkbox get removed.
phx-update="ignore"fixes it, but then I cannot add more rows. How do you plan to update the table rows using web components and LV?Does the data-table example (from GitHub - launchscout/live_elements_testbed: A testbed project (phoenix) to house integration tests for live_elements · GitHub) work when you sort columns?
D4no0
The primitive way to do this is with hooks, because as far as I understand from your post JS manages the sort state, but there are nicer abstractions as far as was mentioned either in this post in upper comments or a similar one.
user20230119
What would the hooks do?
D4no0
You can read about this in more details here: JavaScript interoperability — Phoenix LiveView v1.2.5. Basically you can set phx-update to ignore and pass the state directly to JS component, then handle everything else with JS.