Designing of Large Scale JavaScript Application Part 1

Introduction

I'm currently a developing a UI centric application, for that I am working on the front-end architecture that supports the growing functionalities and pretty maintainable for the its next generations. Right now I have a basic idea of the platform and only an idea of the applications which is both complex and often require an architecture that is scalable and highly-reusable. The complex logic is implemented in JavaScript that communicates with server asynchronously.

As a part of my RnD and choosing the best compatible patterns I've gone through a creative book 'Essential JavaScript Design Patterns' and am going to share all the stuff and a very basic boilerplate framework that may suits your application too.

So what is LARGE APPLICATION means?

Well large scale apps consist of 3S (small, simple, segregated) pieces that are assembled to achieve a complex and huge functionality. It doesn’t do anything with 100’s and 1000’s of Line Of Code, or with the size of repositories (in MB’s).

Architecture and planning is *IMPORTANT

Large scale applications has many concerns and we should not start writing the code based on what we have done in the small scale apps where we Treat with the vanilla flavoured Juqery and remain stick to that.

Put sufficient time and effort while designing LSA. Consider following points while designing solution for such apps that are independent of code language and platform.

1.       Dependency

2.       Reusability

3.       Testability

4.       Exception Handling

5.       Communication in between different code blocks.

How did this happens????

Well all the best practices are somewhat interrelated to each other and directly or indirectly relies on How loosely the different modules are binded and communicate with each other.

And from the basic…

No its not perfect Its BAD PRACTICE!!

”Like Every successful relationship separation can be good thing.” Style, content , modules and behaviours all deserve their own space.

The issue with the above code is the core business logic is hidden under the piles of code chunks and it became worst to maintain such code in future. The application loses its extensibility and any modification required to adapt new business requirements and we suggest “LET’S REBUILD THE APPLICATION”.

$For everything you want to achieve through JavaScript.

Look the above code in this way.

"The more tied components are to each other, the less reusable they will be, and the more difficult it becomes to make changes to one without accidentally affecting another" -Rebecca Murphey, author of jQuery Fundamentals.

Sample Implementation