Here are the various tools developers have to create user-centric front-end UIs (User Interfaces)
Overview
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
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
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)
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:
- UI Design Systems
- Text Editors
- Markdown text for GitHub from HTML
- gRPC (g___ Remote Procedure Call)
- Front-end UI creation options
- Docusaurus static website generator
- Static websites
- JAM Stack Website Project Plan
- Jekyll Site Development
- Website styles
- Website Styling
-
Protractor to automate testing of Angular and other web pages
- Email from website
- Search within Hyde format Jekyll websites
- Data Visualization using Tableau