Front-end (UI creation tools)

Here are the various tools developers have to create user-centric front-end UIs (User Interfaces)

Overview

What Do We Want?
Apple’s Swift on XCode
Facebook React Native
Vue
Google’s Flutter
Angular
Microsoft’s Xamarin
Microsoft’s MAUI
Photino
More on front-end styling

There are many options

NOTE: Content here are my personal opinions, and not intended to represent any employer (past or present). “PROTIP:” here highlight information I haven’t seen elsewhere on the internet because it is hard-won, little-know but significant facts based on my personal research and experience.

What Do We Want?

As a developer (development team), I want:

Great-looking design templates so I don’t have to start from scratch
Drag-and-drop pre-built UI components that fits within an overall smart Design System
An IDE with smart autocompletion and connection to databases
Prototyping
One click deployment - automated builds that end up displaying changes made in the IDE
Automatic scalability and security built in

PROTIP: I think the latest and best approach to developing a full-featured website is …

Figma

Apple’s Swift on XCode

Facebook React Native

Vue

My notes on Vue.Js

Vue.js was open-sourced in 2012 by a single individual. He an American of Chinese descent. Perhaps that has something to do with it being very popular in mainland China. But world-wide, Vue is neck-and-neck popularity with React.

Google’s Flutter

Only builds Android native and Web-based apps.

Angular

used by Microsoft

Microsoft’s Xamarin

My notes on Xamarin

Microsoft has devoted much resources to Xamarin.

It requires a license of Visual Studio.

Microsoft’s MAUI

In July 2021, Microsoft announced MAUI = (Multi-platform App UI) with .NET 6. MAUI – at https://dot.net/maui – is a replacement for Xamarin.Forms Toolkits </a>. MAUI is a cross-platform framework for using C#, XAML, and PowerShell to develop MacOS, Tizen and Windows desktop apps in addition as well as iOS and Android mobile apps, for a write-once run-anywhere developer experience, but with the option to access native aspects of each environment.

Although supported by the Linux Foundation, MAUI except for the .NET TV framework runs on Samsung smart TVs and Google WearOS wearables. [Wikipedia]

Visual Studio Projects:

Xamarin.Essentials provides developers with cross-platform APIs for mobile apps.
Xamarin Community Toolkit includes commonly found behaviors, converters, effects.
MVVM utilities and controls including the CameraView, AvatarView, and TabView.

Like Xamarin, MAUI requires a paid Visual Studio IDE license. Such a requirement may be a hurdle for some developers.

The Pro edition Visual Studio for Mac IDE is priced at $45/month, but allows a $50 USD credit on Azure.
The Enterprise edition is $250/month, but allows a $150 USD credit on Azure and enables Test Plan access on Azure DevOps.

PROTIP: Visual Studio for Mac uses a different .NET 6.0 SDK installer than the Visual Studio 2022 for Mac (v17.0 latest preview).

Project templates:

.NET MAUI Class Library
.NET MAUI App
.NET MAUI Blazer (Hybrid) App

Build web apps with Razor Pages in ASP.NET Core.

Documentation: https://docs.microsoft.com/en-us/dotnet/maui/

James Montemagno has been working on Xamarin over 10 years. Among his VIDEOS is the 4 hour “Learn .NET MAUI - Full Course for Beginners | Build cross-platform apps in C#

QUESTION: Is there a “Kitchen Sink” app that shows how the various code pieces work together on different platforms?

https://docs.microsoft.com/en-us/learn/paths/build-apps-with-dotnet-maui/ “Build mobile and desktop apps with .NET MAUI” (5 hr 45 min)

https://docs.microsoft.com/en-us/learn/dotnet-maui/customize-xaml-pages-layout/ Customize layout in .NET MAUI XAML pages (1 hr)

Twitch stream

https://blog.jetbrains.com/dotnet/2022/05/25/macos-environment-setup-for-maui-development/

.NET MAUI First Look - What is it, how do we use it, and is it ready by Tim Corey May 23, 2022

Daniel Hindrikes’ YouTube series on .NET MAUI How to use with Mac

dotnet build -t:Run -f net6.0-maccatalyst

Build cross-platform native apps with .NET MAUI and Blazor by dotNET

What are actual macOS desktop apps created using MAUI? Is there a tutorial that shows how to create a full-featured macOS desktop app from beginning to end in Apple Store?

Photino

Photino is offered at tryphotino.io by CODE Magazine with the help of the open-source community. at Github.com/tryphotino.

Photino uses Web UI technology to build native, cross-platform desktop apps that “are lighter than light”. Light weight because the browser control is usually already installed, so we only have to install the wrapper (can be packaged). If .NET 5 is already installed on the OS, it’s really fast.

Photino.Native is compiled for each platform and distributed as a NuGet package at https://www.nuget.org/packages?q=photino

Photino.Native is a C++ (and Objective C) wrapper around the OS’s built-in Chromium or WebKit-based browser control that opens a native window on the desktop with the browser control in it.

On Windows this means the WebView2 control – a browser control for native applications based on Chromium Edge.
On Mac, this means WKWebView – a WebKit browser control for native applications based on Safari.
On Linux, this means WebKitGTK+2 – a browser control for native applications based on WebKit directly.

More on front-end styling

This is one of several topics:

Wilson Mar