Fluent UI React v9: what's new and different

in this episode of open up Microsoft I'm with olexender to talk about fluent UI you don't want to miss that hey Alexander how are you hey nice to be there Frank so what do you want to talk about fluent UI today uh yeah I'm going to talk about Flynn today but let's make a small stop first let me clarify what is fluent UI there is fluent design which is design system it contains also other bits like icons and emojis by the way uh this beats are open source and currently on my screen you can see a repository of fluent emojis but a fluent UI itself is a component Library so fluent design system also contains components and fluent UI implements them and a reasonable question will be why do we need this vibrator why do we need components well because we want to provide a solid foundation for developers so developers will be focused on building their features on building their applications and reaching their business goals instead of building components and by the way building this primitive components it sounds that it's easy but our practice is a bit different because well you also need to build solid apis you need to ensure that they will scale across products you need to work with designers so all these components will look enough similar and you also need to make them accessible so they should work properly with high contrast mode they should provide proper keyboard navigation and well all these things are unfortunately very complicated oh interesting and what's new in v9 because uh the release was just v9 correct yes so recently we released fluent here I react G9 and we built totally new documentation which is currently on my screen it's totally new UI Library which is based on its predecessors based on learnings and features new apis that allow to build applications easier that based on feedback that we got and it's not only about improved developer experience but it's about small bundle size and faster performance so why so why it's more performant then well there is a reason and first it's what we tried we reduced amount of abstractions that we use internally so we use react more tightly we work more closely with react and another sink is our new CSS NGS engine called Griffo that features such things like ahead of time compilation and CSS extraction that allows to reduce runtime part that we have and that browser will ever wait so we significantly improved JavaScript performance and by the way website with Griffo is on my screen wonderful and I remember that you asked me about migration yeah I want to know more about migration because what what if I was using a previous version is it compatible can I upgrade easily uh well as I said it's completely new different apis and uh if you remember what happened with angorar and angularjs it's mostly the same thing but we try to be better in this direction we use that it will be hard that it's new UI library and again new apis and keep repeating that but well it's important so what we tried to do we tried to ensure that previous versions and v9 will be able you will be able to use them side by side in the same application so migration could be radio so you can use components that looks in the same way that works in the same way but new components are simply more performant and have better developer experience and for that we distribute them through separate npm packages and it's how our partners proceed with upgrade okay great so like this way you could have like like you say a progression in your migration where you're bit by bit you're changing or component by component you're migrating your application and just improving the performance all along that's great I hear you talking about react angular and I know JavaScript there's many different Frameworks or how many like how many Frameworks do you work with in v9 and like what's what's the plan maybe for the all the others well it's probably will be disappointing part but I will try to make it differently So currently as I said it was fluent UI react v9 so it works only with react okay and we don't want well we we don't plan to support Wu GS or angular on any other framework because again building component library for any other framework it will be costly and well the truth is that almost all our partners are using react so is a disappointing part but there are also great news because currently there is a team that works on fluent AI web components with three and version 3 of web components will implement the same design language it will implement the same design terms and it will try to close uh to follow closely react apis as much as possible but yeah it's different platform so it cannot be one by one but we will try to follow the same design terms so in near future our expectation is that you will be able to use volunteer react and web components side by side again how it happened with migration but uh when you don't want to use react you will have an alternative well that's great that's great and it's all open source right fluent fluent UI sorry is open source so if people are interested to contribute like how is it possible uh so okay uh currently on my screen you can see our repository it's where we work it's fully open source sync it's me twice and Set uh and uh it also means that we do we not only just throw code to GitHub but we also work through GitHub we track our issues we use GitHub projects we create pull requests through there and we try to do this in an open way for example a year ago or a bit more we started to work and rfcs and it's a place where you can come even as third party person and comment like on our initiative or are we moving in right direction or if you have different ideas you can come and comment it's an open space and it's related to everything you can also come and contribute and in most cases people uh think that contributing is about writing code but it's not really true because reporting bugs is also contribution reporting feature requests is also a contribution and even fixing typos in our documentation it's also a contribution so you can join our project and contribute in different ways and all of these contributions are warmly welcomed I love that very great message here so make sure to add the link into the description so everybody can join that wonderful affluent UI Community Alexander anything else you want to add well uh there is a bit underrated thing but I would like also to mention our plans we 've learned here reactive nine we are trying to develop well we are not trying to develop new components and on my screen you can see documentation there is already an extensive list but what we are working now and what will be in our near future plans for v9 is bringing feature parity so we will have more components there are some preview components that we will try to move to stable and you know in in near future we will try to bring this feature parity and start to move from previous versions even more actively wonderful so I'll make sure to reinvite you to the show or maybe you and you can bring in a new guest to talk more about those things well thank you a lot for coming on the show today it was really appreciated and looking forward to learn more about student UI thank you

Channel: Microsoft Developer

Views: 6,163

Keywords: Azure, Microsoft, Tech, Technology, Dev, Development, Cloud Computing

Id: bKCDM5S6DaA

Length: 9min 19sec (559 seconds)

Published: Wed Mar 29 2023