It Gets Difficult

Going from LAMP to .NET is not the only big challenge here. No, I am on the big rollercoaster. Everything I've ever known is out the window. Everything I see is new. It is the most amazing thing. One thing is the use of frameworks. I've never, ever really done it before. Big change in mindset to open my head to other people's ideas with the knowledge that I am stuck with them for the foreseeable future. All this MVC? Probably not the biggest change, but still, I've taken it on at a level that I never considered before. ORM is going to kick my ass. I'm getting ready to be serious about it, but each time I dig, I find the layers of complication exploding and shrink from the immensity. I don't know if it's the right thing to do but I do know. It is. But I'm not sure because it looks so hard.

But this all adds up to a whole new consideration of architecture because, this time, I'm not making a website, I'm writing an application. There are a lot of increased responsibilities with that. Domain driven design. Test driven design. Unit testing. We haven't even talked about actually accomplishing the business needs.

We did a technical review of the project yesterday. I'm happy to say that it went well. I spent three hours telling the boss and the rest of the team why I have been doing all the things I've recorded in this blog. Some are not really web types and so I got to review my understanding of MVC. I talked about the alternatives I've rejected. Discussed the organization of my code, it's structures and my plan to move it forward. The rest of the folks were nice about it and I got a green light to move forward with this architecture.

I'm still really in R&D mode. If you look below, you'll see that I've basically implemented a category/detail demo. It uses .NET MVC to operate the database and JavascriptMVC for the user interface and control. This is strictly a business app and does not have to work for the random public. That means I can write the app in Javascript and use C# as a data service. This is very cool.
At present the app data flows one direction, outbound. My next step is to get some new data and send it back to the server then database. Time to close the loop.

I spent today putting my fingers to the keyboard, sighing. Pausing. Waiting. Getting a cup of coffee. Putting my fingers on the keyboard. Sighing. ... It turns out that there a lot of considerations for this next step. Not only have I been taken away from the safety of still just trying to figure out what to do and placed in the category of, We like it. How long will it take, but I now have to push through territory I already own.

On the outbound journey, I was pioneering. Everything that worked at all was a gift. Simple and barely working was all I want. Now, though, I have a lot of the structures in place and feel like I need to improve everything on the way. That is, it's nice to figure out how to send data back to the database but I don't really want to invest the time without also making progress toward the good solution.

Bottom line on this blab is that I spent all day to realize that my big issue is the one I have always known is the most important single one: data structures. I am stymied because I don't know what sort of objects I am going to pass between C# and Javascript. Objects, obviously. In JSON, of course, but what objects and where are they.

After a while, I started to experiment with the objects I am receiving from the database already. (I had, of course, done so before but really just grabbed the bits I needed to display). It turns out that doing a LINQ query for a set of categories also brings along a set of details, just as one would hope. I can get that and, I suppose, operate on it. That is, as the user enters data, I can store it in that object and eventually send it back to the server. I will have to write a method that plucks it apart and saves the stuff that's changed, make it persist.

Persist!!! That's what nHibernate does. I cycle around my nightmare and try to find a chink in nHibernate's armor. That puts me into despair and, when I'm in despair I procrastinate. In this case, I read a lot about nHibernate and it's handy band of added tools. But, it also caused me to pass through SOA (service oriented architecture) and SOAP. Suddenly I think, maybe I'm resisting the wrong thing. Maybe this should be a SOAP interface. Grab me a WSDL, instantiate a few objects, talk to the database via SOAP.

Is is that making a mountain out of a molehill? My head is going to explode.

Firebug Console Stopped Working and I Fixed It

Somewhere along my way, I lost my ability to use Firebug console, specifically, I could not use console.log(). Worse, I could not examine variables and DOM elements from the console. It would echo the thing I typed but not the result. For example, if I typed "5+5" into the console, the result should look like:

     

While broken, it only showed the ">>> 5+%".

I tracked it down to a jquery statement:

     $('body').html("<div id='container'></div>");

When I changed it to:

     $('body').append("<div id='expressbook'></div>");

It worked correctly.

Someone please explain.

Architecture in a JMVC World

(This is a post I put on the JMVC google group. I include it here in case anyone that reads it has any thoughts and so that I can refer to it myself. If you're smart about this sort of stuff, I'm sure the people at the group would like you to increase their knowledge in the context of the post over there.)

I now have a demo app running and have used many features of JavascriptMVC. I am able to operate the tool in a rudimentary way. Now I am starting to figure out how to do things that I know I will want to do in the future. First among these is global navigation but I am very unsure how JMVC wants me to do it. It occurs to me that this might be something that is interesting to others and I sure could use some advice.

