Original subtitles

[Music]

hello everybody thank you for joining i

am maddie legere i am a program manager

on

the.net.net maui team and i am here to

talk to you about how you can build

cross-platform apps for ios android

windows and mac with visual studio 2022

using.net maui

so dot net maui is new with net six it's

in preview right now um it'll be

shipping in 2022

as a like ga product but the premise of

dot net mali is that you can have your

cross platform native ui built-in.net

with xaml and c-sharp and run that same

single code base on all four of these

target platforms so when windows using

when ui

mac os with mac catalyst apps and then

of course ios and android apps for your

phone

and everything is from a single project

with a single project system a single

code base it's all in.net 6 and the

future.nets whatever comes after six so

it's modern you get the newest project

file types that you use in visual studio

and it was built to be optimized

it was optimized to be used with visual

studio 2022

and like i said you get to deploy to all

your different devices mobile and

desktop so we'll look at how we can do

that within vs

um and the previews are out now so you

can actually try it today uh the best

visual studio to use right now with net

maui is going to be the visual studio

preview release so it's 17.1 right now

as of this video airing so the ga brand

new vs 2022 has some basic support for

net maui but if you want that full

file new experience i would definitely

recognize uh recommend using the preview

release um and you can do that at ak.ms

vs preview i'll put it in the show notes

so that you see it

um but definitely check it out and then

you can get uh more info on maui from

the github

so

all of that is to say net maui is the

most productive way to create native

performance

android ios mac os and windows apps all

from a single code base so this is

actually one of our like sample projects

running on all four different types of

platforms um

just screenshots of it you can see it

looks the exact same

we have the.netbot saying hi

and let's take a look at how we can

actually get all this rolling right now

in visual studio 2022

preview

so i'm gonna un on powerpoint um this is

vs2022 preview branch

and this is a filenew.net maui project

so what i did was when i opened the

visual studio installer

uh i clicked on the xamarin mobile

development workload

and then there's a little checkbox that

says dot net maui parentheses preview

and that is checked by default now for

you in the preview branch so you don't

really have to do anything but go take a

look at it

and then i was able to go file

newproject.netmaui

and this is what popped up i didn't

change anything except for uncommenting

out this line right here

um

and these lines these two target

framework lines here in my new sdk style

project file with dotnet maui tell me

all the different frameworks that i am

targeting with this app with the single

code base

right here

so i'm targeting ios android mac via mac

catalyst um and then of course windows

so let's take a look at what this

project actually looks like let me pop

this open so

it's one project in my solution

um and in this project i have just a

xaml file that's where all my ui code is

my logic for this app it's a sample

template app it's a very simple it's

just in the code behind i have my app

entry point mauiprogram.cs

c sharp file

and then i have a platforms folder which

if i ever needed to put any platform

specific code for just the android app

or the ios app or whatever that can go

in my platforms folder

um and then i have my resources folder

which is my favorite part of maui that

you can share everything across all the

platforms with just one copy of it

so previously if you were building a

multi-platform app using xamarin or

something else with

net and bs you'd have to have different

versions of the images for every

platform you wanted it to be on

um but in this case you just have one

svg one app icon and the app icon

foreground and we uh load them all in

through the project file here

and it's a wild card for images it's a

wild card for font so anything i stick

in there is gonna be good to go um and

then those will all get loaded and sized

properly for the platform i'm targeting

what's also really cool about maui is

that we have a app icon and splash

screen helpers so instead of having to

build custom ones for each platform you

can

just include a foreground file here

and an app icon and then just call it

is app icon true give it a background

color if you need it and it will smush

all those things together to create the

app icon for you like the little launch

icon when people click on the home

screen

and likewise with the splash screen so

those are some really nifty tools we

added into maui just kind of from the

fundamental sdk layer to make developing

really easy but this is a visual studio

talk so let's take a look at how we can

get this all working for fun with the

ide

um so i could target all the different

platforms right here with my framework

selector so you see all the ones that i

have uh in my cs project file are listed

here ios android mac windows

and i'm going to deploy this to my

windows machine to start

so

while this is building we'll give it a

