Hi, I'm @ryusei__46.
In this article, I would like to write about my personal thoughts on a realistic way to develop cross-platform applications and software using TypeScript.
When it comes to cross-platform development, the amount of learning becomes huge at once, and it is easy to lose track of where to start.
Besides, since TypeScript will be the main language used, the cost of learning a programming language will be much lower. It is also a language that is rapidly gaining market share at present.
Also, technology is advancing so rapidly these days that even individuals can develop applications and software at the level of those developed by corporations, if they so desire. This is because sophisticated and highly functional libraries and frameworks are being released one after another, and developers can make full use of them to develop in a shorter time and with less effort.
This article focuses on such libraries and frameworks and explains how to proceed with personal development using those technology stacks.
Full-stack, cross-platform development here means PC (desktop), mobile (Android and IOS), and web.
Introduction
The technology stacks will be introduced in the following order: Web (backend and server in general), desktop, and mobile.
In this article, we will introduce the technology stack that enables cross-platform application development with TypeScript, but of course, there are some cases where TypeScript alone is not sufficient.
The parts that cannot be handled by TypeScript include cases where you want to use functions specific to each OS. In such cases, it is necessary to write in languages such as "C++" or "Rust" for Windows or Mac, "Java" or "Kotlin" for Android, or "Swift" or "Objective-C" for IOS. Finally, create a native extension so that the program compiled in each OS-specific language can be called on the TypeScript side.
TypeScript is a superset of JavaScript, so it can be used mainly for front-end UI creation and back-end development with Node.js, etc., but it is not a language that can develop OS systems.
However, some OS-level APIs can be partially manipulated in TypeScript as an inherent feature of the framework.
Web / Backend / Frontend
This is the framework I have been using lately and it is the only one I use.
Next.js
Next.js is a React framework designed to combine server-side rendering (SSR), static site generation (SSG), client-side rendering (CSR), and incremental static regenerations (ISR). This allows for faster page loads and SEO optimization.
It also functions as an API server, allowing for flexible implementation of processes such as information acquisition and authentication via API.
With this framework, the infrastructure around the server will be sufficient.
As a catch, we have also written an article explaining how to deploy Next.js to an on-premise environment.
React
React.js is a JavaScript library for building user interfaces. (Client Side Rendering CSR) It is maintained by Facebook and is designed to allow large applications to efficiently update views when data changes.
Key features include.
- Component-based: Applications are built from reusable components, each with independent state and logic.
- 宣Discursive view: focus on declaring how the code should look and React will efficiently update and render the appropriate components as data changes.
- Virtual DOM: Because real DOM manipulation is expensive, React uses the virtual DOM to efficiently calculate changes and reflect only the necessary parts in the real DOM.
- JSX: An extended syntax for JavaScript that allows you to use a syntax similar to HTML when writing component structures. This makes code easier to read and write.
React itself is a library that runs on the client side, but the aforementioned Next.js allows React to be used both on the server side and client side.
In Japan, there are still only a few projects using React, but on a global scale, it seems that React is almost the only one.
Also, React can be used to create UI for desktop and mobile apps, making it a very versatile library. If you master this library, you will never be lost when developing UI.
NextAuth.js
NextAuth.js is a library that makes it easy to integrate authentication into Next.js applications. It supports authentication using standard user IDs and passwords as well as many external authentication services such as Google and Github. It is also used in our blog.
The main features are as follows
- Easy to set up: Simple to set up, you only need to write a few lines of code to add authentication functionality.
- Security: JWT (JSON Web Tokens) and sessions are used to provide secure authentication.
- Diverse providers: Easily integrate various OAuth authentication providers such as Google, Facebook, Twitter, etc.
- No database required: User information is stored in the session, so a database is not necessarily required, but can be linked to a database if needed.
- Flexible customization: Customize login pages, callbacks, session management, and much more.
next-intl：multilingualization
next-intl is a library for easily adding internationalization (i18n) functionality to Next.js projects. Using this library, you can make your application multilingual and manage translations, date and number formats based on different locales.
The main features are as follows
- Locale Detection: Auto-detects locale from user's browser settings or URL path.
- Translation management: Use JSON files to manage translations for each locale.
- Hooks and components:
useTranslationshooks and<Trans>components are provided to make it easy to use translated text in your application. - Optimized performance: Efficient data fetching and bundling to load only the necessary locale data to the client and avoid loading extra data.
- Extensibility: Various customization options are available, including custom loading, caching strategies, and unique formatting functions.
Next-Themes：theme color control
next-themes is a library that facilitates theme management in the Next.js framework. This library makes it easy to switch between different themes, such as dark mode and light mode. It is especially useful for implementing the ability to switch between light and dark modes in Next.js projects.
The main features are as follows
- Simple dark mode implementation: A perfect dark mode can be implemented with only two lines of code.
- Support for system settings: System settings based on
prefers-color-schemeare supported. - Browser UI theming: You can use
color-schemeto theme the browser UI. - App Router support for Next.js 13: Also compatible with the latest Next.js features.
- Prevent flushing in SSR and SSG: Prevents flushing on load during server-side rendering (SSR) and static site generation (SSG).
- Theme Synchronization: Themes can be synchronized across tabs and windows.
- Flash Disable: Allows you to disable flash when changing themes.
- Enforce theme on specific pages: There is the ability to force a specific theme on a specific page.
- Select Class or Data Attribute Selector: You can select either a class or a data attribute selector as the method of theme application.
useThemehook: AuseThemehook is provided for theme management.
I use this one a lot. It requires only simple configuration and a small amount of code, so I always use it when implementing theme switching functionality.
tailwind.css：UI Library
Tailwind CSS is a utility-first CSS framework. Designs are built not with custom classes, but with a combination of smaller utility classes for different purposes. This allows you to quickly build your own design system and create stylesheets that are flexible enough for repeated use and changes.
The main features are as follows
- Utility First: Common styling is provided as preset classes, which are combined to build the design.
- Responsive Design: A mobile-first approach makes responsive design easy to implement.
- Customizability: The default design can be customized through a configuration file.
- Performance: Generates a final CSS file containing only the classes used, resulting in smaller file sizes and better performance.
- Plug-in system: A wide variety of plug-ins are available to extend functionality, and you can even create your own plug-ins.
Tailwind CSS is popular with many developers for increasing front-end development productivity while reducing styling effort.
It is like writing only the necessary classes for the necessary amount of time without preparing CSS files.
<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>In addition, various browsers have recently added support for "@Container" queries, allowing responsive processing to be written more flexibly than ever before. As yet, tailwind.css officially does not support this, so a plugin must be added.
shadcn/ui：UI Library
shadcn/ui is a lightweight, customizable UI component library written in React and TypeScript with a simple, easy-to-use API to help you build all kinds of web applications.
A variety of useful components are available, and you can install and use as many as you need. For example, there are toggle switches, popups, and rangeable calendars that would be difficult to implement from scratch with CSS.
To use shadcn/ui, you need to have tailwind.css installed.
stripe：payment system
Stripe is a global platform for processing online payments. It offers a variety of APIs and tools that allow businesses to accept credit card, debit card, and other payment methods from customers on their websites and applications.
Key features include
- Various payment methods: In addition to credit and debit cards, the system supports mobile payments such as Apple Pay, Google Pay, virtual currencies, and even international payment methods.
- Security: We are PCI DSS (Payment Card Industry Data Security Standard) compliant and maintain high security standards.
- Flexibility: extensive APIs for creating custom payment flows, suitable for businesses of all sizes.
- Easy Integration: SDK and extensive documentation are provided to allow developers to easily integrate the system.
Stripe also provides an official Node.js library called stripe-node. Using this library, you can easily access Stripe's API from your Node.js application to process payments, manage customers, billing, subscriptions, and more.
With stripe-node, developers can quickly build secure payment systems with less code and take full advantage of the features that Stripe offers.
I have no experience with payment systems yet, but I plan to use stripe for a service that I will personally develop in the future.
Prisma Client：Database ORM
Prisma Client is the next generation of Object-Relational Mapping (ORM) for Node.js and TypeScript. It is designed to abstract database interactions and make database queries easier to execute.
Its main features are as follows
- Type-safe queries: Take advantage of TypeScript to perform type validation at compile time. This makes development more reliable, as problems can be detected earlier than runtime errors.
- Easy setup: define your data model using a proprietary configuration file called Prisma Schema. After that, database migration can be easily performed using Prisma Migrate.
- Powerful querying capabilities: complex queries such as nested queries, filters, pagination, and transactions can be written with ease.
- Supported databases: Multiple relational databases are supported, including PostgreSQL, MySQL, SQLite, and SQL Server.
Prisma aims to simplify database work and make developers more productive. It also allows you to visually manage the contents of your database using a GUI tool called Prisma Studio.
I use Prisma myself and find it so intuitive and easy to issue queries that I will never go back to raw SQL statements.
PM2：process management
PM2 is an open source tool for process management of Node.js applications. It acts as a daemon process to keep the application running in the background and helps ensure reliable operation, such as automatically restarting the application if it crashes.
Its main features are as follows
- Load balancer: Efficiently uses system resources and distributes application load.
- Auto restart: Automatically restarts the process if the application crashes or files are modified.
- Zero-Downtime Deployment: Applications can be updated and deployed without users feeling any interruption in service.
- Process monitoring: Real-time monitoring of CPU and memory usage facilitates performance management.
- Log management: Standard output and error logs are logged to file to assist in troubleshooting.
- クラスターモード: 複数のインスタンスを立ち上げて、マルチコアCPUの性能を最大限に活用できます。
This is an essential tool for operating Next.js applications.
Open Lite Speed
OpenLiteSpeed is an extremely fast, event-driven, open source web server. It is positioned as an open source version of LiteSpeed Web Server (LSWS) developed by LiteSpeed Technologies.
It is often compared to Nginx, but data shows that its performance is comparable or even exceeds that of Nginx, and it is one of the next-generation web server software that has been gaining market share along with Nginx in recent years.
OpenLiteSpeed is especially optimized for running PHP and is compatible with Apache's .htaccess files, so migration from Apache is relatively smooth. In my case, I used to use PHP a lot, but now I mostly use Node.js, so I often use Open Lite Speed's reverse proxy feature to run Next.js applications.
Since the reverse proxy functionality is available, it is easy to run multiple apps in different languages, such as Python's "Dojango" and Ruby's "Ruby on Rails," at the same time.
Another appealing feature is the easy-to-manage web administration interface, which makes setup and management simple. Despite its high performance, it is also efficient in resource use, and is used for a wide range of applications from small to medium-sized websites to large-scale web services.
It also explains how to operate Next.js applications at Open Lite Speed.
PHPMyAdmin
PHPMyAdmin is a web GUI tool for managing MySQL and MariaDB, running in PHP and hosted with Open Lite Speed.
Database administration, table creation management, record management, and user management can be easily performed through the GUI. Since there is no need to remotely access the server to execute SQL statements, it is useful for small operations, checks, and schema editing.
You can use Prisma Studio to do the same thing without using PHPMyAdmin.
However, in my case, I have been using Prisma Studio for a long time, so I am comfortable with it.
There is also a modern theme so you can choose the UI of your choice.
Desktop Application Development
There are also great frameworks available for desktop application development.
Electron
Electron is a framework for developing cross-platform desktop applications, developed by GitHub, using web technologies (HTML, CSS, JavaScript, TypeScript) to create desktop applications that run on multiple operating systems, including Windows, macOS, Linux, and other operating systems.
Key features include.
- Cross-platform support: A single code base can create Windows, macOS, and Linux apps.
- Web technology use: Applications can be developed using HTML, CSS, JavaScript, and TypeScript, making them easily accessible to web developers.
- Node.js integration: Node.js APIs are available, as well as back-end features such as file system and network communication.
- Rich community: Many developers use it, and it offers a wealth of plug-ins and tools.
- Chromium Engine: Based on Google's Chromium engine, it supports the latest web standards and delivers high performance.
- Reuse of existing web apps: Already existing web applications can be converted to desktop apps with relatively little effort.
Electron is used for a wide range of applications, from simple prototyping to large-scale commercial applications, but because it is based on web technologies, it generally tends to consume more resources than native applications.
Therefore, a little memory balancing is required for memory management, such as minimizing unnecessary processing and adjusting package import timing.
Also, since the Chromium engine is bundled as is, the final resource size after build tends to be bloated. If you can tolerate this, it is sure to be a great framework.
Microsoft's Visual Studio Code, Slack, and Discode are all based on Electron.
bonus：Electron-Vite
Electron-Vite is a framework that integrates the Vite build tool for faster and more efficient Electron application development. Combining Electron's desktop application development with Vite's powerful build capabilities provides developers with a more efficient development experience.
Key features include
- Fast development experience: Vite offers fast Hot Module Reloading (HMR), which allows code changes and results to be reflected in real time.
- Efficient build: Vite provides unbundled, fast builds for development and optimized builds with Rollup for production.
- Easy setup: Project setup is simple and development can start quickly.
- Plug-in system: Vite's extensive plug-ins allow for highly scalable development.
- TypeScript integration: Native TypeScript support for type-safe development.
- Source protection: Converts the main process code to V8 byte code to keep the source code completely confidential.
Electron-Vite is a valid option to improve the development process, especially for large Electron projects and developers who want to use the latest web technologies.
What I like most is the HMR and source protection features.
bonus：better-sqlite3-multiple-ciphers
better-sqlite3-multiple-ciphers adds support for multiple ciphers to better-sqlite3, a Node.js module for working with SQLite. Although better-sqlite3 is popular for its high performance and synchronous API, it does not support database encryption by default.
This multiple-ciphers extension provides the ability to encrypt and decrypt SQLite databases using different encryption libraries such as SQLCipher, which uses AES-256 bit encryption and is widely used to keep database files secure. It is widely used to secure database files.
This extension is very useful for developers using better-sqlite3 in applications that require increased data security. However, the encryption and decryption processes can affect performance and should be used appropriately according to the requirements of the application.
It is used when you want to incorporate an encrypted SQLite database into Electron, but it is quite a great tool because it can be used as usual even when the encryption feature is not used.
bonus：code-signature
This is required when releasing desktop applications and is a mechanism to authenticate that you are a legitimate developer. Free software is often distributed without code signing in particular, but when you try to run a program that is not code-signed, a warning window may appear in Windows, or it may be blocked in the first place, depending on the settings.
Therefore, while free software may be distributed, shareware and subscription-based services may be suspicious of programs without code signatures and hesitate to install them.
However, the cost of obtaining a certificate for code signing is quite expensive, making it too much of a burden for individual developers. The market price is usually 50,000-100,000 yen per year.
Therefore, the realistic method I have found is to release your apps on Microsoft's app store for Windows or Apple's app store for Mac.
This way, code signatures are automatically assigned at the time of release.
I will post more detailed procedures in a later article.
TAURI
Tauri is a framework that allows users to create cross-platform desktop applications utilizing web technologies, combining a backend built in the Rust language with any front-end framework (React, Vue, Svelte, etc.). It is considered a lightweight alternative to Electron.
Its main features are as follows
- Increased security: Focus on security by default to reduce application security risks.
- Reduced resource usage: smarter than Electron due to smaller memory usage and binary size.
- Cross-platform support: Applications running on Windows, macOS, and Linux can be created from a single code base. Recently, TAURI Beta 2.0 supports mobile application development.
- Rust Performance: Leverage the safety and performance of the Rust language to build fast backends.
- Web front-end flexibility: existing web applications can be integrated directly into desktop applications, making them accessible to web developers.
- Plug-in system: Provides a plugin system to extend functionality and is highly customizable.
- Automatic update function: Supports automatic application update function.
Tauri is an attractive choice for developers who value application performance and security. It is also suitable for those seeking lightweight applications, as it is less resource intensive than Electron.
I am currently considering switching over to this one, but I am inexperienced with Rust, so I need more of a learning institute.
From now on, I would like to develop in TypeScript + Rust, as Rust is likely to become more mainstream than C++.
Recently, Microsoft also seems to be in the process of replacing C++ with Rust for their OS infrastructure.
Mobile App Development
It seems that React will be the only choice for mobile development.
React Native
React Native is an open source mobile application development framework developed by Facebook. React Native allows you to build native applications for both iOS and Android platforms using JavaScript and React concepts.
The main features are listed below.
- Cross-platform: A single code base can be used to develop iOS and Android apps simultaneously.
- Native Performance: High performance is achieved through native components while using JavaScript.
- React advantage: React's declarative UI paradigm and efficient updates are incorporated into mobile development.
- Hot reloading: Provides the ability to edit code and then see the changes without having to rebuild the app.
- Rich ecosystem: Many libraries and tools are available to accelerate the development process.
- Community support: An active developer community is available with many resources and support.
React Native is a particularly attractive option for developers who want to leverage their web development experience to enter mobile app development.
I have only used React, but it is definitely one of the frameworks I will use when developing mobile apps in the future.
Capacitor
Capacitor is a modern framework for building cross-platform mobile applications using web technologies (HTML, CSS, JavaScript). developed by the Ionic team, it allows web applications to be It can be easily integrated into iOS, Android, and Progressive Web Apps (PWAs).
Key features include
- Native Plug-in Integration: Provides a rich set of APIs that allow access to native device functionality.
- Compatibility with the web ecosystem: can be used with any web framework, including React, Angular, Vue, etc.
- Cross-platform: Build iOS, Android, and web apps from a single code base.
- Add custom native code: You can incorporate your own native code or third-party native SDKs as needed.
- Modern development experience: A modern tool chain is used to ensure an efficient development process.
- Community Relations: Excellent support from the developer community and the Ionic team.
Capacitor is a particularly useful framework for extending existing web applications to mobile platforms or for web developers entering mobile development.
The main difference from the aforementioned React Native is that while React Native uses JavaScript and React concepts while directly rendering native UI components, Capacitor is based on WebView and wraps applications written in web technologies in a Capacitor is based on WebView and wraps apps written in web technologies in a native shell.
This allows Capacitor to use virtually any library available for front-end UI creation. As mentioned in the features section, this means that you can use React, Angular, Vue, JQuery, or anything else that works in JavaScript.
Either way, it's a great framework, so choose the one that fits your current project.
bonus：SQLCipher
SQLCipher is an open source extension to the SQLite database engine used to encrypt database contents. The library can be used to encrypt entire database files using AES-256 bit encryption for enhanced security; SQLCipher works transparently, decrypting the contents only when the database is accessed with the appropriate encryption key. Available in a wide variety of platforms and languages, SQLCipher is widely used in applications that contain personal information and in security-critical commercial applications.
It runs on all major operating systems, including Windows, Mac, Linux, IOS, and Android. multiple-ciphers" as described in the desktop development section.
If you want to use an embedded database with encryption for mobile app development, you may want to implement SQLCipher.
Image of cross-platform service development using these ecosystems
We have introduced various technology stacks over a long period of time, but we hope that you now have a sense that it is possible to personally develop cross-platform services using only TypeScript.
For example, let's consider a cross-platform bookmark management service.
This is one of the functions that are already available in various browsers, but bookmarks saved on each device are always synchronized in real time by returning them to a synchronization server.
A service that provides such a mechanism can be realized using the technology stack introduced here.
Although there are many things to learn in addition to TypeScript when it comes to cross-platform support, I feel that it has become overwhelmingly easier to develop compared to the past.
I hope this will be a useful reference for individual developers.