Managing Scripts

Questions
1

Hi guys!
This might be a very open Question, but how do you manage large JS Files?
I come from a C# background and everything goes into it’s own class or at leats function.
i.e.
File1: Setting up the scene, Camera, Lights, Renderpipeline.
File2: Importing Meshes, assigning Animations
File3: creating Babylon Animations I want to start later
etc…
And even there I would split even more.

What is the best way to approach this using JS?
I know this isn’t really babylon focused, but it bugs me and I cant’t seem to find a nice way to solve this.

I would be tahnkful for any thoughts or tipps!
Best regards!

1 Like
2

Hey! maybe you want to consider TypeScript which will let you kind of work like in C#

3

Like DK said, typescript is a similar syntax to c#, and is probably best-fit for your requirements.

Our requirement, required vanilla approach.

So we use Promises and Dynamic Import:

    Promise.all([
        load.js('../../lib/babylon/babylon.3.0.2-alpha.max.js'), /*working from sps scene 8 */

        load.css('../../lib/font-awesome/font-awesome-4.7.0/css/font-awesome.min.css')
      ]).then(function() {
        load.js('../../lib/babylon/materials/babylon.gridMaterial.min.js')
        //...
      })

It allows us to LAZY-LOAD all of BABYLON after user click for good PWA score.

Then we import (many) dynamic scenes, with dynamic assets like this:

      }).then(function(){

        loadDynamicScenes( sceneID); //load-scene0-.
      })

loadDynamicScenes = function(scriptIdx){ //epic-loader-.

    var scenePath = './scenes/'+sceneSeq[scriptIdx]+'.js';
    import(scenePath) //dynamic import
    .then(function(sceneData) {
        module = sceneData;
        setMasterManifest();
    });//.catch(function(e){console.log('error loading epic: '+e)});

    getMasterManifest(function(){ //get await spot in line on manifest to  loading-count.
        modScene.initScene(); //READY-TO-RENDER-.
    });

The “ASSET-MANIFEST” concept was helpful to arrive at. Synchronized Asset Modules with very few lines of code. Assets in modules, loaded, then called back (initialized) when ready to render, after all other modules/assets are loaded. So double-dynamic-lazy-loading: first of all babylon for PWA purposes. Then sets of assets at runtime dynamically as user interacts. With a Pub/Sub from the old days. It works perfectly.

Not for everyone, it fit our unusual requirements.

: )

1 Like
4

Thank you guys!
I will look at both solutions!