Nativescript: Support for desktop OSs (OSX, Windows, Linux)

[pitaj]

This would be a killer feature. If you even made a layer for NW.js, that would be awesome.

Please vote for this issue in our ideas portal.

Please don't write a comment saying +1. Instead vote for it in the ideas portal or by hitting the quick reply buttons just below this post.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[kasajian]

How do I up-vote this?

[Sibling10]

+1 - Core dev team might want to take a look at the latest version of WinJS library for ideas.

[RangerMauve]

This'd be pretty cool. And with windows 10 Chakra integration that'd be not too hard, I'd imagine. Maybe it'd also be a step for integrating with windows phone, too.

[joao-parana]

+1

[mrjjwright]

Can somebody talk about the feasibility of doing this. It looks pretty doable based on the iOS runtime as there is a pretty clean layer for calling Objc-C.

[valentinstoychev]

Yes it is doable and relatively easy (in a matter of week) a POC app can be created that can show a running MacOS app written in {N} and accessing the native desktop APIs. The real effort will after that when the abstraction layer that will allow you to reuse the UI declarations between mobile and desktop should be written.

I wonder if some of you is interested in doing this POC or dealing with the abstraction layer? It is really not a top priority for the moment and I don't see it becoming a priority in the next 6 months for the core team.

[alexrainman]

I wish you keep mobile separated from desktop development. Please, keep the core lite. This can be somekind of optional plugin, dont you think?

[listepo]

+1

[buu700]

If desktop support is a lower priority than mobile, maybe it could be implemented on top of Qt?

Since they've already done the work of wrapping up a JS runtime and cross-platform UI abstraction together, it seems like NativeScript could hypothetically just map its own UI markup's primitives to the equivalent QML code.

[tonystar]

+1

[zakdances]

I don't think QT is needed. Ubuntu already supports QML natively for it's UI markup. And also JavaScript and Swift for it's controller logic.

So only Swift (plus some QML) is necessary to support iOS, OSX, and Ubuntu. But, as mentioned above, the hard part is the API differences.

HOWEVER, with interoperability being an official goal of Swift 3.0, the syntactic differences between Apple APIs (Foundation, AppKit, UIKit, etc) might be lessened. Which should make the {N} abstraction layer easier to create for all 3 platforms.

So perhaps Swift 3.0 is a good runtime target for this goal (even if it temporarily excludes Windows).

[icode]

+1

[andy-tai-leeco]

no Swift. Why adding a dependency on a language not absolutely needed for the desktop, in the sense of Java being needed for Android.

[hypery2k]

Are there any plans to support desktop OS in the near future? Maybe macOS?

[jboehler]

+1

[gmhispagnol]

+1

[pitaj]

PLEASE DO NOT +1 in comments!

[vlastik01]

https://tylergaw.com/articles/building-osx-apps-with-js

[rizwan3d]

+1

[recev]

that would be awesome :+1:

[pedromorgan]

Will it work on my RPI a ??

[geminiyellow]

I cannot open the vote page. so, I have to vote here :+1:

[pedromorgan]

pyqt anyone (dayjob) ?

so we need to parse xml, create the widgets, and bind to js right ?

[TheJaredWilcurt]

