How do I organize files when I code a js framework?

So, I wanted to code a framework and then bundle the files into a frameworkname.js file with my tool. But I have no idea how to structure it. If you work with modules, do you then start the individual libraries in a main.js file? I've asked a similar question before, but it was about something else.

mfg

(1 votes)
Loading...

Similar Posts

Subscribe
Notify of
4 Answers
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
regex9
1 year ago

Working with modules, (…)

A module-based structure would be advisable because the framework can be functionally subdivided and testing separate parts is easier.

(…) you start the individual libraries in a main.js (…)

Libraries are only integrated where they are needed. If a library controls important functions needed for a framework setup, the main.js must also call them up.

So I wanted a framework code (…)

A few tips:

1) Define first what the framework should be. What core goals does it have, what key features it should include.

If that’s clear, you can also estimate what you need and how far the project should go. It could develop in the direction of building a game engine or maybe you realize that a library would be completely sufficient.

2) Create sketches / diagrams (Component Diagram, Class Chart, Dependency Graph, …) to build up an overview and plan the structure better.

3) Individual parts/functions may be covered by existing libraries. For example, Howler, Oimo and ThreeJS could be launched for a game engine (target platform: web). Then you only need connecting pieces and maybe also a facade as an additional abstraction level.

4) Work with you Design Patterns (Abstract Factory, Builder, Chain of Responsibility, Facade, Mediator, Reactor, etc.). You can help in structuring, internal communication or configuration of the framework.

Furthermore, it would be good if you were to deal with the usual structures that are used in games.

Two useful sources (for entry):

5) There are some open source projects you can look at. For example Phasers or kiwi.js.

regex9
1 year ago
Reply to  WeissBrot965

If everything is to be delivered in a file, make sure that Bundling Tools does not filter out the module/functions thereof via Tree-Shaking. This can generally be defined via the configuration of the Bundletool.

Otherwise, you can also offer individual bundles that a user connects depending on the request.

  • An all.js if the user wants all modules
  • Single bundles for keyboard.js, etc., if a user only needs certain modules