Hey, if you want to welcome to the Unhandled Exceptions podcast, I'm Dan Clark and this
is episode number 74. Now I'm sorry, this has been quite a while since the last episode
which was last November. Now the reason for this is because in November I was
working quite hard on my third don't train course which is on a basically a full deep dive on the
JetBrains Rider ID. So I was very busy then and then I finished that on New Year's Eve,
so the 31st of December. So that was such a good way to end the year and that's done and
that's now out and then January I was playing to do less catch-up so no episodes in January but
from now on I want to get back into more frequent podcast episodes moving forward. So if you're
not subscribed then subscribe for lots of don't like goodness. So in this episode I am joined
by Jerome Laban. I'm hoping I've pronounced that correctly. That is very good. That's good.
To talk about the UNO platform and a cool new feature, I don't know whether feature is too smaller
word, it's quite a big thing called hot design and Jerome is the CTO at UNO platform. So welcome
to the show Jerome. Thank you, thanks for inviting me. You're most welcome. So could you
give the listeners a quick intro to yourself and what you do? Sure. So I'm Jerome Laban,
so I'm a French person living in Canada for the past 18 years and I've been working at UNO platform
and Previsue Inventive, so which is the company that was before UNO platform, so we kind of spun off
UNO platform as a result. So I've been a dotnet developer since 2001. I was developing on the
monorun time at the time, so it's version 0.14 something. I built the IPv6 support for dotnet
at the time, so it's a GC support for netBSD at the time when it was all the rage. So that was
nice. So I've been doing all sorts of stuff since then with dotnet staying there but kind of
venturing into C++ for a bit. Then to mobile, then doing all sorts of windows oriented things. Lots
of Linux as well, mainly because of Mono at the time. And then for the past 10 years or so,
I've been working on what was not called UNO platform before, but then working on making UIs
and applications for mobile devices. Originally was with Civilite, then gone over to Windows Mobile.
C'est un intéressant time. And then we open sourced UNO platform, so UNO platform for those who don't know.
It's a UI framework. It's a platform that contains a UI framework, but also a lot of other
tooling to create your application that can run on iOS, Android, Catalyst, web, desktop,
and running on Linux and other platforms. And we're working on adding even more platforms
as we speak. And the idea is to use C sharp en zammal to get an application running everywhere.
And about, I think it's five years ago now, we introduced the support also for WebAssembly.
And that's been a wild ride to add support for that. And we're getting all those new features
integrated. So my background is kind of jack of all trades inserts of doing DevOps, doing cloud,
doing mobile, doing Linux, contributing to the dotnet runtime and opening lots of issues,
in visuals. So that's pretty much what I do with UNO platform and the dotnet community in
general. Amazon MVP. So we can point to things in product groups to make the products go better.
That's a pretty impressive background. Well, thank you.
Presumably now your CTO, you're still getting to get your hands dirty and code. It sounds like it.
Oh yeah, I do get my hands dirty and code. Mainly, lots of complex things because of my
background, knowing how dotnet works, I'm able to go dive deep into how dotnet works.
For instance, recently, we had issues with the AOT compiler with dotnet and go deep and try to fix
things in there. Or Roslin, for instance, we're doing with UNO platform, we have our
hot reload story that's getting better and better with every version. And go deep inside of
Roslin to see how hot reload works and try to fix things around and hopefully get visual
studio updated and things. So yeah, I'm down into the code and making things work faster and better.
Nice, nice. I think hot reload and all that kind of stuff will be stuffed. It's really good to
deep dive into in this episode. Before we dig into UNO, though, just a quick few small
reminders for the listeners. Firstly, this podcast has its own Discord community. So if you head
over to the website onhandledexceptionpodcast.com, you'll see a big Discord link there. And also,
I have a monthly newsletter where I send out handpick developer news items from the past month.
And there's also a dev tip and a dev comic pic, as well as podcast updates about the show. So if
you want to sign up, there's a subscribe link on the podcast website. It's just a basically a
great way to keep up to date with developer news and the dotnet space. And lastly, a quick reminder
that this podcast is sponsored by Everstack, which is my own company providing software
development and consultation services for more information, visit Everstack.com.
With UNO, then. You've kind of highlighted what UNO is. And I know you wanted to talk about hot
design as a main focus in this episode. But I think before we do that, like, I know you've
spoken briefly about what UNO is, but it might be worth going more into that. Because I personally
have used, it's been a long time since I've done UI development. A lot of my stuff is like cloud
and backend stuff. I've obviously heard of UNO platform, but I've, I did play around with it
before this recording, just so I had some context, but I've not actually used it. The only UI
stuff I've done many years ago was like WPF and that kind of stuff. So I've got some kind of like
XAML context, which, yeah, I'm hoping this hot design means I don't need to do an XAML, but we'll
see, we'll see when we get to that bit. But I'm guessing a lot of the listeners are in the same
boat, they kind of, they've probably heard of UNO, but haven't used it. So can we actually just
talk a bit more about what UNO is and what it brings to the table?
Sure, sure. So the main goal of UNO platform is to have your XAML and C sharp code allow you to
create applications that can run across platforms. So that's the basics of getting an UNO app. So
across platforms, including Mac OS Linux, Mac OS Linux Windows to develop your application, but
also run the application. And additional platforms like iOS, Android, and embedded devices and
things like that. So it's all about getting you wanting to run across platforms. So that's the base
of UNO platforms with regards to the targets where it runs.
Does that include web as a platform as well?
It does. So web assembly is web. So for those who don't know web assembly, this is something that has
been developed for, I think it's about seven years now, which is the ability to run binary code
compiled down to a kind of abstract machine, virtual machine that can run in Southern browser.
But the main goal of this is to not run text where JavaScript, you download text and then the compiler
will compile out to whatever is available for the machine, where for web assembly, you compile, like
if you were to compile for x86 or x64 or ARM, and then get that to run in the browser.
So the main point of this is to basically have the same thing run across the whole ecosystem,
whether you're running locally on your device, using Windows or Linux, or running in the browser
because you can run it in the Tesla or on your fridge for whatever, for that matter.
So that's kind of the kind of scenarios that get web assembly.
And a lot of people have been asking for web assembly as a result, because the main interest
there is that when you write something in web assembly, it will basically run anywhere because you
don't have any kind of, you don't have to install anything, you just need a browser and then it
runs properly anywhere.
So that's pretty good.
And it's been evolving quite a bit significantly for the past version across all browsers.
So we're talking, you're running on Safari, directly on the device for iOS, running on Chrome,
on devices for Android, but also running on fridges and running on your, directly on your desktop.
And that's super interesting for people that don't want to have to deploy something to end users devices.
That's the portion for web assembly.
With web assembly, a lot of listeners would have probably heard of Blazwozm.
So they've heard of it from that contact.
But as you say, the fact that it goes beyond that, and it can be used for almost like containers almost,
and you can run it everywhere, that's probably something that a lot of listeners might not have heard about.
Yeah, correct.
So the interesting thing here is that Microsoft is kind of pushing, their stack stack is modularized
in many respects.
And we got the same thing with mobile.
So on the website, you have Blazwozm, that is its own framework,
that sits on top of the.NET for web assembly.
And.NET for web assembly is just something that you can reuse.
If you're developing your own thing for your own UI, you can just do whatever you want with it.
So Uno is basically at that layer.
If you take a look at a stack of technologies, Uno is kind of at the level of Blazwozm,
in a sense, but not completely.
It's kind of bigger in a sense that it does non UI things that Blazwozm does not do.
It uses plugins for that.
And then below that, you're going to get the.NET for web assembly that is developed.
And that's what we're using.
And we're basically using the runtime and SDK tooling untouched.
And that what makes it super powerful,
because we're just sitting on the shoulder of the giant.
And on the mobile side, it's pretty much the same thing.
Now, we is actually sitting on top of.NET for iOS, Android and Catalyst,
and Windows to some extents.
But the idea is that Uno is also sitting at the same level as Maui.
And then below, there's the.NET for Android and iOS.
And then we're reusing those features that are coming directly from the.NET SDK and runtime.
Is that why I went?
So when I did set up Uno, it did say as part of the install
that I needed to install the Maui workload.
Is that because the Maui workload installs things underneath that Uno's then using?
So in the details of this, the reason we are installing the Maui workload
foreclosage, that we have a feature that is called Maui embedding.
So the idea is that if you're developing an Uno app,
but there's a feature that's super interesting that Maui has developed
or Maui in the Maui ecosystem is used there.
What you can do is have a kind of a separate assembly that will contain Maui code.
And if you want to use a charting feature that's developed by Telerik, for instance,
that does not have a version that is available for Uno directly,
then you can embed the Maui version and then put it inside the Uno app
and it will work as is.
So that's why we're requesting during what we have,
the tool that's called Uno Check.
The tool is setting up your environment with everything that's needed
and we're installing the Maui tooling because of that feature.
Yeah, that makes sense.
Just to mention about Uno Check,
so as I say, it was my first time using Uno.
And from my first experience, I went to the documentation, install,
I think it was the command dot net tool install minus G Uno Check.
I did that, took a second, I ran it
and it just checked things like Android emulators
or what version of dot net, this Maui workload.
It just went through and made sure,
it said if it wasn't installed, it says do you want to set it up and install it?
And things like on Windows,
it just said you've not got long file name support, would you like to enable it?
Yes.
And then just all of these little things that you wouldn't think about
and it just did it and it worked.
So it was such a great first time experience.
Well, that's good feedback indeed.
That's something that we've wanted to have for a long time too.
One of the things that's interesting is that Maui doesn't have that tool.
So actually, the dot net, the Uno Check
is actually based on something that's called Maui Check
that was developed by, I don't remember his name from the Maui team.
And they kind of let that tool go
because they're mainly focused on Windows
and Visual Studio is kind of doing the whole setup automatically.
And what will happen is that when you're on Windows,
you're probably set up properly
if you're doing just installing Visual Studio for the most part.
But the thing is that if you're on Linux or Mac OS, then there's nothing.
So Uno Check can run on Linux and Mac OS
and will set you up for everything that's needed to have the information set up properly.
And so all the tooling, so making sure that you have all the workflows installed,
Java installed, the Android SDK and all of that.
So that the experience is the best from the get go.
So you don't have to fit it around to find what you need to install
and which new packages you need to download and things like that.
So we kind of priming the environment so that you're good to go.
Now, interesting thing is that as the user base grows,
we find new scenarios that we haven't caught up with.
And we're including additional checks in Uno Check
to kind of catch those and make sure that everyone's having the best experience.
Yeah, that sounds good.
I think that guy you couldn't remember his name.
Is it Jonathan Dick?
Yes, it's John Dick.
So he's on the dotnet Maui team,
engineering lead and principal software engineering manager.
So I didn't actually know that.
I just Googled it when you were talking.
So it's just to give credit where credit is due.
Yeah, yeah, yeah, of course.
It's an amazing tool.
I mean, it's too bad that they kind of let it go,
but it's super useful to be able to develop on other platforms.
And one of the things is that Uno is running on Linux.
So Uno Check is required to run there
because Maui's not supposed to run on Linux anyway.
So you can develop your app for Android, web
and desktop using Linux, using Ryder and VS Code.
I was going to say, I was watching your end of last year,
the dotnet com video and watching your demo later on.
I love the fact that you did that in Linux with Ryder.
And it's just like, I looked at the bottom and thought,
hang on, that's not Windows or Mac.
That's Windows, that's awesome.
Correct.
I mean, and that demo was interesting
because it was actually a Linux environment
that was running inside of WSL.
So it was not even a complete machine.
It was kind of a hacking way to make that work.
And it's, so it was, I think it was Linux
running in a container running in WSL.
And then there was also the fact
that there was the Android emulator running in there as well.
So it's kind of a mix of everything,
but it was working nicely.
So that was a cool demo.
Do you have a nice powerful machine for all that?
Well, yeah, it's not that big.
It doesn't need to, the virtualization environment
that doesn't need to, probably a nice seven
with a bit of RAM is good enough.
But yeah, you can't do that on an i5 for sure.
You mentioned about Ryder actually.
So I think early on, you said Visual Studio, I think.
I might have imagined it.
But then Visual Studio, Ryder,
I think there's an extension on VS Code as well.
Is the experience, if I was to develop an UNO app?
If I'm not using Visual Studio,
am I getting a second class experience?
Or would you say it's on par with each other?
Not at all.
So the experience right now is that you have hot reload.
You have the debugging experience.
You can get mobile devices development.
We're maintaining our version of the debugger
for mobile targets in VS Code.
So you get the same experience everywhere.
So now with regards to the environments
with the using of .NET,
there may be variations, of course,
because each IDE has its own advantages and disadvantages.
But you're going to get the same,
pretty much the same features
when you're developing on each target.
And there are some environments
where you don't get anything else.
So you can't do Visual Studio,
the full Visual Studio when you're running on Linux.
So you get a choice to go with Ryder or VS Code.
Nice, nice.
In that video, we mentioned,
when I tried it before watching that video,
I just did, I installed the Ryder extension
and did file a new project.
And there was the Uno stuff in there.
But I saw there was, you went to a site called,
was it new.platform.uno?
And you almost created it online or something?
Yeah, correct.
So what we did is, for VS Code,
we didn't want to integrate too early
in a sense that we didn't want to put people
in a portion where they would have only a UI to work with.
So there are pretty much three ways
to create a new Uno app,
depending on the platform that you're in.
So either you use .NET new,
basically, you run command line
and then create your application
and kind of guess the parameters
that you want to get to.
There's, and I'm going to come back to
how to enhance that one.
Then there's the Visual Studio Wizard.
So when you're in Visual Studio on Windows,
you can find new project.
And then you get presented a wizard
that will allow you to get all the options
that you can set up for your applications.
So for instance, you can choose the platform,
you can choose the language.
So you can use XAML as an XML language,
but you can also use C-Sharp.
We have something that's called a C-Sharp markup
that allows you to just use C-Sharp all the way down
and to create your UI.
So if you're not a fan of XML,
you can use that part.
Then afterwards, you can choose your theme,
you can choose all the extensions they were providing.
So Uno also provides a set of extensions
that will allow you to build your application faster,
like anything that's related to navigation,
settings, localization, networking,
and things like that.
So all that kind of features that they're enabled
and you can choose to enable, disable those features
based on what you want.
So that's the kind of feature set
that is provided by that wizard.
That wizard is developed using C-Sharp and WinUI,
which allows us to create a version of this
that runs directly in the web.
So that's why we have new.platform.uno,
which is essentially the same code that runs
in the File New Project and Visual Studio,
but on the web.
So there, when you go there,
you get presented the same set of features.
You can choose the .NET version,
you can choose all the pieces that I've mentioned before,
but it creates you a .NET new command.
And you can take that new .NET command
and execute that directly.
So if you're on a Linux machine, for instance,
then you can just open your VS code,
run the command, and it will create the solution for you.
And then there's the last one, which is Rider.
And Rider, we've developed our own extension
that contains a customized version
of the templating wizard that runs directly in Rider.
There's no way to kind of customize too much in there.
So we had to develop our own version of it,
but pretty much uses .NET new underneath
and will create the application for you
pretty much the same way that the other targets will do.
That's really cool.
One of the options I saw on your video, I think,
and you might have mentioned it then,
maybe I missed it,
but is the patterns like MVVM or what?
Whether you're using that or MV, is it EUX?
MVUX, yes.
When I used to do WPFA just ago,
I used the MVVM pattern, so I know what that is,
but I don't know what the other one is.
I don't know whether that's something
that can be explained on an audio on the podcast.
Yeah, of course.
Yeah, of course, no problem.
So there's three ways,
basically, to develop your application.
There's no patterns at all
when you basically put your buttons
and then have a button clicks directly
and do what is called code behind,
where you can just basically handle the click of a button
and then handle everything behind.
The problem with that pattern is that,
yes, you do everything yourself,
but the advantage is that you do everything yourself,
but the problem is that you do everything yourself.
So what that means is that,
let's say if you click on a button
and then you want to disable that button,
then you have to do the disabling of that button manually
by knowing what a button is
and then change the state of that button.
So that's why there's a pattern
that's called MVVM,
where you can do basically data binding.
So for instance,
if you want to handle the click of a button,
you're not going to do the click,
you're going to be putting a command on it.
So command is basically a class
that has an execute method and is enabled.
I don't remember,
is executing event,
where you can say to a button,
programmatically,
just through the binding to say,
well, should you be enabled or not?
And then if you're executing something from your command,
then you can kind of automatically disable the button
just because you've put a command on the button.
So that's the kind of thing that you're going to get.
There's also all sorts of things
because it's data binding,
so you set data context at the root
and then have everything manually managed.
That's nice.
But there's also a problem with that approach
and the main problem,
the biggest problem for everyone
is the fact that you run on the UI thread
for most of the time.
And that's a problem of performance.
So if you're doing things that are too complex,
that can very quickly shoot yourself in the foot
because it's going to be doing all sorts of lagginess in the UI.
So you can do that by yourself.
That's an advantage and an inconvenience at the same time.
And that's why we've started developing MVUX.
So MVUX is kind of the pattern of MVU.
So MVU is kind of a,
it's a model view update.
And what you do is basically kind of update the UI
from a model at the back.
But the problem with that model
is that you still have to do
kind of direct manipulation of the UI.
So what we wanted to have is kind of an in-between
and allow to do data binding
without having to do all the immutable stuff
that you're going to get
and that will force you to do state management
in a very intrusive way
that you can find in other ecosystems.
And what we're providing is a way to have
kind of a reactive expressions
that you can bind to things like a search button,
a search box,
and the state that goes along with the searching
and things like that with the search results.
So what you can do is basically bind your button
to the text box and to the result list view
and then have the whole thing
just be an expression to say,
I tapped something in the text box,
then I know that I need to have
some refresh capabilities integrated into the list view
to say it's searching.
And then I want to disable the button
or if I click on the button,
then I need to stop what I did before
and then start again, things like that.
So all of that kind of scenarios of threading,
asynchronous parallelism,
state management and all of that
is just integrated to one pattern
that is called MVUX
and that we're providing as an extension
of the new platform.
That sounds nice because if I think back to one
and I didn't do a lot of WPF,
it was just a bit quite a few years ago
and I was trying to do the MVVN button,
it did feel like, well,
it felt like sometimes I want to do something quick
and it felt almost like a lot of work
to do it the air quotes right way.
And it's like you're saying,
I kind of wanted something in between.
I guess it depends on what the app is.
If you've got lots and lots of developers
working on a big project,
you kind of need these patterns
even if it's a bit more work.
But then if you're knocking up something
like just a quick tooling app,
I guess that's another question actually.
If I, at the moment,
if I want to create a quick,
maybe it's just Windows only, a quick Windows desktop app,
there's just an internal tool, company tool,
it's like a utility,
it's just used by developers or something.
I would probably jump to WinForms
because it's so super quick
and you can just double click on a button
and get the code behind
and it's so super quick.
With the MVUX, which sounds,
or maybe not using a pattern at all,
you mentioned that was an option
and especially now we've got hot design
so you can do this drag and drop,
which we'll talk about later.
Even for like an internal tool like that,
might you know be a good thing to jump to use as well
rather than using WinForms,
which is obviously quite ugly as well, I guess.
Well, so the,
and it's interesting that you're asking this,
so hot design is kind of our stab at bringing over
a lot of developers that are doing WinForms
because of the fact that there's a tooling.
So, but let's talk about hot design afterwards.
So you want to make a nav that's for developers.
The beauty of the thing is that
UNO doesn't force you to do any of the pattern management
or patterns that MVVM or MVX
or whichever you want to use.
You can just do your application developing your button
and clicking on it and then doing things directly.
And if you don't want to,
if it's okay for your app to just freeze
while you're doing something
or just not reporting any status,
then develop directly in the code behind.
That's fine, it works as well.
Now, the thing is that we're trying still
to improve that development experience.
And MVVM is interesting,
but the thing is that you still have to do
quite a few things by yourself.
You know, state management is one,
asynchronous or parallelism is one of the things
that you need to do manually.
So that's where MVX come into play.
So there's a learning curve, of course,
you know, like any pattern.
But once you get used to it,
you get to create applications pretty quickly.
So it's kind of up to you in a sense of
do you want to spend time making an application
that will work, you know,
you will be able to maintain a bit later in the time
and then if it ends up not being a proof of concept
for your internal tool,
then you'll be set up already
to get your application running faster
or maintainable more easily.
Now it's just a matter of choice.
So with regards to developing your application
and that's something that Microsoft
has been trying to do for a while,
it's the design surface.
I mean, WinForms kind of was the golden standard
before WPF was there
with regards to developing your application.
And one of the big thing about that was
that you don't need to care about the UI.
That's where it got interesting.
You know, if you're developing something
and you want to put a button,
you don't care if your button is placed
or you know, kind of it doesn't need to be fluent,
resizable, or the things like that.
You want to put it there
and then you don't care
if the application is completely static and it works.
So that's the kind of thinking
with what WinForms was.
And with WinUI,
oh, actually UWP, Microsoft had a designer
and when they moved to WinUI,
so kind of the version after UWP,
they kind of dropped it and they said,
well, we have a reload,
there's no need to have a designer.
And while it's okay,
it makes sense to a lot of extents
to be able to just do,
to develop our application just using Hot Reload.
And that's something that we're trying to do.
So for those who don't know what Hot Reload is
or haven't used it,
the idea of Hot Reload is you create your app
and then you start coding in it while it's running.
And then you press the button for Hot Reload
when you've added a class, modified a method,
change whatever, the UI or something like that.
And then the modification
will be applied immediately in the running app.
So you don't need to stop, start, stop,
which kind of takes a lot of time to do
when you're building and building
is kind of the complex part.
So that's a portion of Hot Reload
that makes it interesting.
And Microsoft kind of banked on that one
saying Hot Reload is the way to go.
And I mean, it does make sense to have a designer tool
that will kind of duplicate the work
that you can do with Hot Reload.
But the problem is that there are lots of people
that are kind of hooked onto having a designer
because they're not designers, they're not UX experts,
they don't know how to create a button,
they don't necessarily care about how to know,
how to create a button
and how to lay out something in XAML.
So the probably number one feature
that was requested on the Microsoft,
the user voice or whatever, call it now
is specifically, where's my designer?
And it's not just that,
it's also on the Maui side,
there's no designer, there's previewers,
but there's not designers.
And yeah, so that's the current state
of what that is for designers.
And we're trying to answer that with Hot Design.
Well, with Hot Reload,
I guess another thing is kind of,
not everyone has multiple monitors
and if you've got your code window
and you've got your actual app
running a different monitor,
then you could use Hot Reload code and see it.
But actually, one thing that is quite nice
and I was gonna talk about this Hot Design
is the fact that you're actually in the real app
and it's there and you're editing
and you've got this designer in the actual real app.
Indeed.
We've spoken about Hot Design,
let's dig in Hot Design.
For sure.
So just before we get into Hot Design,
one of the tools that I use to do Hot Reload
without having to deal with the fact
that the window is new,
if you have a single monitor,
is the, there's a Power Tools,
the Windows Power Tools,
Power Toys, I'm sorry,
Power Toys feature that is called Keep On Top.
And if you do Control-Win T,
it will keep your app in front.
So you can just continue,
you have your app that stays on top
and you can do Hot Reload on there
without having to just do back and forth
and have your app go to the back.
So that's something that you can use instead.
Just while you're talking about the Power Toys stuff,
there's so much, so many useful things in there, isn't there?
Oh yeah.
It's so powerful.
I'll include a link to the Power Toys,
I'm sure a lot of the listeners have heard of it,
but if you haven't, just check out the show notes
and I'll include a link there.
Exactly, it's an amazing set of tools
and Clint Rudkis,
which works on this,
has been super nice driving that project.
A shout out to him for that.
Oh, just before we move on to Hot Design,
just going back to the Hot Reload thing,
I saw in your video, which looked really nice,
is when you made a change and you triggered the Hot Reload,
in the app, you had kind of like this,
what was it called, like events pop up?
Yeah, we're calling that the Hot Reload Indicator.
So it gives the, it says what's happening.
Yeah, and just things like whether it's successfully updated,
but also if there was a compiler or something,
you saw that in your app and it was like a big red warning.
So I thought that was quite a nice touch.
Yeah, we're doing things like this
to enhance the experience,
because, you know,
particularly if you're on Ryder and on MacOS,
on Linux or with using VS Code,
you don't get that experience
coming back to the Visual Studio.
So having in the app to say,
well, the last update that you made actually worked,
or what was changed,
or if it actually didn't work,
or sometimes it's just because we have our tooling
is just not able to connect to itself.
We're running a few things in the back
that the app needs to connect back
to be able to do the Hot Reload.
And if it doesn't work for whatever reason,
then that indicator that we have at the top
is going to tell you what happens.
Nice, nice.
Right, hot design.
Yes, yes, so hot design.
So we talked previously about the experience
with basically the designer
that you have when you're in WinForms.
Same thing happened with WPF.
And then you have a Hot Reload
that's completely on the other end
where you don't have a designer,
but you basically have to guess by yourself
everything that needs to be designed in your app.
So if you want to put a button,
you need to go into your XAML file
and then know that the button is called the button
and then put that at the right place
and know what it will do.
So what we designed, what we envisioned to do,
and it's now available as part of the better
that we released,
I don't remember exactly which data was,
but a few days ago,
there's the idea about that tool
is to say we want you to be able to design your app
while it is running.
So what will happen is that you start your app empty
or existing app or whatever,
and then in that indicator that shows at the top,
there's a flame that allows you to put the application
in a design state.
And what will happen is that your app reflows
and provides you with the designer while the app is running.
So what will happen is that you get,
on the side, you're gonna get the tooling
for choosing a control.
So if you wanna put a button,
a date picker, a calendar picker,
custom control from TeleRaker,
something like that,
it's gonna appear in the list on the left
and then you're gonna be able to drag and drop that
onto your running app directly
and it will show up as it should.
And then once you're done putting your control on the screen,
then you can exit the design mode
and then continue using your app.
And the good thing is that once you've put your control
on the design surface, when it is in design mode,
then in the IDE, the file,
the XAML file also contains the modification.
So it's kind of a two-way type of change
that you can make where it's not,
that's why we're calling hot design,
is that designing you app while it is hot running.
So that's the important distinction
between the tool of just designing or just hot reloading
and we're endometal providing that experience.
I'll definitely include a link to your video
and so who was the other guy on the video
that I've...
Nick, Nick.
So that.net Comfort video where he was demoing that quite heavily,
I'll include a link to that in the show notes
cause that shows it so, so well.
And I really like the fact, I think it's part of the demo.
And do you know like when you're developing
on this whole developer loop thing
where it's kind of like you make a change
and you've got to wait a while
and do what we want to decrease that
to be more productive as developers.
But it's more than just that
because in his demo, he kind of went to the app
and clicked through the UI,
like logged in and a few different UI pages,
got to the page he wanted to work with, clicked.
You mentioned that flame, little icon
that kind of like an overlay in the actual,
presumably it's only the debug version,
the end users won't see it, but little flame button.
And they can click that
and then edited that page there.
And all the data that had come from the database
or wherever it came from,
like the images and the lists of collections of stuff,
it was already there.
So the data binding, your toolbox
where you could like drag an object home,
like a repeater or whatever,
and say data binding,
the designer UI knew about the data
that was in memory to data-bound it.
The images that got dragged on
show the actual images
as you're dragging resizing that image control.
And we're talking about WinForms,
that's kind of like forgetting
how WinForms is ugly,
it was productive to develop little tools and stuff.
But this takes that and takes it a step further
because you're seeing your data while you're doing it.
Exactly.
I've got to admit my jaw dropped a few times during that video.
Yeah, it's the amazing tool.
That's the thing.
So, when you're talking about an actual designer,
I don't remember.
So WinForms had some extensibility
to show some of the data,
that was synthetic data.
WPF had something that was called the untimed data.
But the problem is that your disuntimed data,
it's just always out of date
or completely useless
or you don't have a way to do it properly
because you have a custom control
or something like that, that won't work.
So, that's where having the actual data,
if you have an API call
that returns something with images
and your actual data,
you can actually data bind to it.
And when you're clicking on,
let's say a text box or a text block
and you want to show something,
then we're providing a way to see all the properties
that are available for a specific object that's under UI.
But also, we're providing a data binding experience
where the control has a data context
that's flown from its parent.
And you can click on it
and the UI will present you with all the information
that's available, whether it's immediate data,
like for instance, your data context is a class
and it has three properties.
And then you can choose with those three properties
and their actual values to see what's in there.
But if there's a need to go down,
my class, dot my class, dot my class,
then you can see that as well.
So, that's the kind of experience
that we're providing for developers
to experience exactly what that is.
And that's particularly important
when you're talking about,
and that's another feature about hot design,
is the ability to view your application
in different modes.
So, you can have your application
using the desktop version,
which shows the full screen and it says
you can have four by three kind of application,
but you can also see it using the mobile form factor.
And as a result, what that means is that if,
for instance, you had a string that was too large
for that mode, then you're going to see
that it's going to be clipped or trimmed
for the UI to fit.
And then you can go there and change the mode
and say, well, that needs to wrap because it doesn't work.
Or it needs to be, I don't know,
shrunk a little bit
because it needs to be shown differently.
So, that kind of mode that we're seeing there,
and having the ability to view the actual controls properly,
but their data is kind of invaluable
if you're developing with complex apps.
And of course, being able to design your app,
what is running because the error
or the page that you want to design is 17 pages away
because you're making an app that's super complex,
but that's a time saver.
Because if you make a modification for a single text block
because it's not aligned properly
and then you have to stop, it's start again,
and then click 17 times to go to your app,
to your location where you're editing,
that's a time waster.
So, that's the kind of scenarios
that we had in mind with this hot design scenario.
Yeah, the number of times I've considered writing
some kind of, do you like not play write,
but like this before play write,
but like a web kind of script
which would just go through a website
to get me to that 17th page
just because of this exact problem
because it's such a pain, you've got to click through.
And a lot of these 17 pages you're talking about,
some of the pages you might have
lots of required fields you've got to fill in.
Of course.
So, you've got to type in them all in.
So, it's like minutes and minutes
just to get to that 17th page.
So, one of the other scenarios
that hot design is addressing,
and you probably remember that with WPF,
actually all designers have that problem.
So, we inform WPF is,
if you have a custom control
that draws its own stuff,
that control will not show up.
And the biggest reason for this
is that the designer would have to execute true code.
And if the designer executes your code
and your code is problematic in any way,
then it crashes,
but it's perceived as the fault of the designer,
not the code from the user.
So, that's why Microsoft,
they kind of allowed that for a while with WPF
and then they said,
we got too many reports of the designer crashing.
So, we said,
no way we're not letting anyone
execute anything in the designer process.
And what happens is that
you can basically design up to a certain point,
but if your application's mostly user controls
or custom controls,
then you're out of luck.
And that's what we're addressing with hot design
is basically you can,
whichever content that needs to be displayed,
it's gonna be displayed.
And then if it's your code,
you're gonna be able to design it.
If it's not your code,
then we'll show it,
but that's it.
It's gonna be something that's selectable
as a whole.
For instance,
in that demo that we had for dot.net.conf,
we placed on the screen
a control that is called Life Charts,
if I remember correctly.
And that Life Charts is basically a charting control
that you can just drag and drop onto your surface.
And then you can data bind live with new data
and the charts are gonna show up immediately as a result.
So, that's a kind of cool scenarios
that you can get when your application is running,
but you're still designing it
and get data into it.
Yeah, that's really cool.
And wasn't there in that video
something about a Figma plugin
which integrates with it as well?
Indeed, we do have a Figma.
So, the main problem that we have,
the projects have in general,
and particularly those projects
that do have a design team
that is not doing any kind of development,
is that they're mostly using Figma lately.
And the biggest problem is that people
that are developing UI using Figma,
when they're handing it over to developers,
then they have a problem
because the developers don't know how to use Figma
and they probably don't want to use Figma
in the same ways that the designers
don't want to use any developer tools.
And what happens is that the developers
are gonna be using kind of rulers and things
to try to guess the numbers, the colors,
the paddings, the margins,
the font sizes and things like that
to kind of reimplement the whole thing
that comes from Figma into whichever target that is.
So, we're talking XAML in that context.
And what we've developed is a plugin
that runs directly in Figma
that allows to take UI that has been developed in Figma
using templates that we're providing
for material in that case,
and you place your UI in the right way on the UI,
and then you can export that
into either a C-sharp markup or XAML,
and then you can copy-paste that into your application
and then get your app running as a result.
So, that's kind of helping
in reducing the waste of spending time
from a developer trying to guess
the work that the designers made
just by exporting everything up
and making that run directly in the app.
That sounds like with this and with hot design.
I probably don't need to write XAML, again.
That may be.
That may be.
That's our goal.
That's our goal.
The thing is that we're making large
tries to improve the tooling
and our main objective is for you
to be able to design your application
pretty much from start to finish
using hot design and your application.
You don't need to stop the application
and edit anything.
So, of course, if you're able to write code,
you're going to have to go back to Visual Studio
via SCOTA writer and edit that code,
but that's pretty much the idea.
Just don't stop your app and build it that way.
So, when you said at the start that
when you're creating a new project,
you can choose between XAML or C-sharp,
if you choose C-sharp,
would you not be able to use hot design
or would it work with that as well?
No, so not yet.
So, the interesting thing about XAML
is that at the very beginning,
the reason XAML was built
is that because it's kind of a machine-understandable language,
easily understandable language.
And originally, you may remember Blend.
The tool was supposed to do that kind of designing.
And if you were making modifications in Blend,
your XAML ended up being kind of spaghetti
or not super readable.
So, it kind of meant that if the designers
used Blend to design their app,
then the developers would not be able to use it afterwards.
The XAML would just use it plainly
and then not touch it.
And what makes it interesting for us
is that XAML is kind of easy to parse
and easy to write.
C-sharp is a little bit more complex to deal with.
So, it's not something that we have yet,
but we're definitely thinking about adding C-sharp support
to hot design.
You actually preempted my next question then
because I was going to ask,
because a lot of design,
and I hadn't thought of Blend actually,
but designers I have used in the past
do exactly like you just described.
It's kind of like, OK, you've got a nice designer,
but the code that it creates is,
cover your eyes or whatever.
It did actually show the XAML in the video,
I think, that it produced,
either you or Nick.
And it actually looked super clean,
quite nice.
It's what you would actually strive to develop
if you were doing the XAML manually.
That's correct.
So, that was quite nice.
The thing that you mentioned before
about switching between different modes,
form factors, so you can switch between a mobile view
and desktop, all this kind of things.
I guess just to add to that,
when you showed it in the video,
switching between that is super responsive.
So, it's not like a big wait
for you to switch between them.
I think it was Nick that demoed it in the video.
He was just clicking through
and it was just swapping within
a fraction of a second,
the different views.
So, yeah, as you say,
if you've got a text overflowing,
it's not a big job to switch over
to another view to make sure
it doesn't overflow on mobile or something.
Exactly.
There's that, and there's,
because it's a running app,
anything that you have
that is actually doing
any kind of responsive design.
So, if you have what is called
a visual state when you say,
well, my window or my content
is of a specific size,
then it needs to reflow
in a specific way
because it's kind of a mobile
centric way of doing things.
That's where the information
is going to flow the right way.
So, that's the kind of thing
that shows up.
One other thing that's available
in that toolbar
is the ability to switch
between light and dark teaming.
So, you can see your application
behaving in those two ways.
And particularly,
that's one of the interesting thing
about that mode
is that if you're specifying your styles,
that's another feature
that's in hot design
is that you can select
your styles for your controls.
So, for instance, if you want to have
a kind of a lightly dimmed text block,
you can choose a style
that works that way.
But if you were to change
the color directly,
and then you set it to dark
because you're in the light theme
and then you go to dark theme
and then it's black on black,
it's not going to work.
So, that's the kind of things
that you can see very easily
because you can switch modes
in hot design.
Oh, nice.
So, I'm a huge fan of all my applications
in dark mode.
If I'm creating a brand new application,
is it that easy to have it to support
to brand new application
both light and dark mode?
It's there by default.
I mean, that's...
So, so good.
It's there by default.
You don't need to do anything.
I mean, so, the important thing
to get your app
being properly compatible with it
is to make sure that
your controls are not using
explicit colors
or that if you do,
then you use colors
that are kind of supporting...
If you're using explicit colors
that they're supporting
light and dark theming
or high contrast for that matter.
But, you know,
all the controls that are available
that Uno are compatible
with light and dark themes
without any issue.
I did see, in that video
I had mentioned,
and I didn't quite click
what it was,
but something called
Uno Platform Studio.
Yeah, so Studio is the...
Yeah, it's kind of a...
So, the Platform Studio
is the name that we use to...
It's a product name,
if you will.
And in there,
we put Hot Reload,
we put Hot Design
and the support
for our Visual Studio code.
So, it's kind of a package
that we'll be providing
for customers
because Hot Design
is going to be a paid feature
of Uno Platform,
which, by the way,
I don't think I mentioned that.
So, Uno Platform
is free and open source.
All the code is available for free
and you can use it directly
without any issues.
The part of the free offering
is Hot Reload.
So, if you sign in
that you're going to get Hot Reload
and all the Hot Reload indicator
things available to you.
And then, once we do get out of the beta,
the Hot Design feature
is going to be a paid offering.
That's cool.
It's open source.
Well, not this, but...
And then, it's free.
So, even for commercial use.
Even for commercial use.
So, not using Hot Design.
You can just do all this stuff.
Oh, that's awesome.
I did see on your pricing page,
it said all this
and then it said that you've got
like enterprise support.
So, that's presumably
apart from this Hot Design
What's your main revenue, I guess?
Yeah, it is our main revenue source.
The idea is to make it sustainable
in a sense that we're basically
managing Uno Platform in multiple ways.
We got community support
where basically on our Discord channel
and directly on GitHub discussions
and Blue Sky and others.
We're basically answering questions
as fast as we can.
But we're prioritizing our paying customers
when they have an issue
and, let's say, for instance,
a specific feature is not working
for whatever reason.
Then, we're basically taking their issues
and putting them on top of the backlog.
And we're fixing those
faster than anything else.
So, that's how we're maintaining the platform.
And of course, we had the Uno Studio
and that includes Hot Design.
It's going to be...
It's a different set of offerings
that people can buy to develop their apps.
I feel like I really need a use case
to develop this now.
It sounds so cool, but as I say,
a lot of my stuff is kind of like
cloud and backend stuff and architectures.
I just want to have a reason to play with this.
It's very, very cool.
I did actually want to...
One little...
Silly little app on a bill at some point.
Because I used the Pomodoro,
took me quite a lot.
And I've not found a timer
that I'm actually happy with.
OK.
And it does what I want it to do.
So, maybe that's one that's like
can be like a desktop one,
but then it can integrate with the mobile
and something like that.
Of course, of course.
It can be a web one,
can be things like that.
And by the way,
oh, if people want to test an app very quickly,
so we talked about ULAP Platform.Uno,
that's one thing,
but it's very specific to create an app.
But if you're a .NET developer,
you definitely need to use
the NuGet.info site.
So, this is an app that is running Uno.
And it's the NuGet package explorer
that allows you to take any package
that has been public on NuGet.org
and see what's inside.
And it shows you all the internals,
like a targets file, a props file.
You can see the inside of DLL.
So, if you click on the DLL,
you can see how it was built,
the versions, you can see all the PDPs.
You can even see if it has SourceLink enabled.
You can click on the link from a file
that was used to build the DLL.
And then you're going to see that source
in GitHub if it's there.
So, all that kind of things
that you can get with that tool.
And I use it daily.
So, if there's anything that shows up
that is broken for you,
let us know.
But if you're using NuGet packages
or if you're creating NuGet packages,
that's a super useful tool
that is built with Uno Platform.
That's very cool.
So, what was it, NuGet.info?
It's just a HTTPS NuGet.info.
I'm going to have a look now.
And obviously, I will include that in the show notes.
Yeah, it's a tool that we worked with Claire Navotny
a few years ago.
And the idea of that tool
is to basically replace the WPF version
with the WinUI version.
And we're going to be publishing a version of it
that runs directly on Linux very soon,
so on the Snap Store.
So, that's the kind of things
that we're doing with NuGet.info.
It's super useful, super snappy.
And we have a Net9 version
that's coming up very soon as well.
So, a pretty cool tool.
That's very cool.
I went to it,
and the very first thing on the list
was obviously,
you can go to JSON,
which is like very, very popular.
I've clicked open.
And yeah, you're out.
Just expanding out.
I can see all the different things in.
Oh, that's definitely going to be a go-to.
It's a good timing
because I don't know whether you saw
about doing dev tips.
Yeah, I was actually going to suggest that one.
Well, actually, I have to.
So, we're going to have another dev tool.
But go ahead.
Cool.
Before we move on to dev tips,
is there anything you wanted to cover
that we've not covered about?
Yeah, one thing that we're going to be,
that we do support with hot design
is the ability to do hot design
on mobile devices.
And mobile devices,
what happens is that,
the real estate is not big enough.
And what we're doing is just allowing your app
to be developed directly on the device.
But with the ability to,
and you see the tooling windows
outside of your mobile device.
So, you can basically move things inside on the device,
but see the windows for manipulating the UI
and see data bindings and things like that
from separate windows.
So, that's one of the things
that we're providing as part of the beta.
That does sound cool.
I need to see a video of this.
Does it look like?
Is the one that we can shove in the show notes
is something or is that not at that point yet?
For the mobile parts?

