From d5fe06630ebe8db72d237055a7441401acbdb936 Mon Sep 17 00:00:00 2001 From: David Oliver Date: Wed, 5 Sep 2018 14:15:34 -0400 Subject: [PATCH 001/129] Blog post - Generating code from XAML --- .../201809-UnoUnderTheHoodXamlGeneration.md | 84 ++++++++++++++++++ .../Assets/xaml-code-generation-location.png | Bin 0 -> 26355 bytes 2 files changed, 84 insertions(+) create mode 100644 doc/blog/201809-UnoUnderTheHoodXamlGeneration.md create mode 100644 doc/blog/Assets/xaml-code-generation-location.png diff --git a/doc/blog/201809-UnoUnderTheHoodXamlGeneration.md b/doc/blog/201809-UnoUnderTheHoodXamlGeneration.md new file mode 100644 index 000000000000..c364a67ef8f2 --- /dev/null +++ b/doc/blog/201809-UnoUnderTheHoodXamlGeneration.md @@ -0,0 +1,84 @@ +# Talkin' 'bout my generation: How the Uno Platform generates code, part 1 + +In previous articles we've covered how the [Uno Platform](https://platform.uno/) takes a visual tree defined in the [XAML](https://docs.microsoft.com/en-us/windows/uwp/xaml-platform/xaml-overview) markup language and creates it on iOS, Android, and WebAssembly. In this article I want to dive into a key intermediate step: how the XAML is parsed and mapped to generated C# code. In part 2, we'll look at a few other ways in which Uno leverages code generation to make the wheels turn. + +## Parsing XAML + +XAML stands for eXtensible Application Markup Language. It's an XML-based syntax. Although it can be used to describe pretty much anything, it's geared toward describing the structure of an application. It was first used in [Windows Presentation Foundation](https://en.wikipedia.org/wiki/Windows_Presentation_Foundation), and since then has been used (with minor syntactic differences) in a number of contexts, including Silverlight (RIP), WinRT, Xamarin Forms, and the Universal Windows Platform. + +XAML hits a sweet spot: it's human readable, expressive, and sufficiently structured to support design tools like [Blend](https://docs.microsoft.com/en-us/visualstudio/designers/creating-a-ui-by-using-blend-for-visual-studio?view=vs-2017) and [XAML Designer](https://docs.microsoft.com/en-us/visualstudio/designers/creating-a-ui-by-using-xaml-designer-in-visual-studio?view=vs-2017). One nice feature is that it can be seamlessly intermingled with C# via [code-behind](https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanced/code-behind-and-xaml-in-wpf) files. + +To tap into that power, Uno needs to be able to read a XAML file and convert it into compileable C# code. + +The first step is to parse the file into a Xaml object tree, using the [System.Xaml](https://docs.microsoft.com/en-us/dotnet/api/system.xaml?view=netframework-4.7.2) namespace. + +Next, the Xaml object tree is processed into a C# class definition. The bulk of the heavy lifting is done in the mammoth [XamlFileGenerator](https://github.com/nventive/Uno/blob/master/src/SourceGenerators/Uno.UI.SourceGenerators/XamlGenerator/XamlFileGenerator.cs) class. We lean on the [Microsoft.CodeAnalysis API](https://github.com/dotnet/roslyn) here (aka 'Roslyn') to match types used in XAML to types defined in the app assembly or its dependencies. The output is saved to a generated file. + +All this happens behind the scenes whenever you build an Uno head. + +## The end result + +Let's look at a concrete example. This is part of the markup we put in `MainPage.xaml` in a previous article: + +```` xml + + +