DEV Community

Discussion on: Introducing MobileUI

Collapse
 
makhocheung profile image
Mak Ho-Cheung • Edited

Why this framework still uses XML to build UI? Like SwiftUI, Flutter and Jetpack compose, they use DSL to build UI and this is a trend.

Collapse
 
dthommes profile image
Dr. Daniel Thommes • Edited

Yes, we watch the UI-DSL developments and have discussed these trends internally. Our conclusions so far were that XML - although being 22 years old - has several advantages when being used as UI declaration language. Why? Well-designed XML languages (like MobileUI Layouts) are:

  • Great for expressing tree-like structures 🌲🌲🌲 - which is a perfect fit for many UI constructs,
  • Easy to read 😎- even if it's nested more than 3 levels, which happens with UI declaration all the time,
  • Easy to understand 💡- also for non-programmers who have a minimal understanding of markup languages,
  • Concise - think <TextView text="Hello World!"/> and
  • Fast processable 🚀 - no need to compile them, which is essential for fast development iterations (e.g. with MobileUI Live Preview).

On the other hand, we find that XML is not a one-size-fits-all approach. There are cases, where XML just does not fit and produces a lot of verbosity. Examples: XAML Styles and Android Styles 😭. When it comes to styling, our opinion is that DSLs are a better fit. Therefore, we use a well-known and standardized DSL for the latter: CSS.

Also for UI data binding, we use a DSL: MVEL. With the Java-like expression language, you can super-concisely combine XML with Java and Kotlin code.

While we think XML is great for UI trees, we are watching the development of UI-DSLs, waiting for a good to come. With MobileUI's stack, it would technically be possible to bring Jetpack Compose to iOS just like we did it with Android Layouts before. Maybe one day, we will walk that way. But first, we wait until Google and IntelliJ have fixed the Kotlin Compiler so that all Jetpack features are supported 😉.

But be aware! When this happens, your boss might ask you: "What does this code do?" And you would have to explain (Flutter in this case) 😊:

              )
            ],
          )),
        ),
      ),
    );
  }
}  

(see github.com/nisrulz/flutter-example...)

So what do you think? What are the pros of UI-DSLs? What are the cons?