Writing good and maintainable javascript is hard, especially when your first javascript framework was jQuery. Couples of years ago, you could be ok using document.ready for implementing your minimal features. Now not so much, web application use more and more javascript, and there comes a time where using anonymous functions with a ton of events is just not enough. jQuery is pretty good at handling everything cross-browser, but is does nothing to help you implement a clean architecture and rectifying that is the basic idea behind stackJS.

Most of you guys are probably aware that some frameworks have popped up to fill this blank, like the excellent javascriptMVC (a jQuery MVC framework), another good example would be backbone.js. I really like what javascriptMVC has to offer, it’s really a professional offering with all the bells and whistles. But It is actually kind of too much for me. There is a lot of features in jMVC and on a daily basis I really don’t need them all. jMVC is pretty big and understanding all the underlying mechanics would also be a bit too long for me.

Introducing stackJS, or how to take your code one step further

Generally your back-end framework control the javascript and css files loading. With stackJS, all dependencies are controlled by javascript configurations files, both globally and per modules. In your HTML file you only include the stackJS file and you define by parameters which module you want to load. I am also working at a version that use sammy.js as a router for loading modules.

stackJS is loosely based on Nicholas Zakas proposed architecture. Here the features stackJS attempt to fill :

  • Javascript module loader & dependencies
  • Move DOM focused code to functionality focused code
  • Better Code organization
  • Handles plugin dependencies globally and per module separately
  • Stop module accessing other modules (loose couple them (pub/sub yay!))
  • Library agnostic

 

What it look like on paper

requireJS

The dependencies are handled by requireJS in stackJS, this make for a nice opportunity. With the framework is bundled the optimization tool of requireJS. Which make it pretty easy to optimize all your js files in a production folder and only change a variable in stackJS configuration to access the optimized version on your live server.

Beta…

This is still in beta, but I am currently integrating it in a production project and hope to release a 1.0 version in 1 month or 2.

You can see an example below, I also linked a download link, it include the full documentation in the readme.md. Obviously choosing between a solution like JavascriptMVC and stackJS is a no brainer (take jMVC), but if your looking to evolve the way you do jQuery a bit, I suggest you take a peak at stackJS, it’s only about 300 lines of code and if your looking to build a framework yourself, that could be a good starting point, or at least inspire you a bit.

Download the source code View demo

Symfony plugin

I am currently for working on a symfony helper for loading modules, I will bundle it with the project once it’s finished.

Share this article: Facebook Twitter

19 thoughts on “stackJS, a javascript module loader and dependencies handler”

  1. Good job Cedric, vraiment. Une question que jme pose avec ton script, comment tu ty prend pour loader des modules dependant des sections? Par exemple un slider sur la home, un listing ajax dans une page listing etc. Jai une maniere a moi mais jaimerais avoir ton input la dessus avec laide de ton script!

    Guillaume

  2. Hey Guillaume,

    From what I understand I would do a home module, with a slider function,
    and a listing module,

    you can choose the modules you want to load when loading the stackJS script in your page, src example:
    js/stackJS/stackJS.js?loadModules=Recipe,Chef&stackJSpath=js/stackJS/

    I am working on another way of loading modules dynamically from outside scripts (you can use api.loadmodule in a module),

    but for now I am not really sure how to implement it, it’s kind of against the principle that you should not have access to modules from outside

    1. What do you mean not having access to modules outside the script?

      Actually my modules are available in a global namespace in a script included in each page. Then i have a bootstrap file where i load modules for specific sections and modules available globally.

      Ill post a concrete example on jsbin or something like that to show you if you are interested 😉

  5. Ouais ca je voulais dire, j’ai pas vraiment encore de systeme de bootstrap,

    je voulais utiliser sammy pour ca, et changer mon systeme pour ouvrir les function register() et start() de l api.

    Mais ton systeme est pas mal cool, j aurais pas penser le faire comme ca.

  6. Le seul problème que je vois en fait c’est que mes “objects” (ou fonction) dans mon application.js ne sont pas modulaire. Dans le sens que d’un projet à l’autre je dois “copier-coller” ce que j’ai de besoin dans application.js

    Je faisais un peu de recherche tantôt et je suis tomber sur ça : http://moo4q.com/ – ça me semble interessant, et le gars qui as fait ça (Ryan Florence) est celui dont jme suis inspiré pour la création de mes objects : http://ryanflorence.com/authoring-jquery-plugins-with-object-oriented-javascript/

    Y’a tellement de façon de structurer son code, mais c’est dur de se brancher sur 1 pour tous les projets 😉

  7. I would like to suggest that you open source this and host it on github or google code. I have attempted to make a similar framework after watching Zakas’s talk and would help contribute to this. Nicholas Zakas’s talk is great and really applies to some of the problems with jQuery. Alex Sexton has also documented the need for a framework like stackJs when working with jQuery http://alexsexton.com/?p=106. Also the use of requireJs is smart and makes me wonder how well this could be reused as on the server with node.js

  8. @Vekz well if you follow the download link it is going to github 😛

    I had some great initial comments, and working on some important amelioration, I will probably publish this week, upgrading the readme kind of take a long time.

  10. Thanks for the comment about JavaScriptMVC, but I’m confused why you think it would be too hard to learn. You only have to use the parts you need. You can actually download StealJS on its own:

    http://javascriptmvc.com/docs/download.html

    You can actually download every part of JavaScriptMVC on its own. And, if you don’t want to learn the rest of it:

    http://javascriptmvc.com/docs/download.html#&who=stealjs

    Read that page and ignore everything else.

    It’s great that you are writing your own library. However, wouldn’t the world be a better place if all us jQuery devs concentrated our effort? JavaScriptMVC is probably the most inclusive project of ideas ever ever ever.

  11. @Justin

    Hey,

    Sorry your comment did not go through instantly you were caught up by spam because of your 2 links.

    Thanks for the comment, actually I am a fan of yours :P, your JMVC suite is truly amazing, maybe what I was trying to say did not come out as I wanted.

    Thing is, If I use steal or your full stack, its not like a small plugin, my complete application depend on your work, I know that I might be kind of crazy on that, but I am kind of afraid of being completely dependent of steal.js 😛

    I saw that the next version of steal will use labjs, I will have a look, but from what I remember, (to have use labjs before), it makes IE debugging impossible unless it has change, it give you line 1 million in your main file instead of pointing you to the right file at the right line

  12. Pas évident de se brancher sur le meilleur moyen pour organiser notre code et que ce soit bulletproof peu importe le projet, qu’il soit multi-page avec des modules qu’on load par section, ou une application d’une seule page.

    J’ai checker requireJS un peu et ça me semble assez bien aussi : http://requirejs.org/

    J’aimerais bien me setter sur LE meilleur framework pour le début de la nouvelle année, et pouvoir me monter une structure ultra-solide que je peux ré-utiliser d’un projet à l’autre.

    Pas évident 😉

  13. 01.05 DF envysa June 1 this outlet canada goose, domestic gasoline and diesel prices, the international market, a barrel of crude oil prices continued to fluctuate slightly between 70-80 dollars, during the mid-July and mid-September appeared canada goose gloves fell nearly 4, but due to the international market oil prices quickly rebound, and ultimately did not reach 4 of the price adjustment canada goose jackets conditions. Since the end of September, the rapid rise in international oil prices above 80 U.S. dollars per canada goose sale, or more than 4. To this end, in accordance with the current refined oil pricing mechanism, the state decided to properly increase gasoline and canada goose store prices.

  16. A great website. Completeness of the information that is useful here. I’ll send it to several friends to the is also involved in the taste. And of course, thank you for your weakness.

Comments are closed.