[MUSIC]
STEVEN MOYES: Hi, everyone. My name is
Steven Moyes and I'm
a Senior Program Manager working on
the React Native team at Microsoft.
Today, I'm joined by Maddy.
Maddy, do you want to introduce yourself?
MADDY MONTAQUILA: Sure thanks, Steven.
I'm Maddy Montaquila and I am
a Senior PM on the .NET MAUI team at Microsoft.
STEVEN MOYES: Sweet. Thanks, Maddy.
Today we'll be talking
about building cross-platform applications using
JavaScript or .NET and how you can supercharge
your app for the one billion users on Windows.
When you're trying to ship your app to
more people on more devices,
we know that you have a ton of options.
Many developers choose to write
native apps that directly
target each platform like iOS, Android and Windows.
Native apps offer platform
look and feel, a great user experience,
and accessibility built in.
However, they require you to manage
multiple code bases and write
against each platform separately.
On the other side of the spectrum
are websites and web apps.
Websites are deployable to a wide breadth of devices,
basically, anything with a browser. Web apps and
PWAs elevate your websites
to feel more like apps.
Each technology has
its own sweet spot and value proposition.
But what if you could get all
the benefits of Native like
high performance and look and
feel without sacrificing breadth?
Today, we'll be talking about React Native
and .NET Multiplatform App UI or MAUI,
which are both great options that help you build
native apps that can target multiple platforms.
Both React Native and MAUI enable you to build
cross-platform applications for mobile and desktop.
React Native is a great choice for
developers who are familiar with JavaScript and React,
while MAUI is a great choice for
developers who are familiar with .NET and XAML.
We know that JavaScript
and .NET have huge developer communities,
so we at Microsoft want to make sure that you're
successful regardless of your skill set.
I want to take a look at some numbers.
I got some stats from
this year's Stack Overflow Developer Survey,
which indicated that JavaScript is
the most commonly used programming language and
that React.js is the most commonly used web framework.
We're blown away by
the things that this community is able to build.
Using React Native is a way that you're able to use
your JavaScript skillset to target every endpoint,
every device, including the billion plus users
of Windows in a really great and natural way.
Similarly, we know that .NET
has a ton of momentum as well.
Not only are there millions of .NET developers,
we know that they love using .NET to build apps.
Many of the highest velocity OSS projects
use .NET to supercharge their apps.
It's not just the apps.
Not only are .NET developers
building great applications,
the community is also actively
improving the underlying .NET platform,
with almost 7,000 contributors who have contributed
over 21,000 contributions,
we know that the .NET community is
large and deeply engaged with the platform.
As I mentioned before,
both React Native and .NET MAUI are
great options that let you
build applications that target iOS,
Android, Windows and Mac OS.
In Microsoft, we are deeply invested in both platforms.
The decision about which to
use is primarily based on your skill set.
Do you know more about JavaScript and
TypeScript or do you know more about .NET and XAML?
Now that I've talked about the momentum
behind both React Native and MAUI,
I'd like to showcase some of the apps within
Microsoft that are using this technology.
At Microsoft, we're using React Native to Power
some of our most important apps across our portfolio.
Office uses React Native and
several experiences to ensure
that users have a consistent experience,
regardless of which device they're using.
On the other hand, several Xbox console apps
are written from the ground up using
React Native for Windows to enable them to ship
a native experience and app using JavaScript.
Finally, Power Apps is betting on React Native to enable
low-code no code apps across both mobile and desktop.
Let's take a look at the Xbox app on PC,
which was written in React Native
and updated for Windows 11.
The Xbox app lets you manage your game library,
download new games, and socialize with friends.
The beautiful user experience includes
animations and multimedia and
performance is super snappy.
The Xbox app team initially
explored Electron but found that
React Native helped them build
a super performant app that takes
advantage of the native platform.
The team found that memory consumption went from
1.6 gigs down to 350 megs,
and users take notice of the app's improved performance,
especially on Windows 11.
Now, .NET MAUI was just released,
so there aren't too many apps in the wild yet.
However, we built this .NET
podcast sample app that spans the web,
mobile, desktop, cloud
native back ends and more.
We wanted to build a realistic app
that is both beautiful and responsive,
no matter what device someone is using.
You can take a look at the source code on GitHub.
One thing that is particularly powerful
with .NET MAUI is the ability to take Blazor code,
which is .NET's modern web framework
and run it directly in a .NET MAUI app.
In this app, there is
a Blazor component that runs in the browser on the web,
and that same Blazor component
is run natively in the MAUI app as well.
We've talked about some of the great apps and
experiences that are using React Native in MAUI,
and we touched upon how both platforms
let you build native apps using JavaScript or .NET.
Now I'd like to toss the microphone over to Maddy,
who will walk us through the developer benefits
enjoyed by both React Native and MAUI developers.
MADDY MONTAQUILA: Thanks, Steven. Let's talk
a bit about what makes
these two technologies so
powerful for cross-platform development.
One thing that's really important with
cross-platform tech is not sacrificing on
the ability to create
tailored native experiences
alongside your shared experiences.
By default, .NET MAUI and React
Native use the native UI controls under the hood.
So your UI is styled in
the way the native platform intends it.
Then that you can customize your UI to be
more or less similar
depending on the needs of your project.
For example,
this is a sample .NET MAUI app we built.
It's just a basic log in screen,
and it looks pretty much the same.
These are screenshots from Mac, Windows, Android,
and iOS, all in both light and dark themes.
The fonts and colors,
hyperlink, and button styling are all the same.
If you look closely though,
you notice that there are some differences,
particularly with the text entry field.
On Windows and Android,
the active text box has
an underline with an accent color either set by you,
the app developer, or the user's operating system
preferences so Windows has an accent color.
That's what tells the app
what color to use on that underline there.
On Mac, the text entry has a light blue border when
active or whatever your system color is, so mine's pink.
I believe on my Mac. On iOS
there's simply the active blue cursor.
These are the experiences that you expect for
a text entry on these platforms,
and they look and feel consistent with other apps
and experiences built natively for the operating system.
Another thing with both React Native and MAUI is you get
a super fast inner development loop
with tech such as Hot Reload
in both of them, you can rapidly iterate on
your projects with the best in
class tools for any developer.
Most React Native developers use Visual Studio Code,
which is Microsoft's text editor
with an extension for everything.
React Native also provides
great ways to make your development cycle even
faster with their standalone Dev Tools Suite
and their in-app developer menu.
Visual Studio 2022, on the other hand,
is the best IDE for not
just .NET MAUI but all .NET app development.
It helps you stay productive and
collaborative with a ton of features,
including Hot Reload everywhere, IntelliCode,
which is even smarter IntelliSense
that does whole line completions and
suggestions for refactoring and a bunch of
stuff and built in Git and GitHub integrations.
Of course, Visual Studio 2022 is
the first 64 bit version of Visual Studio,
so it takes advantage of
the full power of your Dev box now as well.
The third thing that makes both of
these platforms so compelling for
developers are the mature component ecosystems
backing both of them.
Steven already shared some of the statistics around
both the JavaScript and .NET communities,
and those stats are also
reflected by the sheer number of modules and
packages you can add to really
supercharge your apps and take them to the next level.
If you're in either of
the JavaScript or .NET communities,
you're probably familiar with NPM for
JavaScript and NuGet for .NET.
There are tons of community created modules on
NPM for React Native developers ranging from
basic UI controls like a picker to
more complicated solutions such
as asynchronous storage on device.
The same thing goes for .NET MAUI,
any NuGet package for .NET 6
and beyond will work with MAUI,
and there are already tons of controls,
app frameworks and toolkits on
NuGet for MAUI specific use cases.
Let's turn it back to Steven to learn how to
make your apps even better for Windows.
STEVEN MOYES: Thanks, Maddy.
Both React Native and MAUI
enable you to build cross-platform
applications that target iOS,
Android, Windows, and Mac OS.
When you start building a cross-platform application,
it usually has the same set
of core capabilities everywhere.
But as it gets traction and your audience grows,
your customers are going to start asking you to
make the experience better on each platform,
including on Windows,
and we've got you covered.
Let's take a minute to talk about how React Native
and MAUI have a great light up story on Windows,
which allows you to delight your customers
and accelerate your growth on desktop.
As I mentioned before,
both React Native and MAUI are
truly native applications,
which means that on Windows,
they're built on top of WinUI.
This means that you get the native WinUI
look and feel by default,
but it also means that you have unfettered access
to the underlying native capabilities and APIs.
This means that you're able to build
tailored experiences specifically for Windows users.
Let me give you an example.
The Settings app on Windows 11 is using
React Native on a few specific pages to share
JavaScript code between the web properties
and the native experience on Windows 11.
By combining the native performance and experience of
WinUI with a developer experience of React Native,
the settings team is able to build
a great user experience for managing user accounts.
Again, this app is totally native.
There are no web views in site.
Looking forward, more Windows 11 experiences
will be built using this native hybrid approach,
and we're excited to share
more information about this later this year.
If you're a developer and you want to build
similar experiences that are supercharged on Windows,
you can use packages like React Native WinRT and
React Native XAML to
integrate into your React Native for Windows Apps.
These modules that you call Windows APIs
directly from JavaScript without needing
to write any C# or C++ code.
Now let's take a look at how we can do
similar things on MAUI.
You can do similar things from MAUI apps.
For example, you can use compiler directives in
C# to make platform specific calls like
notification service and trace service from WinUI
or on Catalyst on Mac, similar pattern.
I could also write native calls or cross-platform
API calls to add taskbar actions and notifications.
If I had a bunch of native code to write,
I can drop right into
Win App SDK and call native APIs directly from MAUI.
This enables my weather app to do
things like host custom actions when I
right click on the taskbar, like
checking the current weather or adding a location.
Or when I open the task system tray,
I can pop a new notification when I click this button.
MADDY MONTAQUILA: Both platforms have
a really exciting year ahead.
React Native is working on migrating
their Windows backend from UWP to WinAppSDK and also
aligning with the React Native core
rearchitecture. .NET MAUI just shipped as part
of .NET 6 and the tooling experiences will
be general availability by the end of Q3.
Then of course, we're gearing up
for .NET 7's release in the fall.
Getting started with either of
these technologies is super easy.
Just go to the links that we have on
this slide here and we'll get you started right away.
There are plenty of other sessions for you to
check out about .NET MAUI,
React Native and developing
amazing apps for Windows here at Build.
I hope you enjoy the rest of
your conference and thank you so much for joining us.
[MUSIC]