Small Bytes: Declarative UI (Premium)
- Paul Thurrott
- Mar 28, 2023
-
12
Declarative UI is at least as old as the World Wide Web, but it’s become hip again in the modern mobile/web era thanks to React Native and Flutter, and, even more recently, Swift UI and Jetpack Compose. I was an early web developer, but I wasn’t aware of this term until I belated tackled XAML for the Windows Presentation Foundation (WPF) and Universal Windows Platform (UWP) versions of my .NETPad application a few years back.
Declarative UI is best understood by comparing it to what came before: imperative UI. With declarative UI, software code is used to describe what it is trying to accomplish without describing how it will do so. With imperative UI, software code is used to describe how the resulting UI is constructed.
An example will help, and when it comes to declarative UI, the most obvious and classic example is HTML (the hypertext markup language), an XML-based markup language that’s used to describe the structure of a web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML File</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="index.js"></script>
</body>
</html>
What HTML doesn’t do is describe how to render that page. That’s the job of a web renderer, usually found in a web browser, and the results can be customized using CSS (cascading style sheets) and, programmatically, using JavaScript.
If you read my Programming Windows series or the resulting book Windows Everywhere, you may recall that Microsoft originally intended to bring HTML, CSS, and JavaScript to the Windows user interface in the late 1990s but that an internal political battle resulted in a sudden retreat from that plan. After that, Microsoft sought to embrace and extend the open web technologies of the day by creating technically superior but proprietary and Windows-only solutions like XAML (a replacement for HTML/CSS) and C# (a replacement for Java and JavaScript).
The first implementation of XAML appeared alongside WPF, previously codenamed Avalon. With WPF, developers could describe the structure of an application’s UI using XAML code and then create event handlers in a separate C# file. This paradigm continued forward in future Microsoft frameworks like UWP, the Windows App SDK, and .NET MAUI.
As Microsoft describes it, “you can create visible UI elements in the declarative XAML markup, and then separate the UI definition from the run-time logic by using code-behind files [usually C#] that are joined to the markup through partial class definitions. XAML enables a workflow where separate parties can work on the UI and the logic of an app, potentially using different tools.”
Flash forward 20 years and the Flutter cross-platform UI toolkit uses declarative UI techniques to describe the user interface of an application and the programming logic that can ...
Gain unlimited access to Premium articles.
With technology shaping our everyday lives, how could we not dig deeper?
Thurrott Premium delivers an honest and thorough perspective about the technologies we use and rely on everyday. Discover deeper content as a Premium member.