Personal notes on the technical stack for developing cross-platform services in TypeScript independently

This is @ryusei__46 speaking.

In this installment, I'd like to share my personal thoughts on a practical approach to developing cross-platform applications or software using TypeScript.

When dealing with cross-platform development, the sheer volume of learning material can quickly become overwhelming, making it difficult to know where to begin. However, once you have a clear mental model of the required technology stack, you can progress through your learning more efficiently.

Furthermore, since the primary programming language will be TypeScript, the learning curve for programming languages will be significantly reduced. It's a language that's currently experiencing rapid growth in popularity.

Additionally, technological advancements are progressing at an astonishing pace these days. With the right approach, even individual developers can create applications and software on par with what companies typically develop. This is because sophisticated, high-performance libraries and frameworks are being released continuously, allowing developers to leverage them to create applications more quickly and with reduced effort.

This article will focus primarily on these libraries and frameworks, explaining how to apply this technology stack for individual development.

By "full-stack cross-platform development," I mean applications that support PC (desktop), mobile (Android and iOS), and web platforms.

Introduction 

We will present our technology stack in the following order: Web (back-end and server infrastructure), followed by desktop and mobile applications.

This time, we'll introduce a technology stack that enables cross-platform app development using TypeScript. However, it's important to note that TypeScript alone cannot handle all cases—there are situations where additional languages are required.

Examples of such cases include when you want to utilize OS-specific features. For Windows or Mac, you would need to use languages like "C++" or "Rust"; for Android, "Java" or "Kotlin"; and for iOS, "Swift" or "Objective-C". Ultimately, you'll need to create native extensions that allow TypeScript to call compiled programs written in these OS-specific languages.

Since TypeScript is a superset of JavaScript, it can primarily handle front-end UI development and backend development using Node.js, but it is not a language for developing OS-level systems.

That said, some frameworks provide native functionality that enables limited OS-level API manipulation through TypeScript.

Web / Backend / Frontend 

This is the framework I've been using recently, and it's my go-to choice.

Next.js 

Next.js is a React framework designed to support a combination of server-side rendering (SSR), static site generation (SSG), client-side rendering (CSR), and incremental static regeneration (ISR). This enables faster page loading and improved SEO optimization.

It also incorporates functionality as an API server, allowing flexible implementation of API-based operations such as data retrieval and authentication.

With this framework, you should be able to handle all server-side infrastructure requirements.

Next.js by Vercel - The React Framework

Next.js by Vercel is the full-stack React framework for the web.

nextjs.org

As a side note, I've also written an article explaining how to deploy Next.js on an on-premises environment.

How to Deploy Next.js on an On-Premises Environment | Using Conoha VPS | Ryusei.IO

This guide explains how to deploy web applications and services developed with Next.js to on-premise environments like VPS servers or self-hosted systems. While this approach requires more manual effort compared to using Vercel, it offers significant cost savings and greater operational flexibility.

ryusei.io

Payload: Headless CMS 

Payload is an open-source headless CMS and application framework built with TypeScript and React, offering native integration with Next.js. Designed for developers, it provides everything from data model definition to API generation and management panel UI, enabling full-stack development of features like blogs, membership systems, and e-commerce platforms. Highly extensible, it includes standard features like authentication and media management and can be seamlessly integrated into existing Next.js applications.

