5

Right now I'm developing pretty huge and complex webapp and have to deal with a huge amount of client-side js code, and to make my life easier I'm trying to decouple this code as much as I can.

I was hugely inspired by Nicholas Zakas (http://www.youtube.com/watch?v=vXjVFPosQHw) and Addy Osmani (http://addyosmani.com/largescalejavascript) talk about scalable js architecture and was trying to apply some of their ideas to my work.

I've separated all my code across the multiple independent modules, and handle all intercommunications with some sort of mediator. This approach worked great in most cases. But there are some cases where I think its not enough.

One of the modules I'm working on represents a pretty complex list-alike structure. Here some simplified example:

very simplified example

Besides some rendering logic, module responsible for this piece of page should handle:

  • pagination
  • toggling groups
  • moving elems and groups around with dnd
  • cutting / copying / pasting elems and groups
  • refreshing certaing groups / elems
  • some logic within elems
  • may be more stuff in nearest future

I had carried out all the unrelated logic that I could (for example editing and deleting logic is carried out to another module via events), but module size is still large (over 1K lines of code), and I dont know how reduce it. Moreover I'm using module pattern for my modules so it's even harder to separate logic between multiple files.

So I came here to ask is there any way to decouple complex logic within a single module?

UPDATE:

I want to clarify something. I'm pretty aware of how I can separate modules("module" from a module pattern) across multiple files in my code.

But what I really searching for is the new logical way to separate concerns within a single module ("module" from NKZ presentation).

panfil
  • 1,489
  • 3
  • 13
  • 19
  • you question is a bit vague, but in general, you can treat a module like a program, and within the walls of the module you can create sub-modules, classes, types, and pure functions to help reduce the clutter. self-contained modules are typically relatively expensive, owing to reduced internal procedure recycling; ex: a standalone list sorter compared to a jQuery plugin. Modules are better than a mess, so you're on the right track. Mastering the concepts of Dependency Injection and Inversion of Control is likely needed to take your scripting to the next level. – dandavis Aug 08 '13 at 18:39
  • People interested in this topic might want to check out [t3](http://t3js.org/), a JS framework recently released by Nicolas Zakas himself and his team at Box, that stems directly from the concepts outlined in the presentation linked in the question. [Here's](https://www.box.com/blog/introducing-t3-enabling-large-scale-javascript-applications/) a blog post from Zakas introducing it. – Aurelio Apr 17 '15 at 19:04
  • Hi, this is a bit late but might be helpful somehow. https://pogsdotnet.blogspot.sg/2017/07/modular-javascript-architecture.html – Allan Chua Jul 12 '17 at 15:08

1 Answers1

1

To decouple a single module into multiple files I would recommend using the Augmentation pattern found on this page http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

Additionally, here are some more resources on creating scalable JS applications:

Here is a video of a presentation given by Nicholas Zakas on "Creating A Scalable JavaScript Application Architecture." http://www.youtube.com/watch?v=7BGvy-S-Iag

Another good resource http://addyosmani.com/largescalejavascript/

Knowing these concepts will allow you to build an application that is capable of dropping modules in and out seamlessly. You will be able to change a module without affecting any other module because your program will be loosely coupled. Additionally, should you choose to switch a base library, for example KnockoutJS to Angular, this framework will allow you to swap the base library easily and without breaking very much of your code.

Also, using modules and a mediator or sandbox will make your code easier to test. Testing is important in any non-trivial application. I hope this helps!

Spencer
  • 1,527
  • 1
  • 10
  • 23
  • Thanks @Spencer. At first, I was aware of Augmention pattern, but I prefer to stay away from it because using it I can't leverage some features of module pattern. For example I can't have truly private scope for some var and functions. But, actually, I can't think of a better solution for splitting a module (from a module pattern) across multiple files. Secondly I've already mentioned approach of Nicholas Zakas and Addy Osmani of building scalable js apps, and I've already make use of it. – panfil Aug 08 '13 at 16:31
  • 1
    And the last one. Knockout or Angular of course will make my life easier. A bit. But another cool framework will not solve the problem of a huge concentration of logic in one place. – panfil Aug 08 '13 at 16:34
  • Oops! I missed the part where you said you have read up on the two sources I provided! Unfortunately, I'm not aware of a better way to break apart modules into separate files other than using the augmentation pattern. – Spencer Aug 09 '13 at 12:43