JavaScript Everywhere: How to Write Code for All Platforms at Once

Online Python Trainer for Beginners

Learn Python easily without overwhelming theory. Solve practical tasks with automatic checking, get hints in Russian, and write code directly in your browser — no installation required.

Start Course

Why JavaScript is the New "Write Once, Run Anywhere"?



Remember the old developer dream: write code once and it runs everywhere? Java promised this with its virtual machine, but in practice it always involved a lot of hoop-jumping. Now take a look at JavaScript. The language once considered a "toy" for button animations has taken over the world. And you know what? It actually delivers on that promise.



Cross-platform development with JavaScript is not just a trendy fad. It's a way to reduce time-to-market, save budget, and keep the same specialists on your team. In this article, we'll break down how one language lets you create applications for the browser, mobile devices, desktop, and server. And yes, there will be real code examples.



Architecture of a Modern Cross-Platform Application



Before diving into code, let's understand how the modern ecosystem is structured. The key idea is to split the application logic into three layers:



  • Business Logic — data processing, validation, working with APIs. This is the core that should not depend on the platform.
  • UI Layer — the interface. It can be different for web, mobile, and desktop, but often uses shared components.
  • Storage Layer — local databases, cache, file system operations.


JavaScript allows you to write all three layers in one language. Let's look at the main tools.



Server Side: Node.js as the Foundation



Any cross-platform system starts with the backend. Node.js is a JavaScript runtime environment outside the browser, built on the V8 engine. It is ideal for creating REST APIs, handling WebSocket connections, and working with databases.



Here is a simple Express server example that will serve both web and mobile applications:



const express = require('express');const app = express();const port = 3000;

// Middleware for processing JSONapp.use(express.json());

// Example endpoint for getting a list of usersapp.get('/api/users', (req, res) => { const users = [ { id: 1, name: 'Anna', email: 'anna@example.com' }, { id: 2, name: 'Ivan', email: 'ivan@example.com' } ]; res.json(users);});

// POST request for creating a new userapp.post('/api/users', (req, res) => { const newUser = req.body; // Usually saving to the database goes here console.log('New user:', newUser); res.status(201).json({ message: 'User created', user: newUser });});

app.listen(port, () => { console.log(`Server running at http://localhost:${port}`);});


This code will work identically on Windows, macOS, and Linux. Moreover, you can run it on a Raspberry Pi or in a cloud container — no changes required.



Web Interface: React as a Universal Building Block



When it comes to cross-platform development with JavaScript, React is the first candidate. Its component architecture allows you to reuse up to 70% of code between web and mobile applications.



Let's create a simple component for displaying a list of users:



import React, { useState, useEffect } from 'react';

function UserList() { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true);

useEffect(() => { fetch('/api/users') .then(response => response.json()) .then(data => { setUsers(data); setLoading(false); }) .catch(error => console.error('Error:', error)); }, []);

if (loading) { return <div>Loading...</div>; }

return ( <div> <h2>User List</h2> <ul> {users.map(user => ( <li key={user.id}> {user.name} — {user.email} </li>

Blogs

Book Recommendations