 do we start okay so we'll do a quick talk about why and all in Xamarin forms we compile Xamarin to IL it's actually very similar to the tour that Andrea did earlier this morning where she transpiled TypeScript into IL you see a very similar pipeline very similar concept but it's in the context of compiling Xamarin, Xamarin 5 we'll come back to that in to IL we could we but but also this concept could be used to compile any resource that is that needs to be interpreted runtime I'm doing this talk as well because that's one of the black box of Xamarin forms very few people know how this works very few people know how to contribute to this part and we're just scratching your surface but that will explain you how it works so I'm Stéphane I work in Xamarin forms since 2013 prior to that I'm using and contributing to open source since before 2000 I've been a contributor and maintainer on left spot I've been a contributor on moonlight on mono on some other open source project as well you can reach me on Twitter or on github so I'm by saying that I work on Xamarin forms since 2013 I actually I met Microsoft for the past two and a few when Xamarin was acquired by Microsoft so Xamarin forms Miguel is in there to correct me so it's fine Xamarin forms is a it's a framework to create at first mobile applications and you build your application once and then you deploy it on any of the support target and the application will be native on that application on that on that platform over here you see iOS, Android and it might still be WP7 or it could be it could be UWP I don't remember which at which time we took this this picture so those are those were the main targets for Xamarin form at this time we we support deploying Xamarin application to iOS, Android, macOS, UWP, WPF, GTK, Tizen, ui.cs so the one you saw earlier and probably still a few others so at Xamarin we maintain the backend for iOS for Android for UWP for mac all of all of the other backends WPF, Tizen, GTK are contributed by the community so Tizen if you don't know Tizen Tizen is the OS that runs in your Samsung TV or in your Samsung dishwasher so if you run-to-run application on your dishwasher it will be a Tizen one it also Tizen also supports some some wearable devices so this is Xamarin forms who is using Xamarin forms great yeah but I know I know those guys okay so in so Xamarin forms if you see this all of those controls are native to the platform so this is this is a this is an iOS map this is a Bing map and this is a Google map but but the code that runs that is exactly the same everything is native at the time of rendering and we create a UI either in C sharp in F sharp or in Xamarin what what interested us at this time is Xamarin forms also open source it hosted on GitHub so it's open source almost since I think we open source it a bit before being acquired by Microsoft so it's it's been it's been open source for the past three years we get a lot of external contributors the community is great it happens on GitHub you you'll see the GitHub address a bit later so this is a very simple example file who's not familiar with Xamarin no okay so Xamarin is just a descriptive language it's not a programming language it's just a descriptive language that can create objects and assign properties so there is no conditionals there is it's not it's not a terrain complete language it's just a decorative language and in this case we just create it it's a it's a subset of XML I mean it's XML it's XML compliance so Xamarin is just XML so it you define the content page in the content page we define a stack layout and in the stack layout we define a label with a text and that text is bound to a property of the context so that that's Xamarin when you see this basically you've seen most of what Xamarin is so it's just quite simple what we used to do on Xamarin.Forms is taking this Xamarin shipping it as an embedded resource in the assembly and at runtime when the view had to be inflated we were extracting this resource parsing it at runtime parsing it to an ST and then expanding that using reflection so it becomes a full object tree so from that we turn that to actually an object which is a content page that contains a stack layout that itself contain a label with a binding so you could write the equivalent of C sharp code for that it would take something like 15 lines the problem is if you if you if you come back to the previous slide on the middle there was an Android device and Android devices are quite diverse you have the probably the din that the guys over here having in their hands those are Samsung those are LG but but there is just a full set of devices in Android that takes something like 60% of the market that are low-end devices something that costs less than 100 bucks or that they've been bought more than three years ago and those one are single core old core very few memory and when you start doing parsing of big files on those using reflection on those creating tons of object because you need you need object and then garbage collecting them you end up with quite bad performances meaning that for large for for for a large example file turning that example file into an object tree could take a few tens of milliseconds like 60 or 70 milliseconds just to interpret the input and having an object tree which is not yet at this time rendered on screen so that that that that that's 70 minutes again that or 60 or it depends on the dependent device that that were just lost on which that that was not come not compressible time yeah so so the the main the main reason for that is the main problem for that the parsing at runtime inflation using reflection is performance on Android so as we are mobile application mobile application most of the time 99% of the time are self-contained by self-contained I mean that all of the assets are already part of the application itself yeah it can connect to external servers but most of the most of the views you would in in in another application that's not informed you would write it in a XML in in in Android you write it in Swift or Objective-C in iOS and so why so everything is known at the time of the compilation so we could technically it's not everything that we know that that we know at runtime it's also known at compilation time so why not keep the capability of writing example files because example is a great way to describe UI why not turn the keep this capability but turn that into something that it's actually compiled and as fast as if you have described your application using C sharp C++ Objective-C or whatever and be actually compiled into the assembly so we we we we we we can do that and that that's an advice that you you have to use for all of your mobile mobile application if you have a resource if you can do something at compile time instead of at runtime you have to do it if you have an image and that image need to be resized it's better to resize it on your computer time at the time of creating the application instead of resizing the application resizing the image at the time of rendering if you can if you know the size it would be rendered at resize it before because everything that's done on the device is done a million times instead of being done once on your machine and it's done on some low-end devices yeah I know that if you if you have a if you have top of if you have a top of the range iPad it's probably more performant that this laptop but that's not the case I mean it's a case for us in this room it's a case for people in the West but it's not the case for the for for the rest of the world most of the world and the target the big market for the for the mobile application right now the market for expansion the market that the people that needs applications is it it's Africa it's Asia it's and and if you if you go there you you don't you don't feed developers with the same privilege that we have over a year in Europe in the US and you they don't run they don't really run with the same constraint so so so we we need to think about the performance we need you we need to test our device or application not on our personal devices we need to test them on actual devices use on the field so what do we do so we we would we achieve that compiling XAML into IEL so we have that XAML that's exactly the same as before and we pass that to an AST an AST yeah it's just a tree it has a content page the content pages property content which is a stack layout which is a property children and the children is actually a label which has a name and a text this is actually actually the exactly the same parser as the one we we use to use at runtime is a marine form it passes to to an AST and then we on the AST we run a few we run a few visitor visitors so we implement a visitor pattern and we go or we go on all our nodes and do some stuff if you yeah for working on trees like this on the AST this important is it's something so a really good one because you can work the tree multiple time without modifying it and so we we have everything in our tree is an I node and we have some visitor that that that implemented that implement the node visitor so the most important one in this case because I told you XAML is a language for creating object and assigning properties so we have a create value visitor and we have set properties visitor so that that's what we do so we we at first create all the objects create a content page create a stack layout create the label create the object that will be set create the binding and then on a second pass what we do is setting the name of the label to label setting the text to a binding setting the content the children of the stack layout to the label and setting the content of the content page to the stack layout and we do that using monosysil monosysil is some now some library that generates and generates and inspect assemblies so it's used for example at Xamarin we use it for the linker the linker is the tool that you run on the fully build application and that will remove all the stuff that you don't need and again if an application is fully fully fully contained you can follow every pass and you can find that this function this class this type this property is never used except if it's used by reflection in that case we don't know you have to markup but we can remove everything and we can we can reduce the size of of an assembly that you might think that you do not write code that's not used but when you when you write code you depend on MS core lib if you write a seizure application and you don't use every single function of that MS core lib so you don't have to ship it so Cecil does that Cecil has been around since 2004 and it's done by by our friend GB GB yeah a few years ago he was living in France so he was he was coming to Fosdam every year but no time removed to Seattle so do we do it so I told you that we just right we are generating I L this is the I L we generate for the example the example I've just shown you so this is the this is the I L this is the equivalent decompile C sharp if you know C sharp so we create the binding extension the binding extension is the markup extension with the curly braces binding we create the label we create the stack layout and that's and we store every single of them in a variable binding layout stack layout we do that what time is it okay and then we set the properties exactly with the I L we so this is the code we generate from our example to I L compiler so and this is quite equivalent to this C sharp so we set the text as the past property of the binding we set we set the the text to the past property of the binding it's over there we set the binding to the label the label is the variable one which is over here we add the label as a children of the stack layout and we then set the value content to the stack layout and then we return if you look at the number which we are quite high because there are some other vitro that generate stuff those are for the ability of names for the ability of namescoping so you can do fine name many maintaining stair state and so on so it's it's a bit more complicated that just it but this is this is the this is the gist of it this it's it's it's the minimum requirement and then yeah we we need to support some more complex when you have references between parts and that that's why that's why it gets harder on performances it compiles XAML faster than the equivalent C sharp so XAML is slightly less verbose than C sharp so if you have to write the same code in C sharp that you would write in XAML you would have three to five time more C sharp code because all the binding is done automatically you we we most of the time create the object and assign the properties on the same line something that's not done usually in C sharp so this is this is a run that just that I just did this morning so my laptop was on the poor reserve so it's was on so those number are the order of magnitude is right the number are not are not describing the the reality but basically the XAML C for 1200 line of XAML took three times less than this number of C sharp and if you multiply that by three or five you you end up seeing that we are a bit faster than Roslyn we are on the same order of magnitude as the the old monocompiler I think I've missed something okay so the runtime performance is totally worth it we are inflating the view really fast most of the time we inflate the view so we turn the XAML not the XAML because XAML isn't ship anymore but we just construct the object in a few milliseconds we also I I haven't show you that nor explain but if you take this this is a markup extension it actually can get compiled just like all of the markup extension and we but by doing a compiled binding if you know what a binding is it's a way to link between your view and your view model and most of the time we do that by reflection and by connecting the arrow reflection to identify property change but if you that if you if you know the type of the view model at compile time you can actually create a function that does that and cut the cut the the reflection from it and so we have a boost up to 200 times on binding so bindings are known to be not that fast and that's the case in most languages because they are they are syntactic sure they are convenient for the for the developer but they are not known to be fast but if you manage to keep the syntax of the binding and turn that into actual actual code at compilation you get the same performance that if you were observing the object yourself so if you want to know more or contribute to example in form it's on github it's over in slash cuz I'm in form and that's it do you have any questions no depending on device but if you know do it if you don't it's probably but I made you what was just an example you can you could compile if you have huge json file that you ship just your application you can't think of a way to pre-process them because those are stuff that are expensive to process at runtime and I made was what was one was one of the was one of the example but yeah most of the time you don't know the exact resolution but you know if you have telemetry on your application you probably know what are the 10 most known size at least for icons and some of the image not the image I take full screens but most of the time those those one you don't ship them with the application an image I take full screen except if it's if it's a background you don't ship it it's downloaded from from a web service installed in it's stored in your local storage for your application because you're doing a photo application you're doing a news application and for those one there is very little we can do but most of the time that's a single image on a page but if you have a UI that you fully drawn with images because you have a button you have a pen you have and if you if you don't pre-process those image you will pay the price and if it matters if if the the the customer experience matters to you and it should so you should really measure what takes time in application and see where you can that's free time that's really free what a question in the case of the sample you we have some blog about it but to be able to compile the bindings we have to yeah we are the Q&A thank you to to for the example competitor to be able to compile bindings you have in your example to tell this is the expected type for the view model and so we know that it was way out of this 30-minute introduction to compile example so but we have some blog from David about it so you just tag it at the high level and you tag it at the least view level so you know that for your data template it will be this and we can compile everything so we are we are still this this is actually shipped for the past to another fewer it's been enabled by default for the past year and a bit but we're still working on it we still doing more and more computation and less and less at runtime just to save time question yeah for example I don't know I would say just measure measure everything oh yeah I have some money back to you but where's our next speaker great yeah missing speaker okay that is his footwork hi are you Michaela I am hi Michaela I'm Steve nice to meet you it's fixed do we have a level somewhere that we can see if it's good or not okay well hopefully it's okay okay okay I'm trying not to touch anything okay got it all right let's get okay hopefully it'll be get off my iPhone as well oh busy okay oh