I want to have a set of controls of some sort that, when clicked, each provide a different work context. Think, Page A supports Data Entry, Page B supports Reporting and Analysis. Each wants to have completely separate functions. I think that the basic organization is that I want to have a document controller, call it the AppOvervallController and, then I want to have PageAController, PageBController, etc.

Given this, I would have the global navigation receive a click (though this is mysteriously failing right now) and tell the current page controller to clean up and die, and then tell the newly clicked controller to hop into action. Presumably, that controller would need to have some number of application elements that do things. 

For my demo, Page A has a category list that, when an item is clicked, tells a detail list to fill itself with appropriate details. At present, the category and the detail are each a separate controller.

Really, I'm looking for discussion about whether this is the right way to think. But, I'm also wondering if those category and details are supposed to be in their own controllers? Am I supposed to have a controller for every operating <div> in the app? That also means that I have a separate view folder for each, probably containing only one file. That seems messy to me.

That's enough to ask but, I have one more thing to toss in. On the JMVC website, I see that I can execute a statement like:

TodosController = Controller.extend("todos",{...));

Where "todos" refers to a DOM element named "todos" (id?). Is this how I should be creating my category and detail controllers?

Thanks for any advice.

Today's First Tidbit: IE, jQuery and the Title tag

Firefox will allow you to use jQuery to assign a value to the <title> of a page. IE will not. It gives you an error deep in jQuery: 

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Fri, 26 Feb 2010 17:08:14 UTC

Message: Unexpected call to method or property access.
Line: 260
Char: 5
Code: 0

Fortunately, document.title='Cool New Title'; works on both and with javascsriptMVC.

FYI

Separation of Concerns - ChaChing!!

I made JavascriptMVC work. My demo app is now structured into three controllers: document, category and detail. It has two views, one for the category and one for the details.

The document controller generates html containers for the other two and associates their controllers with their <div>s. I am, so far, treating each segment of the browser window as a separate page. That feels pretty close to right to me.

The category controller has a built-in init function that runs an ajax call to the C# Model to collect it's clickable listing.

When a click is made on a category, it publishes a Get.The.Details event and updates the user interface. The detail controller senses that (I love that JMVC has made that completely invisible to me) and issues another ajax call to get the details.

I think I am going to love this. It is so wonderful to have places to put code in Javascript. I think of all the time I have spent scrolling up and down .js files looking for where I set the X or the Y thingy.

The only thing that's been really difficult so far is Scope. I did find "this.view()" in the video as Justin suggested, but it turns out that callbacks often don't have a good Scope and, until I learn something new, that's going to be a source of hassle and less generalized code than I want.

Here are two things that solved problems for me:

Getting the DOM element when it wasn't part of the scope: 
target=param.currentTarget;

Getting the current object when it wasn't coming through well:  
this.element.html(html);

Honestly, I don't understand it, but, it appears that Scope is going to be my bete noir for the time being. I suffer from it in C#, too.

Lots to learn but, it's been a good day.

Another milestone

I made JavascriptMVC work. My demo app is now structured into three controllers: document, category and detail. It has two views, one for the category and one for the details.

The document controller generates html containers for the other two and associates their controllers with their <div>s. I am, so far, treating each segment of the browser window as a separate page. That feels pretty close to right to me.

The category controller has a built in init function that runs an ajax call to the C# Model to collect it's clickable listing.

When a click is made on a category, it publishes a Get.The.Details event and updates the user interface. The detail controller senses that (I love that JMVC has made that completely invisible to me) and issues another ajax call to get the details.

I think I am going to love this. It is so lovely to have places to put stuff in Javascript. I think of all the time I have spent scrolling up and down .js files looking for where I set the X or the Y thingy.

The only thing that's been really difficult so far is Scope. I did find "this.view()" in the video as Justin suggested, but it turns out that callbacks often don't have a good Scope and, until I learn something new, that's going to be a source of hassle and less general code than I want.

Here are two things that solved problems for me:

Getting the DOM element when it wasn't part of the scope: target=param.currentTarget;

Getting the current object when it wasn't coming through well: 
 this.element.html(html);

Honestly, I don't understand it, but, it appears that Scope is going to be my bete noir for the time being. I suffer from it in C#, too.

Lots to learn but, it's been a good day.

JavascriptMVC Looks Pretty Good

Note the change in spelling. It's not "Javascript MVC". I've excised the space. It turns out that 1) google is much friendlier to inquiries about "JavascriptMVC" and 2) the man behind the framework, Justin Meyer, thinks that's the correct spelling. If his code is good enough for  me, then so is his spelling. Plus he reached out personally, so I am now a loyal friend.

