Integration with Angular, Nativescript and Electron

Hi,

My team is building a new cross-platform app (android/iOS/browser/desktop), we are thinking about using Babylon.js for our 3d visual part (mixed with some Angular’s DOM UI), but first we need to make sure if it will work with our tech stack and not finding critical performance issues too late in our QA phase.

Our current team expertise is Angular (6+) and Nativescript/Electron, we cannot change Angular but we are open to replace NS and Electron if there are better solutions out there.

Anybody had or know any kind of issue trying to generate both desktop (with Electron) and Android/iOS apps (with NS).

I tried to search Google and this forum, but nobody mentioned those frameworks.

Any thoughts?

Thanks in advance.

1 Like

Hi @alucardeck welcome. : )

Babylon is a good choice. My team also used angular and electron and it worked well.

The electron build easily went to STEAM.

We ended up migrating to PWA and jQuery, because that was best for our needs. :grin:

Do please research PWA. Wish someone told me… PWA is pretty awesome. : )

We made a template called PWAWrappShell if you want to check it out.

It is an example of Babylon in PWA and scoring pretty good on lighthouse.

Babylon is great for performance - just have to continuously optimize as always.

2 Likes

Hi @alucardeck,

We use Babylon in Cordova and Electron since 2 years without any issue :slight_smile: ! Our app are made with Angular, React, jQuery, etc. Performances are almost the same as in the browser.

3 Likes

Since chrome 73 has support for native PWA I would go with that instead of electron.
That makes it dead simple to create desktop apps.

what you need is to ng add @angular/pwa set some stuff up in manifest.json
add a button to install the app, and trigger a install prompt.

as for angular interop.

The only thing I’ve found so far is that zone.js can interfere with the render loop. but you can easily disable zone.js for requestanimationframe.

2 Likes

For the sake of it, we also have an article about angular, Ionic and babylon:
https://doc.babylonjs.com/resources/babylonjs_and_ionic_angular

But overall, this will work flawlessly. I know that @julien-moreau is also using Electron for his editor

3 Likes

A few more datapoints…

I liked how PWA could deploy to a world-wide audience in 5 minutes.

But it seems like the buzz is muted compared to “streaming”.

An interesting comparison there.

For Electron, it is an old friend. We liked the build process.

But it is massively bigger… than the 1 index file with bjs and resources that…

allows us to push direct-to-production from cmd-line in 5mins.

So that is why 3DWeb on PWA path. But it is a wild jungle out there.

Even if the buzz is muted. We see something untapped here.

NX-FOCUS: optimized-production-pipeline.

2 Likes

Hi @aFalcon. thank you for your reply.

I checked about PWA seems great to replace Electron, but can it replace NS flawlessly?
It seems to be working fine with Android and Google Play Store nowadays.
But I don’t see much info for iOS and Apple store.

I don’t get the jQuery part, do you mean the jQuery used for PWA coding?

Lol,

We have business requirements for advanced text animations.

After review of long list in Q1 2018… jQuery won out because

a subtle INTERPOLATION FACTORY Pattern :grin:


Took forever to see it… but at the last moment, lucked out to find this animation syntax:

        nx.ui.viewTxt1.animate({opacity:0},{});
        console.log('ONETIME FADEIN')
        $({'alpha':1}).animate({'alpha':0},
          {queue:false,duration:1500,easing:'swing',
        step: function(now) { 
            nx.ui.viewTxt1.css('opacity',this.alpha);
        }, complete:function(){
            // console.log('endfadein')
            } //NEXT-SUB-SEQUENCE-. 
        });
        $({'alpha':0}).animate({'alpha':1},
          {queue:false,duration:1500,easing:'swing',
        step: function(now) { 
            nx.ui.viewTxt2.css('opacity',this.alpha);
        }, complete:function(){
            // console.log('endfadein')
            } //NEXT-SUB-SEQUENCE-. 
        });

It enables highly-extensible-animations on anything - in a small package. So that we can run it by scriptlets. Another requirement. ABOVE: is the view scaffolding, one of ten business requirements, and why jQuery. Great question!
I don't know anything about NS - have not deep-dived - will. Especially if it is simple deploy to Angroid, Google Play Store...

PWA deploys to Google Play Store also. I will compare in JULY.
If you get a chance - to compare - please share. :grin:


KEY: use the TOOL that is best for REQUIREMENTS. :slight_smile:

1 Like

It won’t : PWA is client side, Node is server side.

PWA does not replace Electron, it’s different use cases :

  • if you have a website, or a web app, and you want to transform it to an application => PWA
  • if you want to make a desktop application using HTML/CSS/JS (think about reading / writing files to the local system for example like in the Babylon Editor) => Electron

In both cases it does not replace NodeJS.

  • Electron = chromium + NodeJS, you can use NodeJS for instance to interact with the local file system
  • PWA = cached website + service worker to sync with a server (server that may be in NodeJS, or PHP, ASP, etc.)

But both support React, Angular, jQuery = everything that a browser support.

Hope this help @alucardeck !

2 Likes

I forget…PWA can replace Electron if you used Electron ‘just’ to make an offline desktop website ;). And in this case PWA will be much better because it will work on mobiles too.

1 Like

Thanks @sharp,

NS in this case stands for NativeScript, not NodeJS :slight_smile:
Which is currently used to generate our app in native Android and iOS.

So PWA cannot be used to cache data/write to disk in client’s side? Or does it use the same limits of a browser can give you?

ahaha sorry my bad :rofl::rofl:

You can use IndexedDB or LocalStorage but you will not have direct File system access