AppBoxr :: Bruising Simplicity

AppBoxr

Step 1: Cut a hole in your code

Client HTML
<input type="text" id="Product.Name" />
<input type="submit"/>
C# — and lots of it
public class ProductsController: ApiController {
public Product PostProduct(Product item) {
item = repository.Add(item);
...
context.Products.Add(prod);
context.SaveChanges();

Step 2: Put this junk in that hole

Client — HTML & Javascript only
<div data-model="Product">
<input type="text" data-property="Name"/>
<button data-save="Product">Save</button>

</div>
$(document).ready(function() {
var app = new AppBoxr({ syncUI: true });
$("*:[data-save]").click(function (e) {
app.call("save", { models: [$(this).data("save")] });
});
});
What is AppBoxr?

AppBoxr is a .NET micro framework that makes writing apps bruisingly simple. No ORM. No API.

Note: AppBoxr is in an alpha stage and is not ready for anything prime time yet.

AppBoxr does three things: (1) provides a simple way to synchronize in real-time your data collections across all connected clients; (2) exposes a RESTful api to add/update/delete any of your DOM-defined collections; and (3) uses pure javascript to handle CRUD operations of your server-side database (currently Mongo is the only supported backend).

All you need to worry about is making a snappy UI sprinked with data-* attributes that describe your model. Once that's set, fire up the AppBoxr javascript object and you're immediately syncing and saving.

What isn't AppBoxr?

AppBoxr is NOT a full-stack framework. It's intended to live as a micro-framework within ASP.NET MVC apps on the .NET platform. Need routing, authentication, security? .NET has it all covered.

Who made this?

Hi, nice to meet you! My name is Tim. I really love building innovative things on the web.

Upon what shoulders does Appboxr rest?

Huge props to SignalR for the real-time goodness of AppBoxr. Also, tons of inspiration was drawn from Meteor, which is an amazing web framework from the future.

How do I install?

Using Nuget in a ASP.NET MVC 4+ app:

Install-Package AppBoxr -Pre

The code is also available on GitHub.

Quick Start
Step 1:
Per the above, run Install-Package AppBoxr -Pre from the nuget command line inside a freshly created ASP.NET MVC 4+ app
Step 2:
Sign up at mongolab.com or mongohq.com for a free account and create a mongo database.
Step 3:
Copy the connection string URL into your web.config file.
<add key="AppBoxr-MongoDBUrl" value="mongodb://USERNAME:PWD@URL_TO_MONGODB_WITH_PORT/NAME_OF_DATABASE" />
Step 4:
Add this snippet of HTML to one of your views. 
    <div style="float:left;border-right:1px solid #ccc;padding:3px;width:200px;">
        List of all kittens
        <div data-model-template="Kittens" data-model-orderby="Name" data-model-orderby-direction="asc">
            <div data-model-target="KittyContainer" style="padding:5px;cursor:pointer;">
                <h1>
                    {{Name}}</h1>
                Eye Color: {{EyeColor}}
                <br />
                Enjoys CatNip? {{Toys.EnjoysCatNip}}
                <br />
                Yarn? {{Toys.HasBallOfYarn}}
            </div>
        </div>
    </div>
    <div style="float:left;margin-left:20px;" id="KittyContainer" data-model="Kittens">
        <div>
            <span>Name</span>
            <input type="text" id="txtName" data-property="Name" />
        </div>
        <div>
            <span>Eye Color</span>
            <input type="text" data-property="EyeColor" />
        </div>
        <div data-model="Toys">
            <label><input type="checkbox" data-property="HasBallOfYarn" />Has Ball of Yarn?</label>
            <br />
            <label><input type="checkbox" data-property="EnjoysCatNip" /> Enjoys cat nip?</label>
        </div>
        <button class="btnSave" data-save="Kittens">
            Save</button>
        <button class="btnDelete" data-del="Kittens">
            Delete</button>
    </div>
Step 5:
Add this javascript. 
    <!--load dependencies first-->
    <script src="Scripts/jquery-1.6.4.js"></script> <!--or whatever recent version you have-->
    <script src="Scripts/underscore.js"></script>
    <script src="Scripts/jquery.signalR-1.0.0-rc1.js"></script>
    <script src="Scripts/jquery.signalRamp.js"></script>
    <script src="Scripts/jquery.domModelr.js"></script>
    <script src="Scripts/handlebars.js"></script>

    <!--load appboxr last-->
    <script src="Scripts/jquery.appBoxr.js"></script>

    <script>
        $(document).ready(function () {
            var app = new AppBoxr({
                url: "http://YOUR_LOCAL_ENVIRONMENT" //CHANGE this to match your local environment
                , syncUI: true //leave as true if you want to sync UI updates across clients
            });

            $(".btnSave").click(function (e) {
                app.call("save", { models: [$(this).data("save")] });
            });

            $(".btnDelete").click(function (e) {
                app.call("del", { model: $(this).data("del") });
            });
        });
    </script>
What just happened?

You just defined a Kittens model in your HTML with data-* attributes, wired up AppBoxr to automatically sync the collection data to all subscribed clients, and exposed the new Kittens collections via a RESTful API.

Bring up this page in multiple browsers and start adding some Kittens. Both browsers should be updated in real time to any changes.

Note: If you kept syncUI: true in your AppBoxr javascript, then UI events AND collection changes will be synced across all your clients.

All collections are accessible via a RESTful API.

All {HubName}s below refer to the appId specified in the AppBoxr instantiation. If you did not provide an appId, the default is AppBoxr.

All {CollectionName}s are the top-level collection as defined by your data-model attributes in your HTML.

GET http://YOUR_LOCAL_ENVIRONMENT/{HubName}/{CollectionName}
You can also optionally provide a mongo queryable (i.e., {Name: 'bootsies'}) as a single querystring parameter.
POST http://YOUR_LOCAL_ENVIRONMENT/{HubName}/{CollectionName}
POST the JSON object to modify or add
DELETE http://YOUR_LOCAL_ENVIRONMENT/{HubName}/{CollectionName}?ids={comma-separated-list}
{comma-separated-list} - a list of ids to delete
Any deleted, added, or modified collections via the API will be synced in real-time to all connected clients.
Need some help?

Stackoverflow is a great place to ask for help.

You can also shoot me an email and I'll do my best to respond.

HTML Structure

Coming soon

Javascript API

Coming soon