>> On this week's On.Net, I have my good friend
Matt lazy on talking about how to build.Net Maui applications faster with the.Net
MAUI App accelerator. Tune in. [MUSIC] >> Hey everyone, I'm
James and we're back with another On.Net talk about one of my favorite topics in the entire
world, building apps faster. I have my good friend, Matt
Lazy on how's it going Matt? >> Is going good James. How are you? >> I'm absolutely doing delightful. As 2023 I can't believe it. We were talking about just like
leaving the house and I said, about two years ago, three
years ago to 14 years ago, I'm still in the same
house, so I haven't left. I haven't left in four
years basically Matt, I'm just hanging out. That's it, how are you? >> I'm good. I've had a good
day, very productive yeah. I've left the house twice,
so it must be good. >> You are over in the UK? >> I'm in the UK in Lincolnshire. >> Nice very cool. Now
some people may know you from being very active
in the.Net community, but maybe people are brand
new to Matt Lazy who are you? What do you do? Then we'll get into the product that
you've been working on. >> I'm a.Net developer. I have been a.Net developer
since about 2003, which is 20 years
now that's shocking. I've done lots things community, I've been a Microsoft
MVP for eight years. I do have lots of GitHub projects, lots of open source things, and lots of Visual
Studio extensions. >> What was your first
version of On.Net [inaudible] >> I remember when two came out. I don't know if it was a 1.0 or 1.1. I'm very confused about what managed and unmanaged
roles when I first started, it was all confusing, but I think
I understand the difference now. >> Nice. It only took
20 years and we got it. My first was I got lucky
when I joined Canon, I ended up they'd done the
transition from 1.1 to 2.0. We were done moving to 3.5. which
is a fun exploration journey. But it's so cool to see that in the years like I actually looked back and I think the
same thing with you. Like my first job out of college was 16 years ago and transforming from what I was building then to what
I'm building now. It's just mind-boggling,
which is really cool. The stuff that's happening
in the open source, which is so rad and
you've been focusing in on helping developers
build.Net Maui apps faster. You want to talk a little bit
about how you got ended on.Net Maui and this app accelerator
projects and where they came about. >> I was building mobile apps in 2005 right before it was
called.Net Mobile Apps and I was doing desktop work when
Windows phone first came out our work lights because
on you mobile unknown u.net so did lots of things there. I was early into
MVVMCross to Xamarin, lots of experience in
those sorts of things. Then about five years
ago I got involved in a project called Windows
template studio, which is about creating
new UWP apps faster. This is an extension on that, building on what we learned
during those things. But now for.Net Maui apps. >> That's awesome. I feel like
maybe are we the same person but in a different time zone because
it was the same thing. I went to the final PDC. I was just talking to one
of my coworkers this, which is before Build and
I got a Windows phone. Maybe your time about six or
I got Windows Phone seven. I was like, I'm already building WPF apps already know
XAML, already know MVVM, and then the company I
went to go work for, I literally transition
everything to MVVMCross at the time and then moved
everything over to them. Then while journey,
I just love hearing the stories that are
so cool. Very cool. I want to see it because I've got to take a peek at it and I
got to play around with it, but you created it, so you're the best
one to show it off. You're going to go ahead
and bring up your screen. >> Yeah. If you bring up my desktop and hopefully you'll see
something very familiar, which is a Visual Studio. This is the Create
New Project dialog. What you'll see is I've filtered
down to just marry projects. And here at the top, MAUI App accelerator with an
isolate or goat icon. >> Now is there a reason for
the goat icon specifically? >> I noticed a lot of projects
had like fun, cute animal icons. I don't know how to draw,
but then I just abbreviating MAUI App accelerator to
M-A-A and reading aloud, It was mad, which to me
sounds like a goat noise. It's a goat. There's nothing
in there other than that. >> Fun fact, I had goats
growing up, so there we go. >> Wow. >> Got a little fun
fact that the world just learn for the first time. >> James, he's farming background. >> That's right. >> I select the MAUI
App accelerate option, hit "Next" and standard. Next step in the dialogue, we can choose the project name, MyApp, Four reasons. Choose where I wouldn't go,
give it a solution name, everything's normal to now. But then I hit "Create" and I get a new wizard up here and this is the MAUI App
accelerator or is it. >> This is completely different
than anything that anyone would ever go through
because this is the stuff. This feels familiar to the template
studio type of self-correct? >> Yeah. This is very much
based on template studio. I reused a lot of the underlying
logic there and some of the ri and of other deliberative extra bits in
just to make it work with Marie. >> Cool. I love it. >> First question, for any MAUI App, but you want to use.Net seven or.Net six because when you add
more and more, use seven. >> Always. >> At the moment, there's no difference in terms of the options that
the wizard presents to you. But in the future, there
will be because there are some things which are seven only, such as maps, which will be coming
in in the very next version. What we've chosen.Net seven, he's gotten eyes blue
outline on it and we can hit "Next" and now we're asked what kind of coding
style do you want to use. Or do you want XAML and MVVM
using the ambivalent tool kit, join US code behind is just want to have their events make
more sense than commands. Do you want to put everything
in the code behind file yet fun, you can do that. Like on code behind, do not like XAML, would you prefer
to do everything in C-Sharp? We could do GUI option as well. I'm going to stick with the
MVVM toolkit option for now. We can hit next or
it can come in here, we can click on the
next button over here, which is Number 3
for aviation style. Now, you probably want to, if you're navigating
within your MAUI App. But do you want to have a flyout
menu with options on the left? Do you have times on the button on the top depending on
which platform you run? Do you want to show
but you don't want any [inaudible] which one
do you show at all. Well, let's stick with the default we'll have a flyout menu for now. Now everything's just
been selects an option. But now things get different
when we move on to pages. >> Yeah, and this is nice because
ideally when you're starting your project that you have some
sense in your mind of like, what do I want and then
there are quite a lot of developers at one of
the main, you know, once you've been doing
a lot of development, the main thing is like just give
me something that's empty or so I'm something I don't
want to delete a bunch of stuff even though the Maui
templates are pretty minimal, which is nice, but this is cool. I like the other things. I'm a big tab person. My fan, myself, most of my apps are, but not all my apps are. Every app is a unique
butterfly, say. >> With a view of having a
complete blank page in mind. By default, you get a
single completely like age. If you wanted, you could add
in the default one as well, it's just down here is a sample, so it will show you
there is everything you are familiar with, the
default templates. But as you can see, I've already
got two pages in my app. If I get with the
default templates or get one and then after that,
everything in afterwards. But now I'm getting two, and because I'm using MVVM
toolkit I'll get to view models and then will be wired
up as soon as I hit correct. That's another page called sample. Let's say I wanted to
add a list of something and be able to click
on those things. Just say is create a list detail on, but imagine I went with a list
of something, I don't know. You might be a list of monkeys just for a completely random example. >> Makes sense to me. >> Now my page is
going to be called the monkeys page to view
model is going to go with MonkeysViewModel as you'd expect and probably want to have a lot to blank
pages because I'm going to put the continent myself. But if I know a very sore standards, I think maybe I want to use a signature capture has like a drawing page or
something like that. >> Draw a monkey page, I say. >> Absolutely. If I wanted
a web view and my page, I could add a Web View page and that's going to be that
it's going to have some buttons and some basic
functionality or wound up already. Everything, I'm
generating an amendment, all the strings are hard-coded. But if you want to know how to
do localization in your app, there are at least
three different ways, like an app localization page. And that's going to show
me three different ways of doing localization. Maybe you just want to
experiment with Maui. Well, how does Maui do
localization? Start page. How does the localization
work with MVVM? How does it work
with C-Sharp mockup? Just choose the options and
you can see what it produces. Then final tab or the final
stage is slipping the features. We got lots of features. >> Wow, awesome. >> The Maui Community
Toolkit option is already selected because it's
used by my web view page. If it wasn't like I
could come in and hunt this so I want to use
[inaudible] ECL law in my app. Now I get it already wired
up and sell it for me, so it's added them. Then you get reference ready for me to do whatever I
wanted to do with my database. I want to use app center. Now I've clicked on "App Center" and it's going to add the
two NuGet packages. It's going to put some code
in my Maui program page just to cite places where you
need to set your keys and things. Down here are some things
you might recognize. I got a few plug-ins I
can add a single-click. >> I see it as I look familiar. >> If they did not billing, I can add a reference to a library which you might
know something about, which does that on one which
those prompts for store reviews. If I wanted to play
audio within my app, I can use this library which has
created by Gerrold and Sean. If I want to add a test project
to my app can just click here. I'm now going to generate
two projects in my solution. My app and one from a test, and it's all going to
be wired up and set up ready for me to write tests. With that done, I can come along the side and I can see the
options I've selected. I can see I've got my main page, which is going to go main, oversample that when
monkeys or my features, I've got the licenses rule, the third-party things I'm using, I can check those out if I want. >> Ignore that. That's
my special button. If I wanted to make more, I can click on here and be
taken to the project page, so you can learn more
about the project. If you want to make a suggestion, well, I think we should be
looking for X,Y, and Z. Other things, come over here. Report, actually make a suggestion, have an issue on GitHub, and I'll see what I can do
about adding those things in. This is version 1.1.8. This is my internal
built at the moment but 1.2 will be out shortly, 1.1 is currently in the
marketplace. But let's say create. >> Nice. By the time you're
watching this video, who knows what type of plugins and new things will
have been added by this, which is the great part
about as things evolve too. That's really nice because what I'm seeing here is that it's a blend of here things that
are in the box but then here are the things that
are from not only the community, but also things that are maybe
from other companies too, I guess all century
in there for example. >> Yeah. I have two lists. I have a list of public things that are on GitHub where it would
be good to write this. Now I've got my
secret extra list of. Well, I know how these people make these things when we just
put them all in eventually. Maybe there will be lots and lots of things in there in the future,
and that would be good. Here's my solution. As I
promised, two projects. We've got MyApp and
we've got MyApps.tests. >> Nice. >> This is a test project and
to prove it is a wide up, we could just come in here and it knows about my ViewModels with during my main app
there are over there. Everything's wired up so I can
start writing code straight away because we goot and we write
straight away here, of course we do. >> Do we? >> That's very important. >> Awesome. >> Now you've got
them in the solution, there's no excuse not to do that. >> Exactly. >> That's my hope. >> When it's that easy, there's that Oh, I'm
also seeing by the way, I got to say SNA is
beautiful global, usings file in both of these
and that makes me very excited. >> Using spiral has locked up. Of course we've got,
we're using App Centre, it's called the absolutely usings. The Community Toolkit
things are in there. The things you might expect
from within the application or some other common system ones
you're in there as well. >> Nice. >> Nice, sure. My small short test files
securely without testfile. Over here we've got
a few more things than then you would see
in a normal application. Let's start from the bottom and
start with a mighty program. Because in here is already
knows that using the Maryanne, but he knows it's using
the Community Toolkit. We're registering a bunch of
ViewModels on pages run navigation. We've got some surfaces
with some data. We've got our little
help prompt telling us that we need to
adding not absent to see coordinates if we want
to work with App Centre. We saw what were those
views and those pages or V-models and all those
views and who they are. So my V-models are in here. My pages all my views folder. If I was a lucky one
sedation my main pages is the point home and
it's completely bank. The only thing that's in here is it knows about the
view modal namespace, and it's been told that the
DataType is going to use for your Compeau bindings is going
to be the MainViewModel. A domain view modal passed into the main page or what a porous
and the BindingContexts there. >> Very nice and that means
sensory using shell or using this, we get the full dependency
injection, inversion of control. All the constructor
injection stuff is all wired up basically
for you, right? Yeah. We said we were going to use a flyout menu of some items
won't listed on the left here. We've got all items,
one for each page with a custom icon just so you can
show you how to use custom icons, routing is the pages
to use.Sign like. There's an occasional bug which sometimes means that
check box isn't checked. But it is we'll just run this and
we're going to run those first. I'll tell you what,
while it's thinking. Here is a very similar app
which I launched on them. Oh, the preparation,
their loved one. Fully this one. Very
similar, running on Android. So I've got custom splash screen, which you get by default. And then here we see the
menu options without call, different icons just to show
you can use different icons. And he's not least page. And it's going to load
in some random content. So it also sets up things
like pull to refresh. It's going to refresh the content. If I click on this
one which is Item 3, it's going to Detail page and
that is the Item 3D Detail page. I can go back, I can scroll
down and it's going to do infinite loading for me.
All those those things. And you can see you, and
I'll see the sample page, very familiar sample page which
you can click on a button. Here is the same thing
which we just launched from our own Windows. We've got the same
options down the side to, but now also you Hazel monkeys. It's called monkeys,
but it's going to be the same list of numbers, just some simple randomly
generated numbers. I can click on those as well. We see we've got some buttons
are wired up to start with. Thanks a moment to load
because of Windows. But completely by chance, this is my sponsor's page. I can come down here. We can see MAUIAppAccelerator, and this is the homepage
for the project. All through the back buttons
and forward buttons work, I can open it in the browser. My localization page, which has got three ways of sharing
and localization, and the hello you comes from a
localization file each time. >> Wow, that's really so. >> That's, that's the
general quick version. But obviously, just switch to
a different Visual Studio, but it's mostly theme aware, so we can put another application and we can some of these other options. If I crazy shot mockup, it still gives me all
the same options for the navigation and the same
options for pages and things. If I don't want to use so, which is that the None
Navigation Style. I can come over heer and I'll
get some different page options. Because things like a Navigation
page doesn't work with Shell, but I can use it if
I didn't have shell. I could ave my own navigation page, I could use a tab page. Again doesn't work with shell
but come work on its own. If I knew that, I wanted
to have a single-page app, which was just some tabs. I can come over here, delete my default mining page and
just use the tempt page. That's going to give
me a one-page app no shell and I can go and
customize the terms as I want. This was to give you as much flexibility as you
would have by default, but also in labor of
other things as well. >> Nice. That's really cool. That's nice and
flexible because again, a lot of different
people want to build applications in different
ways. That's awesome. I definitely feel like this is like a good starting point for anybody, especially when you already
have a few things in mind. One question is, once
you've already created it, you can't go back and
edit it, can you? >> You can edit the generated
app as you could any app. One of the things we have in
Template Studio is the ability to add more pages and more
things into an existing app. That will hopefully be coming
at some stage in the future. >> Very cool. Awesome. Well,
you did show a little bit through the application that was running where people
can go to contribute. Where can I go to contribute?
Where do people get it from? >> Let me just switch over to
Visual Studio Marketplace. If you go to the Visual
Studio Marketplace either in Visual Studio, if you go to Extensions, Manage, and you can search there. If you such, MAUI App should
probably be the so-called the list. Or you come to Visual Studio
Marketplace, which will trigger.com. Search though is my app accelerator, has one eye stories like
one that looks like this. If you want more than this, also the.NET MAUI
Essentials package, which is a bundle of
lots of extensions. With three extentions, it gives
you the MAUI App Accelerator. It gives you immense
as inline SVG Viewer, which is good when
you're working with your M slash screens in
your icons and things, and it also runs this C-shine, C-Sharp inline color visualize apps. If you're working
with C-Sharp marker and you've got colors in line. Now, I can't remember what
colors.Fabric looks like. It's some read about. But Visual Studio gives you
that little box of color next, column names inside time
of ions on next hex codes. It does not inside
C-Sharp volumes as well. I find that really useful when
I'm developing for MAUI App. From the marketplace link, you can obviously
get to the homepage. Here's the GitHub page
where you can give it star, raise an issue, and give me
some feedback, suggestions. The code isn't all public yet. I say yet sensitively because
I'm still trying to work out. If I wanted to take the time to make it understandable to other people. >> Got you. Here you can say, oh, I have this really awesome package
are the handler should be in there and then area of different
suggestions people could have, then you'll triage them. >> Come in and create an issue. But existing ones, I want
a page that does this. When I add this feature at this
library, I can differently that. What I learned from older G is
working with templates Studio is, the code is very complex. It's not easy to learn and it
requires a lot of testing. All of which combined to make it
hard to just turn up and down. Well, here's a quick little
addition to do this. I can definitely add things
that people request, but the codes not good
to come along and oh, it's easy to add things in
because it's not as easy as we would like to
be able to have it. >> There's a lot of
source generation, a lot of things happening
inside of there, which is really awesome. Then a lot of that configuration, this is really cool to see the, not only just the start of it, but the mass amount of
different things that we've actually integrated into it already, which is really awesome to see. So mam, this awesome.
This is really cool. I can't wait to install and use it every day and show
it off in all my workshops. >> You're brilliant. I have some of the tools I'm working
on one day I hope to have a version of you on my workshop which you couldn't
do in about 10 minutes. >> I love it. Love it. I've excited. Yes. That's very cool. Well, Matt, thank you
so much for coming on. I really appreciate it and showing
off all this awesome stuff. >> Thanks to interest.
It's good to be here. >> Absolutely. I will put links
to everything that match showed today in the show notes and also to the workshop
that I talked about. So if you do want to build a monkey applications will
be totally good to go. That's going to do it
for this week's on.NET. Make sure you subscribe
over here on the.NET YouTube and take out all the stuff
that Matt's been doing as well. Matt, thanks again for coming on. And until next time, this has been another
on.NET Cheers. [MUSIC]
