Confused about best practice for modular code and loading separate files

[0din]

I've read through just about all of this guide (https://github.com/kittykatattack/learningPixi). I think I have a grasp of how to switch stages/scenes. There's one part that doesn't make sense to me however. 

If I wanted to create a separate .js file for every class and every scene's code, what's the best practice for loading those files? I've seen examples where the index.html file just includes all of the scripts, but isn't that possibly a slow and/or bad experience? A previous flow I read about was loading the bare minimum (a background, logo, and loading graphic) and then loading all other images and javascript files. 

Is there a best practice to load these separate javascript files through the Pixi loader so the splash screen comes up instantly and show a loading bar while I pull in all these extra assets? 

 

[ivan.popelyshev]

Modularity doesnt mean all those files are loaded by browser. You have to concatenate your files or build them with webpack/browserify/rollup/whatever_you_want. Code separation is a difficult problem that should not be considered as "everyone does it", and it is not required even for big applications.

There are no examples about pixi and modular assets, its one of things that everyone manages on their own, because there are many ways to do it. 

Are you sure that you need it? In my cases, just using TypeScript + extra pixi loader for each stage works.

[0din]

Ohhhhk. I'm not very familiar with that workflow so I hadn't even thought of it in that way, but that makes a lot more sense to me. 

Thank you for clearing that up, I think I'll be able to make a lot of progress now. 

[botmaster]

Personally I don't work directly in javascript, I use typescript and requirejs. In dev mode I output all my ts classes/modules as unique files (easier to debug) and let requirejs load whatever needs to be loaded (talking about js here). In prod mode I output only one file (.js) which in typescript is convenient since it only picks the file that the app really needs and nothing more. Browsers are usually loading .js file sequentially so you don't gain anything by breaking a js file down into smaller chunk unless you have something like requirejs to do the job once the page is done loading.

Now for assets (other than .js files) it's a different matter, don't think all loading is the same, js is one thing, assets are another. You shouldn't need to preload everything your app is gonna need. I have a html5 app with 400M of assets, none are preloaded, instead every view loads what it needs when they show on display and clean up when they are removed. It's a more dynamic approach, there's no wait time for user and we save on bandwidth since we only load what is needed.

But just for the javascript part look into typescript and requirejs, this will already make your work a lot easier and the insertion in the page very easy.

[ivan.popelyshev]

There are a few links to boilerplates in https://github.com/pixijs/pixi.js/wiki/Boilerplate . Personally I recommend not to use webpack and other tools before you have time to understand them. 

You can also look at https://github.com/rpgtkoolmv/corescript , its rpgmaker mv runtime, it compiles directories in corresponding files with grunt script - one of easiest configurations that work good.

[0din]

Thanks a ton for the input guys. I'm getting the hang of webpack and have the modularity working for me. I didn't dive into typescript so that I don't have to take on too much new stuff at once and can get rolling on a game.