[MUSIC] >> Hi. My name's EJ
Layne Program Manager for the Fluent UI team
here at Microsoft. Today, I want to
show you how easy it is for you, your designers, your developers to build a
great looking, productive, natural-looking experiences
across all different devices using the Fluent design system. I'll be joined shortly
by Alex Powell, Design Manager for
the Teams team, who will also show us how
the Teams SDK leverages Fluent to allow
developers to build great-looking and Teams
applications as well. You might have
heard the Teams has over 145 million active users, and we want to make it
as easy as possible for developers to plug
into that ecosystem. We also want to show
you what else you can build using the Fluent
design system as well. Then at the end, we want to
make resources, GitHub links, and all of our open source repos available to you to contribute to and we'll also have links to our blogs and social media
for you to stay up-to-date. Now, for those of you who aren't familiar with Fluent
Design System, I'll describe it to
you in one sentence. Fluent is a cross-platform
design system backed by code. Now, that's simple, but what does it actually
mean? Let's break it down. Fluent is made up of three main components:
Design, Code, and Tooling. In the Design side, we have the Design fundamentals, things like: color,
spacing, typography. We want to make sure all of
those are available as part of the Fluent design
language and we also want to make sure that
it's available and easy to use for designers in the
design toolkit as well. Whether it's Figma or
whether it's other toolkits, we want to make sure the
designers can create beautiful looking
experiences that it's easy to get them
in developer's hands. Now on the code side, we want to make sure that
the Fluid design language is embodied in all of our
UI component libraries, whether you're building
for Web, Windows, Apple, Android, iOS, macOS, we want to make sure that we have a UI component library
that is available for you, meets you where you're at. We want to make sure
that as you're building cross-platform
applications as well, the experiences that
you're building, both the code as well as the UI, are coherent, meaning, that they look natural on each device. But that the code also, you don't have to learn a
different coding patterns. You're able to follow the
same patterns as you're developing your applications
across platforms. Lastly, on the tooling side, we want to make sure that
the design-to-code pipeline is as easy as possible for designers to get updated designs into
engineer's hands, and that the efficiency of that design-to-code pipeline
is as efficient as possible. We want to package all this up in central documentation that we're in the process of
updating right now, so stay tuned for that. Now, I'm handing it off to Alex and he's going to
show us how you can build great Teams
applications using the Team's SDK leveraging
Fluent. Take it away, Alex. >> Thanks, EJ, and welcome everyone to this
On-Demand session. Building on the great work that the Fluent UI team
has been doing, we've been working hard on the Team's platform
side to develop a UX framework where
you can use to build rich and engaging apps
for the Team's ecosystem. We're aligned with
Fluent UI and they integrate deeply into the
Team's native client. In this session, I'm
going to be walking you through that framework and how you can use it to build your first Fluent UI Teams app. Let's just start
with some context. Today, businesses
and organizations use the Teams platform to integrate applications
and services directly into chats, channels, calls, and meetings, enabling users across their tenant to use the applications they
know and love directly in line to the collaboration
spaces where they work. By building UI in Teams, you access to all of the extensible
collaboration tools that we provide our box, things like meetings
extensions, message actions, and apps and chats and channels, as well as a whole host of other extensible
collaboration tools. Being multi-modal
and fully responsive means that if you develop your app for the desktop client, you also get the mobile and
tablet experiences for free. Today in the Team's app store, we have a very rich
and very ecosystem with a diverse range of apps across a wide range of sectors, ranging from
education, healthcare, to financial services,
and manufacturing. The apps themselves are
also equally as diverse. We have apps for surveys, for polls, for quizzes, all the way through to apps that support Dashboards
and Analytics, through to content streaming. In the last year, we've seen a huge amount of growth
in the platform. As EJ mentioned, we now have 145 million daily active
users on the Teams client. We've seen an eightfold
increase in the number of daily active users of third-party
line-of-business apps within Teams and a
doubling in the number of apps available in
the Teams App Store. For larger businesses with
a thousand or more users, you've seen a threefold increase in that same time period. Let's take a look at some of
the technologies that you can use to build apps
for Teams today. Starting with SharePoint and SharePoint web parts
and PowerApps, you can use them to build
standalone applications that you can host in
iFrames directly in line to meetings by meetings extensions or
in chats and channels via tab construct or personally-scoped apps
by personal apps. You can also use Power Automate, build workflow process automation tools that you can embed directly in line to messaging Canvas by
a message actions. You can also use
Power Virtual Agent and the Bot Framework to leverage natural language processing and conversational AI, to create interactive workflows with the users that are able to communicate directly with
your external services. If you've built your app
using web technologies, you can publish that
via iFrame construct directly links
meetings and chats and channels and also
personally scoped out. You can use the Adaptive
Card framework again, so communicate with
your external services via predefined JSON schema and a frontend rendering
layer where users can take actions that can read
and write to your service. All of this is held together with Microsoft Graph and all of the data services
that come with that. In the middle ring,
you can see all of the Team's collaboration
capabilities and extensible surfaces
that we provide. As already mentioned,
you can bring out into meetings for our
meetings extensions or into chats and
channels via tabs or personally-scoped
tabs via personal apps. You can also embed web views in modals for our
Task Module feature, which is great for
sequential click-throughs, forms, and surveys. You can also communicate with your external services by
connectors and web hooks with the bot service and also
bring content directly into the messaging Canvas via our message
extension framework. Let's take a look at how
we've been leveraging the Fluent Framework in
the Teams client today. Early this year we launched
the Fluent version of the Teams native client in light and dark theme
that you can see here. We've updates to the icon system, the app bar, the
main canvas area, and also a title bar. In addition, we updated all of the primitive
components in the main canvas that you
can see here to give a really refreshed look and
feel for the Teams client. What we've done on
the platform side, is to take those components
and aggregate them into what we call composite
controls and UI layouts. The MLB App developers and ISV developers could use to define application
solutions for Teams. Here we see a dashboard UI layout with some of our
composite components, including the toolbar at the
top which is an aggregation; the find, filter and primary
action Fluent UI controls. Dashboard tiles, you can
see are fully responsive, down mobile views and
half-baked in reflow logic. You can also embed dashboard
cards within these tiles, where you can see
the title section, the overflow menus,
tab constructs, and also the view details. We also have an extensive
data visualization component set that you can
embed directly in the development within
the card and then you can theme to align
with your brand colors. You can also embed
your app logo and the header to co-brand your app. In addition to dashboards, we've created a number of other UI layouts,
including lists, swim lanes, forms, and a whole other set that are in the toolkit that I'm
going to show you later. In the future we'll be adding to that toolkit with
extensible calendars, shift views, and
project planning views. Developing this framework, we've tried to look holistically across the full
development lifecycle, all the way through the
discover and learn experience, we've updated documentation that I'll talk you through later. Learning resources,
that we're going to publish in the next few months. Case studies and customer
success stories, again, I'll give you an
example of it in a minute. We've also updated the
design libraries which we published in December via Figma. We'll also be publishing
libraries for Sketch and Adobe
XD in the future. We have access to the
Fluent UI libraries where you can find the
primitive controls. We've also been partnering for the build experience with
the Power Platform team and integrating the new
control libraries into Power Platform
App templates. We're also converging with the SharePoint and SPFx team
on a common control set and working with the Adaptive
Card team on updating the card system to
adopt Fluent UI. On the developer
experience we have published an SDK via GitHub, which will be
published in January that corresponds to the toolkit. An npm package @npmjs.com that you can import directly into your development
environment and use with the new Visual Studio
toolkit update that's available shortly. So with that, I'm going
to jump directly into the live demo of the
Microsoft Teams UI Kit. Here we can see the
UI kit cover page where we've got a change
log on the right-hand side, that gives you the version number and any updates that we've
made as part of that version. We also have the
introduction page here which gives you
context about the toolkit, how you can use it with some of our core Teams app design
principles at the bottom. We also have additional
resources where you can find links to W3C standards, accessibility guidelines
for Microsoft, Figma plugins, and inclusive design information from the Microsoft
design community. Now, the information on the
grid system that we adopt, which is the four pixel grid with basic usage patterns and overview of how to use
the four pixel grid. We also have avatars with
the different avatars sizes, padding patterns, the
icon set that we support, including how to
create your own custom icons and links to the Fluent UI icon libraries and also the Teams icon
set as well as GitHub. For the type primp, we have all the details that you
need for typography, the usage of Segoe
UI, the font way, line spacing and line lengths, and the different
usage patterns that we recommend for the type. We also provide an extensive information
on our color palette. Usage guidelines again, accessibility guidelines of where and when to use
certain color sets, our different neutral
terms that we use and brand colors for Teams, also our secondary colors and information about our
design tokenization system. Also information on
how you can co-brand your app with using
the color set. As part of our component library, we provide themable controls. You can see some examples of here including the tab selection
states, primary actions, drop-down menus, and some of our primitive controls including
checkmarks and toggles. In terms of applying
your brand color, we provide an automated
algorithm where you can enter your blank color and it'll generate this
color palette for you. You can apply these different
color palette elements to the different control
libraries that we support in their
different states. We also give information on
the secondary color usage, our best practices of when
and where to use color, and guidance on accessibility
and legibility. We have new information on
shape and elevation which aligns with the Fluent
UI design system. So you can see some
of the patterns here including information
on elevation and drop shadows and the usage in different contexts
and how you can actually apply different
shape treatments to button styles like this. Then for copy and content, we have information on the tone of voice for Teams
including punctuation, capitalization, and
various voice principles. Jumping into this basic
UI components set, this is really a
quick reference guide of our UI primitives
that are taken directly from the
Fluent UI components set under a Teams [inaudible]. Here, we have information on buttons as an example
where the sizes, styles, states, and types, and then a whole host of other primitive controls
including input boxes, scrollbars, checkboxes,
drop-downs, and pivots. We have more complex controls down here including pickers. You might want to use dialogs, cards, and a whole host
of other controls. On their own, these basic
UI components aren't that useful when you're
thinking about how these actually live together when
you're building an app. So what we've done, is
to create a complete set of app capability guidelines for all of the different
extensible surfaces that we provide
through our Teams. This includes; apps and personal
apps which are iframes. Here you can see information on the anatomy of the
iframe construct, the different layouts
that we support and recommend within the iframe. Also best practices including
the first run experience, the usage patterns of how
you add a personal app, the anatomy of the toolbar
and overflow menus, the priority ordering within the personal app and
the type hierarchy, and then the actual anatomy of the in-canvas experience as well including the
toolbar section, the navigation section here, and also how this is responsive, all of the reflow logic that
we provide and information, best practices including sample apps that you can download. Beyond the capabilities
for personal apps, we've also done
the same for tabs, for bots, adaptive cards and task modules that you can go
through in your own time. In addition to this, we've also provided
pre-canned UI templates. These are based on the most commonly
used controls that we found across our
application ecosystem. List is one of our most
commonly-used controls. We have information here on
the responsive behaviors, on the anatomy of the list item, on the theming, so how to
apply light and dark themes, and on the individual behaviors. So things like multi-select
steps, default actions, overflow menus, filtering with
multi-select zero states, find behaviors, etc. It's a really detailed
and comprehensive guide, best-practices,
responsive behavior. We've done this for all of
the different elements here. Here you can see, for example, the data visualization library, which is a very comprehensive set with the dashboard card
layouts that we support, how to embed your data
visualization object within the div element
within the card, the list item that you can actually append to the data visualization objects, some examples of
the usage patterns, and then the actual chart
objects themselves. Here we can see the
donut chart, pie chart, and we have these
available in light theme, dark theme, in
high-contrast mode. Then just more charts here, so line charts, area charts, stacked area charts, and a whole host of other data
visualization objects. That is the UI control
library in the tool care. Now, I'm going to jump into the actual SDK storybooks
that we have. This is the control library
published in GitHub. Here you can see as an example the dashboard carl elements in the toolbar and some of the different data
visualization objects we support, some of
the behaviors here. These are all accessible so that you can tap through them. You can see meta information
as you actually hover over the different line items here. They're fully responsive
as well so you can scale each of these objects
down into mobile views. Then you can see here that
we have another example of the list control which shows
the multi-select states. This again is also fully
responsive and have all the primary actions at
the top: the filter control, the behaviors there, and also the fine control of
how you can use them. We're going to have a live
code demo so I'm not going to go into too much
more detail there. Then the other item
that I wanted to cover is the updated
documentation. Here we come to docs.Microsoft.com Teams
developer documentation portal. Click on this "Design
your app" view. You can see here that we have a whole section on designing your app which really maps back to the UX toolkit
that I showcased, including an overview of
the design principles, how to create case
of experiences, links to the Fluid UI
component libraries, templates, and a description
of the app capabilities. Then just drilling down into some of the capabilities here, we give a lot of information about how to build
a personal app. Again, the anatomy
of the personal app, designing with the
UI templates that we provide within the
personal app context, embedding bots and personal apps, app personal management. We've done this for all of the different app
capabilities that we support. I'd recommend,
coming to the site, having a look around
and exploring how you can get up
and running with developing your first
flow in UI app. Now that we've seen
some of the toolkits and component libraries
that we've created, let's take a look
at a live demo with Paul Gildea who's an engineer
from the Fluent Team. He is going to show us how all of these different components and controlled libraries
come together with the Teams Visual Studio toolkit. >> Today, I'm going
to show you how easy it is to build a Teams app using the new Teams
toolkit VS Code Extension, as well as the Teams
UI component library. So the first thing
I've done is I've already installed the extension, and the goal of this
extension is to jumpstart your developer experience
so that you can F5 into a Teams app as
quickly as possible. That's what I've
done. I've created a new project, I've hit F5, and I'm presented with this wonderful hello world
experience with a bunch of sample code that already starts to integrate
with the Teams SDK. We're going to start here. The next thing that
we're going to do is we're going to
start to integrate some UX experiences coming out of the Teams UI
component library. Let's do that. What I'm going to do here is
I'm just going to remove this sample code
that's provided for me, and the first thing I'm
going do is I'm going to add a communication component, and I'm going to
give this component a little bit of configuration. What this component is, is this gives me a UX experience. It's a landing page
for my application. By default, it already comes
pre-baked with some images, some buttons, with
some sample text. The next thing I'm going
to do is I'm going to edit some of this to
make this a little bit more customized
for my experience. I'm going to hit "Save"
here, and I'm just going to explain what I did there. So I've updated the title, I've grabbed my username
from the Teams SDK, updated the description,
and I've changed how many buttons that I
have for this experience. If I click "Learn More", you can see that I'm
automatically launching a URL to the GitHub repository for the Teams UI
component library. So if you want to
go and learn more, I highly recommend
going into that repo and starting to get involved
in the community there. What I'm going do is I'm
going to close that up. The next thing we're
going to do is go to our new dashboard experience. I'm going to switch over to my Dashboard tab and
the source code. The Teams UI component library provides a dashboard component that gives me a wonderful
user experience that was right at home at Teams. All I need to do is provide the dashboard component
with some backing data. What I'm going to
do here is I have this one widget that's
showing on the screen. I'm going to copy and paste to create a bunch of other widgets. I'm also going to change
the size of these widgets. It'll become clear
why I'm doing that. I'll create a series of widgets with a bunch
of different sizes. The beautiful thing about the dashboard component
is that it manages the lab space for all
of these widgets so that as I resize the browser, it will do the right
thing and have that responsive
design built right into it and I didn't
have to write any code. All I needed to do was provide some backing data,
which is really nice. Next thing I'm going to
do is I'm going to add some more complex widgets to this dashboard experience with some data visualizations
and some charts. I'll just hit "Save" here
and you can see I've updated those blank widgets with
some charting data. The cool thing about these
charts is not only are they pretty comprehensive and
that we have line charts, we have doughnut
charts, and bar charts, all those great charts, is that these charts are themeable. So all I'm going to do
here is I'm going to simulate a theme change. I'm going to change
the theme that's being provided to the
dashboard component and then put it into dark mode. You can see all of those
charts are themed to be cohesive with the
dark mode experience as well as providing a
high-contrast experience to be inclusive for users that may need more visual contrast
for their experiences. There you go. That was a quick
lap around what we have in the Teams UI
component library and the Teams toolkit VS Code
Extension. There you go. >> Thanks for that Paul. Now
we're going to take a look at a real-world example of
how one of our customers, Accenture, is using these
component libraries to build a line of business
application solution called Manage myBusiness. With that, I'm going
to hand over to the Accenture team who are
going to talk us through. >> I'm Jason Warnke and I lead Digital Experience inside of
Accenture's IT organization. I'm joined here today
by Shane Marshall who looks after all the
applications inside of IT that serve our client teams and allow
them to serve our clients. I was the sponsor of the Teams journey and our Team's as a platform experience. We've been working to bring
more experiences and lessen the cognitive load of our users as they go about
their work everyday. It's getting rid of
that swivel chair from application to application, bringing services right to where Teams are working
which is in Teams. We thought the best
place for us to bring a re-imagined experience
from the cohort and not just the Teams apps
and bots and extensions, but actually re-imagine
an application from the ground up, inside of Teams in the space
that Shane looks after. So Shane, tell us a little
bit about what your team is doing to deliver on this
vision of Teams as a platform. >> Thanks Jason.
First off I wanted to thank you for
being a sponsor and champion for Microsoft Teams and Teams as a platform
within Accenture and CIO. We're now starting to see
the power and value of using Teams other than
just a collaboration hub. A great example, my teams, my IT teams are responsible for everything that we
need to do to manage, sell, and deliver our
business for our clients. Specifically, one app
that we're talking about with Microsoft Teams is
called Manage myBusiness. It's a management
review board with active dynamic data that summarizes the different book of businesses that we
have across the globe, can be filtered, it can be
looked at, and drilled in. But it's in a web application, and the web application begs for collaboration as these
leaders manage their teams. We thought, no better place to start than actually
pull those experiences, those datasets natively
within the Teams, allow people to
interact, collaborate, whether it's in a chat,
whether it's in a meeting, on the data that they need to manage and review their
book of business, not totally skipping
over the need to text or paying for someone managed live in the
collaboration hub, your book of business. >> The thing that's magical
and different about this, is that instead of what we've
done in the past is brought our web application into a
tab or into an extension, it actually did look and feel like a different application even though you are in Teams. The thing that's
different here is actually using the Fluent UI. Actually the user experience
that people are used to with the core features of Teams to then extend that into a
business application. That's what I think is giving everyone the big ideas of, wow, we could do this and this and this now that it feels like, and it just acts like
Teams native place. That's a really special
part about this. We're very excited to
see where you go next in your portfolio
and bringing all of these Teams as a platform to Accenture's people.
Thank you very much. >> Now we've seen some of the contexts from
the Accenture Team. Let's take a double-click
on the app itself. Here we can see, in
the Consultant view, that the Consultants
received a notification from the MMB app telling them that sales forecast is dipping below the
threshold numbers. This is leveraging the
Activity Feed API. Here, the Consultant clicks on the notification and
they're deep-linked directly into the Manage
My Business personal app, which you can see pre-pinned
here on the app bar. Looking at the app, we
can see that the Manage My Business app leverages a lot of the Fluent UI native controls that we have developed, including the toolbar at the
top with the hamburger menu, primary actions, and filter. We've also used the
dashboard tiles in the main canvas area, which have been customed
for the MMB requirements. Here, you can see
that the sales tile is contextually highlighted based on the sub-entity id that has come directly
from the notification. In this instance, the
consultant wants to share this information with
their wider team, so they click on
the overflow menu and click on "Share
to a channel". Here, we open a Task Module, where the user can use the people picker control to
select their channel, chat, or people they
want to share with. They can optionally
add a message in the form control and then share it with
the broader audience. Here, the card appears as an adaptive card directly
in line to the channel. The user can optionally view the MMB board that
the card came from, which then deep links them back into the Manage My Business app, again, leveraging
the sub-entity id. In line to the channel, the consultant now wants
to send a new board into the conversation using the Manage My Business
messages extension, which they can access
through the composed file. They click on the Accenture
icon at the bottom, which opens the message
extension flyer. They can optionally search
for a board in here, or they can view a list of the most recently used boards in the message extension below. They click on the top board, which then shares the card
into the composed bar, and they can optionally
share that into the chat. Here, we can see
the adaptive card embedded with the data objects. The user can now use the message action from the message overflow
to create a new task. Here, in the create a task view, we have a task module, which showcases the form
control that we have, where the user can assign the
task to a particular user, enter information
about the project, and then share it directly
into the team tasks LOB app. Here, you can see again
that we've leveraged the Fluent UI composite control, where you can see the toolbar, the break navigation breadcrumb, the primary actions, and all of the different composite controls within the main canvas area. You can leverage sub-entity
chat in the channel tab as well to have a conversation that's specific to
the task board. Here, you can see that the adaptive card is in a
narrow view and the right rail. They can have a conversation about the content
that's being showed. Now, the consultant wants
to have a conversation about the data that's being shared directly in
line to a meeting. In the create meeting view, they can add the MMB app. They can select the app
from the app flyer here, select which boards
they're interested in, and then save the view. Here, we can see that the MMB app has been pre-pinned as a tab, where you can see all of the
content directly in line, and the consultant can go
through, make updates, and edit the view so that it's
suitable for the meeting. When they join the meeting, we see in the right pane, where the MMB app
has been pinned. They can view the content in
the pane, interact with it, and share it onto
the meeting stage so that everyone else in
the call can see it. Here, in the near future, we're going be releasing an interactive
version of this view, where all the users
on the call can participate with the dashboard, and manipulate the
data in real-time. Let's just recap what we
saw with Accenture today and the value that Fluent brings to the Accenture MMB app. We saw a Coherent UX that
looks and feels native to the Team's client experience and is intuitive
for users to use. It's incredibly easy to
customize and deploy, being based on pre-canned
components and a complete SD card that we
provide for you out of box. It's also deeply integrated into all the collaboration
tools and features that come with the Teams
Native Client, and it really enables high-value
productivity solutions where teams can collaborate universally across the tenant. Now we've taken a look at
the Accenture LOB app. Let's take a look
at some PowerApp Teams templates that we've
been working on with the PowerApps Team that you can use inline to the
PowerApp Studio today. This is the Boards PowerApp
that enables organizations to pin and aggregate content from various different chats and
channels in a single view. Here, again, you
can see the Fluid UI composite toolbar control at the top with the Avatar and the Fluent UI cards in line
to the main canvas area. Because we have designed
everything fully responsibly. You can see in the mobile view on the right-hand side
that the toolbar scales down so it makes
sense for mobile. Under the main canvas area, is a narrow view with the
horizontal scrolling cards. Here is the Employee
Ideas PowerApp, where you can review, submit, and manage
employee ideas. Here, again, we use the
toolbar composite control. We have the Fluid
UI table elements embedded in the cards at the top, and then we have the
Hero Fluid UI cards at the bottom that show
the active campaigns. In the mobile view, you can see the L2 view, where users actually drill
down on one of these cards. The breadcrumb is built in
the toolbar at the top. You can see again how the card's scaled down
to the narrow view. This is the Milestones app, which is a project planning app. On the left-hand side, you can see the hamburger menu with the navigation tools built-in with the "Find projects"
search at the top, create new project
primary action, and also the Fluent
UI table object in the main canvas area. This again scales down to mobile view because
it's all been built using controls from
the Fluent UI library it's easy to update
into a dark theme. Again, what we saw
here was the value of Coherent UX in a native look
and feel that's intuitive. These are all Pre-canned
low code solutions, have an incredibly
low code overheard, and they really, again, enable high value
productivity solutions and collaboration across
your organization. Just to summarize about
what we learned today, starting with the
learn experience, we introduce you to the
developer documentation, the Figma UX toolkit guidelines that you can use as
a reference library, and we also provide
GitHub documentation. On the design side, we showcase the
component libraries in Figma that will surely raise
some sketch in Dolby XD, the Fluent UI primitives
that are available today, and how you can theme your app and apply brand expression. We also learned how
you can build the app using the UX SDK and sample app libraries and
how this all comes together in the Visual
Studio Teams Toolkit. Also, how you can use low code, no code solutions
directing lines of Power Platform and the
different templates and components that
will support that. With that, I'm going
to hand over to EJ, who's going to talk you through an update on the Fluent
UI Design System. >> Thank you, Alex, for
showing us all that. It's great to see
the progress that the Teams SDK has
made so much of this available to developers and to designers for both high code
and low code solutions. Now I'm going to spend a
couple of minutes showing you what else you can do with
the Fluent UI Design System. At a high level, we
want to show you-all the different endpoints that Fluent UI component
libraries exist on, and to show you where
developers and designers can make great looking
application experiences to target the
different endpoints, where we're going to quickly walk through what's available on Web, Windows, iOS, MacOS, and Android. We're going to start off on Web. On the Web, we recently had a Fluent UI React V8
release which has been well received and used by thousands of developers
around the world, but now we're working on the next release and we're
looking for feedback. We want to introduce the
vNext Alpha and we want to tell you what we're
targeting and what you'll get with Fluent UI in vNext. Similar to what Alex talked about with the customizability, performance, bundle size,
accessibility, design to code, we want to make sure
that all these are available and that
you have out of the box fluent designed
components available to you that meet all the needs of
book developers and designers, as well as meeting the needs of folks who need
accessible solutions. Finally, on design to code, we want to make sure that
those components that are made available to you stay current and stay up-to-date with design updates
via design tokens, which we'll talk about more soon. We're looking for early community
feedback on this Alpha, so you can go check it out. For more information,
you can find us on our open source repo,
github.com/Microsoft/fluentui. Next, we want to introduce you to Fluent UI Web Components. Now, Web Components are custom
HTML elements that are, again, fluent-styled
out of the box. Whether you're using
them just in HTML and CSS or whether you're using them with an underlying
JavaScript framework, you can do either one. It doesn't require an underlying
JavaScript framework, but you can integrate with
any of the major frameworks like Angular, React, Blazer, etc. Performance is, again, another strong
consideration for us. We want to make sure that we have great render performance, as well as good bundle size so that you don't bloat the
size of your application. Again, we want to make
sure the components are accessible out of the box, saving you the work and
make sure your applications are used by as many
people as possible. Finally, we want to make sure
that we have adaptive UI, UI that looks great on every platform and also UI
that can stay up-to-date, that's customizable and works
for all of your scenarios. For more information, you can find us again on our source repo, github.com/Microsoft/fluentui,
or you can find us on the web components
link as well. Next up we have WinUI
and we want to say a couple of things about
WinUI 3 and what was released in March as part of the project
reunion announcement. We have WinUI updates that
are coming for both WinUI 3, as well as new controls
coming for WinUI 2.6. Whether you're WinUI
2 or WinUI 3 user, we have updates coming out
with these new controls. For more information on this, you can learn more
on aka.ms/winui. Up next, we have
Fluent UI for Android. On Android, we have a couple
of new controls coming out. We have FacePile, FaceStack. We also have controls
that are optimized for the Surface Duo and for
dual screen devices. We want to make sure that
the controls that we create look great on any device that you
want to use them on. We also have accessibility
improvements that we've made across
all the components. Again, making sure that
these controls work great with the native talk back capabilities that come
on Android devices, as well as Bluetooth
keyboard support. For more information on this, you can again go
to our open source repo,
github.com/Microsoft/fluentui-android. Next we want to talk about our Fluent UI Apple
repo on GitHub. Fluent UI Apple has both iOS
and MacOS controls in it. We have new iOS controls, again, FacePack or FaceStack
and FacePile, similar to what was
released on Android. We want to make sure that we keep parity as much as possible there. We've also released
controls that look better on iPad and they look
better on large screens. We don't want controls that
just stretch unnecessarily. We want to make sure
that we're using the screen real estate as
efficiently as possible. We want to make that as easy as possible for developers as well. New controls on MacOS
as well, like button, link and separator, and
for both iOS and macOS, we've improved our
Cocoapod consumption story so that you can just get
the controls that you need, and again, you
don't have to bloat your app with controls
that you don't need. For more information on this, you can find us on our GitHub,
github.com/Microsoft/fluentui-apple. Lastly, we want to talk
about one implementation of Fluent UI with Adaptive Cards. Adaptive Cards are
an easy way to put interactable card elements in your UI across a bunch
of different platforms, and here is an
example just showing you how easy it is to
get Adaptive Cards into your application with
just a quick NPN install Adaptive Cards-Fluent UI
in this quick code sample. For more information, again, you can follow the Adaptive
Cards link at the bottom, adaptivecards.io, and see how easy it is to get started
using Adaptive Cards. To wrap up, if you take
anything away from this, we want to make it
obvious that you can build great Teams applications, you can build productive, natural experiences
on every device, and you can do it
all with Fluent. We invite you to come
build great apps together with us using
the Fluent Design System. Here are links to resources, repos across all of what you saw today,
the Teams platform, Fluent UI, Web Components, WinUI Android, Fluent UI
Apple, and Adaptive Cards. If you're asking how
can you contribute, or if you're interested in contributing on the open source, all of our repos are
available on open source, we invite you to come
join the community. Repos have over
11,000 GitHub stars. So used by many people. We invite you to come be
part of that community. If you're looking
to stay up-to-date, you can find the links here, you follow the Teams blog,
the link to it is here. You can also follow
us on Twitter, we post updates as well. With that, thank you for your time and come join
the Fluent community.