I'm a big supporter of NW.js (been using it for hundreds of projects for about 5 years). However I don't see it (or it's alternative electron) as a good fit for NativeScript.

A better option would be something like libui-node. This is a better option because it actually produces native code and uses the native UI of the OS, which is much more in line with the idea of "Native Script".

I would like to see something like @jlooper's Vue example, but with a desktop template as well:

<template web>
  <div class="App">
    <h1>Hello Web App</h1>
    <h2>{{ msg }}</h2>
    <ImageGallery/>
  </div>
</template>

<template native>
  <StackLayout>
    <Label text="Hello mobile App" style="font-size: 48;"/>
    <Label :text="msg" style="font-size: 40;"/>
    <ImageGallery/>
  </StackLayout>
</template>

In the same manner, have NativeScript-Vue offer Vue components that act as abstractions for LibUI-Node's native UI elements. So you could just have an additional template for native desktop, like:

<template desktop>
  <VerticalBox>
    <AttributedString text="Hello Desktop App" style="font-size: 48"/>
    <AttributedString :text="msg" style="font-size: 40"/>
    <ImageGallery/>
  </VerticalBox>
</template>

Vuido is a new library started for adding a Vue abstraction on top of LibUI-Node, so it may be something that can be referenced. I just think it makes more sense to have that functionality all in one place (NativeScript). Since it falls under the scope of cross-platform native app building and code-sharing.

[zbagley]

Being able to export a web-app version seems like it is a long term necessity, and should be started sooner than later. Doing this for TypeScript/Angular projects seems like it would almost be trivial, and I'm kind of surprised it's not implemented yet.

[TheJaredWilcurt]

Native-Script vue already supports building a web-app version (example shown above). I'm saying it would be nice, and make sense, to also support building for native desktop app.

[MisterY]

Please vote for this issue in our ideas portal.

The "ideas portal" returns

[giates]

+1
watch out, the voting page link is broken

[flowt-au]

Any progress on this? @TheJaredWilcurt I am completely new to {N} and I too am a nw.js developer wanting a code sharing situation for the business logic across Desktop and Mobile. It seems the only option is with Angular?

Is there now an option to build for Win, OSX, Nix and access the native file system and use anything from plain JS to Vue or whatever we choose? (Like we can in nw.js)

Thanks!
Murray

[TheJaredWilcurt]

@flowt-au I've just been wrapping Desktop-specific stuff in conditionals if (window.nw) { doThing }.

[flowt-au]

@TheJaredWilcurt Thanks for that. Good to know it is possible before spending too much time on it. I will go and play. If you have any "gotchas" you can share that would be great.

My current architecture is pretty "old school" but it works. Basically: one set of Business logic with no UI, using ExtJS4 for the UI, packaged for nw.js for node and file system access (etc), or with conditionals to detect no nw.js for a reduced functionality version that runs in a web browser. The same Business logic is shared with a Sencha 2 UI for WepApp or Cordova.

I want to update the UI to modern tooling so am looking for other options that can deliver what I now have: a desktop package, a web browser version, a web app and a packaged mobile. Not asking for much, really. ;-)

Thanks again for your response.
Murray

[flowt-au]

@TheJaredWilcurt Jared, I have searched and read and experimented and cannot find a way to create "standard" HTML etc from {N} for wrapping in nw.js. Perhaps I misunderstood your comment. Could you give me some clues about how you have done this? Or if you have? I am thinking what you meant was to bypass {N} for mobile code in nw.js via environment checks so you can code-share to some degree but the nw.js and the {N} are separate things just happening to share some code?

Sorry, all that is a guess. I am quite confused by the tutorials that talk about creating WebApps and mobile apps using {N} but then only talk about the mobile! I cannot find any tutorials or specific info on that.

Anyway, any clarifications you could offer would be very welcome.

Thanks,
Murray

[TheJaredWilcurt]

@flowt-au

• https://www.nativescript.org/blog/code-sharing-with-nativescript-vue

There is a template for web and one for mobile. They share the same script section.

computed: {
  // This could also be a getter if you are using Vuex
  isDesktop: function () {
    return !!window.nw;
  },
  someText: function () {
    if (this.isDesktop) {
      return 'You are on a desktop';
    }
    return 'You are in a browser';
  }
}

```html

```js
methods: {
  doSomethingDesktopSpecific: function () {
    if (!this.isDesktop) {
      return;
    }
    let fs = require('fs');
    this.fileList = fs.readdirSync('.');
  }
}

Then when you build for web if it runs in a browser it works like usual, if you run the build in NW.js it has extra functionality.

---

Edit: Here is a boilerplate for NW.js + Vue-CLI

• https://github.com/nwutils/nw-vue-cli-example

[Chris2011]

My use case atm is, that I want to create a NetBeans plugin. Most of them are created with Swing, some with JavaFX and now I try the WebView, so the UI is created with HTML/CSS, communication between the frontend and the backend is with HTML4J with JS to Java and vice versa. The problem here is that we need the WebView like PhoneGap does it.

So for me it would be nice to create a frontend with NativeScript, they map the stuff to native components (Swing, whatever) and communication is with the Java backend via JS.

Could this be possible? Just a dream :)

[kokizzu]

I think this and https://github.com/NativeScript/NativeScript/issues/6845
is the only way NativeScript can win the popularity contest '__')

[pathscale]

I think this may have been missed, but may potentially full-fill the readers requirements of Vue+Desktop..
https://github.com/SimulatedGREG/electron-vue

[DrSensor]

I think this project worth to look at.
https://github.com/tauri-apps/tauri

[andreasbhansen]

is the only way NativeScript can win the popularity contest '__')

Import to remember that search trends ≠ actual industry adoption. Nevertheless, desktop support would be great!