Desktop NativeScript

I've been playing around with creating a framework for Svelte to build desktop app, and in the process I realized how easy it would be to re-use most of it for NativeScript.

First thing I want to clarify, there is NO BROWSER involved, these are all native GTK components! Again NO BROWSERS were harmed (or used) in the making of this!

I have created a prototype NativeScript-Desktop framework that allows me to do this:

<!-- app-root.xml -->
<Frame defaultPage="main-page">
</Frame>
<!-- main-page.xml -->
<Page>
<StackLayout class="p-20">
        <Label text="Tap the button" class="h1 text-center" />
        <Button text="TAP" tap="{{ onTap }}" class="-primary" />
        <Label text="{{ message }}" class="h2 text-center" textWrap="true" />
    </StackLayout>
</Page>

The other JS (main-page & view-model) code is the basically the same except for this bootstrap replaces the app.js.

"use strict";

import {platform} from "node:process";
import {Application} from "../lib/application.mjs";


// Create the Application & Window
const app = new Application( {width: 400, height: 200, title: "Hi from a NativeScript " +platform+ " desktop app", NativeScript: "app-root" })

Very standard NativeScript mobile based code, the only thing unique is the creation of the new Application FIRST and then passing "NativeScript" value the startup file. And this is what I get out of it:

The screen on the left is the app, the screen on the right is a GTK application inspector screen.

I have written a framework where we convert the NativeScript StackLayout to a GTKBox, Label = GTKLabel, Button = GTKButton. The events are wired up and you see the above. The interesting thing is it can easily support all flavors, because it basically looks like the underlying "StackLayout". So if Vue or Angular asks NativeScript for the StackLayout class, I give it MY custom StackLayout. 😉

To the Future and Beyond!

There is still a lot of pieces to be done to make this generic for everybody to use...

  • Adding bundling so that it can be packages into a single executable on each platform for production, including supporting binary v8 snapshots to protect your code.
  • Tying into the "NativeScript" default way of bootstrapping an app so that all Nativescript flavors can work out of the box with no changes.
  • Extend from the base NativeScript classes so that the vast majority of the framework works as is.
  • Adding lots more NativeScript equivalent elements.
  • Getting CSS & Styles system ported properly.
  • Supporting more NativeScript properties on the elements I've already created.
  • Creating a page-able template system as GTK also supports templates list (& other) views, to be much more memory efficient. So that we can have the NativeScript ListView (& other template based views) work out of the box.
  • Tying into Webpack so that it can build everything via the NS command line.

Funding

I have my own purposes for the Svelte framework that I discussed in the prior post which this is basically a off-shoot of that technology stack (but this doesn't need Svelte). So my goals currently aren't in line with what a community needs in general. Since there has been demand for a NativeScript Desktop framework, I decided to reuse what I had built for my Svelte GTK app and see if there is any real interest in this! Rather than lock away this technology I've decided to try to do a Ko-fi membership (like patreon) system. If I hit a solid number of subscriptions then my focus will be to generate something that can be used by everyone and the code will be released to subscribers at different points in time and eventually be totally open sourced to the world. If there is no interest in helping fund it, then, I already have enough open source NativeScript projects that take plenty of time to support that I don't need to add any more to my stack.

There is one interesting twist, I'm testing the water for two different directions with this framework. Over the last 6 years a lot of people have asked for the NativeScript desktop framework, but I know there are a lot of people who are tired of the massive memory eating Electron applications. I have no idea if there is any real demand for either, but I figured since my base GTK framework actually can do this, I would see if the NativeScript community had enough desire for it. And I do have need for the Svelte branch. So I have two separate subscription groups, GTK-Svelte and NativeScript-Desktop.

If you are interested in helping fund this and/or the svelte version; then click here and start a Ko-fi membership. If you have any questions please feel free to ask away.

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.