Search for a command to run...
Web apps can now be deployed cross-platform. A single codebase for multiple platforms!
I'm a developer from Nairobi, Kenya. I have a BSc in Computer Science and I'm pursuing an MSc in AI.
I mostly do full-stack web development. I do pay attention to the finer details, so stay tuned for awesome articles.
No comments yet. Be the first to comment.
Discover how to future proof yourself against financial uncertainty.
A backdoor in the XZ utils targetting Linux systems running SSH was recently accidentally caught. This article covers in detail how it happened.
This article covers setting up Nginx web server for SPAs and PWAs, reverse proxy for APIs & SSR apps, and installing a free SSL certificate
Imagine having the power to pull the plug on JavaScript promises or asynchronous functions midway! Using JavaScript's AbortController, you can abort fetch requests both on the browser and in Node JS. Furthermore, in Node JS, this feature enables you ...
The launch of Nixque Blog
Gone are the days when you had to go native when thinking about making apps. The average web developer could only make websites and had to learn a whole new stack for application development. But measures were taken to empower the web developer and expand what websites could do.
A decade ago, for a website to submit data to a web server, the browser had to reload the page. Whenever there was new content, the user had to refresh the page to update it.
A webpage could now use JavaScript to send data asynchronously to the server and update the HTML content once it got a response, without blocking the execution of the webpage. This was done through XML HTTP Requests (XHR) before Fetch API was introduced. Now there are libraries like Axios.
As the JavaScript language grew and JavaScript libraries mushroomed, single-page applications (SPAs) emerged. As the name implies, SPAs only have a single page, with the content being dynamically updated using JavaScript. Websites now evolved into web apps.
To get started with SPAs, it is prudent that you learn a frontend JavaScript framework like Vue, React, Angular or Svelte. The norm for data representation shifted from XML to JSON, which is easier to work with.
Still, websites weren’t nearly as capable as native apps.
Luckily, W3 Consortium came to the rescue with web APIs. JavaScript Web APIs are simply standard interfaces used to access extended browser functionality. As of 2022, there are over 97 standard APIs with more being added every now and then. The ones every developer should be using, or at least they should be aware of, are the following:
- Clipboard API
- IndexedDB API
- Local and Web Storage API
- File API
- Page Visibility API
- Fullscreen API
- Geolocation API
- Speech Recognition API
With JavaScript Web APIs, web apps can access persistent storage, the device filesystem, location, etc. WebAssembly API even allows you to integrate C/C++, C#, or Rust code into your website. This list is just the tip of the iceberg. There’s so much you can do with JavaScript Web APIs, it’s dizzying!
The W3 consortium went even further to give web developers a niche, and web apps a fighting chance in today’s online world.
Have you ever come across an “Add <app name> to home screen” or “Install <app name>” popup when you were surfing sites like YouTube or Twitter? If so, you have definitely interacted with PWAs before.
With a few modifications, a SPA can be made installable and even available offline through caching. The browser address and tabs bars are not present, so PWAs can really have that native look and feel.
Apps need to look and feel native. A good place to start would be Google’s Material Design 2 principles, especially when developing for Android. Material Design 3 spec is now out. There are many framework-specific UI libraries that implement the material design spec. They come with many easily-customizable components or widgets. Examples include Svelte Material UI, React Material UI, Vuetify, and Quasar (Vue).
For Windows apps, consider Windows 11 design principles or even WinUI (for React) to get a more native feel. For Apple products, consult Apple design specs.
Google Play Store now allows developers to publish their PWAs on Play Store using Trusted Web Activity (TWA) feature. Microsoft Store allows developers to submit PWAs as is. Bing crawlers even actively search the web for quality PWAs to add to Microsoft Store! Apple App Store also recently added support for PWAs. You can now package your PWA using PWABuilder and publish it to your store of choice. However, the app must meet the store’s criteria of quality and “app-like” feel.
Enter React Native. With React Native you can create native mobile apps (Android and iOS) with ease. The React native code is rendered natively. You can create only one codebase to run on both web and mobile.
Do you still think PWAs are inferior to apps? The web story doesn’t just end with PWAs. We are now living in the era of cross-platform development. Runtime frameworks can easily convert web apps into native app formats and run them. These frameworks run your web code on a particular platform (Operating System). Runtime frameworks, like Electron and Capacitor, should not be confused with web frameworks like Vue or React.
In addition to existing JavaScript web APIs, most cross-platform runtime frameworks offer native APIs that provide even more functionality to apps. At the end of the day, these runtime frameworks compile web apps into platform-specific app formats (.apk or Android, .ipa for iOS, and .exe for Windows). On mobile, the apps are run inside a WebView. Apache Cordova is a popular runtime framework that runs modern PWAs natively on iOS, Android, and Electron. The newer Capacitor has more APIs than its predecessor Cordova, and its APIs are more consistent across platforms.
Electron is a runtime framework used to run web apps on Windows, Linux, and Mac. Under the hood, it uses Chromium (a lightweight browser) and Node JS. WhatsApp Desktop, Slack, Visual Studio Code, Microsoft Teams, Spotify, and Postman are all built on Electron.
I have thrown around quite a lot of frameworks and APIs, I know. The silver lining is that you don’t have to deal with each cross-platform runtime directly. All you need to do is to:
1. Integrate a suitable library into your web framework. Ionic is the popular choice for mobile. It even comes with UI components with a native feel for Android or iOS. For Desktop, you can use Electron or Tauri libraries.
2. Start development with a web framework with cross-platform tools already built into it like Quasar for Vue or Framework 7 (React, Vue, Svelte).
With cross-platform web development, you get to develop a single codebase and deploy it across multiple platforms: web, mobile, and desktop.
It goes without saying that native apps will always be faster and more performant than cross-platform apps. But the difference is minuscule. For Capacitor/Cordova/Ionic mobile apps, users usually can’t tell the difference.
Electron users have complained about the bloated desktop app size. This is mainly because Electron packages desktop apps with Chromium — an entire browser engine — in them. There is an alternative called Tauri that produces leaner, more performant apps. It boasts better performance, start time, and memory consumption. Just one catch with Tauri: you might have to learn a little Rust to use it.
“Premature optimization is the root of all evil”
Ultimately, it’s a trade-off. The ease, convenience, and cost-effectiveness that cross-platform web development brings come with a bit of a performance hit. But then premature optimization is the root of all evil in matters of programming. If performance really counts in your application, consider WebAssembly for complex tasks or React Native to get ‘native’ performance. In most cases, performance depends on the code so good code equals great performance.
Go forth confidently, my distinguished fellow web developers, and conquer this digital world!
