Front-end (UI creation tools)

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

Overview

Modes of interaction
Programming Languages
GUI libraries
Walmart Electrode
There are a lot of choices
App User Capabilities
What Do We Want?
UI Styling Tools
Mobile Dev Platforms
JavaScript UI Libraries
Microsoft
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.

Modes of interaction

CLI (Command-line Interface)
GUI (Graphics User Interface) with a mouse and keyboard
API (Application Programming Inteface) for other programs to access
Voice command (using Alexa, Siri)
(Human-language) sentences typed (or dictated), made possible by AI such as ChatGPT
Hand gestures

Programming Languages

Here are the technologies over time:

Java
PHP (Wordpress)
.NET C# (MAUI)
Python (Django)

GUI libraries

ReactJs is a library that uses JSX, a syntax extension for JavaScript. So it is considered more scalable and suitable for complex enterprise-level applications3.
Vuejs is a full-fledged framework. It uses a template-based syntax more like HTML. So Vue is considered more flexible and easier to learn, especially for developers with HTML/CSS background.
Angular used by Microsoft is a full-featured framework with a steep learning curve
Svelte
Ember

For development of apps on mobile:

React Native is for mobile devices
Vue has NativeScript for mobile development1.

Walmart Electrode

3,000 engineers within WalmartLabs operate the walmart.com website for the giant retailer.

Their software has to be built for scale – 15 million items visited by 80 million monthly visitors.

They open-sourced several of their technologies:

At github.com/electrode-io, Electrode is a front-end React-based application platform consisting of boilerplate code to build universal React Node.Js apps (for web and mobile) that developers can add more functionality.
At https://www.electrode.io/site/native.html is a mobile platform to simplify development and integration of React Native UI components into mobile applications. Select the features and components you want to add to your mobile application and Electrode Native will package them for you—in a single library that contains everything you need—making it easy to integrate into your mobile application without altering its code structure.
- Apurv Pandey
At github.com/oneops is their Cloud And Application Lifecycle Management Platform with a CLI. It makes use of Couchbase, Docker, ElasticSearch.

There are a lot of choices

A. Mobile capability with HTTPS?

B. To style an intuitive and engaging user experience: design/styling tools to design how screens look, how screens interact with each other.

D. Hosting for scability: Vercel, Google Firebase (with Auth)

E. To reduce effort, NodeJs JavaScript UI Libraries such as Svelt, React, Vue, etc.

F. Authentication (cloud) system: OAuth2, JWT, OpenID Connect to Okta, etc. with MFA.

G. Data structure definition: npm Prisma cross-language toolkit to design data model schemas. Supabase.io

for User Metadata Management: Sign-up, Password/auth reset, Delete account, etc.
for history: https://css-tricks.com/using-the-html5-history-api/

H. CSS: Tailwind, icons

I. Database selection: in SQL or Graph database? If SQL, PostgSQL, MySQL, etc.? If document, MongoDB? If Graph, etc.

QUESTION: Would you pick relational or nonrelational?

J. Search: ElasticSearch, Algolia, ChatGPT?

K. Social: Invite Friends, links to and publish to Instagram/Threads, Facebook, LinkedIn, Reddit, etc.

L. Storefront pages to purchase.

M. Payments: Stripe, PayPal for users to make purchases and thus monitize the website.

N. Functional testing

O. Performance testing

App User Capabilities

For example, a training webapp would include:

Goals & Progress tracking

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

UI Styling Tools

Figma cloud-based
Sketch macOS-centric for SVG as well as traditional png, etc.
Adobe XD

Mobile Dev Platforms

The younger the generation of users, the more they use mobile.

Microsoft .NET MAUI (Xamarin) C# on Studio IDE My notes on Xamarin
Apple’s Swift on XCode IDE
Google Android Java on Eclipse IDE
Google’s Flutter only builds Android native and Web-based apps.
Facebook’s React Native JavaScript

JavaScript UI Libraries

Svelt has gained popularity quickly
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.
ReactJs
Angular is used by Microsoft

Microsoft

https://www.youtube.com/watch?v=W_35cOyBexA&t=13m”>Azure Static Web Apps</a>

Enterprise-grade Reference Architecture for JavaScript with 8 core scenarios real-world E2E sample

https://learn.microsoft.com/en-us/users/juliamuiruri/collections/mo5qixg827ppy6?wt.mc_id=1reg_S-1173_webpage_reactor&WT.mc_id=academic-98351-juliamuiruri

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