• Payload CMS is self-hosted and open-source, giving you complete control over your data on your own servers.
• Fully TypeScript compatible, offering strong type safety and leveraging editor autocomplete features.
• Provides both REST API and GraphQL API simultaneously, allowing flexible data retrieval methods based on your needs.
• React-based admin interface (Admin UI) features intuitive operation and support for adding custom fields.
• Supports diverse field types including text, code (Monaco Editor), rich text (Lexical Editor), images, relationships, and custom blocks, along with the ability to implement custom fields.
• Role-based access control (RBAC) enables fine-grained configuration of which collections and fields each user can access.
• Includes built-in media management functionality for easy handling of images, videos, and other files.
• Standard internationalization (i18n) support allows easy creation of multilingual sites. (Note: For front-end language switching, you'll need to use multilingualization packages like "next-intl" or similar.)
• Currently supports MongoDB, PostgreSQL, and SQLite databases.
• Various functional extensions can be achieved through plugin installation.

Recently, this site migrated to Payload, which has been incredibly convenient—no longer do I need to manually code the complex backend logic. With just some TypeScript setup for models, it handles all data management, allowing me to focus entirely on front-end development.

Payload: The Next.js Headless CMS and App Framework

Built with TypeScript and React, Payload is an open-source headless CMS and application framework. Build anything.

payloadcms.com

React 

React.js is a JavaScript library for building user interfaces. (Client-side rendering / CSR) Developed and maintained by Facebook, it is designed to efficiently update views when data changes, even in large-scale applications.

Its main features include:

• Component-based architecture: Applications are constructed from reusable components, with each component maintaining its own independent state and logic.
• Declarative views: Focus on declaring how components should appear, allowing React to efficiently update and render the appropriate components when data changes.
• Virtual DOM: Since direct DOM manipulation is computationally expensive, React uses a virtual DOM to efficiently calculate changes and only update the actual DOM where necessary.
• JSX: An extended syntax for JavaScript that enables writing component structures using HTML-like syntax. This makes the code more readable and easier to write.

While React itself operates on the client side, Next.js - as mentioned earlier - enables the use of React both on the server and client sides.

Although React adoption in Japanese projects remains relatively limited, globally it appears to be nearly ubiquitous.

Furthermore, React can also be used for creating UIs in desktop and mobile apps, making it an extremely versatile library. Mastering this library means you'll never be at a loss when developing user interfaces.

React

React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.

ja.react.dev

Auth.js 

Auth.js is a library that makes it easy to integrate authentication functionality into Next.js applications. It supports not only standard user ID/password authentication but also numerous external authentication services like Google and GitHub. We're using this library on our own blog as well.

Its main features are as follows:

• 簡単な設定: 設定がシンプルで、数行のコードを書くだけで認証機能を追加できます。
• セキュリティ: JWT（JSON Web Tokens）とセッションを利用してセキュアな認証を提供します。
• 多様なプロバイダー: Google, Facebook, Twitterなど、さまざまなOAuth認証プロバイダーを簡単に統合できます。
• データベース不要: ユーザー情報をセッション内に保存するため、必ずしもデータベースは必要ありませんが、必要に応じてデータベースと連携することもできます。
• 柔軟なカスタマイズが可能: ログインページやコールバック、セッション管理など、様々な部分をカスタマイズできます。

Auth.js | Authentication for the Web

Authentication for the Web

authjs.dev

next-intl: Internationalization 

next-intl is a library designed to easily add internationalization (i18n) functionality to Next.js projects. This library enables developers to make their applications multilingual, allowing them to manage translations, date formatting, and number formatting based on different locales.

Its main features include:

• Locale Detection: Automatically detects the user's locale from their browser settings or URL path.
• Translation Management: Manage translations for each locale using JSON files.
• Hooks and Components: Provides features like the useTranslations hook and <Trans> component for easy integration of translated text into your application.
• Optimized Performance: Efficiently fetches and bundles only the necessary locale data for the client, avoiding unnecessary data loading.
• Extensibility: Offers a wide range of customization options, including custom loading mechanisms, caching strategies, and custom formatting functions.

No Image

next-intl – Internationalization (i18n) for Next.js

Internationalization (i18n) for Next.js

next-intl-docs.vercel.app

Next-Themes: Theme Color Control 

next-themes is a library that simplifies theme management in the Next.js framework. This library enables easy switching between different themes, such as dark mode and light mode. It is particularly useful for implementing light/dark mode switching functionality in Next.js projects.

The main features include:

• Simple Dark Mode Implementation: Achieve perfect dark mode functionality with just 2 lines of code.
• System Settings Compatibility: Supports system color scheme preferences based on prefers-color-scheme.
• Browser UI Theme Configuration: Allows setting the browser UI theme using color-scheme.
• Support for Next.js 13's App Router: Compatible with the latest features in Next.js.
• Prevents Flashing in SSR and SSG: Eliminates loading flash effects during server-side rendering (SSR) or static site generation (SSG).
• Theme Synchronization: Enables theme synchronization across tabs and windows.
• Flash Prevention: Provides an option to disable theme change flash effects.
• Theme Enforcement for Specific Pages: Allows forcing a specific theme on designated pages.
• Selects Class or Data Attribute Selectors: Offers options for theme application using class or data attribute selectors.
• useTheme Hook: Provides a useTheme hook for theme management functionality.

I use this tool frequently too. With just simple configuration and a small amount of code setup, it's perfect for implementing theme switching functionality - I always use it when implementing this feature.

GitHub - pacocoursey/next-themes: Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing

Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing - pacocoursey/next-themes

github.com

tailwind.css: UI library 

Tailwind CSS is a utility-first CSS framework. It enables you to build designs not through custom classes but by combining small, purpose-specific utility classes. This approach allows you to quickly create custom design systems while also enabling flexible stylesheets that can easily accommodate repetition and modifications.

Its key features include:

• Utility-first approach: Provides preset classes for common styling elements, allowing you to build designs by combining these components.
• Responsive design: Implements responsive design easily through a mobile-first approach.
• Customizability: Allows customization of default designs through configuration files.
• Performance: Generates final CSS files containing only the used classes, resulting in smaller file sizes and improved performance.
• Plugin system: Offers a rich selection of plugins to extend functionality, along with the ability to create custom plugins.

Tailwind CSS has become popular among many developers for reducing styling effort while enhancing productivity in frontend development.

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

tailwindcss.com

You don't need to prepare CSS files—just write only the classes you need, exactly as needed.

<div class="flex flex-wrap">
  <h1 class="flex-auto text-lg font-semibold text-slate-900">
    Utility Jacket
  </h1>
  <div class="text-lg font-semibold text-slate-500">
    $110.00
  </div>
  <div class="w-full flex-none text-sm font-medium text-slate-700 mt-2">
    In stock
  </div>
</div>

Recently, various browsers have added support for "@Container" queries, allowing more flexible responsive styling than before. However, since Tailwind.css official support is not yet available, you'll need to add a plugin.

GitHub - tailwindlabs/tailwindcss-container-queries: A plugin for Tailwind CSS v3.2+ that provides utilities for container queries.

A plugin for Tailwind CSS v3.2+ that provides utilities for container queries. - tailwindlabs/tailwindcss-container-queries

github.com

shadcn/ui: UI library 

shadcn/ui is a lightweight, highly customizable UI component library written in React and TypeScript, featuring a simple and intuitive API that helps build web applications of all kinds.

It provides a variety of useful components, allowing you to install and use only what you need—including components that would be difficult to implement from scratch with CSS, such as toggle switches, pop-ups, and range-selectable calendars.

To use shadcn/ui, you must have tailwind.css installed.

The Foundation for your Design System - shadcn/ui

A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.

ui.shadcn.com

stripe: Payment system 

Stripe is a global platform for processing online payments. It provides various APIs and tools to enable businesses to accept payments from customers using credit cards, debit cards, and other payment methods on their websites and applications.

The main features include:

• Diverse payment methods: Supports not only credit cards and debit cards but also mobile payments like Apple Pay, Google Pay, and cryptocurrencies, along with international payment methods.
• Security: Compliant with PCI DSS (Payment Card Industry Data Security Standard), maintaining high security standards.
• Flexibility: Features rich APIs for customizing payment flows, making it suitable for businesses of all sizes.
• Easy integration: Provides SDKs and comprehensive documentation to facilitate seamless system integration for developers.

Stripe also provides an official Node.js library called stripe-node. Using this library allows developers to easily access Stripe's API from Node.js applications, enabling payment processing, customer management, billing, and subscription management.

With `stripe-node`, developers can quickly build secure payment systems with minimal code while fully leveraging Stripe's comprehensive feature set.

While I haven't yet implemented a payment system myself, I plan to use Stripe in any personal development projects I undertake in the future.

Stripe | インター�ット��金�インフラ

Stripe ��オンライン・対�決済代行サービス���金�ソリューションを�供�����。決済�導入や請求書作���正利用対策を実�����。

stripe.com

Prisma Client: Database ORM 

Prisma Client is the next generation ORM (Object-Relational Mapping) for Node.js and TypeScript. It abstracts database interactions to make them easier to work with, enabling more straightforward database querying.

Its main features include:

• Type-safe queries: Leverage TypeScript's advantages to perform type validation at compile time. This enables early detection of issues compared to runtime errors, improving development reliability.
• Simple setup: Define your data model using Prisma Schema, a custom configuration file. Then use Prisma Migrate for easy database migrations.
• Powerful query capabilities: Enables writing complex queries with ease, including nested queries, filters, pagination, and transactions.
• Supported databases: Supports multiple relational databases including PostgreSQL, MySQL, SQLite, and SQL Server.

Prisma aims to simplify database operations and help developers become more productive. It also provides a GUI tool called Prisma Studio for visually managing database content.

I've personally been using Prisma extensively - the intuitive query interface makes it so comfortable that I can't go back to writing raw SQL statements anymore.

Prisma | Instant Postgres plus an ORM for simpler db workflows

Build, fortify, and grow your application easily with an intuitive data model, type-safety, automated migrations, connection pooling and caching.

www.prisma.io

PM2: Process Management 

PM2 is an open-source tool for managing Node.js application processes. It functions as a daemon process to keep applications running in the background and supports reliable operation by automatically restarting applications when they crash.

Its main features include:

• Load Balancer: Efficiently utilizes system resources by distributing application workload.
• Automatic Restart: Automatically restarts the process in the event of application crashes or file modifications.
• Zero-Downtime Deployment: Enables application updates without causing service interruptions for users.
• Process Monitoring: Real-time monitoring of CPU and memory usage to facilitate performance management.
• Log Management: Records standard output and error logs to files to support troubleshooting.
• Cluster Mode: Allows launching multiple instances to fully utilize multi-core CPU performance.

This becomes an essential tool for deploying Next.js applications.

PM2 - Home

PM2 is an advanced production process manager for Node.js applications with built-in load balancer, zero-downtime reload, startup scripts, monitoring, and microservice management features.

pm2.keymetrics.io

Open Lite Speed 

OpenLiteSpeed is an extremely high-performance, event-driven open-source web server. It serves as the open-source version of the LiteSpeed Web Server (LSWS) developed by LiteSpeed Technologies.

While often compared to Nginx, data suggests it either matches or outperforms it in performance, making it one of the next-generation web server solutions that has recently been gaining market share alongside Nginx.

OpenLiteSpeed is particularly optimized for PHP operation and maintains compatibility with Apache's .htaccess files, allowing for relatively smooth migration from Apache. In my case, while I previously used PHP extensively, I now primarily use Node.js, so I frequently utilize OpenLiteSpeed's reverse proxy functionality to run Next.js applications.

Thanks to its reverse proxy capabilities, it's also straightforward to run multiple applications written in different languages—such as Python's "Django" or Ruby's "Ruby on Rails"—simultaneously.

It also features an easy-to-use web management interface that makes setup and administration simple. Another appealing aspect is its high performance combined with efficient resource utilization, making it suitable for a wide range of applications—from medium to large-scale websites to comprehensive web services.

No Image

OpenLiteSpeed

openlitespeed.org

It also explains how to operate Next.js applications with Open Lite Speed.

Guide on deploying multiple Next.js applications with different port numbers on the same server | Ryusei.IO

This guide explains how to deploy multiple Next.js web applications on the same server using reverse proxy functionality, with Open LiteSpeed as the reverse proxy solution.

ryusei.io

PHPMyAdmin 

PHPMyAdmin is a web-based GUI tool for managing MySQL and MariaDB. Since it runs on PHP, it's best hosted and used with OpenLiteSpeed. It simplifies database management, table creation, record management, and user administration through an easy-to-use interface. This eliminates the need to remotely access the server to execute SQL commands, making it particularly useful for quick operations, verifications, and schema editing.

While Prisma Client is generally sufficient, PHPMyAdmin proves invaluable for tasks like inserting test records or quickly reviewing data - its instant visibility makes it extremely convenient. Note that the same functionality can be achieved with Prisma Studio without needing to use PHPMyAdmin.

That said, I've simply become accustomed to using this tool for an extended period, so it feels most comfortable to me.

phpMyAdmin

www.phpmyadmin.net

Additionally, there are modern themes available, allowing you to choose your preferred UI.

Desktop App Development 

Desktop app development also has excellent frameworks available.

Electron 

Electron is a framework for developing cross-platform desktop applications, developed by GitHub. It allows developers to create desktop applications that run on multiple operating systems—including Windows, macOS, and Linux—using web technologies such as HTML, CSS, JavaScript, and TypeScript.

Key features include:

• Cross-platform compatibility: Enables development of Windows, macOS, and Linux applications using a single codebase.
• Web technology integration: Allows application development using HTML, CSS, JavaScript, and TypeScript, making it accessible for web developers.
• Node.js integration: Provides access to Node.js APIs and enables utilization of backend functionalities like file system operations and network communication.
• Rich community support: Widely used by developers, resulting in abundant available plugins and tools.
• Chromium engine: Based on Google's Chromium engine, ensuring compliance with latest web standards and delivering high performance.
• Reuse of existing web applications: Enables conversion of existing web applications to desktop applications with relatively minimal effort.

While Electron serves a wide range of applications—from simple prototyping to large-scale commercial software—its web technology foundation typically results in higher resource consumption compared to native applications.

Therefore, you'll need to carefully optimize unnecessary processing and adjust package import timing to manage memory usage effectively.

Additionally, since Electron bundles the Chromium engine natively, the final build size tends to become quite large. If this is acceptable, there's no question that Electron is an outstanding framework.

Microsoft's "Visual Studio Code," communication tool "Slack," and gaming platform "Discord" are all reportedly based on Electron.

No Image

Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron

Build cross-platform desktop apps with JavaScript, HTML, and CSS

www.electronjs.org

ネイティブ拡張の統合方法

Native extensions become necessary when your code requires platform-specific OS API calls. For example, you might need to retrieve the current process's app name from Electron or obtain the process's app icon in bitmap format.

In such cases, you'll need to write OS interaction logic using C++ or Rust. The final implementation should be compiled into a node file so that it can be called from Node.js using the following tools.

For C++ compilation, use the following ⤵

GitHub - nodejs/node-addon-api: Module for using Node-API from C++

Module for using Node-API from C++. Contribute to nodejs/node-addon-api development by creating an account on GitHub.

github.com

For Rust compilation, use the following ⤵

GitHub - napi-rs/napi-rs: A framework for building compiled Node.js add-ons in Rust via Node-API

A framework for building compiled Node.js add-ons in Rust via Node-API - napi-rs/napi-rs

github.com

Bonus: Electron-Vite 

Electron-Vite is a framework that integrates the Vite build tool to accelerate and streamline the development of Electron applications. Vite is the next generation of frontend build tools, characterized by its fast hot module replacement (HMR) during development and its optimized build system for production environments. By combining Electron's capabilities for desktop application development with Vite's powerful build features, developers can achieve a more efficient development experience.

The main features include:

• Fast development experience: Vite's high-speed hot module replacement (HMR) enables real-time code changes and immediate result feedback.
• Efficient builds: Vite provides non-bundled, fast builds for development while offering optimized builds using Rollup for production deployment.
• Easy setup: The project setup process is simple, allowing you to start developing quickly.
• Plugin system: Leverage Vite's extensive plugin ecosystem for highly extensible development.
• TypeScript integration: Native TypeScript support enables type-safe development.
• Source protection: Converts main process code to V8 bytecode, completely obfuscating the source code.

Electron-Vite proves to be a valuable choice for improving development processes, particularly for large-scale Electron projects and developers looking to utilize modern web technologies.

What I like the most about it are the HMR and source protection features, hands down.

No Image

electron-vite | Next Generation Electron Build Tooling

Next generation Electron build tooling based on Vite.

electron-vite.org

Bonus: better-sqlite3-multiple-ciphers 

better-sqlite3-multiple-ciphers extends the better-sqlite3 Node.js module for SQLite by adding support for multiple encryption methods. While better-sqlite3 is popular for its high performance and synchronous API, it does not support database encryption by default.

This multiple-ciphers extension provides functionality to encrypt and decrypt SQLite databases using different encryption libraries such as SQLCipher. SQLCipher uses AES-256-bit encryption and is widely adopted for securing database files.

For developers using better-sqlite3 in applications requiring enhanced data security, this extension proves extremely useful. However, since the encryption and decryption processes may impact performance, it should be implemented appropriately based on application requirements.

This extension is particularly useful when you want to incorporate an encrypted SQLite database into an Electron application. Even when not using encryption functionality, it functions normally, making it quite versatile.

GitHub - m4heshd/better-sqlite3-multiple-ciphers: better-sqlite3 with multiple-cipher encryption support 🔒

better-sqlite3 with multiple-cipher encryption support 🔒 - m4heshd/better-sqlite3-multiple-ciphers

github.com

Bonus: Code Signing 

Code signing is a security mechanism required when releasing desktop applications. While many free software projects don't perform code signing and distribute their programs without it, unsigned programs often trigger warning messages on Windows systems or may be blocked entirely depending on system settings.

For free software, this might not be a problem, but for shareware or subscription-based services, the lack of code signing can raise security concerns and deter users from installing the software.

However, obtaining a code signing certificate can be extremely expensive - typically costing around ¥50,000 to ¥100,000 per year - making it prohibitively difficult for individual developers.

Therefore, the practical solution I've found is to release your software through Microsoft's app store on Windows or Apple's app store on Mac.

With this approach, code signing is automatically applied during the release process.

I plan to write more detailed instructions about this method in a separate article at a later date.

コードサイニング証明書を取得する場合

Upon checking, it appears there are affordable options available. This is a foreign service, but even individual developers can apparently obtain it. At the exchange rate of February 10, 2024, it could be purchased for approximately €189/¥30,000 per year.

Standard Code Signing in the Cloud

The Standard Code Signing certificate is a certificate that allows you to digitally sign software. The certificate is trusted by Microsoft and supports building the Microsoft SmartScreen Filter reputation. By securing your software with a Standard Code Signingcertificate, you can protect your code from unauthorized modification and provide users with the security of the downloaded application. By signing your code with a Standard Code Signing certificate, people who download and install your software: Wil not see “unknown publisher” warnings; Will be sure that the software comes from a trusted source; Will be guaranteed that the downloaded program hasn't been modified after its release; Will be less likely to see the Microsoft SmartScreen Filter screen, which you eliminate by signing the software. Read about the certificate issuance and usage information, available on the next product description tabs. 

shop.certum.eu

There were also some good explanatory articles here that should prove helpful.

個人開発者でも出来るコードサイニング証明書によるWindowsアプリの署名

個人開発者でも出来るコードサイニング証明書によるWindowsアプリの署名 Certumの証明書を購入してアプリを署名するまでの手順 先に英語で書いてから日本語に訳しています。元記事は “Code signing certificate for indie developers” をご参照ください。 こんにちは、個人アプリ作家のTAKUYAです。InkdropというSaaSでご飯を食べています。現在のビジネス規模だと個人事業主としてやったほうが生活がシンプルに保てるので、まだ会社化していません。僕のアプリはInkdropというMarkdownノートアプリで、macOS、Windows、Linux、iOSやAndroidで動作します。最近のOperating Systemsは積極的にMaliciousなSoftwareからユーザを守る機能を搭載しています。macOSではApp Store外で配布する際はアプリを自分でNotarizeする必要があります。それは特に難しいことではありません。なぜならAppleが基本的に必要なものを提供してくれるからです。一方Windowsでは、Micr

blog.craftz.dog

Tauri 

Tauri is a framework that enables developers to create cross-platform desktop applications using web technologies. It combines a Rust-based backend with any front-end framework of choice (such as React, Vue, or Svelte) and has gained attention as a lightweight alternative to Electron.

Its key features include:

• Enhanced Security: Built with security as a core priority by default, reducing application security risks.
• Reduced Resource Usage: Features lower memory consumption and binary size compared to Electron, making it more lightweight and more efficient.
• Cross-Platform Compatibility: Enables development of applications that run on Windows, macOS, and Linux from a single codebase. Recently added mobile app development support in TAURI Beta 2.0.
• Rust Performance: Leverages the safety and performance characteristics of the Rust language to build high-speed backend systems.
• Web Frontend Flexibility: Allows seamless integration of existing web applications into desktop applications, making it accessible for web developers.
• Plugin System: Provides a plugin system for extending functionality, offering high customizability.
• Automatic Update Capabilities: Supports automatic application update functionality.

Tauri presents an attractive option for developers who prioritize application performance and security. Its lower resource consumption compared to Electron also makes it suitable for creating lightweight applications.

I've been considering making this switch myself, but since my Rust experience is still limited, I'll need to invest some more time in learning.

With Rust likely becoming the dominant choice over C++ going forward, I'm planning to develop using TypeScript + Rust.

Recently, Microsoft has also been working on replacing its OS foundation from C++ to Rust.

Tauri 2.0

The cross-platform app building toolkit

tauri.app

Bonus: Prisma Client Rust 

prisma-client-rust is a library that enables Rust developers to use Prisma—an ORM for JavaScript—from Rust. This library emerged because Prisma's core components are written in Rust, allowing it to provide a familiar API for Rust developers while leveraging Prisma's powerful database technology. It's particularly suitable for developers considering migration from NodeJS or aiming to build faster, more efficient applications. Additionally, it simplifies Prisma's use in frontend applications and enables developers to leverage the Prisma ecosystem when building desktop applications using Tauri1.

You can build this alongside "TAURI" and integrate it into your applications. However, note that it does not support SQLCipher, so if you need database encryption, you'll need to use encryption methods like AES-256bit for individual columns to securely protect your data.

GitHub - Brendonovich/prisma-client-rust: Type-safe database access for Rust

Type-safe database access for Rust. Contribute to Brendonovich/prisma-client-rust development by creating an account on GitHub.

github.com

Mobile App Development 

For mobile development too, React seems to be the clear choice.

React Native 

React Native is an open-source mobile application development framework developed by Facebook. It enables developers to build native applications for both iOS and Android platforms using JavaScript and React concepts.

Below are its key features:

• Cross-platform development: Enables simultaneous development of iOS and Android apps using a single codebase.
• Native performance: Achieves high performance through native components while using JavaScript.
• Benefits of React: Incorporates React's declarative UI paradigm and efficient updates into mobile development.
• Hot reloading: Provides the ability to see code changes immediately without rebuilding the app after editing.
• Rich ecosystem: Offers numerous libraries and tools to accelerate the development process.
• Community support: Benefit from an active developer community with abundant resources and support.

React Native becomes particularly appealing to developers who want to leverage their web development experience to enter mobile app development.

While I've only used React so far, this would definitely be one of the frameworks I'd definitely use when developing mobile apps in the future.

React Native · Learn once, write anywhere

A framework for building native apps for Android, iOS, and more using React

reactnative.dev

Capacitor 

Capacitor is a modern framework for building cross-platform mobile applications using web technologies (HTML, CSS, JavaScript). Developed by Ionic's team, this framework enables easy integration of web applications with iOS, Android, and Progressive Web Apps (PWAs).

Key features include:

• Native plugin integration: Provides a rich set of APIs that enable access to native device functionality.
• Compatibility with web ecosystems: Can be used alongside any web framework, including React, Angular, and Vue.
• Cross-platform support: Allows building iOS, Android, and web apps from a single codebase.
• Ability to add custom native code: Enables integration of proprietary native code or third-party native SDKs when needed.
• Modern development experience: Utilizes modern toolchains to deliver an efficient development process.
• Community collaboration: Benefits from robust support from developer communities and the Ionic team.

Capacitor is particularly effective when extending existing web applications to mobile platforms or when web developers want to enter mobile development.

The key difference from React Native mentioned earlier is that while React Native uses JavaScript and React concepts to directly render native UI components, Capacitor is based on a WebView architecture that wraps web-written applications in a native shell.

This means you can use virtually any library available for frontend UI development in Capacitor. As noted in the features section, this includes anything that works in JavaScript—whether it's React, Angular, Vue, or jQuery.

Either way, both are excellent frameworks, so choose the one that best fits your current project requirements.

Capacitor by Ionic - Cross-platform apps with web technology

Build iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript

capacitorjs.com

Bonus: SQLCipher 

SQLCipher is an open-source extension for the SQLite database engine that enables encryption of database contents. By utilizing this library, you can encrypt entire database files using AES-256-bit encryption to enhance security. SQLCipher operates transparently, with content only decrypted when accessed using the appropriate cryptographic key. Its cross-platform compatibility and support for multiple programming languages have led to its widespread adoption in applications containing personal information and in commercial applications where security is critical.

This library works on major operating systems including Windows, Mac, Linux, IOS, and Android. For developing desktop applications using Electron on Windows or Mac, it's simpler to use the "better-sqlite3-multiple-ciphers" library as described in the desktop development section.

If you're developing mobile apps and need an embedded database with encryption capabilities, implementing SQLCipher would be appropriate.

GitHub - sqlcipher/sqlcipher: SQLCipher is a standalone fork of SQLite that adds 256 bit AES encryption of database files and other security features.

SQLCipher is a standalone fork of SQLite that adds 256 bit AES encryption of database files and other security features. - sqlcipher/sqlcipher

github.com

An image of developing cross-platform services using these ecosystems 

After exploring various technical stacks, I hope you now have a clearer understanding of how even a TypeScript-only approach can enable personal development of cross-platform services.

For example, consider a cross-platform bookmark management service.

While this feature is already built into most modern browsers, it maintains real-time synchronization of bookmarks across devices through a centralized sync server.

You can implement such a service using the technical stack we've discussed here.

While cross-platform development does require learning more than just TypeScript, I feel it's become significantly more accessible compared to previous approaches.

I sincerely hope this serves as a helpful reference for individual developers.