Designing of Large Scale JavaScript Application Part 2

Here I am continuing the discussion that we made in the previour article Designing of Large Scale JavaScript Application .

Things you need to forget…… actually need to relearn

• Forget the way you write JavaScript earlier, no more thousands of lines of code in single file.
• Forget the way you declare variables in globally, try to learn the way you declare in C# or JAVA or any server-side OOP platform
• Forget the way you use jQuery.

“If the code is difficult to test, the most likely cause is that the application design need improvement”. And the way we use jQuery makes the code impossible to test see the example below.

• Forget the common DOM centric approach as DOM is global, stateful and unable to mock for testing.

Code is broken up into pieces

Now we can Test and control the dependencies

"The secret to building large apps is never build large apps. Break your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application" -Justin Meyer, author JavaScriptMVC

Flexible, Testable, Maintainable and Scalable

For the application to be stable,  testable and maintainable the biggest problem is no longer the browser it’s the size, complexity and design of our application.

“If your application breaks without JavaScript then you should consider it as a real language.”

The Whole Moto of all this discussion focus on to move STATE away from DOM.

Look at this in following way

“We want a loosely coupled architecture with functionality broken down into independent modules with ideally no inter-module dependencies. Modules speak to the rest of the application when something interesting happens and an intermediate layer interprets and reacts to these messages.”

                     

Basically we need to kick DOM (view) away from the STATE (model) to create a clean separation between them.

But Question is who updates whom and how would they communicate with each other?

Well we need to have a live MEDIATOR between them that manipulates Model and Update the view.