Building a functional, intuitive and visually appealing user interface is vital to the success of an app. It also involving a time-consuming design and coding effort that can be further exacerbated without the tools that enable visual design. Using a WISYWIG (What You See Is What You Get) view model with drag-and-drop components to design app interfaces cuts app development time significantly, and also enables efficient UI testing, especially when the app is targeting several platforms.
How does Delphi measure up against other frameworks used for building visually stunning apps for Windows desktop applications? Embarcadero commissioned a whitepaper investigate the performance differences between Delphi, WPF .NET Framework, and Electron using a simple app as a benchmark. Three volunteer Delphi Most Valuable Professionals (MVPs), one expert freelance WPF developer, and one expert Electron freelance developer recreated the benchmark application – a Windows 10 Calculator clone – in each framework.
The frameworks were evaluated based on a set of metrics measuring performance in terms of developer productivity, business functionality, framework application flexibility, and end-product performance. In this blog post we are going to explore the “UI Design Approach” metric the whitepaper cited.
Table of Contents
Comparing UI Design Approaches
Does the framework’s IDE allow for graphical/visual application creation and provide a WYSIWYG view model? IDEs that support development through “drag and drop” components or other visual methods allow users to engage different methods of thought and creativity as they work. Visual creation through WYSIWYG editors preclude businesses from needing every version of physical hardware to view platform-native styling.
Although the Delphi applications were not the shortest programs of the comparison, the lines of code developers wrote for the GUI comprised only 18% of their typed total. The RAD Studio IDE allowed the developers to rapidly design and initialize the GUI using standard control components in the drag-and-drop Form Designer and property-modification Object Inspector, minimizing the developers’ need to initialize the calculator interface in code. In comparison, 39% of the Electron application’s developer-written code forms the GUI and 49% of the WPF developer’s code supports the calculator GUI.
Microsoft’s Visual Studio does support drag-and-drop controls and visual GUI development for WPF, but the framework requires more XAML code to make the GUI work than Delphi, slowing the design process. Another factor influencing development time is the amount of code required to connect the calculator logic to the user interface. Requiring 680 total lines of code between three files and in two languages, it isn’t a surprise that the WPF application ranked last.
Clearly, Delphi’s visual-development interface and native control libraries are a substantial asset to initial development productivity, allowing the work to occur more quickly or a more -sophisticated GUI to be developed in the same amount of time.
Let’s take a look at each framework separately.
Delphi
Delphi’s RAD Studio IDE delivers a What-You-See-Is-What-You-Get (WYSIWYG) design experience with drag-and-drop components for visual GUI design. The designed GUI is viewed using native Android/iOS/Windows/macOS styling or custom styles and in a simulated mobile device of varying screen sizes. Components can also be resized and have their properties adjusted in the Object Inspector without touching code, allowing rapid prototyping through visual development. Delphi also offers the ability for a developer to edit the UI using a simple YAML style language definition. Take a deeper dive into the Delphi UI designer tool with this video. The screenshot below shows the Delphi Calculator visual code designer preview during the build. Total Delphi build time was around 4 1/2 hours.
WPF .NET Framework
WPF in Visual Studio offers a WYSIWYG design experience, immediately reflecting code changes in the GUI representation, and drag-and-drop visual design. Developers can also change object properties through context menus apart from the code. WPF also offers the ability to edit the UI via an XML-like language definition called XAML. The screenshot below shows the WPF .NET Framework Calculator XAML code preview during the build. A visual designer was not used during the build though third party designers may exist. Total WPF .NET Framework build time was around 30 hours.
Find out whats new in .NET 6 by checking out this article on the .NET Framework.
Electron
Electron lacks a native IDE but can be developed using text editors and command line tools. Electron doesn’t include a WYSIWYG design experience or drag-and-drop components by default. HTML5 and CSS styling help create the UI. Unless the developer chooses an IDE like Visual Studio. Electron applications must be compiled and run to view the project’s GUI. The screenshot below shows the Electron Calculator code preview during the build. There was no visual UI designer used during the build though visual designers may exist for HTML. Total Electron build time was around 10 hours.
Explore all the metrics in the “Discovering The Best Developer Framework Through Benchmarking” whitepaper:
Download the Free Delphi vs. WPF vs. Electron for Windows Desktops Whitepaper
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today
Free Delphi Community Edition Free C++Builder Community Edition
