2

I have inherited of an application and need to reorganize and I hope I will be able to modularize the tons of Javascript that is everywhere.

It is a multi-page webapp. Each page has a script tag in the header, which currently contains a DomReady handler which initializes all user event handlers for that specific page, and also very often contains from 1 to 10 javascript functions that are specific to this page (meaning they are not useful anywhere else in the app).

Then, there is a jQuery import on every page, plus an import of somthing like App.js which is simply a very large collection of global functions which are useful in many different pages of the application.

Page of the application are quite different one from another, so it seems to make sense not to make every page load everything.

I'm desperately trying to organize all this, and after investigating modern solutions like RequireJS, Browserify, simple lightweight MVP frameworks like Riot.js, loose coupling through Mediator pattern and so on.

A lot of these seem to target single-page web applications mainly.

I'm having a hard time to imagine how to reorganize this 40 page application where almost every page needs a separate initialization, a few specific functions and a large number of general ones...

Also, the webapp can be installed on a user's own server and individual page scrips behaviour must be customizable through overriding some of the functions (or adding to the initialization, or the modules if they become modules in the future).

What would an JS expert do ?

Alexander
  • 121
  • 1
  • 1
    I would vote against require.js as the evil that can cure all other evil. I'd try to modularize js on server side if possible. – Danubian Sailor Dec 30 '13 at 09:00
  • gnat: Sorry but it's not exactly a duplicate. My question is quite specific regarding the tech details and requirements of the organization. I read the other question, which has valid points but does not entirely cover my specific concerns here. @ŁukaszL. Indeed, I would rather avoid RequireJS if possible. modularize JS on server side, what do you mean more precisely ? – Alexander Dec 30 '13 at 10:13
  • Reorganizing 40 pages is a pain. You should probably choose a modular approach and convert three or four pages to the new approach. Then only when time permits, or your client wants changes, you convert the other pages one by one. Forget about the 40 pages until you gain some more experience in your chosen approach and in the spaghetti you inherited. Hopefully you are not alone in this, talk about it with colleagues. – Hendrik Jan Dec 30 '13 at 10:35
  • Łukasz' advise is noteworthy. Modularizing on the client would increase the number of http requests and could make the pages load slow. If you use require.js, make sure you also use an optimizer, like r.js, to combine the modules into a small number of files. – Hendrik Jan Dec 30 '13 at 10:47
  • I plan to migrate this chunk by chunk. I know the application and the code very well, but I can't say I have much experience in modern modularization of JS. Bundles made by r.js and Browserify are nice, but again not really optimized for multi page websites it seems... – Alexander Dec 30 '13 at 11:34
  • Alexander - please [edit] your question to focus on the specifics that are different between your question and the suggested duplicate. Voting to put on-hold so you can make the edits and to help prevent any future answers from being invalidated by the edits. I'll likely vote to re-open once you have completed the edits to call out the differences with your question. –  Dec 30 '13 at 13:11
  • Hmm ok @GlenH7 but I thought I was already pretty specific ? multi page, modern modules, customizable behaviour of individual scripts, all this is nothing like the other question ... What could I add more.. – Alexander Dec 30 '13 at 13:29
  • Alexander - focus your question on what hasn't already been answered by the duplicate question. For example, if there are specific issues that arise due to JavaScript, then call that out. –  Dec 30 '13 at 20:00

0 Answers0