Skip to main content

Working natively with JavaScript in iOS and Android without WebView

Using JavaScript code from native code without using a WebView (sic!) can be really useful to

  • introduce dynamic functionality that was updatable without need of updating the app
  • shorter iteration cycles
  • share code between backend and native iOS and Android apps
You can have business logic provided by a JavaScript that then controls the app that inject native functionality in the JavaScript context.
You could even write an A/B testing framework based on this approach.


iOS
iOS offers the native JavaScriptCore:
Evaluate JavaScript programs from within an app, and support JavaScript scripting of your app.

So you can evaluate a script and read its return value natively:

context.evaluateScript(myLib);
let result = context.evaluateScript("myFunction();")
let myFunction = context.objectForKeyedSubscription("myFunction");
let parametrizedResult = myFunction.invokeMethod(...)

Or you can inject a native object into the JavaScript engine:
@objc protocol MyJSProtocol: JSExport {
    var myVar: String {get set}
}

@objc class MyObject: NSObject, MyJSProtocol {
   dynamic var myVar: String
}

...
context.setObject(MyObject.self, forKeyedSubscript: "MyObject")

Documentation JavaScriptCore


Android
For Android there are methods to inject native objects into the JavaScript context in a WebView; but you always have to initiate a WebView which is pretty heavy-weight.

There are third party libs that fill this gap:

  1. J2V8, a Java wrapper around Google’s V8 JavaScript engine.
  2. JS Evaluator for Android, based around the native Android WebView.
  3. AndroidJSCore, a Java wrapper around the WebKit JavaScriptCore engine.
  4. Duktape Android, the Duktape embeddable JavaScript engine packaged for Android.
Most stable and best performing candidate proved to be J2V8.

Comments

  1. An Android app in JavaScript sounds like a fascinating approach to mobile development. Leveraging JavaScript allows developers to utilize their existing web development skills and tools, potentially streamlining the process. However, I'm curious about performance and native device integration. How does the app handle hardware features? Security concerns also come to mind. Nonetheless, it's an exciting prospect that opens up new possibilities. I'd love to see a detailed comparison with traditional Android development to better understand its benefits and limitations. Great post!

    ReplyDelete

Post a Comment

Most Favorite Posts

Server-driven UI (SDUI): Meet Zalandos AppCraft and AirBnB Lona

A short WTF: Joe Birch:  SERVER DRIVEN UI, PART 1: THE CONCEPT Zalando seems to follow the SDUI principle as well - defining a common design language and construct the screens on the backend while displaying them natively on the clients. They even go one step further; they implemented a mighty toolset to enable non-technical stakeholders to define their own native app screens Compass: Web tooling to create screens and bind data Beetroot: Backend service that combines the screen layout definition with the data Lapis/Golem: iOS/Android UI render engines Crazy cool! Good job, guys (when you do an open-source release?) To even move faster a Flutter based UI render engine implementation was great! See also AirBnB Lona SDUI approach Building a Visual Language Why Dropbox sunsetted its universal C++ mobile project and AirBnB its React Native implementation

Judo App - Server Driven UI out of the box

Judo App Judo brings server-driven UI to your iOS and Android apps. Build user interfaces visually in a fraction of time and publish them instantly without submitting to the app store. Build Experiences - With No Code The Judo app for macOS, available through the App Store, is built for design professionals with common keyboard shortcuts and familiar concepts like canvas, layers and inspector panel. Workflow is streamlined with the ability to drag and drop media files directly into your experiences and manage your own Judo files in Finder. Manage Creative Execution A Judo experience is interactive and can include text, images, video and buttons. An experience may be part of a screen, a single screen, or more typically multiple linked screens. Judo supports screen transitions, carousels, horizontal scrolling and modals. Clients can add custom fonts and define global colors and these are updates applied universally. Effortlessly Deploy Judo Cloud syncs your experiences with your iOS and

Dark Theme (Dark Mode) in Android WebViews, WKWebViews and CSS

So your apps just implemented a shiny new dark theme and it’s looking 👌 There are lots of benefits to having a dark theme in your application, and having it consistent throughout your application allows for a great user experience. But what happens when the the user runs into a WebView in your app? Support: if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) { ... } Set: WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_ON) Current setting: val forceDarkMode = WebSettingsCompat.getForceDark(webView.settings) Joe Birch Assuming your question is asking how to change the colors of the HTML content you are displaying in a WKWebView based on whether light or dark mode is in effect, there is nothing you do in your app's code. All changes need to be in the CSS being used by your HTML content. CSS dark mode via :root variables, explicit colors and @media query: :root {     color-scheme: light dark;         --h1-color: #333;

Database Driven UI - Meet Facebooks Messenger Re-Implementation: Project LightSpeed

Database-Drive UI - Database-driven Logic Rather than managing dozens of independent features and having each pull information and build its own cache on the app, we leveraged the SQLite database as a universal system to support all the features. Compared with the previous iOS version, this new Messenger is twice as fast to start and is one-fourth the size. We reduced core Messenger code by 84 percent, from more than 1.7M lines to 360,000. We accomplished this by using the native OS wherever possible, reusing the UI with dynamic templates powered by SQLite, using SQLite as a universal system, and building a server broker to operate as a universal gateway between Messenger and its server features. Native Code When building a new feature, it’s often tempting to build abstractions on top of the OS to plug a functionality gap, add engineering flexibility, or create cross-platform user experiences. But the existing OS often does much of what’s needed. Actions like rendering, tran

Backend-driven native UIs

Backend-drive native UIs John Sundell  Slide Share Using Back-End Design to Create Customizable Front-End Mobile Experiences By controlling the front end of mobile apps from the back end we can build customized experiences at runtime, creating cleaner interfaces and reducing load times. Nithin Rao UX Magazine The Hub Framework Welcome to the Hub Framework - a toolkit for building native, component-driven UIs on iOS ( no Android support released yet ). It is designed to enable teams of any size to quickly build, tweak and ship new UI features, in either new or existing apps. It also makes it easy to build backend-driven UIs. The Hub Framework has two core concepts - Components & Content Operations. Spotify LeeGo: Build UI without UIView LeeGo is a lightweight Swift framework that helps you decouple & modularise your UI component into small pieces of LEGO style's bricks, to make UI development declarative, configurable and highly reusable. Wang Sheng Jia

Running Espresso Tests in parallel with Spoon and Android Test Sharding

Introduction to Android Espresso Testing and Spoon Espresso UI test automation framework is Google’s de-facto testing platform for Android app developers. No test engineer or developer will be quite unless it validates the functionality of his app on multiple devices and emulators. For that, there is another widely used tool called Spoon (there are also cloud-based solutions as mentioned above that support parallel execution on real devices). This tool, will collect all the target devices (that are visible via adb devices) test results and aggregate them into one HTML view that can be easily investigated. Mobile Testing Blog Android Test Sharding The test runner supports splitting a single test suite into multiple shards, so you can easily run tests belonging to the same shard together as a group, under the same Instrumentation instance. Each shard is identified by an index number. When running tests, use the -e numShards option to specify the number of separate shards to cr