CODEWITHSUNDEEP
requirejsamd
Boban Stojanovski
Boban Stojanovski

Reputation: 900

requirejs on a mature project

I would like to start using requirejs on my project which has been in development for about a year and it's big.

The project is asp.net , the masterpage has about 50 scripts , half of them are custom scripts for the project most of them written using the revealing module pattern , the other half are third party scripts and jquery plugins.

There is also a lot of JS code inline in the pages.

I would appreciate if some could tell me what would be the best strategy to refactor the project. Maybe some way of doing it step by step , so as not to block the rest of the development team.

Upvotes: 1

Views: 123

Answers (1)

ddotsenko
ddotsenko

Reputation: 4996

There is only one good reasons to go for AMD module pattern: Safeguard developer's sanity by splitting JS code into manageable modules.

There is only one way you can retain the sanity AND still serve compact, efficient pages - you need to "build" your AMD tree. Otherwise all the little modules become a pile of HTTP Get requests slowing your app down.

One side effect of going for "built AMD tree" in your particular case is that you may benefit from minified JavaScript. Your app is already served by server gziped, but minifying JavaScript makes them even smaller. Plus, separate static JS files have better cache signature compared to aspx files that may have very short cache setting assigned by the server.

The way to get to "building" an AMD tree:

  1. Take all the large chunks of JavaScript code sprinkled around aspx files and put it into separate JS files. Insert script tags for them into your aspx. Test, insure your app still works.

2. Then turn these files into AMD modules. Retest your app.

3. Then run AMD tree optimizer on the tree to get back ONE long JS file that packs all the AMD modules. Retest your app against that module.

There is an established leader among AMD build tools: https://github.com/jrburke/r.js

But here is what I would suggest that you try first: http://prunejs.com/

First one requires crafty configuration, lots of patience. PruneJS needs no configuration, but is less flexible than r.js.

Unless you commit to go all the way - to "building AMD tree" - don't go AMD. It's not worth it.

Upvotes: 1

Related Questions