second it's just going to think up um

it's going to pop up on my second

monitor but vs2022 has a bunch of cool

features not to mention the themes are

amazing i have been loving playing

around with them but this is like my

favorite shade of purple so i actually

left it but i did spend a lot of time

before this customizing a new theme for

myself

um perfect okay

the app actually popped up for me right

here in xaml live preview which you

might have seen in the keynote um

xamlife preview is a tool in the ide

that basically screen mirrors your

running app so here's my windows app

over here it popped up on my second

monitor my main monitor um and i can

drag it and interact with it but it's

kind of a pain to bring this over

and resize it and then resize vs and

blah blah blah so i can develop all in

one monitor so instead i have my live

preview tool here

um and i can add my rulers and see kind

of the pixels and everything and clear

that and zoom in and out

and it's reflecting the app live so as i

click on it and interact with it

it's updating here in this window too so

this is a very simple app this is the

template like i said when you file new

this is what you'll get um the only

difference is it won't say hello windows

it'll say hello

world

and one of the best things i think about

net maui is the xaml heart reload

feature which is just you change the

xaml and it updates immediately so

changing text is a pretty basic example

you can delete a bunch of stuff add a

bunch of stuff back my favorite one to

demo is always changing like the

background color to something obscene

like hot pink right because that looks

disgusting but you noticed it um i

didn't have to save the file or anything

i just was able to change that xaml and

then i'm like i don't like that that's

disgusting

undo it and it goes right back to it um

and with live preview it's all in the

ide i don't have to like

look at my second monitor and be like oh

did it change nope it's all right there

so zamaha reload's great big fan

but we also have something new in visual

studio 2022 called dot net hot reload

because zamaha reload can only change

xaml what if i wanted to change my c

sharp code

so this button here like i said it's

very simple it's just the code behind of

my xaml page i have a little incrementer

here count plus plus um and then if i

click it it increments it by one but

what if i wanted to increment this by

two

i can change this to count plus equals

two

very expert code here um and then i'll

hit this little hot reload button

and you'll see that my state of my app

actually saves

so my current account is still 13 even

though a bunch of stuff is happening

behind the scenes and now when i click

the button

it goes up by two so it stays odd the

whole time the odd numbers

um and then i can change it back if i

wanted to all those different things but

my state is totally maintained when i do

the net heart reload so the way that it

works is anything within a method for

mobile or uh yeah for mobile android and

ios anything within a method

the method just gets reloaded and so

when i click the button again it

triggers the new method i just sent over

with dot net hot reload

and it's it's really awesome especially

for me when you make like ridiculous api

calls and you have no idea what you're

doing and you need to just tweak them as

you go this has been a game changer for

me and it's new in vs 2022. so

windows is just one of the platforms

i'm going to stop debugging that and

we're going to switch over to android

um

so let me just

check that everything good we're saved

okay

and then you can see my android emulator

popped right up here so i had created

this before it's persistent across my

different visual studio instances um if

i ever wanted to create a new android

emulator i could use this android device

manager right here um and i'm going to

deploy it i think i have to

switch and then switch back frameworks

because i have a little bug right now

that we're fixing

switch and switch back to android and

then deploy

um

and this is the same i mean it's the

same xaml page we just had on windows so

you'll see it says hello world now all

the things we had before it did save all

my files for me so we'll get that um odd

counter increment um

it's thinking down here deployment was

successful fantastic

it's launching

you can see my little launch screen my

purple with the.net logo and same thing

as before the android emulator pops up

on my second window but instead of

resizing my ide i can just have it all

beautifully right here

um

and then i'll zoom this out and we'll

switch this from hello world to hello

android

easy just like that

um and then i'll click this button we're

incrementing by two how wonderful now

it's all even numbers all the time

and then what if i want to change this

to like a decrementer get the count down

hot reload it

same situation same as i had on windows

same code same live preview same

hot reloading clicked it reloaded it and

now it's going to go down by two you can

even get into the negative numbers

pretty exciting so

um yeah same experience cross platform

this is one of the things to me that i

think has made maui really fun is like i

