AWS Logo
Menu

The .NET on AWS Show, Featuring Jerome Laban!

In this episode, we are joined by Uno Platform CTO, Jerome Laban, to discuss mobile development, C# Hot Reload, and more!

Brandon Minnick
Amazon Employee
Published May 20, 2024

Listen to the Audio Podcast

Listen to the Audio Podcast

Watch the Live Stream

Loading...

Transcript

Brandon Minnick 1:06
Hello, everybody and welcome to another episode of the dotnet on AWS Show. I'm your host, Brandon Minnick. And with me today is our favorite guest co host of the world. James Easton. James, how was your week?
James Eastham 1:21
My week is going okay. So far, actually, yeah. I think the weather is warming up. It's not cold anymore, although it is raining. So you know what you can warmer weather but wetter weather I'm having these days. All right, you're
Brandon Minnick 1:35
gonna say yeah, I'm here in London. So I've got a fancy hotel room behind me instead of my normal streaming setup. But yeah, I mean, I was walking around last night had a P code on long sleeves, scarf, hat gloves. So I'm not sure what you mean by warm, but I'm from California.
James Eastham 1:55
That's why it's warm. Yes, it's warm now.
Brandon Minnick 2:01
Usually, the low this time of year in Northern California, where I'm at is is about the same as the high here. So
James Eastham 2:10
I'm in the north of England. So I've got even even you're even warmer than I am. So yeah.
Brandon Minnick 2:16
Yeah, basically sweater. So, as you know, James, we always like to kick off the show with a couple of announcements. And it's awesome having you here because you are kind of the serverless dotnet. Guy at AWS. And what I wanted to share with folks this week is our dotnet eight support for AWS lambda. And in fact, you probably know more about this than I do. But But what I want to share with folks is we do have a open tracking ticket that our amazing engineer Norm has opened up so we can all keep eyes on what's going on. But long story short. Sounds like we're going to GA in February. Is that right? James?
James Eastham 3:04
end of February is currently what we're tracking via Yes, Amazon Linux 2023 has been a lot of fun so far. So yeah, there's a couple of issues that norm goes into in this thread to do with some changes automate to the runtime to handle some different interests is with Amazon. There's 23. But yeah, end of the month. Is it February yet? No, it's not ignore that end of next month. I'm two days ahead of myself. And the next month, it's not the end of February. Yeah, Europe.
Brandon Minnick 3:30
It's already been February is a short month anyway. So we're basically a month away. But yeah, this is really exciting. I know, I've been looking forward to updating all of my apps for dotnet eight and using the Manage runtime. And, you know, if you do want to get started, we have a dotnet dotnet, eight on lambda fans. The eight of those toolkits already been updated Norm has a lot of information here on how you can actually start trying it out. There's gonna be some workarounds right now. And long story short there. They had to push it back a little bit to make our lives better. So there was a couple of performance degradations that were found in the GNU Linux runtime on AWS. But looks like we've got all that fixed. And the even reached out to the Microsoft team, the dotnet team to even get the workarounds, fixed in the actual tooling. So very, very exciting. So I've dropped a link here in the chat. So feel free to subscribe to this. You can also if you scroll down, there's tons and tons of good advice about folks testing it out. And you know, you might hit a couple of the same problems they've hit and all these solutions are here. So dive on in check it out. dotnet eight is coming real real soon as a manager on 10, Ws lambda. And James, you mentioned I'm here in London. Why am I here in London because we're going to the same place right?
James Eastham 4:55
We are both we got to choose NDC Wimbledon You've got a little bit further to travel than I do, which is, guess what? You've coming out of there. But yeah, at least this week, I'm super excited. Actually, it's going to be, I've been to NDC Oslo. This will be my first time at NDC London both as a as an attendee, and also as a speaker. My first time speaking at NDC. So I'm super, super excited. It still feels a little It's surreal. Actually, I know when I got the email that you told me to select it. I was like, wait, what? NDC feels a little bit crazy. But yeah, I'm super excited. It's gonna be a lot of fun.
Brandon Minnick 5:27
Yeah, I love it. This is, oh, gosh, probably my third or fourth time coming to NDC London. But it's, it's always an amazing time. If if you are around, if you're in the area, if you're close enough to have a quick train ride or a quick flight, come up to NTC London, there's some of the best speakers in the world. And not just not just saying that because me and James are presenting. But truly, they get some of the smartest best people in the world to come out. There's workshops actually going on today in tomorrow. Which unfortunately, if you're watching this, you've probably already missed the workshop today. But Wednesday, Thursday, Friday, awesome, awesome talks from super smart people. There's a big party Thursday night, they do a big dinner Wednesday night. So lots of fun events, you get to meet amazing people. And if you do happen to make it out, come swing by the dotnet on AWS booth. And come see me and James and we'll we'll talk shop. So hopefully we'll see you here. Well, James, without further ado, we have a super amazing guests this week that want to welcome to the show, we had the CTO of Udo platform, Jerome.
Jerome Laban 6:41
Thank you for inviting me.
Brandon Minnick 6:43
Yeah, thanks so much for coming. I feel very honored. I think you might be our first CTO guest in the history Am I on AWS show? So it's gonna be it's gonna be a tough one to beat.
Jerome Laban 6:55
Why? There are many larger CTOs that again, they're very good, but you know, I'm, I'm honored to be here. Yep, that's fine. Yeah,
Brandon Minnick 7:02
thank you so much for joining. And so drunk for folks who may not have met, you might not have met you yet. Who are you? What do you do?
Jerome Laban 7:10
So yeah, my name is Jerome. So I'm CTO of window platform. I've been in the dotnet world since 1999, or something and bettors of dotnet. So it's been a while I've been doing most of it, using dotnet contributing to to dotnet for a very long time. I think my first commits into in mono were they back from 2003 or two and I remember to doing something GV six at the time that was not there. And then net BSD GC work at the time, so it was a very neat degree, the details. So moved along into you have been an MVP for quite a while as well. For for C sharp and, and bugging matters, and C Sharp team about the C sharp features like async, void and others. And I've been a I've been also a done in architect and developer for a company called adventive. That was developing applications for, for for Windows Phone at the time, then Windows H 10. And U WP. And when you wind up, moving along, and and we started, you know, creating a framework that was called, that is now called no platform that was about doing C Sharp zamel, C sharp and or zamel. Now on as many platforms as possible. Because we had clients that were asking us well, you do know how to do you? Do you know how to make applications? Mobile applications on Windows Phone? Can you can you make some on on Android and iOS? And we started saying well, we have all this all this code that was on on iOS and Android? Why can't we just take it on? I'm sorry, code on Windows? Wait, why can't we take it over to iOS and Android and then that's where we started doing the the UW P conversion of applications at the time. So since then, we've been evolving PERB and making Moodle platform from private source to public source. It's a noun a an Apache to licensed platform for for users to use and and you know in that in all their projects without any any fear of having to pay anything on on that site. So that's very nice. And we've been adding support for a long time. A lot of new platforms. We have iOS Android catalyst. Now. We have also WebAssembly that's, that's used a lot new for for developers that are publishing application on the web, and wanting to use all the code that they have. And of course being able to deploy on on various platforms like AWS and Azure and others. And, and also Linux, that's also a very big part of our, of our use, you could be so a user base that wants to deploy their dotnet applications on on Linux, and various embedded environments like Raspberry Pi's, and then feel free to have your, your boards and embedded boards and running a very weird environment that you're not used to see when you're developing. So that's the kind of, that's the kind of of things that we have in our in our back. Window is also a platform. So we're having a lot of things like the UI part of window, which is when UI based, that does standard development for application. But also we have a C sharp markup framework that allows to just ditch the zamel part and go to to develop without any, any zamel. And just use plain C sharp, we have a set of tools, extensions, that allows developers to go develop the application faster. We have also some tooling around figma, that allow us to take some designs in figma, and port them over to to your application where whether it's using zamel, or C sharp can be can be both ways. We also in a framework that that's called View X, that can go and you relieve you from having to do I notify property change and identify collection change and be all immutable. And reactive, without having to use any, you'll fully immutable things that we can see in the in the flutter world that can be can be a pain for state management. And that's, that's the whole thing. So working on all that. And having a lot of fun with dotnet. And a great team of of many people working on it, we have a lot of MVPs on the team. So that's always fun to have, you will be challenged technically, and you will have a lot of presence around the dotnet ecosystem. So that's nice. That's a That's a lot.
James Eastham 12:07
Got that everywhere. Is that advice? Good takeaway there?
Jerome Laban 12:10
Yes, done everywhere. Exactly.
Brandon Minnick 12:12
Absolutely. And thanks, everybody, for joining us today. We see a lot of first timers in the comments. And James even got a call out here in the comments. Java dotnet which one is
James Eastham 12:23
it? I feel like I've been out a job and sort of having to make these kinds of choices. dotnet always been doing a lot of wrestling a lot of roughs. Now that no doctor, I really know that could be an interesting question. Definitely.
Brandon Minnick 12:41
Getting spicy, soy. Soy drove it sounds like Oh, no can basically do everything on every platform. But we're where should we start today? I know, there's so many things to talk about so many things to show off. Should we bring up your screen and jump straight in? Yeah, sure, we
Jerome Laban 13:01
could do that. You I can probably walk you through. And one of the things that people have been asking a lot lately is, is all about, you know, running something in applications directly using C sharp. And I've, you know, we've been showing that demo a little bit on and off, depending on, depending on the shows that we that we go through going through but you know, maybe it's or some of the users that are that are looking through gear made me have a different question. So I'm gonna, I'm gonna just gonna show you what we have, you know, kind of hot reload and C sharp and sharp markup and see what we can do with C sharp and those alil. That's, that's the kind of thing that we can do. Also, we can take a look at another feature afterwards, which is called now embedding, which is all about getting malware ecosystem reused into into note. And, yeah, that's the kind of the kind of thing that we can go through with a little bit of WebAssembly, of course. So that's going to be fine. Sounds
Brandon Minnick 13:56
good. Well, I'm pretty pre screen now. And for the folks joining us on the audio podcast, we'll be doing our best to dictate what we're seeing what's going on on drum screen. But feel free to come join us on Twitch to watch the video back. If there's even more you want to check into that maybe you couldn't visualize in your mind on the audio podcast, but draw fluorophores
Jerome Laban 14:19
I'll try to explain in detail as much as possible. So that, you know, in general, we don't say the things that we're showing, because it's duplicates within context. It makes sense. So, so yeah, so one of the things that people have been asking us is all about making sure that, you know, they they be clear that some of the portion of the audience, you know, that are doing something that they don't like, their lifestyle, that's the that's the thing. They they don't want to have to learn a second language. You know, they don't have to, they want to you have to learn the intricacies of everything that that's going around there. And what we did basically is create a one to one mapping with with the The zamel structure, if you will. So it kind of looks the same when you're looking at zamel. But with the type safety and the support for also separate libraries. So we've been doing something that you can see here, there's a the constructor, and there's the main page with with the definition of the background, so the content. So basically, we're saying, we're standing in the background, we're saving content, we're setting a StackPanel, and some text inside. And that will show that if you look at if you look at zamel, it's good. We're close really, to what we're showing with with dotnet. With with the zamel. But it's all C sharp. And the cool thing is that if you have a separate library, you can also you your library, you're going to you're going to be able to have all those things with the extensions that were that I'm showing on screen. But just let's let's start and see and see what that does. So I can just start my application, this is we're going to be doing a simple calculator that uses some of the technologies that are inside of Google. And what I'm going to be doing is just I'm going to be starting the app and never stopping it. That's the that's the idea behind behind the kind of hot reload feature. So let me just lay on my screen a little bit. As
Brandon Minnick 16:13
a longtime dotnet developer myself, that's always one of the things I've been most jealous of specifically around like, when I see web developers or JavaScript developers, like, I'm never gonna go to JavaScript, I've done that forever. But when you see them being able to just make a change, save the file, it appears right away without having to recompile everything. Yes, you're on a slow computer, like, Yeah, I've been making some training videos last couple of weeks. And when I'm sharing my screen, recording my screen recording audio recording video, and compiling at the same time, gosh, feels like my compiler takes minutes.
Jerome Laban 16:49
Definitely this is for, yeah, hot reload has been has been making great strides there. And there are some very cool updates that are coming up in Visual Studio 17. Nine, I'm going to show you that quickly. It's very cool stuff. So what I'm able to do here is just say, so let me just make sure. So we have an ultra long and save. So if I if I just say your hello.net to just press Save, and then my country is going to be updated right away and on the site. So that's the kind of things that we're doing here. So the thing is that the context is being reevaluated every time. And we're making our best to make sure that everything stays the same, and then you're not using anything. So what I'm going to do is just uncoming pieces of the code here so that it looks better. So I can start by adding a block that will define kind of my layout for a calculator. So I can add resources, I can add backgrounds here, you can see that the theme background brush for materials are always defined statically. And with type safety, so you, you can even read the content there. You if you if you look here, you get disabled, he's able to do things like that sink, things that you haven't been more trouble to do with, with zamel. But that that's there automatically. There's also the data context support. So if you've defined data contexts, and we're going to be changing that later on, you can have, you can pass around the data context, and it's typesafe. It's typed, so you don't have to guess around what needs to happen. So I'm going to be uncommenting the pieces that show my content. So if I just press save here for the keypad, header and output, and I press Save again, you can see that the layout changed once more. So I don't have my keypads there, but I'll be adding that afterwards. So every time I just press Save, there's a new update of the UI that happens, it will just refresh my UI almost almost instantly. And that's pretty cool. So you can see, you know, things like vertical alignment backs with the row definitions using syntax like this. That's defined generally in zamel. So now I'm going to be what I'm going to be doing is I'm going to be adding a key back here. And the interesting thing about doing things like this with C sharp is that you don't necessarily need to have templates. That's something that that dotnet devs and WPF developers have been doing for a while is that you define a template and then you rerun the thing, but in here, you don't need to do this you just call the method again, is pretty much what that is. And here when I have my keypad button, I can set a command I can set command parameters, the font size, the height, things like that, it will just define properly but it's not a template per se. So I'm doing the thing at the very same thing for the primary buttons and then I can define my complete keypad here. So when I have my keypad and defining rows with the secondary buttons, primary buttons and things like that and when I press Save I have my keypad that just opens up instantly so that it's it's a it's showing up properly so don't mind the slowness here. It's because of the on the separate machine and it's just shows up like this but so that's that's where I can see things like this. So probably, if I didn't like the the font size of my secondary button, I could just change it, change it right away and It would just show up instantly. So that's the kind of things do a going back and forth to be able to update. But since this is not just, it's simply C sharp, and then there's C sharp, hot reload, we can do more things. So let's say I comment out my header here. And, and title, they're just going to be showing the content completely for my calculator. So I, when I save, I'm going to have the text for my calculator as well as a theme changing feature at the top. So of course, right now, it doesn't do anything, because it's not bound to any data, or any do model. And I'm going to add the the the support for, for NG model. So module model is commented out. So that means it's not even compiled yet. And that's where it's it splits between you having the UI and having the code there. Because before you had zamel, hot reload, which is just zamel. So now you can edit the code and add new features there. So if I, if I uncomment, my class here and save, it doesn't do anything but the compiled you can, you will be able to see what doesn't say because it did already did it already. But we're, we're adding features from what we're calling MBU x, which is state management and immutable things and making sure that you don't have to do I notify property change. So you can see here, this is a record. It's completely completely immutable. And we're going to be binding this to the UI
Brandon Minnick 21:33
using the MBU Model View update architecture, then, yeah,
Jerome Laban 21:37
it's close to NVu. But we're calling MBU x, because we're where everything is immutable. So you're able to do things that would you would you would do in kind of a completely immutable models I've ever linked here. But when you're doing everything like in flutter, or other languages like React, you have a a model, that's everything's immutable. But you have to refresh the UI every time and modify your whole data data hierarchy in one go. This is not the case here. It can be can be partial, it can be full. And we're just binding to a state that's managed completely by MB UX underneath. But as a developer, you don't need to manipulate all of this. It's just handled by itself. And the calculator itself is also an immutable, an immutable piece here. So it's a record, and everything's initialized. And you don't need to modify anything. So when we're calling something on the commands here, we're just creating a new version of the calculator that contains the last state of the computation. That's the that's the main idea. And that is pretty much bound to the UI. And then every time there's an update, the UI will be updating itself with the value, the latest value of the calculator. So yeah,
Brandon Minnick 22:49
yeah, drum. I would imagine most C sharp developers are most familiar with MVVM. Like, that's what we use in WinForms. And VF I've been using in Xamarin, a dotnet Maori for almost a decade now. So what what is probably your biggest favorite thing about switching from MVVM to MBU? Well,
Jerome Laban 23:11
the most important part here is, well, so that's the thing. It's, it's, we're, it's we're calling MBU x because it's different from the MBU and view part. So let's say, the important part here is that you don't see the plumbing that makes everything work. That's that's the, that's the important one. And let me show you to make it more clear for the for the listeners and viewers, I'm going to be changing this and mapping it to the UI so that you can actually see what that means here. So when I want to change the data context that I hear, there was just their food for the start of the demo, I'm going to be using and findable main model instead. And we're gonna be replacing everything inside of that file. And when we search for the uses of that context, I'd say for instance, if I look at the header, for instance, or another header, the output, I think it's it's, I'm binding the output to the equation here, and the output of the the content and we can look at, when we look at the calculator, that thing is completely immutable. So we're binding the text of the equation and the output to, to our calculators, calculator, sorry. So when I'm updating all of this now, it should be it does the computations, you can see that the content is bound directly. And I have my expression that's at the top and the output that's at the back now to answer your question about what makes a difference. And what makes it useful in between the two is that if you're a an MVVM developer, binding like this will make sense because it looks like what MVVM does, and, you know, underneath the MVVM tooling, the MBU X tooling that we're developing is using pretty much the same foundation as MVVM So it's using data binding, it's using i 90 fabric shade and things like that underneath, but you're not seeing all of this. Now, if you move to the model side, because it's a record, you're not, you don't have to say anything in regards to what needs to be updated. So we create a state here that says, For the dark value here, we created state that says, it's false by default, but when I click it, it's bound to the button that's there, and it changes from dark to light. And it you don't have to do anything. And that's, that's the biggest difference between MBU x in that sign and MVVM is that you don't have to manage the plumbing. And in a sense, when you're doing and VV NVu, you have to manage plumbing as well, because you say, you have to push content to the UI. So that's the pushing parts of the UI that's not there, you don't have to do all of that. That's the That's what makes it very different from both models. And that's why we're calling in a video expert closer to MPU. You don't have to plumbing to do your you don't have to say is dark is bound to that UI limit. It's just defined in the UI.
Brandon Minnick 26:05
Yeah, I love that. And so for folks listening to the audio podcast, if you're familiar with bindings, and MVVM, usually, we call those out directly. And we use strings to basically point to our properties in the view model. But what we're looking at here is not really a binding how you normally think of it. Rather, it's just an action or a function where we have an anonymous method, we point directly to the property in the view model or the model that we're binding to. And the value just updates for us.
Jerome Laban 26:39
Exactly. That's exactly right. And the important part is really the fact that it's it's a typed expression here, you don't have to guess, you know, what you're finding is that that's something that happens when you're doing zamel. You may not, you may not have the whole expression, it will kind of guide you in some ways, but not always. So that's what that's what that that part is going to be is going to be giving for the for the developers. So yeah, that's the that's the way we're doing things here. And you see, I haven't updated anything, you haven't stopped, the application started modifying things all around, that kind of works, you know, by itself, no need to do anything here. So we've made a lot of work to make all of this hot reloadable. So you don't have to restart the app. It's actually pretty, pretty, pretty important on on targets for which which the build is is a bit longer. On mobile, sometimes it's a bit longer. So it's particularly important. And question
Brandon Minnick 27:38
for drum. So when I've used C sharp, hot reload. When I'm in Visual Studio, I always have to click that hot reload button, that one that looks like a fireball at the top. Yes. I haven't seen you click that yet.
Jerome Laban 27:51
No, because it's hot and hot reload on fire save. That's enabled, what? What did they?
Brandon Minnick 27:58
How long has that been there?
Jerome Laban 28:00
Actually, since the beginning, if I remember correctly, or maybe working properly, but the thing is that it's it's hidden behind the, you know, the little arrow on this side. So it's not super visible. But that's the thing. It's just you press Save, and it's just applies the whole thing at the right place. So just
James Eastham 28:18
the right that would have been the default. Like, why would you walk with? I think it is the
Jerome Laban 28:24
default? I think it now it is may not have been since since the beginning. So because it may not have been super stable at the beginning. But now it's a lot better. So yeah, yeah, it's definitely, definitely better now. And it's evolving, it's evolving. Because you know, there are a few things that are not possible, that are that are causing issues you in current version of Visual Studio, like if you were making lambda that captures this or another parameter, it will kind of you can do it once, but you cannot undo it. But then the next version of Visual Studio is going to allow for this. So you're going to be able to capture lambdas, lambda does the capture captures this and parameters and things like that. And it will just work. You won't have to do anything. So it's kind of a it will enhance the experience quite dramatically.
Brandon Minnick 29:15
of it, I can already feel my productivity increasing as we speak.
Jerome Laban 29:19
Definitely, definitely. One thing that people are asking quite often is new. Do you support new theming? And yes, we do. So I'm just going to be adding the historic me here. Oh, and I'm going to show you one more thing that's next to it. But here I can just add a thing that we have. It's called the theme service this part of you know, that will allow you for tracking the the active theme. And now if I press the button, I have my theming that changes in the calculator goes away and so it goes into both mode so it will Follow the default theme for the for the app for the system by default, but if you you can change it if you want by clicking that button. And the cool thing about no hot reload, that's another cool thing. That's that's the hot reload is they can do things like that. Because you You see, I added that that code. It was not there before. And the breakpoints are working for the new code. That's, that's very nice.
Brandon Minnick 30:25
That's, that's incredible. Yeah. If you're not looking at this, it's, it's mind blowing, because drone just added is just async await C sharp logic, and put a breakpoint on top of it. And now we hit the breakpoint. So we're doing asynchronous multi threading, along with C sharp, hot reload, and it's all just working.
Jerome Laban 30:48
Yes, it is. It is. It is all working. And that particular part is about code that was not there. When I started the app, I edit it, then the debugger, the whole Rosslyn tooling just created the pdbs and symbols for all this. And you can put breakpoints into code that was not there to begin with. Something that was completely unheard of a few years back. And I
James Eastham 31:11
don't think I'm gonna be doing I've not learned a lot of like mobile stuff. But I've used blazer. I'm glad to first I don't remember that being one of the things you'd like rats in new calling, you're like, Ah, stop it started again. Yeah,
Jerome Laban 31:21
well, these are pretty good as well. Yeah, that's pretty good. Which actually, it's a very good segue, because we can, we can do that on the on WebAssembly, as well. So if I, if I change the app to do it to go to the WebAssembly project that we have on the side here, if I do, I do the same thing. And I built my app. So the WebAssembly support is based off of dotnet. altogether. And for Unova, we're using a separate version of the runtime, that's pretty much the same as the original one. But what we're doing here is enabling additional features that are not necessarily close to what blazer is is doing. And and that makes it faster and more powerful for us. So that's why we're having our separate version. But that's the same calculator with the same, the same kind of support that's running directly on the web. So what was running before it was a WPF version? Ischia WPF. So we have a rendering back end that uses Skia that can run on Linux on Windows can run on Mac OS as well. Well, not the WPF one, but the GTK, one can run on both targets. And we have the WebAssembly version that can run on any platform that has a WebAssembly implementation for a browser. So it can be Linux can be iOS, Mac OS, can be new TVs, Tesla's things like that, it can run on many things. That's, that's pretty nice.
James Eastham 32:51
I'm already looking at all of this and thinking like my, anytime maintain development career, anytime somebody says anything to do with visual front end to me, whether that's HTML without somebody and wherever that is, even Windows Forms back in the day, and just give out define this entire really nice looking calculator, just with dotnet? Yes, I need to put them all up now. Yeah, well, that's, that's
Jerome Laban 33:15
the thing is, that's the cool part, that's the cool part, being able to reuse the code everywhere. That's, that's been always a lot of fun. And if you if you're not, if you haven't seen this, we, we've developed with the with the nougat team, the nougat Package Explorer, that's on the web. So if you want to, if you want to browse your packages, and see what's inside and, and run out there, you get you the ability to just dive into nougat packages, that app has been built off of the WebAssembly runtime that I've been showing you pretty much the same calculator, but you have all the all the pieces that allow you to browse your content. See, for instance, if you have a DLL and want to see what's inside that DLL, you can see all the reference assemblies, the compilation diversion numbers, you can even see all the metadata references. This is a data grid by the way. This is the degree that's that's that's that integrated was actually developed originally for for Windows Phone or civil like was it no civil, like I think it was civilized. It was ported over multiple times and ended up now we're running on one UI. And, and this is this is code that comes from the Windows community toolkit that we that we're using, as is on on the web. No, that's that's that's pretty cool.
Brandon Minnick 34:33
Incredible. Jana sear in the comment says there's even a standardization going for wasum. But what does this mean? And me maybe you know, maybe you don't DRO and maybe Janice Yiannis you can chime in. Is there no standardization for wasum. Already? There
Jerome Laban 34:51
is there is well it was it was a standard. So there wasn't a standard so what what what we're currently running on is the Um, let me actually show you that. So the standard that we're running on is the web assembly, the org slash features. I remember correctly, I think it's the one that basically the the November 20 2017 version of the web assembly group that that specified was the new baseline for implementing web assembly on in browsers. And after so it was called Web assembly, one, zero. So it has it basically has, you'll be APDT to run code, interact with JavaScript, and you standard operations that would allow for running directly in the browser. And then afterwards, there were extensions that have been added along the way, like threading, like CMD, like Tao calls, you know, all those new feature garbage collection that's been added recently, things like that, that kind of moves along, that adds feature to the top. So makes it a bit more difficult for developers to say, Well, I'm targeting WebAssembly, but which, which subset of WebAssembly am I supporting? Typically, because when so far is not supporting everything, you kind of default with whatever most common implementation does, if you will.
Brandon Minnick 36:22
Use common denominator Exactly. So
Jerome Laban 36:24
in general at this time is Safari, which is the new ie issue. It's an explorer. So that doesn't support everything. But that's that's pretty much the idea with with Safari there. And so that, in a sense, there's a standard, it just lagging a bit behind because of the fact that some of the implementation are lagging, but in general, it's enough. And we can get new cool thing with threading enabled and things like that. So that's the that's the current state of oneness. That's
Brandon Minnick 36:56
incredible. Because I remember and I don't know a ton about blazer, but I've heard one of the biggest complaints is about multi threading and blazer. And that's been a blocker for some folks. So does that mean we can now do? Oh, yes,
Jerome Laban 37:11
definitely. I not blazer, so not blazer, and that's the thing. So I had, I think I have a demo somewhere that I can show you. I think it was the ray tracing. It's a it's a retracing, retracing demo, and I had somewhere maybe you can find it somewhere. New platform. GitHub, actually, you probably find that there's probably going to be easier there. And so the threading support for Web assembly as been added a long time ago. But the problem is that the web assembly raytracer, I think it's there. So it's a little bit, I can find the sources from it. Let me navigate a little bit sorry about that. We're simply benchmark, I think it's the one I think I added threading, there you go. There you go. That's the one. So it's a so whether somebody has been added in what in web assembly a long time ago, actually is probably three or four years ago, things that the dotnet team, so the runtime team has been adding support for Web Assembly since superforecast, for threading for about three years now. And the thing is that, because we're we're mostly on an environment with no and when you why that's threaded by default, we don't have to kind of deal with all the intricacies of the way, Blaser has to deal with in the sense that it was meant to be running originally with a single threaded framework. So that's the kind of thing that we don't have to deal with from the get go. So when we start to start to be available in the runtime, we kind of pulled it up and made it available in dotnet directly. So this is actually running multiple threads and doing rendering of multiple threads in the in the web. So this is pretty cool. And if you know, so you can see that is pretty active at that point. But that's to give you that it really is using multiple threads in that context. And in doing this is software rendered ray tracing. So that's why it's it's it's slow in that context, but that that's to give you an idea of the number of things that you can do so so who knows has support for threading at this point, while while baver still does not but I hope they will, will add support for it in the in the coming year from but maybe we can help with that in a night maybe.
Brandon Minnick 39:41
Yeah, and for folks listening along. What we're looking at here is multiple 3d images being rendered in real time with the light source moving around and that's what drew them into it with Ray tracing is the beams of light and the reflections and how everything is essentially painted or drawn onto the screen. In real time using 3d graphics, and it looks flawless, I would have never known run any browser on your computer. It is it is.
Jerome Laban 40:09
And the so you can see here to the all the workers that are that are created just to show you the number of threads that are running. So the work that the environment is able to create more thread that he can use. But that's the kind of thing that that is in terms of its implementation. So this is 30, I guess, based off of web workers, but kind of advanced web workers for which new content can be exchanged between threads for which you can't really do with JavaScript. But you can with WebAssembly.
James Eastham 40:38
Incredible, very cool.
Jerome Laban 40:42
So yeah, so that's the that's the WebAssembly part. And it's always amazing to to be able to manage all of that. And we have, we have a lot of traction in on the on the WebAssembly side, it would be too wild to be able to, to run content on the on the web, particularly because developers you they want to be able to run their code and update their code whenever they want. And that's the when we're comparing that to, to the the mobile and mobile ecosystems where you have to go through procedure petition process, and everything that makes a little bit more complex, even though that's going to change in the EU. Particularly on Apple, but it's it's still is you have to go through some kind of vetting process that that's not there when you deploy it on your by your by yourself using using the web. So I mean, on the deployment side, and that's probably something you can you can probably you expect for your users, but the developers, that when they deploy a web, a dotnet application using web assembly, what they're going to be doing is deploying an application that uses static static sites, maybe they just uh, that's maybe the the only way to describe it, you basically have a folder that contains just HTML files, WebAssembly files. On the other side, it's going to be static web apps, you have to deploy everything. And I'm assuming that on the AWS side is something that's very similar to deploying static sites, just push your files and then serve the content. Is that Is that something that you that you have on the AWS side, whether it's through a specific service that users can look forward to deploy something like this? Or blazer apps, I mean, because I'm assuming,
Brandon Minnick 42:28
James, you know, what it's called for static sites.
James Eastham 42:31
If you didn't, you could you could host a static site in s3. So you can host your static site in s3, and you can put something like Amazon CloudFront CloudFront being a CDN. So you can host the raw sites, if you will. Okay, so now that you can, you can actually deploy bleisure, wasm to, to s3, so you can compile it and push it to s3 but gloved hands in front of it. And yeah, there's a little bit of configuration you need to do. It's not quite as simple as I'm making it sound, but it makes sense and catch them up in the chat.
Jerome Laban 43:04
Yeah, so deploying on deploy on any kind of service that allows for static, static content deployment, it's something that very easy to, to publish, you know, just take the output of the build and put it anywhere that serves an HTML file, and then it will, you'll be off to go. So there's no there's no server counterpart of any kind, aside from just serving the files, that's the, that's the cool part. So yeah, that's the that's the WebAssembly side. I wanted to touch a little bit on the Maori and Vedic side. So for some of the developers that that are doing, what is doing mobile development, we recently added support for the ability to add syncfusion controls, for instance, and being able to include your for instance, we have, let me see. So that's an embedded control. I'm not going to be showing it to you right now, because there's a little bit of a demo issue there. But the idea is that you can take an Uno app, which is essentially a dotnet app. And you have the ability to take Maori controls, whether it's coming from a separate vendors, or it can come from your own control. So for instance, here you can see that it's a content view vertical stack layout. This is a piece of code that comes from Maui, this is a Mary library, which also contains controls that are coming from that are coming from the syncfusion controls. So this can just kind of control can be included in an overlap and use as if they were standard controls. So, for instance, if I go to my main page, I think that's the case here. We have what is called a Maui embedded host that's inside of a this is a Google control. All that embeds a now we control. So for instance, we can use a senator elevation Synchro charge here that will show the the content that comes from now we inside of a new app. And that's been asked a lot, because there are some controls that are not yet available in the Google ecosystem. And they are available in the valley ecosystem. So you can pull in things that are coming from that ecosystem and make them run directly in the new apps.
Brandon Minnick 45:25
That's really cool. Because Because yeah, that's always one of the toughest things with either changing ecosystems, if you're used to one and you know that this exists over here. Why does it exist over here, and but now it doesn't matter, you can just add it in using Maori embedding into your, you know, platform app. Exactly,
Jerome Laban 45:43
exactly. And so, so just for developers, this is Maui. So so that means that it will work for platforms that are supported by by the window platform directly. So by malware, sorry. So that means that since while we support, iOS catalyst, Android, and Windows, that means that we are going to be supporting that as well for those targets. If you want to have Linux and web assembly that for now that's not supported until the vendors will add support for it. So yeah, that's the that's the part about the the Maori embedding, that's a cool feature that we added in, in Moodle four point 10 A while back. And one of the last pieces that I want to show, you know, we could probably talk or you will, you'll go with the with the flow afterwards was the the support for figma. And this is this is actually quite interesting. This one is we had a lot we haven't, we're having a lot of traction around around figma. Because there are a lot of your designers that do want to have their own design properly included into into, you know, into into Google Apps. And I wanted to show you what that means. So if I have a, I have a design that's been created by a bank or and designers that you know. And what we what we do here is that we have a plugin that we can add here. So if I right click here, I do have plugins, I can have the you know, figma, C, sharp and zamel. And then we'll open up a web assembly app that is a plugin. So we're using uno to build stuff. This is this is a web assembly app, that is a plugin for figma. And so we're basically interacting with WebAssembly, with figma, which is also WebAssembly. By the way, all of this is drawn by WebAssembly. This is the web assembly speaking of something very, very nicely. So when we're clicking that amount of clicking refresh here, what we're doing is basically pulling the content that's from that part of the screen config map, and then transforming it into an actual running app, if you will. So the things here are clickable, you know it can, I can interact with the content there. So this is this is pretty much making the design work instead of an app that's in web assembly on the side. And then once I'm done, I can take all of that you can edit few things in there using using the figma edition tooling, and then go to the export part and then generate either zamel If I want to paste that into my app, or use C sharp, and have the C sharp markup in the same way and have that included directly to my running app. So that's that's the that's the cool thing about manipulating designs there. And you'll designers love it. Because you know, the defining the templates, defining you can have your item templates that are defined there. So you can have repeat, repeat content there that's automatically imported. We're mapping buttons directly to controls that are defined inside of inside of window using the material theme here. And you can define your localization, you can define data binding and pieces like this. Like for instance, you can define the data context, I don't have one here, but you can define data context so that the preview here matches whatever you want to match. So if you have some custom content that's defined by your API, for instance, you can map that in into the previewer here and get that exported properly to your app. So that's, that's one thing we can
James Eastham 49:23
do. Can I just confirm exactly what you did those wrongs? I just feel like I missed something. So you have the design in figma. Yes. And then you've also generated dotnet called C sharp called Yes. On the design in figma. Yes. Yes. I felt like I looked at it and Mr. Stack was like, wow, that's
Jerome Laban 49:42
the idea. So when you have on you have some content here. It basically you get your let me let me see if I can change a few things here. I have a bit of content there. No, that's pretty much the screen is too small here. It's going to be difficult there. But the idea is that You win, you get to your design and you're done with your design, either your developer or if you're a designer, you can test out what that's going to look like instead of an actual, you know, app running, you know, because the previewer is what it is, it's, it's running. And then when you're done with all this, you go to the export tool, and then it will export either C Sharp zamel. And then you can basically copy paste that into your app, and just tweak it a little bit if you if you want to, and then get that get that running. That's pretty much what it is.
James Eastham 50:27
It's very cool.
Brandon Minnick 50:30
It literally is that simple. That's it is that it's incredible. I always feel like this was the biggest disconnect or the most difficult thing as a mobile developer, because, like I mentioned, I've been making iOS and Android apps for almost a decade now. And yeah, yeah, you'll have a designer on your team who makes this beautiful UI and they go, here you go. Now it's your job to write the code. And so many times I've looked at, I've just been like, no, like, this is so difficult to make. But if we move a couple things, just a little bit in a couple places and just tweak it a little bit, then it fits the tools that we have to work with as mobile developers. And instead of spending a week creating a custom control, just so it looks like the design you made in figma is was always the biggest battle. And I've had so many of those conversations where it's like, Well, is it really worth a week of my time to create all this custom control UI logic? Or could we just change the UI a little bit, and it's always this back and forth. But gosh, no, like, I don't have any more excuses.
Jerome Laban 51:36
There we go. The design handoff is is all it has always been something that's complex. And, and you're being able to do this, you kind of put the design and pixel perfect Enos of what you see in your design directly into your app, you kind of making all the things you'll say probably and you can do, for instance, we even export, some of the images, we're exporting image, we're exporting icons, you're, for instance, the icon, the arrow icon back at the top, that's exported as a, it's, it's well, it's, it's a, it's the same format as SVG. But it's, it's the zamel path, which kind of is almost the same, if you will, so if you know how to read SVG, you're gonna be able to read that. But now we're exporting things like that we're exporting, we're about to export to France, if I remember correctly, so things like that. So we're mapping nothing to styles mapping to content here. You know, even the variance with regards to you using the, the material theming. You know, binding sizing so that everything like that is is available, you know, and that's that's the cool part is that you don't have as a developer to to fiddle around with the pixels, if you will. And the lightning margins and things like that. That's That's all taken care of, by by the exporter.
Brandon Minnick 52:54
Incredible. Yeah, I mean, along with the same line of thinking, you know, when, as a developer, when we're working on the UI, the amount of times you have to enter in some code, run the app, see what it looks like, and then change one or two pixels, run the app, see what it looks like, again, I've lost days of my life doing that. And give me pixel perfect code. Yeah, it is it is.
Jerome Laban 53:19
And you can you can take that code and paste it into your application. Given that it matches, you have a few things that you can change, like, you know, the default namespaces and things like that. So once all of that match with the application, the application that's running, then you can copy and paste the code and iterate on that, you know, you can iterate from visuals from from figma. If you change something in figma, export, again, paste again, that's the kind of thing that you can do. And because you have a reload, well, you don't have anything to restart, you just go to the portion of your app that you want to debug, or change or altered and then you iterate on on the updates there.
Brandon Minnick 53:57
But I feel like I'm running out of excuses for reasons to push back and try to make my job easier because this this is so incredible. I mean, we only have a couple minutes left, but how how does this work? This feels like magic.
Jerome Laban 54:14
It's a it's an amazing team that's working on on the on the whole thing. And we have a we have your great customers that are providing amazing feedback the community as well, that is that is using those tools and, and giving us great feedback to a new use cases that we haven't thought of and you hope I'm using that tool in that context because I'm trying to do that particular scenario. And that's never we never thought of that. That's so cool. So we kind of iterate over those issues and, and expanding all of those scenarios. And we're we're standing on the shoulders of giants with regards to the support for everything that's underneath me. dotnet is available everywhere. That's that's helping us to do all those things. Do being able to to run that They're for that code to be available everywhere. I mean, that's where the magic lies, you know, being able to run dotnet everywhere. And if people asking this that that portion here is the Monaco editor, this is the text editor from VS code that's integrated into the browser. So that's, that's pretty cool. So we can do having that we have a thigma dotnet. And inside we have the VS code editor.
Brandon Minnick 55:30
Incredible, just put it putting the JavaScript guys to shame, just doing everything in dotnet.
Jerome Laban 55:36
There you go. So if people want to use all of this, you know, and it's, it's free, we can, you can go to, we can go to the get started here and read the documentation and find your own environment. And you set up everything that you need, you get all we have extensive documentation about everything, it's probably not covering everything that you want to but if you have any kind of feedback, we have a lot of us a lot of a lot of developers that are pulling, pushing, pushing us PRs, to to fix the documentation. And because they're finding edge cases of the community is amazing. And this is a USC Sasha's push to posting tutorial for figma. So if you want to do if you want to do some figma, there's a lot of resources there. You get the we get our workshops that are available to to for the developers that want to try out you know, and we have our new discord channels. Now we've got a new Discord server. So everyone's welcome to go and ask questions and participate in the community. And have fun with us. That's a lot of fun.
Brandon Minnick 56:47
I love it. We only have one or two minutes left drum. Thank you again for for joining us today. But for folks who want to follow along obviously there's platform dot Uno is the website. That's where you can find the Getting Started info and definitely check that out if you're interested in learning more about you know, but where can folks follow along? Twitter GitHub, where should folks subscribe so they don't miss any more updates about amazing stuff that who knows working on?
Jerome Laban 57:13
Exactly yeah, well on Twitter, we're on the discord we're on Mastodon we are in the new places GitHub full as they're having a lot of fun.
Brandon Minnick 57:26
And is it Udo platform on all the different socials on
Jerome Laban 57:31
while social? Well, I think they're available somewhere at the bottom somewhere. So when we're on Twitter, I think we're probably Sasha is going to post it. On the on the on the chat. I don't recall where that is. But we're definitely available everywhere. But I don't have it here probably somewhere at the bottom, but on Twitter for sure where they're always looking for. Yep.
Brandon Minnick 57:55
So I should confirm, follow no platform on all the socials subscribe so you never miss an update. So again, Trump, Thanks for Thanks for joining us on the show. I wish we had more time I feel like I just got the like that scene in The Matrix where I just got it uploaded to my brain. And now there's a whole new world that I didn't realize exists. And it's incredible what you and your team are able to do. Especially coming from is done in Maui developer, a longtime San Fran in Maui developer, it feels like Udo has more tools than big money Microsoft is able to offer for for us as the Maui side. So I'm very jealous. I'm going to have to start looking into this. But thank you again for coming. And thank you for joining us. Thanks for watching. Thanks for listening if you're subscribed to the audio podcast, thank you so much. The dotnet on AWS show is on every two weeks, so make sure to subscribe so you never miss an episode. And we'll see you in two weeks.
 

Any opinions in this post are those of the individual author and may not reflect the opinions of AWS.

Comments