Phusion Passenger – Deploying Rails on Mac OS X Apache

August 28th, 2010 by Steve Gentile No comments »

I’ve been working on learning and developing Rails.  One of the features I enjoyed while doing Grails was the ease in which it took to deploy and run my Grails app in Apache.

I’m sure there are other ways to do this, most were, quite honest way over my head – but I started to investigate options and ran into ‘Phusion Passenger’, a.k.a. mod_rails or mod_rack.  From the website:

Phusion Passenger™ — a.k.a. mod_rails or mod_rack — makes deployment of Ruby web applications, such as those built on the revolutionary Ruby on Rails web framework, a breeze. It follows the usual Ruby on Rails conventions, such as “Don’t-Repeat-Yourself”.

  • Deployment is only a matter of uploading application files. No Ruby (on Rails)-specific server configuration required!
  • Supports both the industry standard Apache web server and the fast and lightweight Nginx web server.
  • Allows Ruby on Rails applications to use about 33% less memory, when used in combination with Ruby Enterprise Edition (optional).
  • Zero maintenance. No port management, server process monitoring or stale file cleanup required. Errors are automatically recovered whenever possible.
  • Designed for performance, stability and security. Phusion Passenger should never crash Apache even in case of crashing Rails applications.
  • Well-documented, for both system administrators and developers!

      The installation (this is for Mac OS X Snow Leopard) – especially the video is very straightforward.

      Let me repeat the steps I went through, because honestly, the Phusion Passenger install was a piece of cake, however, my Apache setup as a Mac OS X user was new to me and so I wanted to share these steps for anyone else like me who might struggle on this part.  I am going to assume you have a Rails app and have made it that far.

      Pre-Install Notes:
      First, you shouldn’t have to install Apache on Snow Leopard, it comes with the OS.  You can check in your System Preferences.

      Preferences

      Select ‘Sharing’:

       WebSharing

       

      (note, you can stop and start Apache by checking/unchecking Web Sharing)

      The last important piece here to understand is ‘where’ Apache lives on your Snow Leopard install.  I’m assuming it’s the same (at least for most of us) – located here:

      /private/etc/apache2

      Finally, I’m going to highly recommend TextWrangler if you are not a Vi user, TextWrangler is a great (& free!) texteditor for Mac – and it lets you access and alter files that require sudo access, etc…

      Ok, let’s get started.  I suggest you fire up the video link and follow along:

      1. open up Terminal, enter the following to install passenger:

      sudo gem install passenger
       

      2. next, install the apache2 module:

      sudo passenger-install-apache2-module

      At the end of the install, passenger provides some critical information, ie.

       PassengerComplete

      The text above might differ for your machine, but you need to copy that text to put in your Apache config.

      3. Open up TextWrangler – goto File – Open File by Name (or use terminal for vi):

      /private/etc/apache2/httpd.conf

      4.  Goto the bottom of the file and paste in your contents.  ie.

      LoadModule passenger_module /Library/Ruby/Gems/1.8/gems/passenger-2.2.15/ext/apache2/mod_passenger.so

         PassengerRoot /Library/Ruby/Gems/1.8/gems/passenger-2.2.15

         PassengerRuby /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/bin/ruby

      5. Now, assuming you have the built in Apache install for Snow Leopard – we need to setup virtual hosts

      Goto this line in the httpd.conf and remove the # – it should look like below:

      # Virtual hosts

      Include /private/etc/apache2/extra/httpd-vhosts.conf

      Ok, you are done with httpd.conf – save it

      6. Now we need to add our Virtual host information, open the conf file in TextWrangler:

      ie. /private/etc/apache2/extra/httpd-vhosts.conf

      Check for the following:

      NameVirtualHost *:80  (just validate this is there)

      Comment out the existing <VirtualHost *:80> entries

      Add the following:

      <VirtualHost *:80>

         DocumentRoot "/Library/WebServer/Documents"

         ServerName localhost

      </VirtualHost>

      Then add your app – the example would be:

      <VirtualHost *:80>

         DocumentRoot "/Users/stevegentile/Sites/book_shelf/public"

         ServerName book_shelf

      </VirtualHost>

      NOTE: above should be the path to your rails app – and the name you want to give the app for it’s URL.  Additionally, it must point to the ‘public’ folder in your rails app!

      7. Ok, we are almost there, now we need to tell our machine how to access the app, so we need to open our hosts file and edit it.    Back to TextWrangler and open file by name:  /private/etc/hosts

      Add a line at the bottom like this example:

      127.0.0.1 book_shelf

      This entry should match the ServerName as set above (ie. book_shelf and book_shelf)

      8. Go back to your Web Sharing, uncheck and check to restart Apache (or use the terminal cmd)

      9.  You should be able to enter http://youappname (ie http://book_shelf ) in your browser to view your rails app.

      Knockout – quick asp.net mvc sample

      July 5th, 2010 by Steve Gentile 1 comment »

      Steve Sanderson has released knockout  – read more here about what knockout is.

      Knockout is a JavaScript library that makes it easier to create rich, desktop-like user interfaces with JavaScript and HTML, using observers to make your UI automatically stay in sync with an underlying data model. It works particularly well with the MVVM pattern, offering declarative bindings somewhat like Silverlight but without the browser plugin.

      Well, as a fan of his asp.net mvc book (Pro ASP.NET MVC Framework (mvc1) and just recent release of Pro ASP.NET MVC 2 – and please note – knockout isn’t at all associated or tied to asp.net mvc!) – I was quickly wanting to take his editor sample – which was so elegantly put together – and simple show a way to pass json data from a controller action to his sample.

      Here is the sample code.

      I’m not going to go too much into knockout – simply because Steve’s post and sample page describe it very well.  I do think this is a good follow up to a post a made regarding jTemplates. 

      Enjoy!

      ASP.NET MVC – jQuery – Json.. Cascading Dropdown

      June 30th, 2010 by Steve Gentile No comments »

      I’m less interested in the ‘cascading dropdown’ part of this post , as I am in demonstrating how json and jquery can be your friends in the asp.net mvc world.

      Let’s start by a description of the ‘problem’:  On populating a page, we need to query for a set of companies and display those to the user.  Upon selection of a company, we need to populate another dropdown of the banks associated to that company.  You can fill in the blanks for ‘companies’with ‘banks’ – basically a one to many.  In my situation, I use lazy loading and do not need to pull all the banks in when the page loads.

      First let’s look at the ‘onLoad’ of the page via jQuery:
      $(function () {
        $("#companies").change(function () {
          LoadBanks($("#companies").val());
          });
        });

      I’ve simplified this from the code to show the essentials.  I’m handling the onChange of the companies drop down list, something like this:
      Select Company: <%= Html.DropDownList("companies", new SelectList(Model, "Companyid", "Name"), string.Empty)%>
      The Model is my list of ‘Company’ objects.  The value is the id and the text is the name.
      From the above javascript, you’ll see that when the dropdown item is selected I will be passing the selected value – which is the id – to the LoadBanks function:

      function LoadBanks(companyId) {
       $.ajax({
        type: "POST",
        url: BuildUrl("Company/LoadBanks"),
        data: ({ id: companyId }),
        dataType: "json",
        beforeSend: function () {
      $.blockUI({ message: "Retrieving Banks..." });   //this is great plugin - 'blockUI'
      },
      success: function (positivePayBanks) {
        $("#positivePayBanks").find('option').remove();
        $banks = $("#positivePayBanks");
        $.each(positivePayBanks, function (i, bank) {
        if (i == 0) { $("#BankID").val(bank.BankID); }
         $banks.append('<option value="' + bank.BankID + '">' + bank.BankName + '</option>');
        });
      $.unblockUI();
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        $.unblockUI();
        var errMsg = "<P>Error Loading: " + XMLHttpRequest.responseText + "<br/>";
        $("#status").html(errMsg).show("slow");
      }
      });
      }

      So, what is going on in this call?

      type: "POST"
      url: BuildUrl("Company/LoadBanks"),   <-- the BuildUrl is just a helper call - basically this is the REST call to the controller/action
      data: ({ id: companyId }),   <-- this is the params being sent to the Action.  I'm passing the selected company id
      dataType: "json",   <--  I'm saying that the returning data will be json.

      Let’s step out of the javascript/html to just show how easy it is to serialize the list of banks to json in mvc:
      This isn’t too exciting but here is the controller action for ‘LoadBanks’:

      [HttpPost]    <-- I'm requiring this to be a post here
      public ActionResult LoadBanks(string id) <--- this id will pick up the id passed in the ajax call above
      {
        var positivePayBanks = _companyService.GetBanksByCompanyId(new Guid(id));
        return Json(positivePayBanks);
      }

      Pretty boring isn’t it?  The simplicity here is appreciate though as mvc includes a JsonResult that will take the list of banks and generate the json!
      Here is the select html:

      <select id="positivePayBanks" class="required"></select>

      The meat here of the post is how we can take that resulting json data and ‘bind’ it to the bank dropdown:

      success: function (positivePayBanks) {   <--- 'positivePayBanks' is the returning json data
        $("#positivePayBanks").find('option').remove();     <--- this clears it each time, as it will continue to just append if I don't first remove it!
        $banks = $("#positivePayBanks");
        $.each(positivePayBanks, function (i, bank) {    <--- the beauty of jQuery here is a nice foreach statement
         if (i == 0) { $("#BankID").val(bank.BankID); }    <-- I'm actually forced to set the id of the selected bank or the form post doesn't catch it.
         $banks.append('<option value="' + bank.BankID + '">' + bank.BankName + '</option>');   <-- append the results to the select
        });
      $.unblockUI(); //unblock the UI
      }

      I left the blockUI in this sample because I want to remind those using ajax, that there is no control over the latency on the network – so rather than leave the user wondering what just happened, this gives a visible indicator.
      For those new to Json, the part I like the best here is that jQuery will deserialize the json data into the ajax result:
      (success: function (positivePayBanks))
      Since this is a list of banks, we can use jQuery to loop through each one and it is represented as a bank object, which allows for the ‘bank.BankID’ and ‘bank.BankName’
      Just as a finishing note, it is possible to just return a partialview with a Html.DropdownList , etc..  - however, by using Json , it greatly decreases the transmission over the wire.  Json is a perfect medium for keeping the data minimal, and as you can see it goes hand in hand with frameworks like jQuery.
      One piece of this I do not like, is how I needed to then set the selected bankId to a hidden field.  I was able to get the value passed into the form collection on form post naturally.  If anyone has a trick for that- let me know  :)
      PS. I’m still looking for a good WordPress application to run on MacBook

      Review of Building a Java Web Application with Netbeans Tutorial

      June 26th, 2010 by Steve Gentile No comments »

      I deployed for the first time a Grails app into a production Tomcat server last week.  Great experience, very straightforward – the technology has been wonderful.  I have switched back and forth between IntelliJ (my favorite for Grails, but probably won’t spend the ~$250 for it), Eclipse (through Springsource Tool Suite), and Netbeans.   I’m not really looking for the IDE to do a great deal outside of perhaps some debugging tools, intellisense, and ‘goto declaration’ type functionality I’ve been accustom to with Resharper.  Which is by the way why I think I liked IntelliJ was mostly because I’ve been a Resharper user for quite some time and I found it closer to my normal IDE experience.

      But I digress.  The main reason I bring it up is because I’ve diverged into several different paths at the same time – exploring Ruby on Rails, Grails, PHP, and then Java Web applications (each has been a ‘taste of the weekend’ experience where I dedicated any development time over the weekend to a new technology).  I will say, Netbeans has build in support for all those technologies and I found it easy to use.  (ie. In the Grails project, we use Subversion, and that was very straightward to setup in Netbeans).  The guys I work with are Eclipse fans, and I understand when you have used an IDE for many years, you tend to find it to be the ‘best’.  So certainly I’m not going to start an IDE war conversation.  To each their own.   Actually, I bring up Netbeans because I’ve found their tutorials to be quite good.  For reference, I’m running this on MacBook Pro version of Netbeans 6.8.

      The tutorial I’m working through is called “The Netbeans e-commerce tutorial” found here: http://netbeans.org/kb/docs/javaee/ecommerce/intro.html What I have really enjoyed with this tutorial is it takes a very holistic approach to building a Java web application.  And the tutorial isn’t really Netbeans specific, although the screenshots show ‘netbeans ide’ (in other words, you could do this in Eclipse without too much of a difference).  There aren’t too many shortcuts taken in the tutorial, including just building the database using MySQL Workbench – which I must say, the tutorial goes quite in depth in showing how to use the Workbench IDE to create a model first approach that forward engineers the creation of the tables in MySQL.  Very nicely done.

      One other item to note is the attention to detail to not just ‘java’ elements, but the setup of a very well designed ‘css’ oriented html web site.  Obviously they want to show off their IDE capability with html and css, and quite honesty I was extremely impressed with the IDE capabilities especially with the CSS intellisense – which was more than just ‘intellisense’ it has great help context build in, as well as a nicely done preview pane to show you what the css class will look like ahead of time!

      I’ve worked my way through the first half  of the tutorial – and will provide more feedback as I get past the modeling and html aspects.  I wanted to share that so far the experience has been very positive – and I hope as I continue through the meatier java parts of the tutorial that I can have more good things to say  :)

      Until next time, if you get a chance, check out the link provided to the tutorial and give it a whirl and let me know what you thought of the experience.

      ASP.NET MVC with JTemplates – Part II

      May 20th, 2010 by Steve Gentile 7 comments »

      In my first part I of this two part series, I covered using Json, ASP.NET MVC, and jTemplate to bind to a simple html table.

      The next part of this series is to ‘prettify’ the table using the jQuery plugin  DataTables

      DataTables supports using the same theme as used by jQuery UI, so I have decided to include this as well.  Basically in about 4 lines of javascript, we can convert the previous simple table to a nice looking pageable, sortable, searchable grid!

      image

      The references are updated (see sample code):

          <link href="<%= Url.Content("~/Content/Site.css") %>" 
            rel="stylesheet" type="text/css" />
          <link href="<%= Url.Content("~/Content/jquery-ui-1.8.1.custom.css") %>" 
            rel="stylesheet" type="text/css" />
          <link href="<%= Url.Content("~/Content/demo_table_jui.css") %>" 
            rel="stylesheet"  type="text/css" />
          <script type="text/javascript" 
            src="<%= Url.Content("~/Scripts/jquery-1.4.1.js") %>"></script>
          <script type="text/javascript" 
            src="<%= Url.Content("~/Scripts/jquery-ui.js") %>"></script>
          <script type="text/javascript" 
            src="<%= Url.Content("~/Scripts/jquery-jtemplates_uncompressed.js") %>"></script>
          <script type="text/javascript" 
            src="<%= Url.Content("~/Scripts/jquery.dataTables.js") %>"></script>
      

      The next step is to apply the DataTables plugin to our table.

      (If you had the demo code for part I, you might notice part II I had to make sure to define the thead and tbody tags in the table.)

      <script type="text/javascript">
          $(document).ready(function () {
              $.ajax({
                  type:"POST",
                  url: "<%= Url.Action("GetData") %>",
                  data: "{}",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: function(data){
                      $("#jTemplateDemo").setTemplate($("#templateHolder").html());
                      $("#jTemplateDemo").processTemplate(data);
      
                      $('#personTable').dataTable({
                          "bJQueryUI": true,
                          "sPaginationType": "full_numbers",
                          "aoColumns": [{ "sTitle": "First Name" },
                             { "sTitle": "Email" }]
                      });
                  }
              });
          });
      </script>
      

      I have included the previous javascript – the key section is the $(‘#personTable’).dataTable.

      There are tons more functionality you can get from the plugin – including grid editing, server pagination, etc…  (ie. saving state – (“bStateSave”:true)

      I hope to create a third part of this series that will combine the edit features of the datatable with the ASP.NET MVC + json capability.  This will be valuable to show the posting of json data as well as updating the underlying json data source for the template.

      (by the way, there is an unintended “easter egg” in this post.  If you recall the template grid TH was incorrectly labeled ‘Last Name’ instead of ‘Email’. By defining the aoColumns above, it overrides the ‘Last Name’ in the template and applies the ‘Email’ header.  aoColumns is an optional parameter in this case).

      I have included this code for your review – download here

      ASP.NET MVC with jTemplates – Part I

      May 20th, 2010 by Steve Gentile 6 comments »

      One of my goals in web development is to continue to look to use json to transmit data vs. using partial views.  Obviously by transmitting json data, the payload is going to be much more efficient.

      I’m going to break this out into two parts :

      Part I is going to cover the basics to using jTemplate with jQuery within an asp.net mvc environment.

      Part II is going to take this concept and apply it to a nice looking jQuery plugin ‘grid control’ called  DataTables

      Let’s look at what the final result will be:

      image

      Let’s address the server side pieces first:

      I’m going to create a new Model class ‘Person’:

      public class Person
          {
              public string ID { get; set; }
              public string FirstName { get; set; }
              public string Email { get; set; }
          }

      Using the default asp.net mvc created project type, I’ll just a hook into the the Home controller to display the table in the index page.  To do this, I’ll need to add another action with some sample data that will be called from the page via ajax:

       

       [HttpPost]
       public JsonResult GetData()
       {
            IList<Person> people = new List<Person>
              {
                new Person {ID = "1", FirstName = "Anne", Email = "anne@domain.com"},
                new Person {ID = "2", FirstName = "Amelie", Email = "amelie@domain.com"},
                new Person {ID = "3", FirstName = "Polly", Email = "polly@domain.com"},
                new Person {ID = "4", FirstName = "Alice", Email = "alice@domain.com"},
                new Person {ID = "5", FirstName = "Martha", Email = "martha@domain.com"}
              };
            return Json(people);
      }

      The ‘return Json(people)’ will return the list in json format – which you can see in the above Firebug screenshot ‘response’. 

      So that is basically it for the server side.

      The first step in the views is to add the references to the javascript files.  Since I’m using the site.master I’ll add it there, so that it’s available to other views as well:

      image 

      (For production, you will want to use the compressed/min files instead)

      I also add a new ContentPlaceHolder in the head of the site.master:

      <asp:ContentPlaceHolder ID="HeadContent" runat="server" />
      

      This way on the views, I can put any scripts in the head tags as well.

      In the Index.aspx page we can finish this functionality:

      1. add the scripts to the head of the view:

      <asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
          <script type="text/javascript">
              $(document).ready(function () {
              $.ajax({
                      type:"POST",
                      url: "<%= Url.Action("GetData") %>",
                      data: "{}",
                      contentType: "application/json; charset=utf-8",
                      dataType: "json",
                      success: function(data){
                          $("#jTemplateDemo").setTemplate($("#templateHolder").html());
                          $("#jTemplateDemo").processTemplate(data);
                      }
                  });
              });
          </script>
      </asp:Content>
      

      To review this (we could use a $.getJSON as well) – on the page ready function I’m going to make an ajax call back to the ‘GetData’ action.  This is defined in the ‘url:’ parameter.

      In this case there are no parameters being passed so the data is left blank (this is best practice to include “{}” when blank).  It is possible to use a REST url as well with parameters.

      We define out contentType (using $.getJSON) would do this automatically.

      Lastly, we provide an ‘onSuccess’ function – the ‘data’ will contain the returning Json from our action call.  The next two calls use the jTemplate API to merge the Json data to the templated html, as shown below.

      2. add the template to the view:

      <script type="text/html" id="templateHolder">
          <table border="1">
          <tr>
              <th>
                  First Name
              </th>
              <th>
                  Email
              </th>
          </tr>
          {#foreach $T as record}
              <tr>
                  <td>
                      {$T.record.FirstName}
                  </td>
                  <td>
                      {$T.record.Email}
                  </td>
              </tr>
          {#/for}
      </table>
      </script>
      
      <div id="jTemplateDemo">
      </div>
      

       

      One thing to keep in mind is to put this html in the script tag.  Alternatively you could load this template from another file as well.

      With this approach we have created a very lightweight approach to passing data from the server to the client – the binding to the template occurs on the client.  If we used partial views, the binding process would occur on the server and transmit the payload with the html, increasing it’s size.  The lightweight json approach is critical especially in our ajax calls

      Next post we’ll take this table and convert it into a ‘DataTable’.

      I have included this code for your review – download here

      WebHost4Life

      May 7th, 2010 by Steve Gentile 12 comments »

      I’m a truly dedicated WebHost4Life fan.  Been using them for something like 8 years now ? They were always responsive to any request, and they even allowed me to make some exceptions (I had a program I needed to be able to run on the server).

      The control panel, although not the prettiest thing, got the job done.

      Let me step back one moment and say they were advertising and telling me about how they were upgrading their system and all the improvements and ease of use and performance it would bring. I was looking forward to it.  It was delayed I noticed when I’d come to the site, but it would say they are ‘testing everything’.  That made me feel better about it all as well.

      Well… I felt that way until 3 weeks ago. 3 weeks ago, without warning they flipped the switch.

      Day 1: the forum I used for my community (MYSQL) was practically unusable.  Extremely slow. So badly I couldn’t even post to the community that there was a problem.  I entered a ticket, it took escalating the ticket 3 times.  5 days later it was working.  It’s still much slower than before.  5 days.

      When I would chat or get a ticket I started noticing a trend… every single correspondance was ‘I’m sorry for the inconvenience this has caused you…’.  Like it was the scripted response to everything.

      But ok, that was fine until I went to my .net main site that uses MSSQL. Hmmm, I track and store data and noticed the last data entry was a month ago.  One month behind.  All the data for the last month was gone.  What???  Another ticket.  Another 5 days. I never got a response.  They literally never answered.  They had no backup to offer me.  Data was gone, forever.

      The best answer I got was ‘I’m sorry for the inconvenience this has caused you’.

      But wait, it gets better. Remember how they were so good to work with on running my program I need ?  Despite everything I said, they flat out refused ‘it’s against our policy’.  I’m like ‘I’ve been running this safely for 8 years ???’.  Didn’t matter.  I asked to talk to manager.  They said ‘ok’. Ticket sat in the queue for 3 more days.

      Three days later, I responded, asking what the status is.  Same response – ‘it’s against our policy’ – it wasn’t from a manager either.

      Let’s talk about the control panel.. it’s pretty.  Pretty slow.  Pretty useless.  I need to backup my database (since they can’t migrate it properly), but the tool throws some .net exception on the webpage.  Customer support said ‘try Firefox’. Same error.

      This is twice in 3 weeks I had to open a ticket for a buggy control panel that throws exceptions.

      Lastly, I have a requirement to upload files.  So I have to set permissions.  They said ‘add a new user’.  I said ‘no this is the internet user’ .  The old ‘ugly’ control panel handled all this fine and perfectly.  The new tool… timed out.  The final ticket response was ‘use your FTP program to change permissions’.

      I should add, I have lost 80% of my community. They were all very disapointed to find out the data was gone.  The forum they meet and talk and plan events was unusable.  The program I run can’t be run so the events can’t run.  I have to re-code the app now (it was given to me, no source code).

      I’m writing this because as a consumer, I really feel I’ve been thrown and tossed around by a company that doesn’t respect a loyal customer.  Who must be too big now to value guys like me.  Back ‘in the day’ I suspect they worked well with me because they were a good company.  Something has changed.

      I highly suggest – don’t use Webhost4life.  You will regret it.

      So, needless to say, I’m looking for a new host.  One of the things I liked about Webhost4life was that I could run my mysql blog and forum as well as my .net site.  It ‘was’ easy to manage.  Secondly they don’t charge for bandwith usage.  I don’t use too much, but I had confort knowing the bill would always be the same amount.

      Quite disapointing to me in a time where companies are susposedly struggling with the economy. I would think a shift would occur where they valued their customers.  Instead, I’m just another ‘policy’ to them that pays a year in advance…

      Powered by Qumana

      ASP.NET MVC and Rails

      April 28th, 2010 by Steve Gentile No comments »

      Not big post here, just a chance to recommend reading this blog post:

      http://anders.janmyr.com/2010/04/aspnet-mvc-vs-rails3.html

      I think he does a great job comparing the two in a positive way.

      Windows 7 Series

      April 20th, 2010 by Steve Gentile No comments »

      I listened to a good podcast today of Petzold discussing Silverlight for the upcoming Windows phone.

      I must say, after listening to him talk I had some encouragement for the phone and the dev environment.

      I do think it was a fantastic decision to take the route of managed code with SL as the option.

      I can see great opportunities for companies to build phone enabled apps for their internal as well as outward facing clients.

      I do think the market is saturated with iPhone, blackberry, android, etc phones – and I’m (sight unseen here) hoping that it does better than the Zune has.

      With the latest iPhone announcements that are blocking devs from using anything outside of objective-c, c++, and c I was a bit discouraged (I want to see Monotouch succeed)

      Moving to JSON with Client Side Templating for Views

      April 10th, 2010 by Steve Gentile 4 comments »

      I was Google ‘Buzzing’ today on this and figured I’d post the same here :

      My new frontier in asp.net mvc (and hopefully asp.net 4) will be implementing templates and moving to a more rich client ‘json’ experience vs. partials views.

      couple of resources:

      http://www.west-wind.com/Weblog/posts/509108.aspx

      http://weblogs.asp.net/dwahlin/archive/2009/04/17/minimize-code-by-using-jquery-and-data-templates.aspx

      http://weblogs.asp.net/dwahlin/archive/2009/05/03/using-jquery-with-client-side-data-binding-templates.aspx

      http://starterkit.jsonfx.net/

      http://jbst.net/

      The Telerik MVC controls use JSON I think behind the scenes.  They have source code – I am interested in evaluating that as well. (I’m using their controls, I mean evaluate as in see the source and how they implement their controls with JSON – in particular their grid control)

      What you might appreciate here is that you could, in theory, use this approach as your view for any backend framework.

      Also, I know ExtJS has some rich controls, they are all Json related, I think Phil Haack had an article on using mvc with ext.

      Basically, today, if you add for example, an item to a ‘grid’, I go behind the scenes, add it – then redisplay the grid.  In these approached, you’d literally just append a row to the grid instead.  Very interesting.   The value is going to be less traffic, as partial views create more traffic.

      I see this as well:
      ASP.NET AJAX And Client-Side Templates by Dino Esposito:
      http://msdn.microsoft.com/en-au/magazine/cc546561.aspx

      The HTML Message Pattern by Dino Esposito:
      http://msdn.microsoft.com/en-au/magazine/cc699560.aspx

      Of course, this all assumes you opt for a rich experience with jSON/jQuery vs. something like Flex or Silverlight  :)