Here are the various tools developers use to create user-centric front-end UIs (User Interfaces)
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.
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)
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
- 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.
- 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.
- Angular is used by Microsoft
https://www.youtube.com/watch?v=W_35cOyBexA&t=13m”>Azure Static Web Apps</a>
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.
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).
- .NET MAUI Class Library
- .NET MAUI App
- .NET MAUI Blazer (Hybrid) App
Build web apps with Razor Pages in ASP.NET Core.
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)
.NET MAUI First Look - What is it, how do we use it, and is it ready by Tim Corey May 23, 2022
dotnet build -t:Run -f net6.0-maccatalyst
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 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
- Email from website
- Search within Hyde format Jekyll websites
- Data Visualization using Tableau