Meteor > Angular2 > NativeScript?

Hi

I have been researching a lot to find the right platform for a new social app, and found that Meteor > Angular2 seems like a good choice for us.

I would at some point probably like to make a native version of the app, and think that NativeScript might be the solution. The question is, if you see any special obstacles of the Meteor / Angular2 / NativeScript combo?
And do you have other thoughts about this combination?

The Angular2 and NativeScript teams have worked closely to make the two systems work great together:


Thanks in advance,
Stig

1 Like

Actually we just talked a bit about similar topics on the podcast yesterday:

In short, Meteor 1.4 should make it much easier to use parts of the Meteor client in other systems, like NativeScript, and Apollo is built from the ground up to make this easy.

1 Like

Hi Sashko

Thanks for your reply!

I’m not completely into how the different layers work here together yet.
But what you talked about was not about using Angular and NativeScript together, right?

So my question is - if you think it is possible to use NativeScript together with Angular the way it’s showed in the NativeScript talk - in a meteor project.

Great topic, @stig !
I am also very interested in producing a NativeScript app using Angular2 + Meteor.

However, I cannot create a picture in my head on how the Angular2-Meteor app could be used to produce a NativeScript application. What would be the toolchain? Would there be a meteor cli command similar to those for producing ionic apps?

This is a very important topic for people wanting to use Meteor in multiplatform development in the best possible and most efficient way.

Thanks again.

1 Like

There are two plugins you’ll need to use to connect your nativescript app to meteor i haven’t completed the demo as yet but it works :slight_smile: they are similar to the node version of the ddp-client and ddp-login any problems feel free to dm me .

1 Like

All I know is that NativeScript does big deal about that it is a fantastic fit with Angular2.
So I just thought, that if I build a web-app with angular2, maybe I could reuse some parts of the ng2 logics to make native app with NativeScript.

1 Like

This is great @triniwiz
I hope you’ll have time to make a working demo and instructions how to set up everything.

I also like your nativescript-socketio. Super useful!

Thanks!

It is possible with a module called nativescript-ng2-magic also you can take a look at angular2-seed-advanced
photo The zen of multiple platforms. Chrome, Android and iPhone all running the same code.

2 Likes

None of them look that great though - I think the devil is in the details here. Is it possible to make an app that feels native on all of the platforms with the same code?

It’s a just a seed/starter so it’s pretty basic but you are correct :slight_smile:

I guess that’s my point - that it’s easy to make a starter, but I think that gives people false hopes about how easy it will be to make a finished-looking app.

From the experience i gained with various platforms any platform you choose you will still need to put in some work to make a decent looking app .

1 Like

Hi @sashko great discussion in this post. My goal with the advanced seed was not to style the integration but rather demonstrate them working in harmony.

It would actually be trivial to style them to look better than they do, but yeah just wasn’t a focus with the seed. Since design is very subjective to the beholder, I leave that up to the seed user.

The gif @triniwiz posted actually shows the out of box native style that Android/iOS platform provides without any custom styling.

Style always takes some work, however myself and the {N} team are working on a default theme for a {N} app which will provide a great baseline of native styles for both platforms to work from. Look out for that this summer.

As far as Meteor integration, it can certainly be integrated as @triniwiz mentions above with those plugins.
https://github.com/NathanWalker/nativescript-ng2-magic can certainly help to integrate {N} into a angular2 web app.

2 Likes

Why would anyone use nativescript when angular-meteor has everything ready to develop single code base apps ( i mean using cordova distributionin built in right).?

I am confused about the questions that are being posted here as to choose which combo from angular2+NativeScript or Angular2+Meteor. I reckon later is more powerful and has end to end kit.

NativeScript is for doing one thing, building native apps, not apps that run in a chromeless browser like cordova. It really would be great if meteor and nativescript could work seamlessly.

@stig I’m doing another social network with Meteor and Angular. In my case is Angular 1.5 but I’m using TypeScript anyway.

The point is, I’m struggling with some features that my app has (mostly related with the camera) and I was interested in NativeScript just to increment my coverage to different devices.

I found a meteor-nativescript package but it would be better if the package is related with Angular as well.

If you find something interesting would be awesome if you tag me with it.

Cheers

Hi
Unfortunately I currently only have resources to create my app on the standard Cordova fashion. So I will not be able to help you.
:confused:

I am very interested in exploring NativeScript for mobile support on an Angular-Meteor project. NativeScript-ngx-Magic looks like a very useful plug-in to eliminate code duplication. @wwwalkerrun, can you (or anyone else in the forum) point me to a sample project that shows a full-stack Angular-Meteor + NativeScript configuration?

Thanks!

I would love to know if and how you got NativeScript working with Angular-Meteor, @triniwiz. I tried the updated version of @wwwalkerrun’s module, NativeScript-NGX-Magic, but couldn’t get past the following template reference compatibility issue between his custom @Component decorator and the standard @Component decorator usage in Angular-Meteor: Angular-Meteor appears to require using the template property in the @Component decorator argument object with the entire HTML template loaded via an import statement (presumably using meteor-static-templates), whereas the custom @Component decorator provided with NativeScript-NGX-Magic requires use of the templateUrl property assigned with relative path to the template in its argument object. Moreover, that relative URL requires use of the moduleId property in the @Component argument object, but I don’t know that the Meteor module loader provides that.

Anyone successfully directly shared code between Angular-Meteor and NativeScript components?

FWIW, I figured out how to share component controller code between Angular-Meteor and NativeScript with Angular. The test solution uses @wwwalkerrun’s NativeScript-NGX-Magic to swap out templates based on platform, but I could see that it might be preferable to create a base component class with separate derived component classes for web and mobile platforms if the UI on either side has significant differences in dependencies.

Regardless, the solution requires separating the Angular-Meteor client from the Meteor Isobuild system, which I accomplished using:

The NativeScript client runs with the NativeScript CLI, but I’d love to get it working with Webpack so that there would be more flexibility in folder structure and where the TypeScript gets transpiled. Unfortunately, I ran into roadblocks with the nativescript-dev-webpack configuration and (I think) Angular AOT compilation. I see that in his Angular Seed Advanced, @wwwalkerrun has worked-around that, but haven’t spent the time to adapt his configuration for use with Angular-Meteor.

FYI,
Keith

1 Like