The creation of mobile software has long been the prerogative of developers who speak Java or Kotlin. However, the modern web stack has reached such a level of performance that almost any web developer can now. This opens up enormous opportunities for rapid prototyping and cross-platform development without the need to learn programming languages specific to mobile operating systems. write an Android application in js Almost any web developer can do it. This opens up enormous opportunities for rapid prototyping and cross-platform development without the need to learn mobile OS-specific programming languages.
Using JavaScript allows you to combine the backend and frontend into a single ecosystem, reusing code between the web version and the mobile client. In this article, we will analyze in detail the main approaches, from hybrid shells to native bindings, and select the optimal tool for your task.
Choice of architecture and technology stack
Before opening the code editor, you need to decide on the architecture of the future product. There are three main approaches to creating Android applications in JavaScript, each of which has its own advantages and limitations depending on the complexity of the project.
The first and most popular option is to use frameworks like React Native. Here, JavaScript code is compiled into native Android UI components, which ensures highly smooth animations and a “native” appearance of the interface. It is an ideal choice for complex interfaces that require high responsiveness.
The second approach is hybrid applications based on Apache Cordova or Capacitor. In this case, your application is essentially a website running inside a special browser (WebView). The logic is written in pure JS, HTML and CSS, and access to phone functions (camera, geolocation) is provided through plugins.
The third option is suitable for those who want to quickly turn an existing website into an application. Using technology WebView allows you to load a remote resource into a native container. This is the easiest way, but it highly depends on the quality of the user's Internet connection.
Setting up the development environment and tools
For comfortable work, you will need to install a basic set of tools. Even if you only write in JavaScript, you will still need the Android SDK and an emulator or connected physical device to build the APK file.
Start by installing Node.js and a package manager npm or yarn. Next, you need to configure the environment variables for Android. Make sure you have version 11 or higher installed, as older versions may not be supported by newer versions of Gradle. JDK version 11 or higher, as older versions may not be supported by newer versions of Gradle.
⚠️ Note: Android SDK tools and emulator versions are constantly updated. Before starting installation, check the system requirements of the selected framework on its official website to avoid version conflicts.
After installing the basic software, it is recommended to use a visual code editor with IntelliSense support, for example VS Code. Install extensions for JavaScript linting and code formatting, this will save hours of debugging in the future. To emulate a device, you can use Android Studio, although for React Native, emulators from third-party developers are often sufficient.
Use a physical device for testing instead of an emulator on weak computers. Android emulation requires significant RAM and processor resources, while a real phone connects via USB and works faster.
Interface development and application logic
The process of writing code is radically different depending on the chosen framework. In React Native, you don't use HTML tags. Instead of the usual div and span you operate with components View, Text and Imagethat are translated into native Android elements.
Styling in such frameworks is often performed through JavaScript objects, reminiscent of CSS, but with limited properties. For example, to create a flexible layout, you use Flexbox, which works almost identically to the web version, ensuring adaptability to different screens.
- 📱 Components: Use ready-made UI libraries, such as React Native Paper or NativeBaseto speed up development.
- ⚡ Navigation: To move between screens, connect React Navigation, this is the industry standard for managing a stack of screens.
- 🔌 Plugins: To access hardware (Bluetooth, NFC), look for community-tested modules, not write native code from scratch.
Application logic is written in modern JavaScript (ES6+). You can use asynchronous functions async/await to work with the network and local database.
☑️ Preparing to build
Working with native device functions
One of the main advantages of native development is full access to the hardware. In the world of JavaScript development for Android, bridges or plugins solve this problem. They allow you to call Java/Kotlin methods from a JavaScript context.
If you are using Capacitor or Cordova, the camera, file system or accelerator are accessed through a single API. For example, to take a snapshot, you call a plugin method that returns a Promise with a file path or base64 string.
import { Camera, CameraResultType } from '@capacitor/camera';const takePicture = async () => {
const image = await Camera.getPhoto({
quality: 90,
allowEditing: true,
resultType: CameraResultType.Uri
});
console.log(image.webPath);
};
In the case of React Native, the situation is similar, but the ecosystem of libraries is wider. To work with geolocation, @react-native-community/geolocationis used, and for push notifications - react-native-push-notification. When integrating complex features such as biometrics, you may need to write a small piece of native code in Java.
⚠️ Attention: Requesting permissions to access user data (camera, contacts) should occur at the time of need, and not when the application is launched. Otherwise, the Android system may block the installation or the user will delete the application immediately after launch.
What to do if there is no ready-made plugin?
If the required functionality is not in the community, you will have to write your own Native Module. This will require creating a Java class annotated as @ReactMethod that will expose methods to the JavaScript environment.
Optimizing performance and size
JavaScript applications are often criticized for their large installation file size and high memory consumption. The JavaScript engine (for example, Hermes in React Native) must be loaded into memory, which creates an overhead compared to pure native code.
To combat this, use a technology Tree Shaking when building that removes unused code from the final bundle. It is also critical to optimize images: convert them to WebP format and use different resolutions for screens with different pixel densities (mdpi, xhdpi, xxhdpi).
A comparison of the characteristics of different development approaches is presented in the table below:
| Parameter | React Native | Cordova/Ionic | Native (Kotlin) |
|---|---|---|---|
| UI Performance | High (60 FPS) | Average (depends on WebView) | Maximum |
| APK size | ~15-20 MB | ~5-10 MB | ~2-5 MB |
| API access | Via bridges | Through plugins | Direct |
| Login complexity | Average | Low | High |
Pay special attention to memory management. In JavaScript, garbage collection occurs automatically, but creating thousands of objects in animation loops can cause stuttering. Use FlatList instead of the standard map to display long lists, since it renders only the visible part of the content.
Optimizing images and using lists with virtualization (FlatList) are two of the most effective ways to improve the performance of a JS application on weak devices.
Building, signing and publishing on Google Play
The final stage is generating the release version of the application. To do this, a build command is used, which minifies the code and creates a signed archive. In React Native this is done through gradlew assembleRelease, and in Cordova through ionic capacitor build android --release.
Google Play requires that all applications be signed with a digital key. You need to create Keystore a file using the utility keytool. This file contains a private key that verifies the authorship of the application. Losing this file means that you will not be able to update the application in the future.
The signing process is as follows:
- Generate a key:
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias - Configure the file
gradle.propertiesby specifying key paths and passwords. - Run assembly of the release version.
⚠️ Attention: Never commit files
keystoreand passwords to a public Git repository. Use environment variables or protected secret stores in your CI/CD pipeline.
After receiving the file .aab (Android App Bundle) or .apk, you can upload it to Google Play Console. Remember that Google now requires the format AAB for new applications, as it allows the store to generate optimized packages for a specific user's device.
What is an Android App Bundle?
AAB is a new publishing format that replaces the universal APK. It contains all the resources for all devices, but Google Play pumps out to the user only what is needed specifically for his phone model, saving space.
Frequently asked questions (FAQ)
Is it possible to write a game entirely in JavaScript for Android?
Yes, engines like Phaser or Cocos2d-jsthat can be wrapped in Capacitor. However, for heavy 3D games with complex physics, it is better to use Unity or Unreal Engine, since JS performance in such scenarios may not be sufficient.
Do you need to know Java to write in React Native?
For basic development, knowledge of Java is not necessary. However, when integrating complex native modules or debugging deep system errors, you will have to read Java code. A basic understanding of the structure of an Android project will be a big plus.
How to update an application without publishing it in the Store?
Using Code Push technologies (for example, Microsoft App Center), you can send updates to JavaScript code and resources directly to users' devices, bypassing Google Play moderation. This only works for changes in JS logic, but not for changes in native code.
Why is my application slow on older phones?
Most likely, the problem is a heavy JavaScript stream or unoptimized layout. Try turning on the engine Hermes in the build settings, it significantly speeds up the launch and operation of JS on Android devices with low RAM.