This is using knockoutjs library for front end.

I’m working on a several page SPA each page containing a large number of feature. Because of this the viewmodel of any single page can get really big, like 8000+ lines big. This also means that the html page will get really big and heavily coupled with the knockout js data binding. This is confusing for onboarding new members and maintaining.

I want to organize it like this.

View:

for each page I want one main html file that contains sections with id’s, any necessary resources, main entry javascript file, css files, and not much else, then smaller html files for each section of the page.

ViewModel:

Split the giant viewmodel into several viewmodels for each section of the spa. Do the data grabbing, binding, and updating from these individual smaller viewmodels. From the main js file you can call ko.applybinding(sectionViewModel, $ (‘#section1’));

I think this way of splitting up the viewmodels and html will help keep it more modular and maintainable. From the knockoutjs perspective anyway it should reduce the amount of dependency tracking, encourage loose coupling amongst the viewmodel, and increase performance?

Some Questions:

• If there is a need for the viewmodels to communicate with each other, splitting up the files this way, will that be possible?

• will this increase performance or at least increase maintainability?