Anyway, this looks like it's going to work. I got it installed in Visual Studio (though I am seriously thinking about moving out of there soon for these Javascript projects). 'Hello World' came up smoothly. It took stepping through the code in Firebug to figure out what folder to put my style sheets in ("stylesheets", not "styles" or "css" or, whatever), but the framework includes them correctly. 

I am having a bit of a hassle trying to get the system to recognize a view. The documentation wiki  has a nice page that purports to explain how to use the view/templating system. I created a simple template and tried to activate it with the code on the page "html= new View..." but it didn't work. I asked on the google group and was told to review the getting started video. I did and, yes, there was a line of code that was different ("this.view('viewName'..."). I'm not sure what the example on the wiki page is about, but what the heck, it is progress.

Next up, mime types. I'm using IIS7 and that means that it won't just serve any old file. In particular, it won't serve the javascript template files with the extension ".ejs".

First, .htaccess == website.config. They are entirely different. .htaccess is an antique format with inscrutable language. website.config is a modern (xml) format with inscrutable language. The cool thing is that you can define mime types in website.config. If that's possible with .htacess, I've not run into it. You can find an explanation and the source of my code sample on a nice IIS website, here.

I added code to tell it to serve .ejs files as text/javascript and it seems to get them. Still doesn't work, but that's why I continue to be alive. To make things work.

A Small Moment of Victory

I have been trying to reorganize the site to reflect the separation between Javascript (View/Controller) and C# (Model) alongside the Javascript framework effort. I have finally succeeded.
I now have two Visual Studio projects. One is ASP.NET MVC. It connects to the database. It serves JSON objects (see my explanation of the Category/Detail demo app below). The other is pure Javascript (it has a working installation of Javascript MVC for now). I also have configured IIS7 to have a domain sandbox.local that points to the Javascript site. In addition, it has a subordinate application, sandbox.com/data, that points to the ASP.NET MVC project.

I grabbed my previous AJAX demo page and moved it to the Javascript project. Revised it so that the jQuery Post URLs point to "data/..." and Voila!! I have a working project.

Installing Javascript MVC

Some of this was learned during my Sproutcore effort but, since I am writing this series of posts post-facto, here is the overall understanding.

First, Visual Studio is a Microsoft product and, as such, sucks. I know, I know, many developers consider it to be wonderful. Intellisense, the code completion and context-sensitive documentation function is great. It's tight integration with IIS is very helpful, as is its integration with MS SQL.  But it also is cumbersome and bloated. Worse, it doesn't have Eclipse's ability to expand an editor to fill the whole window and then shrink again. That means that one is forever forced to look at code through a little, tiny window. They say that VS 2010 will have multiple-monitor support. Maybe then it won't suck.

Anyway, that is only the beginning of the suckage. I want to add Javascript MVC to my site. Actually, I really want it to be a separate project. I'd actually like it to be a separate website. I'd like to have it be the main website and I'd like to have the C# stuff, aka, the Model Layer, be connected only by AJAX calls that return JSON. I want no other interaction between them.

It turns out that Javascript won't allow you to access a different domain for security reasons. Good thinking, but it means that I need to have another angle. Since Javascript MVC is the user interface, I would like it to present itself when a user goes to mydomain.com. That says that the Model Layer would be good at say, mydomain.com/modellayer, or whatever. Javascript would let me access it. Life is good.

I tried doing it with a Virtual Directory. No dice. I don't know why, but it said it needs to be an application. Google google. Turns out that there is an option, right next to the virtual directory on the popup to add an application. Cool Beans. Another step on the road to happiness.

Actually, I have to be honest. I spent a whole bunch of time cursing IIS. I got a message that said it coudn't show the directory. Nothing I did affected the display. Since I assume that IIS is doing invisible, mysterious crap, I thought that it needed something special to see the files in the folder, especially since there is no index.php analog in this project. I learned a great deal about how website.config works and global.asax.cs but no cigar. Then I got the idea to turn on Directory Listing and see if I could click on something.

I was pointing to the wrong directory!!!! Visual Studio in its infinite wisdom has lots of directories named 'sandbox'. I pointed at the one enclosing the good one. Fixed and works.

One other thing. I tried, during this thrashing, to place Javascript MVC into a directory inside my sandbox project. I never could figure out a way to do it. "Add Existing Item" doesn't work. Neither does adding a directory full of stuff to the file system inside it. Nothing. Never did get it to work, but that's good. I settled on a better approach. mydomain.com and mydomain.com/data is just what I want.