What is Ammy?
Ammy is a JSON-like UI language for developing XAML based applications. It has a concise, well structured syntax that is both easy to read and write. During compilation Ammy files are translated to XAML and compiled as normal XAML controls.
The “Hello, World!” example in Ammy looks something like this:
Window "MyApp.MainWindow" { TextBlock { "Hello, World!" } }
Ammy’s MSBuild task will generate a XAML file with “.g.xaml” extension alongside the original one with this content:
<Window x:Class="MyApp.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Ammy.Register="/MyApp;component/MainWindow.g.xaml"> <TextBlock>Hello, World!</TextBlock> </Window>
Notice the Register attached property, it will be explained shortly.
Why should I use Ammy?
XAML is a great language, well thought-out and powerful. Nevertheless, it can be frustrating to write lots of XAML in order to achieve a smallest change. Styles are not composable, templates are big and complex. This means poor code reuse and long XAML files. Ammy offers mixins to solve this issue. Mixin is like a function, that is defined once and used as much as needed. For example:
mixin TwoRows(height1, height2) for Grid { RowDefinitions: [ RowDefinition { Height: $height1 } RowDefinition { Height: $height2 } ] } Grid { #TwoRows(35, "*") }
As you can see, mixins can take parameters and output content, either properties, nodes or both. This is a really powerful feature that can greatly improve code reuse and overall application architecture.
Ammy also has variables, used like this:
$normalFontColor="#3f3f3f" TextBlock { Foreground: $normalFontColor }
Once defined globally, variables can be used anywhere in a program. By the way, if a variable is defined inside a node and not in a global scope, then it will only be seen inside that node. Same can be said about mixins.
No recompilation needed!
Perhaps the most important Ammy’s feature is an ability to develop UI without recompilation. In fact, Register property we saw earlier is used to register your page to become updatable.
Run your application and while it is running, make modifications to user interface code, save file and see application updated! All of the state is preserved, and only parts of the UI that were actually changed in code are updated in the app.
Imagine, you are developing some complex settings page. From you main application you click “Settings” button, then you click some tab header to switch to your currently developed control. Normally you would have to repeat these steps every time you changed something and restarted your application, but with Ammy you just hit save, and observe updated UI.
Another, perhaps better example would be a twitter application. While designing a tweet look, usually you don’t want to reload whole backend just to see if increased font size looks better or not. Live user interface development is a great way to diminish development time. Things that previously took hours now take minutes.
Demonstation
This video shows development of a simple data entry application using Ammy framework. Note how structure and presentation are separated with the help of mixins.
How to install?
To use Ammy you need Ammy Visual Studio Extension and Ammy NuGet package.
For more information, please refer to www.ammyui.com/documentation/quickstart
Project website: www.ammyui.com
21 comments. Leave new
This reminds me a lot of Qt’s QML dialect (see http://doc.qt.io/qt-5/qtquick-demos-calqlatr-example.html). Was it a source of inspiration?
While researching for existing UI languages QML stood out as one of the nicest. At least it was close to what I thought UI language should be. So, I was partially inspired by it, yes.
Thank you for this great christmas gift (nuget dates the first release to December 22nd). It’s awesome. I just tried it a bit and love it already.
Will there be or is there a transpiler, which converts existing Xaml files into Ammy files?
I have a hobby project and it is not really big, but I am working alone on it and converting it all by myself would cost much time.
Thank you for kind words, it makes me happy to know someone else finds Ammy useful!
As for transpiler, there is actually a small prototype. It’s very basic right now, for example it doesn’t know about special naming syntax or namespaces. It would translate “x:Key” as a “x__Key” property and so on. You should also remove “xmlns” attribute from root node.
I’ve uploaded it here: http://www.ammyui.com/XamlToAmmy.zip
Also created a GitHub repository: https://github.com/AmmyUI/XamlToAmmy (code is not what you would call production ready, sorry for that)
By the way, if you have any questions or suggestions, feel free to join Gitter group, send an email or add me on Telegram (nickname: ammyui)
Have you seen new cross platform XAML framework https://github.com/avaloniaUI/Avalonia/ (Desktop and mobile XAML for Windows, Mac, Linux, Andriod, IOS)
would you be interested in helping us bring Ammy to Avalonia
Please come over to our gitter chat http://gitter.im/avaloniaui/avalonia
we would love to chat to you about what we would need to do 🙂
Great work
Dan
Already there!
This is beautiful!
A stroke of genius!
Never thought I would hear something like this from Miguel de Icaza 🙂 Thanks, it really means a lot!
Wow, when I saw this on MSDN the other day, I thought it was a way to bring Xaml into a web page (still having to use JS/HTML5), so I totally discarded it, LOL. Looks like I was wrong. This looks very promising. Are you still able to use the Properties window to visually design properties from there as well?
Also, the music in your video is 1000% ON POINT!!!
Thanks!
Properties window is unfortunately unavailable with Ammy, at least to my understanding. But since we rely entirely on live development it doesn’t make much sense to use Properties anymore. My thinking is that it would be better to improve IDE support, like inline color pickers and stuff.
I guess I need to learn a little more about live development. 🙂 The value of using the Properties window is that you can get those editors and functionality (pickers, etc) right out of the box. You can also create your own editors for different properties, which is extremely powerful. Xaml of course already leverages this which is part of the reason it is so great.
Granted, this tech is fast approaching a decade in age and is well overdue for an overhaul, so I am for anything that can capture its spirit and make it better.
Also, another consideration here… being able to visually design files through controls, etc. is important from a project’s total-cost-of-ownership perspective. Being able modify an application through a visual editor rather than getting your (or rather the resources you have to hire) hands in code is much cheaper throughout a given lifetime of an application.
Everyone seems to lose sight that Xaml can be used to describe much more than just user interfaces. If you are able to provide a unique way of editing files with cool designer controls and even make it accessible outside of the IDE (think: devops being able to edit/design a Xaml-powered configuration file for an application), then you will truly be the new king on the block. 🙂
The thing is, XAML designer never worked for me as an actual designing tool. It was good enough as a preview window, but doing anything complex with it was much harder than going into XAML. Sure, in Windows Forms times, when UI was mostly static it was much easier to create a usable visual designer. Time change though, and user interfaces get more complicated. Also, developers are much more inclined to do UI in code, probably thanks to Web influence.
Using Ammy as a general XAML generation tool is mostly possible now, but I’m not sure there is much interest in it. I might be wrong about that.
I love how it reads
Amazing! Especially I love the auto-reload, that feature I miss the most of my Web-development time.
Wish I could use it, but here at work we need to use what Xamarin default is.
So I hope someday Xamarin will make it possible to chose between XAML and/or Ammy (some views XAML, and other Ammy).
Just like in Rails you can chose between HAML & HTML-ERB files.
Thank you!
We are looking into supporting Xamarin Forms at least. So it’s totally possible, that someday you will be able to use Ammy with Xamarin.
When you open a JSON file, Visual Studio can collapse/expand the visualization of the nodes, using { and }. Is it possibile to apply this kind of feature for .ammy files?
Thanks!
Will add this in near future!
That’s absolutely greatest thing since WPF! It reminds me an article about JAML https://habrahabr.ru/post/165943 (in Russian) and I’m glad to see that the idea finally got a proper implementation and support.
I’m a game developer and we’re using NoesisGUI http://noesisengine.com for UI in our games – it’s a cross-platform vector UI library based on XAML, and it’s a 99.9% port of WPF API. The performance is outstanding and developers are improving it quickly, fixing and implementing everything we report.
Also currently we’re making a game with full-fledged modding support – basically the game itself is done as the mod for our custom engine http://wiki.atomictorch.com/Renkei_Engine wrapped into scripting API (C# with Roslyn compiler). It also includes UI (XAML, MVVM pattern, also hot-reloading is implemented in our engine for XAML but in a different way (yet) – with losing of the current state). So our modders will be able to mod the UI (we already started the closed alpha and it works pretty well).
I would love to use Ammy instead of XAML as most of the modders are not familar with XAML and its heavy syntax might spook them even if we make good tutorials. But there are some potential issues I see now:
1. What about support for Microsoft Blend? As you told in the comments above, modern applications UI is very dynamic (and in games it’s even more so), and it’s quite usual to define animations in XAML (with help of Microsoft Blend).
2. What about the refactoring support – such as “extract style”, “rename style” and even simple “reformat”? I really would miss that as it works very well with ReSharper and helps organizing the code quickly.
3. As I’ve noticed, that typing assist it not good yet and IntelliSense simply don’t know about many things yet. Do you have a roadmap regarding improvements in this area (and other areas as well)?
4. What about the licensing in case of moddable games? We could buy a site license but our modders expect to use any modding tools for free, and they will need Ammy plugin for Visual Studio. The mods should be non-commercial (we have a special license for that case) but the game itself is a commercial product.
Regards!
Thanks! I actually saw Noesis few months ago, looks really impressive!
1. To be honest, last time I’ve used Blend was something like 5-6 years ago. It was good enough, but I still had that “proper markup” vs “designer generated code” feeling. Does it really provide any benefits? I mean, it seems to me like mixins should make creating animations simple enough. But more to the point, since you have actual experience with Blend, what do you think Ammy is lacking in terms of supporting Blend? We would gladly look into it.
2. Refactoring is definitely coming soon. It’s one feature that a lot of people ask about, so it’s pretty high priority.
3. Yeah, intellisense is still being ironed out, but it’s more of an iterative process. It is difficult to solve all intellisense issues once and for all, since there are a lot of places where something can go wrong. Anyway, completion improves constantly and I hope that in a few months it would be considered stable.
4. Modders will not require paid license, because they are developing non-commercial projects.
1. Blend is integrated with Visual Studio now, but I still use it separately for some non-migrated functionality. For example, when I need to create some complex animations – it’s very hard to define some storyboards by hand, but super easy with Blend – you don’t need to think how it will be encoded, you simply click on timeline, change required properties, adjust easing functions, and play right in the blend. See https://gist.github.com/aienabled/8dce3467cf97ccd00b48e5a0e939953b from one of our previous games. In blend it’s much easier to create, understand and adjust storyboards.
Other use case of Blend (which is available in VS2015 as well) is navigating into the template or style of the control (even if it’s not references as a resource of the control – so IDE knows where exactly that style/template you see is coming from), wrapping controls into container, etc.
Also I will miss the designer feature as it allows to simply select a control in the designer and navigate to the part of the XAML file where it’s defined (or navigate to style/template/user control source).
2. Most of all, we need reformat feature, as manual formatting is a monkey-job! And we need to have option to use various braces style (not only “Egyptian” K&R style). I will report an issue in GitHub to track this.
3. Glad to hear the work is going well!
4. Thanks! Modders will definitely appreciate this (and Ammy!) if we switch to Ammy.