Skip to content


ThomasOrtner edited this page Feb 2, 2018 · 5 revisions

This page is a central hub linking to all information necessary to program within Aardvark.Media providing which provides convenient acces to the Aardvark platform, including language resources, tutorials, and installation guides.

  • What is aardvark media?
    • Aardvark.Media is a functional programming interface to build applications without additional complexity (boilerplate) for handling change, i.e. synchronizing data and it's visual representations, while providing high performance adaptive 3D rendering (via Aardvark.Rendering) and incremental HTML generation (similar to react).
  • What does it do?
    • It tames complexity by enforcing the unidirectional data flow paradigm on programmers. This architecture known as the ELM architecture (model/update/view) allowing them to build large complex apps from smaller apps through composition, while each app can be tested independently. Several optimization mechanisms in the background are employed to let programmers focus on actual functionality instead of performance details leading to cleaner, conciser, more robust and scalable code.
    • Aardvark.Media offers a seamless combination of HTML GUI elements and 3D real time rendering nodes which are inherently consistent with the data model. Changes to the data result in incremental changes of the DOM tree and the 3D scene graph, i.e. only relevant parts are updated.
  • What it doesn't do?
    • It does not redeem programmers from thinking ;) ... but you typically have to reason about a problem once, solve it and it stays that way.
    • It is not a rendering engine offering a complet set of built-in features, such as collision detection, tone mapping, or 3D transform controls. However, we provide a programming environment and paradigm which allows you to build such components in a robust and conscise way helping to enrich the Aardvark ecosystem.

Functional Programming and F#

All components of the Aardvark ecosystem are mainly programmed in F#, a functional programming language. Hence, it is often said one has to 'unlearn' imperative programming styles and object oriented thinking. F# for Fun and Profit gives a great and complete overview of F# and also elaborates on why to use it. This is not about learning a new language, this is about evolving a new way to think, a new way to approach problems, and only ultimately expressing this in a new programming language.

Good starting points are the following two talks functional design principles and a functional approach to domain driven design. After getting an idea about the functional paradigms you can dive more into the syntax and language functions covered in the written series.

For programming web-based GUI elements within the Aardvark platform, it is important to know your way around web technologies, such as, HTML, CSS, SVG, and JavaScript. There is no really useful complete tutorial resource for our needs, so we will explain these parts by example in later sections. For most of our visible UI parts we found Semantic UI very useful, but you could use any other UI library together with Aardvark.Media.

Unidirectional Data Flow

ELM architecture

ELM Architecture

The execution model of every App in Aardvark.Media follows the same pattern of unidirectional data flow, known as the ELM architecture (see ELM). It is most natural to start with the Model, which shall hold our data. The View describes how this data is visualized. In Aardvark.Media this is either a DomNode (part of an HTML page) or a SceneGraph node for 3D real-time rendering. The user can interact with what the view produces, e.g. clicking on a button or picking a 3D object, which in turn can generate actions. These actions strive to change our data, e.g. the color of an object the user selects in a colorpicker. The Update logic specifies how these actions change our data and generate a new model (immutable data). What we call an App is simply a combination of Model-Update-View and its Actions.


ELM Architecture

Apps exist at different granularities. There is an app for a numeric data field while a whole project is also just and app. Larger, more complex apps are simply composed together from smaller apps. It is quite natural that complex model types consist of more primitive model types and ultimately primitive datatypes on the lowest level. In later sections we will see how views, actions and update functions can easily be composed together to build powerful and maintainable apps.

Getting started

If you have not done it already for some other Aardvark tutorial, just perform the following steps.

> git clone
> cd
> build

Then just open src\ with visual studio. The demos discussed in the following chapters Learning Aardvark.Media #1, Learning Aardvark.Media #2, and Learning Aardvark.Media #3 can be found in the ModelUpdateView project. If you want to start your own Aardvark project or Aardvark.Media project just clone our template...

> git clone
> cd template
> build

... and follow the instructions in the command window. Please be sure to push modifications into your own repo ;)

continue with the Learning Aardvark.Media #1

Clone this wiki locally
You can’t perform that action at this time.