Monday, November 19th, 2007

Squirrel IoC: Dependency Injection for JavaScript

Category: JavaScript

Mark Forster is a fan of IoC from his days in Spring-land. He found that he was “writing endless amount of code to just instantiate objects and wiring up dependencies in these objects” and decided that what was in order was Squirrel IoC.

To see it in action, we can look at a simple example. There are three files at play here:

  • Application: Bootstrap and wire up
  • NameSpace: Define the objects and services
  • HTML: Bootstrap via HTML

Application

javascript

  1. $(function(){
  2.     var oContainerDefinition={
  3.         'model':{type:LabModel},
  4.         'dao':{type:LabDAO,args:[{ref:'model'}]},
  5.         'service':{type:LabService,props:[{name:'dao',ref:'dao'}]},
  6.         'application':{type:LabApplication,props:[{name:'containerContext',ref:'containerContext'},{ref:'service'}]}
  7.     };
  8.  
  9.    
  10.     var _oContainer = new IContainer();
  11.     _oContainer.load(oContainerDefinition);
  12. });

NameSpace

javascript

  1. /**
  2. *   A Very basic Model class
  3. */
  4. function LabModel(property1){
  5.     this.property1=property1 || "Some initial property";
  6. }
  7.  
  8. /**
  9. *   A Very basic DAO class
  10. */
  11. function LabDAO(oModel){
  12.     var _oModel=oModel;
  13.  
  14.     //  DAO Get method
  15.     this.get=function(){alert("DAO LOAD");return _oModel}
  16.    
  17.     //  DAO Save method
  18.     this.save=function(){alert("DAO SAVE");}
  19.    
  20.     //  DAO Delete method
  21.     this.delete=function(){alert("DAO DELETE");}
  22. }
  23.  
  24. /**
  25. *   A Very basic JSON DAO class
  26. */
  27. function JSONDAO(oModel){
  28.     var _oModel=oModel || null;
  29.    
  30.     //  DAO Get method
  31.     this.get=function(){alert("JSON LOAD");return _oModel}
  32.    
  33.     //  DAO Save method
  34.     this.save=function(){alert("JSON SAVE");}
  35.    
  36.     //  DAO Delete method
  37.     this.delete=function(){alert("JSON DELETE");}
  38. }
  39.  
  40. /**
  41. *   A Very basic service class
  42. */
  43. function LabService(oLabDao){
  44.     var _oLabDao = oLabDao || null;
  45.    
  46.     //  Service Get method
  47.     this.get=function(){
  48.         alert("SERVICE GET");
  49.         return _oLabDao.get();
  50.     }
  51.    
  52.     //  Getter for DAO instance
  53.     this.getDao=function(){
  54.         return _oLabDao;
  55.     }
  56.    
  57.     //  Setter for DAO instance
  58.     this.setDao=function(oLabDao){
  59.         _oLabDao=oLabDao;
  60.     }
  61. }
  62.  
  63. /**
  64. *   A Very basic application class
  65. */
  66. function LabApplication(){
  67.     var _oService=null;                 //  Reference to the service instance
  68.     ContainerSupport.call(this);        //  Implement ContainerSupport interface
  69.    
  70.     //  Invoked by container when context support is provided
  71.     this.onContextSupport=function(oContainerContext){  
  72.         var _oModel=_oService.get();
  73.         //alert("Property of model is "+_oModel.property1);
  74.         var _oSpan=$('span#iOutput')[0];
  75.         $(_oSpan).html(_oModel.property1);
  76.     }
  77.    
  78.     //  Setter for service instance
  79.     this.setService=function(oService){
  80.         _oService=oService;
  81.     }
  82. }

HTML

  1. <head>
  2.     <title>Lab Projects : squirrel-IOC : Phase 1 : Demonstraton : Simple layer example</title>
  3.     <script src="script/jquery-1.2.1.pack.js" type="text/javascript"></script>
  4.     <script src="script/com.hedgehoglab.squirrel.core.js" type="text/javascript"></script>
  5.     <script src="script/com.hedgehoglab.example.layer.NameSpace.js" type="text/javascript"></script>
  6.     <script src="script/com.hedgehoglab.example.layer.Application.js" type="text/javascript"></script>
  7.    
  8.     <link type="text/css" rel="stylesheet" href="css/style.css" />
  9. </head>
  10. <body>
  11.     <h1>squirrel IOC demonstraton</h1>
  12.     <p>Output of layer propogation for property 1 is <span id="iOutput"></span></p>
  13. </body>

Posted by Dion Almaer at 6:53 am
7 Comments

++---
2.4 rating from 36 votes

7 Comments »

Comments feed TrackBack URI

My understanding of IoC is that it’s a nasty workaround for restrictions in statically typed languages such as Java – I don’t understand why you would want to use it in a dynamic language which provides so many other powerful techniques for managing code complexity.

Jamis Buck wrote a dependency injection (another name for IoC) framework for Ruby, but later declared that he no longer believed the technique was appropriate for that language: http://weblog.jamisbuck.org/2007/7/29/net-ssh-revisited

Comment by Simon Willison — November 19, 2007

Looks very enterprisy.

Comment by Martin — November 19, 2007

When you use an acronym or an unfamiliar name, it helps if you define it. Yes, I can and will Google “IoC”, but it wouldn’t hurt to explain what a fairly obscure term like this means when you write an article about it.

(Answer: It’s either “International Olympic Committee” or “Inversion of Control”. I’ll guess the lattter…)

Comment by Michael Geary — November 19, 2007

I’m guessing Injection of Code.

Comment by Chris Phillips — November 20, 2007

@Michael Geary, being a Vancouverite I got a chuckle out of that… 2010 ftw!

Comment by Mike Ritchie — November 20, 2007

@Chris
Inversion of Control, actually. ;)

In my experience IoC is a neccessary evil in larger projects using statically typed languages.. Java and C# come to mind. In JavaScript I fail to see the benefit honestly.. Unless he’s just writing it for the sake of writing it, which ofc. is fine too.

Comment by JD P — November 21, 2007

Squirrel was written to allow the UI components of Fixx, an enterprise application written in java, to be configurable via java server-side code.

Squirrel is actually part of a larger framework which attempts to seam together and compliment server and client technologies keeping markup free of inline script and allowing a separation of concerns between various client-side libraries and frameworks we choose to implement. The IOC container has been distilled and tweaked simply to play about with in other projects by our team.

It has been put out there on the web for other people who may find it interesting or may find another use for it. We will be keeping squirrel up to date as we improve are core framework so keep an eye out

Comment by mark forster — November 22, 2007

Leave a comment

You must be logged in to post a comment.