Creating a basic skeleton with the RAW stack

When I start with a new stack one of the first things I always do is create a really simple app to do something sort of meaningful. So lets do that with the RAW stack.

 

Just as a reminder the RAW stack is a combination of RavenDB, AngularJS and WebAPI. These three technologies combined make a pretty awesome combination for a developer wanting to make smart client side web applications and is using .NET on the server.

 

As the demo application I will be building is all about movie reviews and rentals lets start my a very minimalistic, and oversimplified, approach to listing and adding movies using these technologies. Keep in mind that the code in this sample is just a start to get the three technologies working together and by no means is a best practice. In fact it is quite the opposite but we will improve on that in future posts.

 

Adding the data model

The data model we will be using for now is dead simple. It is a movie type with just an Id and a Title.

 

   1: namespace RawStack.Models


   2: {


   3:     public class Movie


   4:     {


   5:         public int Id { get; set; }


   6:         public string Title { get; set; }


   7:     }


   8: }

 

Adding RavenDB to store data

To start with RavenDB we need an IDocumentStore instance to connect to the database. This is an expensive object to create so it is best to create it once and reuse that object. In this case I am going to use a simple embedded document store that saves it’s data in the App_Data folder.

 

   1: using System.Reflection;


   2: using Raven.Client;


   3: using Raven.Client.Embedded;


   4: using Raven.Client.Indexes;


   5:  


   6: namespace RawStack


   7: {


   8:     public class RavenConfig


   9:     {


  10:         public static IDocumentStore Store;


  11:  


  12:         public static void Register()


  13:         {


  14:             Store = new EmbeddableDocumentStore


  15:             {


  16:                 ConnectionStringName = "RavenDB"


  17:             };


  18:             Store.Initialize();


  19:  


  20:             IndexCreation.CreateIndexes(Assembly.GetCallingAssembly(), Store);


  21:         }


  22:     }


  23: }


Adding the WebAPI controller

In order to have an HTTP endpoint to expose data as well as except new data we are going to use a super simple WebAPI controller. This controller use the IDocumentStore to create a new session and in that session we can request or store data.

 

   1: using System.Collections.Generic;


   2: using System.Linq;


   3: using System.Web.Http;


   4: using RawStack.Models;


   5:  


   6: namespace RawStack.Api


   7: {


   8:     public class MoviesController : ApiController


   9:     {


  10:         public IEnumerable<Movie> GetMovies()


  11:         {


  12:             using (var session = RavenConfig.Store.OpenSession())


  13:             {


  14:                 return session.Query<Movie>().ToList();


  15:             }


  16:         }


  17:  


  18:         public void PostMovie(Movie movie)


  19:         {


  20:             using (var session = RavenConfig.Store.OpenSession())


  21:             {


  22:                 session.Store(movie);


  23:                 session.SaveChanges();


  24:             }


  25:         }


  26:     }


  27: }

 

Adding AngularJS and the user interface

This just leaves us with the task of adding a bit of user interface. In this case I added an ASP.NET MPC controller and Razor view to start even though I am really not using any of these technologies. Inside the view we need to load the Angular.js source file and create a minimal AngularJS controller to load and display the data.

   1: @{


   2:     ViewBag.Title = "Movies";


   3: }


   4:  


   5: <h2>Movies</h2>


   6:  


   7: <div ng-app="" ng-controller="moviesCtrl">


   8:     <ul>


   9:         <li ng-repeat="movie in movies">{{movie.Title}}</li>


  10:     </ul>


  11:     


  12:     <h3>Add movie</h3>


  13:     <label>Title</label>


  14:     <input type="text" ng-model="newMovie.Title"/>


  15:     <button ng-click="addMovie()">Add</button>


  16: </div>


  17:  


  18: <script src="~/Scripts/angular.js"></script>
   1:  
   2: <script>
   3:  
   4:     function moviesCtrl($scope, $http) {
   5:         $http.get("/api/movies").then(function(e) {
   6:             $scope.movies = e.data;
   7:         });
   8:  
   9:         $scope.newMovie = { Title: "" };
  10:         $scope.addMovie = function () {
  11:             $http.post("/api/movies", $scope.newMovie).then(function () {
  12:                 window.location = window.location;
  13:             });
  14:         };
  15:     }
</script>



 



Try it



You can try the sample application here or brose through the complete source code on GitHub here. Keep in mind that if you try to add a new movie you might not see it right away and you might have to refresh the page. This is due to RavenDB updating it’s indexes asynchronously in the background and something we will come back to in a future post.



 



Conclusion



Getting a basic skeleton working was dead simple. Keep in mind that none of this is best practices, in fact some of it is a really bad practice. But that was not the goal of this step, all we wanted to achieve is a very basic editing action with the minimal amount of work. In future posts we will ditch this code and do it in a much better way.



 



Index of posts on the RAW stack



See here for more posts on the RAW stack.



 



Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>