feel at home developing for windows and

for android at the same time

but that's not all the platforms of

course so let's stop this let's take a

look here

at my different platforms so

we have mac catalyst and ios we haven't

talked about yet so mac catalyst because

that runs natively on your macbook or

your mac

um imac or whatever we can't deploy that

here because this is a windows machine

it's not a mac

but i have an

iphone and i would like to get this app

running on my iphone without having to

have my macbook in the loop um so it's

off it's it hasn't been updated in a

while i don't even know where it is um

but i do want to get this ios app here

running on my phone and it has the files

it needs to launch from the file new

template

it just doesn't have the ability to

build without a mac necessarily until

we came out with xamarin and now.net

maui hot restart and so i've signed in

with my apple id to visual studio and i

did that a while ago um and it's

persistent across all my vs's

and i have itunes installed so that it

can communicate with my iphone

if i switch my target there to ios

you see i have these local devices

simulators and remote devices that pop

up and in local devices it actually

recognizes my iphone

so i can select that and let me just do

that little framework switch thing one

more time

it just needs to like refresh the cache

basically to remember to build for

iphone instead of android it's very

weird we filed the bug do not worry um

and then i'm gonna go and deploy this on

my iphone

so

it down here you can see it's doing a

bunch of stuff but the most important

thing is it actually provisions a

profile for the ios app

which would traditionally have to be

done on your mac but it's doing it all

on windows

and i actually have my iphone screen

mirrored so you can watch it

using something called reflector

this is not working for live preview yet

so you're gonna now witness the pain of

having to like drag this over and resize

it and all that

um which

like feels archaic now that i have live

preview to just pop it up for me

but it's doing all the things it's gonna

ask me to launch it once i have

connected to a macbook once i actually

don't have to launch it anymore myself

but

because i haven't connected this to a

macbook yet

this app i will launch it manually it's

going to take a second to load up

you can see that it's actually the old

launch screen and that's because the way

we use hot re the way hot restart works

is we actually build like a shell app

that we've provisioned that you stick

your code into

so it's the same app in there now and i

can click it and interact with it i know

it says hello android and the the

counter is still going down by two but

it's there it's running on my phone very

exciting um and i'm actually now able to

unplug my phone and test this app

without debugging as well

so i will stop this

that was a whirlwind tour of.net maui

and vs2022 and as i'm sure you've seen

in all the other amazing presentations

there's a lot in vs that shipped this

year not to mention 64-bit hello very

cool

um so check out all the other talks but

let's look at just for a second um the

roadmap for maui

the roadmap it's pretty simple use the

preview version of vs2022 if you want to

use dotnet maui

um

yeah that's the best way to do it like i

said uh at the beginning of the demo if

you want to

use vs2022 17.0 which is what's shipped

now the ga version it has some basic

maui support but if you want it to

install it for you if you want it to

have the templates and all that

wonderful stuff

um

preview is the way to go and then that

will ship at some point in 2022

as as the ga version of visual studio so

maui will be part of your day-to-day

life uh until.net maui itself ships ga

probably around q2 2022 we're waiting to

make sure that um we have all the

tooling we need and that the quality bar

is where we want it before we ship it

ga but it will be part of net six which

is shipping this fall

and so some resources if you want to

learn more about net maui of course the

github the blog it's part of the.net

blog now so you can just go into the

maui category we have docs up there is a

beautiful sample app that davidore now

another pm on our team has built um it's

a weather app so you can check that out

it's kind of a more

realistic example of what like a really

pretty maui app could look like not just

your file new hello world and like i

said earlier there is a preview link aka

ms vs 2022 preview and that is how you

get the branch of visual studio that you

need to

get rolling with maui just like you saw

today

so that is all i have for you um

hopefully you enjoyed this whirlwind

ride of vs 2022 and developing for ios

android windows and mac os with netmaui

and you'll hear plenty more about this

throughout the next few months as we get

closer and closer to shipping so feel

free to reach out anytime whether it's

on twitter um over my email

in all the different ways and i'll

hopefully be able to answer some of your

questions and enjoy visual studio 2022