SolvedNativeScript Rendering NativeScript templates on the web (nothing to do with WebView)

I am interested in expanding the idea of NativeScript modules from iOS and Android to the web. I am just starting to get into NativeScript, so there may be some things I am missing here, it seems like there is no reason why you can't translate something like this:

<Label text="hello world" /> 

to

<span>hello, world</span>

Yes, I picked something super easy, but my point is just that I believe the number of things that don't have literally ANY web equivalent are extremely small. To prove my point, you can see the React community trying to do exactly what I am suggesting here with React Native:

https://github.com/necolas/react-native-web

I use Angular 2 so I know it is possible at the very least to create a new Angular 2 renderer that reads in NativeScript XML and spits out HTML, but I would imagine that this may be the type of thing we want deeper in NativeScript core.

I guess I am looking for feedback from the NativeScript community on two levels:

  1. Feasibility of doing NativeScript for the Web
  2. Assuming it is not impossible and there is interest, thoughts on how to best organize this type of effort

I don't have the bandwidth to do something like this by myself, but if there were other people interested I would love to work together to make this happen.

30 Answers

✔️Accepted Answer

@jeffwhelpley I'm going to initially tackle this with the the (first) option 2 as you suggest. Agreed, an Angular implementation will prove out quicker I think as well. Then we back it out to vanilla.

I see this as becoming another runtime option for tns, so I would work towards implementing another command line option, which will likely be this:

tns add platform web
tns run web

It would add a web build to platforms and run that.
Out of the 3 strategies you suggest (angular components, transforms, or custom rendering engine), I like the first at the moment. I could see the beginning of the web runtime including angular and providing that component toolkit. This should be the least friction way to prove things out. Then angular could be removed to provide the vanilla runtime.

In order to proceed, I'm going to cc a couple core team members that may be able to provide a pointer to a good workflow in adding another command to the cli and developing on that locally.

/cc @Plamen5kov @slavchev @jasssonpet @ivanbuhov @hdeshev

If anyone had a 1-n* punch list of how to setup a good dev workflow to add a new runtime to the cli so I could work on this would be appreciated. In meantime, I will see what I can sort through.

Other Answers:

@NathanWalker I probably need to hear more but I would think the main issue with that approach is that while almost all NativeScript XML can be translated into HTML + some JS functionality, I don't think the inverse is true.

Also, even if you could do something in the reverse direction, it doesn't really help doing static HTML to NS XML. Really what we want is interop/reusability between NS and web templates.

At a high level, as we talked about from the beginning the goal is to share templates between native and web. There are many variations for what this actually means or how this would work, but here is the way I was thinking it would potentially work with Angular 2.

  1. You create your native app first using NativeScript and the standard XML templates. No different than today.
  2. To run your app on the web, the first step may require us to either do a transformation of the template using the Angular 2 template transformers and/or a custom renderer. We would not build the solution on either of these, but they are good safety nets in case # 3 doesn't work for whatever reason.
  3. Almost every NativeScript XML element has a custom Angular 2 component for the web.

So, with the way I am thinking, no changes are necessarily needed to the NativeScript core. You would instead leave that as a decoupled black box and just build out a suite of Angular 2 components, services, transformers and potentially a renderer that provides functional equivalence.

Now, maybe after doing this there are certain things that just don't work on the web, but I suspect that is less than you may initially think. Of course, this only works for Angular 2 and is not a generalized solution for other frameworks. But...who uses anything other than Angular? ;-)

I know this is closed. But if this thing is possible, nativescript would become to go platform for almost any application out there.

More Issues: