Software Engineering
javascript project-structure
Updated Wed, 29 Jun 2022 20:13:11 GMT

How are large JavaScript applications supposed to be structured?


I've recently been shown some JavaScript plugins written for OBIEE Mobile App Developer, as well as some custom libraries for various projects.

Coming from an OOP background, I am a little confused about the structure of these projects. I am seeing files that are thousands of lines long. I am used to splitting things into files and classes but I understand that this is a different framework - for one, file size is an issue - but there must be a better way to do it all?

The length of the scripts affects not only readibility and maintanability but also a person's general understanding of how the program works.

How are large applications structured? Any general OOP design patterns for this?




Solution

If you are not familiar with JavaScript patterns, I can tell you a lot of large applications and libraries are using Revealing Module Pattern, but there are many other patterns you can use depending to your needs.

The Revealing Module Pattern though should give you a nice way to split large files and logically organise them; However when you are working with any design patterns in JavaScript, be aware that this can become very confusing. Try to use this, new, prototype, .call() and .apply() wisely.

While working on large projects, these can be useful also:

  • If possible, switch to TypeScript or ES6.
  • Write Modular code. There are various ways and third-party libraries, but any of them is better than nothing.
  • Use a Task Runner/Build System to automate tasks.
  • Read about Design Patterns. This could be a good start. As I said above, the Revealing Module Pattern is very useful, specially if you think you need time to master all the popular patterns.
  • Write Unit Tests. Working with a dynamic language can be more challenging. Testing the crucial parts of your application can save a lot of time.
  • Use an IDE or Text Editor that can actually help you with both writing code and catching bugs. WebStorm is a good choice. Sublime Text too.
  • If your IDE doesn't offer a debugger, try to master your favorite web browser's debugger.
  • Use libraries. Depending on the nature of project, try to employ the best third-party code you can find. If you are writing a web application, have a look at Angular, React and the good-old backbone.js. If you are writing a Node.js application, then take your time to search in NPM repository. You will be surprised how many packeges are already doing what you were just about to do.
  • Even if you are the only person who's working on the project, still use a version control system like Git and follow a Coding Standard that is not too strict and opinionated but still provides a good guide line that your team-mates would be also happy to follow.
  • Even if you opt for TypeScript or ES6, still understanding JavaScript's class-less OOP, the Prototypal OOP can be useful, specially while debuging.