Wilson Mar bio photo

Wilson Mar

Hello!

Calendar YouTube Github

LinkedIn

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

US (English)   Norsk (Norwegian)   Español (Spanish)   Français (French)   Deutsch (German)   Italiano   Português   Estonian   اَلْعَرَبِيَّةُ (Egypt Arabic)   Napali   中文 (简体) Chinese (Simplified)   日本語 Japanese   한국어 Korean

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.

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.

  • 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:

  1. 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:

  1. UI Design Systems
  2. Text Editors
  3. Markdown text for GitHub from HTML
  4. 508 Accessibility

  5. gRPC (g___ Remote Procedure Call)
  6. HTTP/2 Transition Project Plan

  7. Front-end UI creation options
  8. Docusaurus static website generator
  9. Static websites
  10. JAM Stack Website Project Plan
  11. Jekyll Site Development
  12. Gatsby app generator

  13. Website styles
  14. Website Styling
  15. VueJs front-end framework

  16. Protractor to automate testing of Angular and other web pages

  17. Email from website
  18. Search within Hyde format Jekyll websites
  19. Windows Tile Pin Picture to Website Feed

  20. Data Visualization using Tableau