Adobe's UI Library is Finally Out

so about a month ago Adobe released their 1.0 version of react area components and I see a lot of potential in this release mainly because it takes the principles that are proven to work from shaty nuui that being the reusability and zero to little abstraction policy ofhat Nui and bringing in their completely own ideas now this library has been around for about a year so the entire library is not completely new but in the very beginning nobody really cared about it in the first place and only that they released their 1.0 they gained a lot of traction over the last month with about like 100 110,000 installs per week and then a bit less over the Christmas season which is very usual and react area components brings a couple of ideas with it what I mentioned in the beginning like the styleability adaptivity and so on on what makes a great UI library and those become really clear in the demo they have on their website which is actually pretty impressive this Center piece on their homepage is a fully featured demo on what the library can actually do there's a lot to it as we scroll we see there's interactivity here there's sorting and we can add our own stuff to it this is fully featured let's add a plant in here with a scientific name of I don't know and this is fully keyboard accessible by the way if we press tab then we go to the next item if we press shift and tab we go to the previous if we press enter that opens up a dialogue and you can navigate that with the arrow keys and always are able to close it with the Escape key and in here they really show off with a beautiful day picker that we can use to also fill out this field it looks really nice you can try out a lot of the features that it brings with it I ran a page speed insights and I found the result pretty interesting so this library is very much focused on accessibility however if you run a Google Lighthouse from a kind of clean lab environment like I did here there is an error with the accessibility background and foreground colors do not have a sufficient contrast ratio and I just found that funny because one of the main focuses of this library is accessibility the performance is actually understand able the performance is like 45 it's really bad but that's of course because this full website is completely interactive there's a lot going on here as we're going to get to the ideas right here with a dragon drop and so on so the performance is understandable the accessibility I don't know man now one of the best things in my opinion is you can bring your own Styles very much like in chatsi and UI you can use vanilla CSS or you could also use Tailwind please don't use style components for obvious reasons Tailwind is a huge one for me a big focus is making your web app feel native on whatever mobile device you're using iOS Android same thing you know it should feel native to whatever operating system you're using and the biggest focus by far is on accessibility but there's far more interesting stuff in here like what I enjoy a lot is the combo box because API wise if you take a look at the code right here it's a lot like you would expect from Shaden where you have a popover a list box inside of there and for each item that you want in the list box well you use the list box item API it's as easy as that it looks good by default honestly not really my cup of tea it it looks very Adobe if you know what I mean not what I would like to have in my app but since the styling is totally up to you and the accessibility is built in it provides so many options to us as developers to build on top of there's a select a grid list a tag group a table interesting I've worked a lot with a G Grid in the past it's an Enterprise solution for tables that we use at work or the 10ac table this API looks pretty familiar we can simply map over our stuff and then render out a row for each item let's take a look at the range calendar this would be something like you'd see on the Airbnb website where you can select a booking start dat and a booking end dat and let's see yeah you can just do this using the arrow keys as well I really like this you can press Escape that's going to deselect everything press enter and you're in selection mode again that is beautiful and besides the components one thing this Library also provides is right here at the bottom the interaction stuff these are The Primitives that the UI Library uses under the hood that they also provide to you to build on top of what should happen if a user presses on something for a long time like a tool tip in your application the hooks for that are documented right here look at this prevent text selection on touch devices while long pressing it seems like they thought of a lot of details when implementing this and I honestly kind of like the API design on long press start on long press end and that just works I really enjoy the approach they took in this UI framework and really doubled down on the zero to little abstraction policy because it's proven to work people like myself and I know many of you as well really enjoy it I would love to see more UI libraries taking exactly this direction of not trying to hide the code implementation from you but rather embracing it and giving you the code for you to choose what you want to keep what you want to modify and I think that's going to be one of the biggest trends of UI libraries in 2024 at least I hope so check out this video it's on local storage and why you shouldn't keep any secure information inside of it either here or here and I'm going to see you in the next video have a good one and bye-bye

Channel: Josh tried coding

Views: 89,107

Keywords: react aria components, 1.0, react aria components 1.0, adobe ui library, ui library, shadcn, shadcn ui, shadcn/ui, typescript, react, react ui library, josh tried coding, joshtriedcoding

Id: D691YmP3VJM

Length: 5min 3sec (303 seconds)

Published: Tue Jan 09 2024