Why, and How, we compiled Xaml into IL

Video in TIB AV-Portal: Why, and How, we compiled Xaml into IL

Formal Metadata

Why, and How, we compiled Xaml into IL
Title of Series
CC Attribution 2.0 Belgium:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Release Date

Content Metadata

Subject Area
Some years ago we started to compile some bits of the Xamarin.Forms Xaml directly into IL. It’s now fully turned on into our templates, and on par with the runtime Xaml loader. In this short talk you’ll learn about the story that got us there, about some of the internal cooking of Xamarin.Forms, and what our plans are for that Xaml compiler.
Context awareness Run time (program lifecycle phase) Surface Similarity (geometry) Black box Form (programming) Form (programming) Alpha (investment)
Android (robot) Mobile app Game controller Open source Information Mapping Code Multiplication sign Projective plane Bit Mereology Software maintenance Cartesian coordinate system Twitter Front and back ends Mechanism design Video game output Software framework Computing platform Form (programming)
Web page Laptop Slide rule Android (robot) Mobile app Server (computing) Run time (program lifecycle phase) Computer file Code Real number Multiplication sign View (database) MIDI Virtual machine Maxima and minima Set (mathematics) Mereology Computer Field (computer science) Formal language Hardware description language Medical imaging Protein folding Semiconductor memory Compilation album Form (programming) Condition number Programming language Touchscreen Constraint (mathematics) Run time (program lifecycle phase) Reflection (mathematics) Software developer Keyboard shortcut Content (media) Thermal expansion Line (geometry) Cartesian coordinate system Equivalence relation 10 (number) Category of being Message passing Personal digital assistant Network topology Volumenvisualisierung output MiniDisc Object (grammar)
Web page Keyboard shortcut Multiplication Inheritance (object-oriented programming) Run time (program lifecycle phase) Multiplication sign Web page Content (media) Content (media) Infinity Statistics Abstract syntax tree Category of being Network topology Password Estimation Pattern language Form (programming)
Web page Category of being Keyboard shortcut Message passing Inheritance (object-oriented programming) Content (media) Stack (abstract data type) Object (grammar) Content (media) Curve fitting Formal language
Functional (mathematics) Assembly language Code Markup language Reflection (mathematics) Multiplication sign Keyboard shortcut Cartesian coordinate system Stack (abstract data type) Variable (mathematics) Hand fan 2 (number) Type theory Category of being Message passing Linker (computing) Personal digital assistant Object (grammar) Extension (kinesiology) Writing Library (computing) Social class
Laptop Complex (psychology) System call Code Multiplication sign Content (media) Menu (computing) Bit Maxima and minima Line (geometry) Mereology Order of magnitude Number Compiler Category of being
System call Run time (program lifecycle phase) Real number Multiplication sign View (database) Object (grammar)
Keyboard shortcut Functional (mathematics) Identifiability Markup language Multiplication sign Reflection (mathematics) View (database) Stack (abstract data type) Content (media) Category of being Type theory Mathematics Film editing Social class Endliche Modelltheorie Extension (kinesiology) Chi-squared distribution
System call Proper map Personal digital assistant Code Keyboard shortcut Object (grammar) Computer Formal language
Run time (program lifecycle phase) Computer file Multiplication sign Image resolution View (database) Zoom lens Computer Computer icon Medical imaging Web service Betti number Energy level Endliche Modelltheorie Compilation album Form (programming) Default (computer science) Touchscreen Block (periodic table) Keyboard shortcut Sampling (statistics) Data storage device Bit Cartesian coordinate system Measurement Type theory Digital photography Process (computing) Personal digital assistant Blog Musical ensemble Freeware
Type theory Goodness of fit Energy level Musical ensemble
do we start okay so we'll do a quick talk about why and all in cement forms compiled some R into il it's actually very similar to the tour that Andre I did earlier this morning where she transpile typescript into il will use you a very very similar pipeline very similar account concept but it's it's it's in in the context of compiling exam or exam alpha we will come back to that in into a year we could we but but also this concept could be used to compile any resource that is that needs to be interpreted its runtime I'm doing this tour as well because that's one of the black box of some rain forms for people no oh this works very very very few people know or to contribute to this poem and we're just scratching the surface but that will explain you how it works so I'm Stefan I work in design
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 life's part 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 giddap so I'm by cynic that I work on examine from since 13 I actually am I'm at Microsoft for the past two and here when the marine was acquired by Microsoft so some informs mechanism isn't that
correct me so it's fine gerrant 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 the application will be native on that application on on that on that platform over here you see iOS Android and it might still be wp7 or it could be it could be u WP I don't remember which at which time we took this this picture so those are those were the main targets for example phone at this time we we support deploying examine from vacation to iOS Android Mac OS uwp do WPF gtk Tizen view it at CES so the one you saw earlier and probably still a few others so at examining we maintain the back end for iOS phone do it for u WP for Mac all all of the other backends WPF Tizen gtk are contributed by the community so Titan 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 brand application you know on your dishwasher it will be a Tizen one it also Co Tizen also support some some wearable devices so this is general informs who is using the rain falls great yeah but I know I know those guys okay so in so examine forms if you see this all of those controls are native to the platform so this is this this is a this is an iOS map this is a big map and this is a Google map but but the code that run that is exactly the same everything is native at the time at rendering and we create the UI either in c-sharp in F sharp or in exam or what what interested us at this time is examined sorry informs also open source it also Don get up so it's open its open source almost since I think we open source it a bit before being acquired by by Microsoft so it's 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 create it happens on get up you do get a bad rest a bit later so
this is a very simple example file with not familiar with examiner no ok so example is just a descriptive language it's not a programming language is just a descriptive language that can create object and assign properties so there is no conditionals there is it's not it's not Turing complete language it's just a decorative language and in this case we just create it it's a it's a sub set of XML I mean it's XML it's example compliant so examiner 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 example when see in the when you see this basically you've seen most of what summaries so it's just quite simple what we used to do on examine forms is taking disks and 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 nestea 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 bindings you could write the equivalent of C shop 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 on real devices are quite diverse you have to probably the ein that the guys were here having in there and those are Samsung those are LG but but there is just a full full set of devices in Android that takes something like sixty percent of the market that are low-end devices something that costs less than hundred bucks all that they've been bought more than three years ago and those one single code or very few memory and when you start doing passing of big files on those using reflection on those creating tons of object because you need interview you need object and then garbage collecting them you end up with quite bad performances meaning that for large for for large summer file turning that general file into an object tree could take a few tens of millisecond like 60 or 70 millisecond just to interpret the input and having an object tree which is not yet at this time render on screen so that seventy miss again that all sixty or independent on the dependent realize that were just lost on which that that was not come not compressible time yeah so the main the main reason for that is the the the main program for that the passing at runtime annotation is in reflection its 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 was of the views you would in in in another application that's not a marine forms you would write it in 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 computation so we could technically it's not everything that we know that that we know at runtime is also known at compilation time so why not keep the capability of writing exam advice because summer is a great way to describe UI why not turn the keep this capability but turn that into something that's it's actually compiled and as fast as if you have described your application using c-sharp C++ objective-c or whatever and we actually compiled into the assembly so we we we can do that and that that that's an advice that you you have to use for all of your mobile mobile application if you ever withdrawals if you can do something at compile time instead of at runtime you have to do it if you have an image and that time H 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 the resizing the image at the time of rendering if you can or if you know the size it could be rendered at resize it before because everything that is 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 if you have top-up 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 in the 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 to target the the big market fold for the mobile application right now the market for expansion the market the people that need applications is it it's Africa its Asia its its and and if you if you go there you you don't you don't feel developers with the same privilege that we have over in Europe in the US and you don't run that they don't really run with the same constraint so so we we need to think about the performance we need we need to test or 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 do we achieve that
compiling summer into il so we have that example that's exactly the same as before and we passed that to an ast and ast is 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 exactly the same password as the one we used to use at runtime is a marine forms its policies to - - nasty and then we on est we run a
few we run a few visit or visit of Vista so so we implement a visitor pattern and we go or we go on all nodes and do some stuff if you for working on trees like this on EST this o button is is-7 some a really good one because you can walk the tree multiple time without modifying it and so we we have everything in node tree it's a nine node and we have some visitor that that's implemented that that implement the node visitor so the most important one in this case because
I told you examine 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 the content page create a stack layout create the label create the object that will be said create 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 layer to the label and setting the content of the content page to the stack layout and we do that using
minoxidil Mosul is an awesome library that generate and generate and an inspect assemblies so it's used for example Alexandrian we use it for the linker the Rinker 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 come 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 back when you when you write code you depend on them as correlate but if you ride a seashore application and you don't use every single function of that Hammarskjold so you don't have to ship it so CC does that the city city has been around since 2004 and it's done by by our bio fan G big G be yeah if he was going was living in France so he was he was coming to Foss them every year Burton time or I move to Seattle so do we do it so I told you that we
just right we were generating iron this is GI l we generate for the example the example I will shown you so this is this is the il this is the equivalent decompile she shot you know she shop 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 stag layout and that and we store every single of them in a variable binding layout stack LaHood we do that what time is it okay and then we set the
properties exactly with the d IL we so this is the code we generate from our example to our compiler so and this is quite equivalent to the C shop so we set the text as the past property of the binding we said we said the text to the past property of the binding it 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 we are quite high because there are some other vehicle that generates stuff those are for the ability of names for the ability of names copying so you can do fine name mentioning stay still and so on so it's it's a bit more complicated than just it but this is this is the this is the gesture waitis it it's the minimum requirement and then yeah we 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
examine faster than the equivalent see shop so examine is slightly less verbose than see shop so if you have to write the same code in c-sharp that you would write in example you would have three to five time more see shop 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 not done usually in C shop so this is this is a run that just that I just did this morning so my laptop was on the poor reserve so which wasn't so those number are the order of magnitude is right the number are not are not describing the reality but basically the example C for 1200 line of examiner took three time 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 Roslin we are on the same order of magnitude ad as the the Oldman occupier I think I've missed something
okay so the runtime performance is totally worth it we are inflating the view real fast most of the time we inflate the view so we turn the exam er not the example because example isn't ship anymore but we just construct the object in a few milliseconds we also I haven't shown 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 back by doing a compiled binding if you know what a binding is it's a way to link between your view when your view model and most of the time we do that by reflection and by connecting via reflection to identify property change but if you that 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 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 that's the case in most languages because they are they are syntactic sure they are convenient for the photo developer but they are not know to be fast but if you manage to keep the syntax of the binding and turn that into actual actual code that computation you get the same performance that if you were observing the object yourself so if you want to
know more or contribute to the rain form it's on get up its armor in the slash sorry inform that's it
do you have any question [Music] now depending on device but if you know do it if you don't it's pretty Betty I'm edge is what was just an example you can you could compile if you have huge JSON file that you ship just your application you can think of a way to pre-process them because those are stuff that are expensive to process at runtime and image was what was one was one of the what's 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 ten most known size at least four icons and some of the image not the a measure take full screen but most of the time those those one you don't ship them with the application nine major take fullscreen except if it's if it's a background you don't ship it it's downloaded from from a web service installed then 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 singly I made on a page but if you have a UI that you're fully drawn with some images because you have a button you have a pen you have and if if you if you don't pre process those image you will pay the price and if it if the the customer experience matters to you and it should so you should you should really murder what takes time in your application and see where you can that's free time that's really free what a question in the in this case in the case of this sample you 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 - for example computer to be able to compile bindings with us in your example to tell this is the expected type for the view model and so we know that the it was way out of this 30 minute introduction to compile example zoom but we have some block from David about it so you you just tag it at the eye level and you tag it at the ListView 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 is actually shipped for the past two and a half year 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 [Applause]
oh yeah I'm types of let's get back to you but where is the next speaker hey are you Michaela yeah hi Gail I'm Steve nice to meet you [Applause] [Music] it's fixed [Music] do we have a level somewhere that we can see if it's good or not or okay hopefully it's okay okay I'm trying to have to touch anything all right okay it's fine hopefully it'll be get off my iPhone as well ooh busy okay


  341 ms - page object


AV-Portal 3.21.3 (19e43a18c8aa08bcbdf3e35b975c18acb737c630)