No, no, it's available as part of the beta.
Cool, awesome.
So, dev tips then.
You've already done one.
You said you had two.
Yeah, I have two.
So, the other one for the dev tips,
I don't know if you've...
If you're done a developer,
you build stuff.
So, what that does is that you're using MSBuild.
And if you're using MSBuild,
that means you need to know about bin logs.
And if you don't know about bin logs,
you can go to msbuildlog.com,
I think that's called.
And it's called Binlog Viewer.
That's developed by someone from Microsoft,
Karel Ozenkoff.
And I think it's a developer on the MSBuild team.
I don't know if he's changed a few things.
But the idea is that when you're building something
from .NET, if you're on the command line
and do .NET build, and at the end you do dash bl,
it will create a file that's called MSBuild.binlog.
And that file will contain all the details
that you have on your build.
So, all the little things about files and tasks
and see the inputs of the C-Shop compiler
and how the files are packaged
and debug anything that you want.
And it's a lot better than using the text
that goes outside when you're doing a build.
When you do a variable's build,
this is way too much to look.
And you can't search, you can't do,
there's not everything, by the way.
So, having a bin log is a lot better.
And there's a second tool that's related to this
that is called the Project System Tools
if you're using Visual Studio.
And you can record bin logs for builds
that are made by Visual Studio
because there's no command line at that point.
And also you can get to debug design time builds.
So, design time builds are the one
that Visual Studio runs in the background
to make IntelliSense work properly.
And if they fail for any reason,
then IntelliSense will bail out and not do anything.
And you can diagnose those errors
using the Project System Tools
to see the bin logs that have been generated by Visual Studio.
Just know that you have to put your Visual Studio
in diagnostics logging, otherwise you won't see anything.
So, that's the tool that I use pretty much every day
because build errors are difficult to diagnose
and that is a time saver.
Nice, this is big about memories
because I've not used the bin log
and the bin log viewer, I think that's cool.
In years, we actually had Stuart Lung doing a talk,
I wanna use a group called Don and Oxford.
And this was years ago, he did a talk on MS Build
and he raved about this tool.
It's an amazing tool.
It's progressing so much.
It even shows up, if you have issues
with your NuGet packages and doesn't restore properly
or it restores, you're not sure which version is restored.
It's gonna show you the packages in a structured way.
That's super cool.
It's funny to hear about these,
but all the software that you've kind of like
maybe not used in a while
and then you realize it's still being updated and things.
It's like I've recently had to use, you know, Windebug.
Yes.
So, it's gonna all win back, I think, at least, because.
WindeBG.
Yeah.
And I've not used that in years and years
and it was just this horrible, clunky thing.
And now, it's still obviously quite manual.
It's not like debugging in Visual Studio either.
But it just looked a lot better.
It had dark mode and all this kind of stuff.
And it's like, oh, this just looks way more modern.
Another one.
Do you remember MIRC?
Yes, I do.
I used quite a bit.
That's still being updated.
Is it? Oh, wow.
Yeah, no IRC is something that I'm not going to.
I mean, Discord has kind of replaced that for me.
But yeah, I'm pretty sure it's kind of underground.
There's an underground scene over there that's still there.
It's been decades since I last used that.
But maybe it's not still.
I looked a couple of years ago in one of the Doctored Oxford user groups.
Afterwards, we just geek out and stuff.
This was when it was virtual, like, start to code.
And we suddenly, I don't know who spotted it.
But it was like a few months ago,
at that point in time was the last release.
I'm trying to quick look.
I mean, I would have guessed MIRC would have been gone with ICQ,
but no, it's not.
It's gonna seem...
Oh, ICQ.
Has it got the older version?
Oh, it doesn't say the date on it, you know, but yeah,
it's probably quite recent.
But yeah, it's just...
Sorry, that was a bit of a total tangent,
but I just find it funny, like, all the wraps still going on.
So my dev tip, it was kind of more like a soft skills thing.
And it's basically just remembering the importance of planning.
I was recently reminded,
and for fiction book, I was reading about the seven Ps.
Now, there's a few different variations of this.
The one, pardon, my French, but the...
In fact, I can't use that term, can I?
Because you're gonna get offended if we say pardon my French.
Pardon my bad language.
It's prior proper planning prevents PSPOL performance.
And there's a few variations.
But it's just...
I've not heard that term such a long time.
And it's true, though.
Just things like...
It doesn't apply to some different aspects of life,
but also software development.
So, like, if you are working on a feature,
not just rushing in and starting coding,
and instead, like, whatever note-taking app you use,
just break it down.
Like, think through all the different bits,
like the happy path, the unhappy path, what could go wrong.
And quite often, just doing this
and not jumping straight into the code,
I've taken a different approach
because of just thinking it through and thinking,
oh, actually, there's this edge case
that my initial solution just won't work.
And just by thinking it through and breaking it down,
I've saved a lot of time and not gone in the wrong direction.
And also, just by breaking things down,
I find that because I've broken down a full plan,
when I'm actually doing the work,
I procrastinate a lot less
because I've got this list of small succinct things to do,
and I can just focus on the next thing on my breakdown.
And, yeah, I just find that that's now the habit I'm into.
If I pick up a new user story of the backlog,
or what's in the sprint,
the first thing I do is open up City
and open up a new note for that user story,
break it down, plan it out,
and think it through on paper,
we're not on paper, but in that note.
And that's just makes a massive difference.
So that's my dev tip, the seven Ps.
Yeah, it does.
The interesting thing about that kind of rubber duck tooling,
kind of rubber duck explaining of things,
I find LLMs, and I charge GPT,
quite interesting in that regard
because it can guide you through the non-standard paths
of thinking, think about something
because it knows about some pieces of,
particularly if you're explaining your feature,
and then it will ask you questions about what could go wrong,
or what will go wrong
because you may not have thought about it.
So it's, yeah, it's kind of an enhanced experience
as a result to go through that kind of steps.
That's nice.
It's funny, I saw a meme, I think it was last week,
something on, I can't remember,
it was Blue Sky or Twitter,
I'm not gonna call it X Twitter.
And it was basically,
someone posted saying that
he quit off on funds with chat GPT and stuff,
writing out the question to chat GPT
before he actually presses Enter,
it actually helps him solve the problem.
But it's like writing it out
and doing that rubber ducking thing.
But the person that posted this,
screenshotted that,
and just put, yeah, it's called thinking.
Yeah, it made me laugh.
That's what it is for sure.
That's a good one.
Cool, I think so.
Was there anything else you wanna cover?
No, just if you wanna start off on Ulu,
you can join us on Discord,
you can join us on Blue Sky and X.
You can ask questions directly on our GitHub
and you can get started on platform.uno.getstarted,
if I remember correctly.
There's a big green button on the right,
you can click to get started and see how Uuno does.
Cool, so without a big massive thank you for joining us.
I've really enjoyed the geek out
and we went deep in some places then,
I thought we were gonna go,
which is perfect for the target audience,
so I'm really chuffed we did that.
Of course, there's no un handle exception.
Well, there will always be that
until we get rid of noels and...
Yes.
And I think that's gonna be a long way in.net.
I know there's lots of things on,
the socials about the result pattern now,
people are, the air quotes, content creators,
like one person did a video,
then everyone's doing videos on the result pattern
and everything, so it's, yeah,
so maybe one day we'll do it natively in.net
and get rid of noels altogether, but who knows?
It's not there yet.
Not there yet.
Awesome.
Thank you everyone for listening
and I quick reminder that this podcast
is sponsored by Everstack,
which is my own company,
providing software development and consultation services.
For more information, visit everstack.com.
And if you're enjoying the podcast,
please do help me spread the word on social media.
I normally use the hashtag unhandledexception.
And I, well, I'm not on Twitter,
well, I am on Twitter, but I don't really use it.
I'm mainly on Blue Sky,
so I'm danklock.com on Blue Sky
and that's my main social.
All the best place you can actually get
in touch with me is Discord.
And Jerome's on Discord now,
on our Discord now,
but the podcast.
And yeah, that's on the website,
which can be found on unhandledexception.com.