After months of hard work we are here, and happy to announce the beta release of an idea that has become a reality. A Cross Side Web Framework that helps us reuse objects on Server Side and Client Side, and minimize the code you need to do.

Built on Node.js, we take advantage of the language that is really crossing the line between platforms and technologies. The nature of JavaScript has become it a language that is used today in many areas like databases (MongoDB for example), web browsers, and finally Node.js that is exploding the use of JavaScript from command line to -web servers, ftp servers and socket servers-.

The problem

As a web developers and Rich Internet Applications lovers, every time we want to build a -dynamic, fancy and responsive client side- we encounter a lot of obstacles that makes things hard and a little confused, for example we can found situations like the next ones:

The MVC Model is ready for consume on server side, but we need to replicate it to JavaScript if we are going to use it on AJAX.
ResultSets are fully usables on server side, but we can't scroll or manage it on client side.
If we want to re-render parts of the web page, we need to invoke server side to re-build a then render again on client. And so many things that we need defeat to accomplish our goals.

The main concern is that practically we need to take a lot of our server side stuff, then port and replicate it to JavaScript on the client side. That’s a very huge way and a waste of time and resources that can be used to improve other aspects of a web project.

What Slot does?

Seamless the main goal in Slot is:

Generate a MVC layer for your project that reuse the same code on client and server side, taking your web design as a pattern.

But to make it happens, it's absolutely necessary stay clear with the basic concepts to use Slot Framework.

TODO: Change this introductory paragraph
Learn the most important principle in Slot, how to orchestrate your page in fragments, and how to reuse them on many pages. Also you can use dynamic data to populate your page without necessity of database connections...

Simple and Natural Web Oriented

Taking the premise that the native environment of a browser is compounded for HTML+CSS+JavaScript, and today's trending in web designs requires HTML5+CCS3 to guarantee responsive and functionality in a wide range of screen sizes.

We have built Slot Framework keeping this premises on mind, and we offers a way to use this technologies without necessity of server side controls. And maintaining the clean and pure use of HTML, saving the extra layers that server side controls wraps over native HTML+CSS.

That's why today's disruptive client side frameworks are the perfect option to work with Slot, we can accomplish excellent results and a plethora of screen sizes using; Bootstrap, Zurb Foundation, Yahoo UI, JQuery, JQuery UI and many others powerful JavaScript frameworks.

In conclusion, Slot is not a server side controls oriented framework, instead is intended to use HTML5 tools.

Design and Prototyping First Oriented

One of the most emphasis point we have done, is going to the rescue for the good practices and better methodologies, and that’s the case of Design Stage.

Many times building web sites, we have encountered situations in which the rush force us to dedicate a minimum time for the design stage, that is a very bad decision, and will impact the quality of final product. Furthermore, in many cases when we need to create a very functional prototype, we start creating a lite web page with a few data, and probably we need to do some server side code to accomplish the prototype.

Design stage is a precious time to detect and define the data-models we are going to use in the development stage, but really we don’t take advantage of this opportunity. It’s a perfect moment that can be used to link our data-models with the database structures. No matter what the situation we affront on design stage or prototyping, in the majority of cases we lost the time invested on, because we don’t get focused on reuse 100% of the output from this stage.

Slot put the focus on reuse every piece of work you have done on design/prototyping, that is why Slot provide a methodology to organize the page in fragments, and to define the data-models that fragments will be using. Finally based on those definitions, Slot generates a MVC layer ready to use on development stage, this layer can be used in server and client side too.

Learn the ways to create a project, and take a full view of the internal structure.

Creating a project (slot command line)

This feature will be ready when Slot Command Line has been released. Meanwhile, those prompt lovers can easily build a slot project following the next manual step by step.

Creating a project (manually)

TODO: pending to complete

Steps to create a project
1 Execute the command line:
$ mkdir /your-project-path/mySlotProject
$ cd /your-project-path/mySlotProject

$ npm init

It only covers the most common items, and tries to guess sane defaults.
...
...
Press ^C at any time to quit.
Complete basic configurations, the command will be asking to you for many values, use "mySlotProject" as a name for demo purposes:
name: (nodeModule) mySlotProject
version: (0.0.0)
description: Description for your project
entry point: (index.js)
test command:
git repository:
keywords:
author: Carlos Echeverria
license: (ISC) MIT
As a result the command will create a packaje.json file:
About to write to /your-project-path/mySlotProject/package.json:

{
    "name": "mySlotProject",
    "version": "0.0.0",
    "description": "Description for your project",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Carlos Echeverria",
    "license": "MIT"
}
2 Up to this point the project has been created, but you need to add "SlotFramework" as a dependency in the project. To do that you need to add the next node in the package.json file:
{
    "name": "myFirstModule",
    "version": "0.0.0",
    "description": "Description for your project",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Carlos Echeverria",
    "license": "MIT",
    "dependencies":{
        "slot-framework": "1.0.0"
    }
}
3 To complete the setup, is necessary download and install all dependencies in the proyect. To do that you need to execute the next command line:
$ cd /your-project-path/mySlotProject
$ npm install

npm WARN package.json myFirstModule@0.0.0 No repository field.
npm WARN package.json myFirstModule@0.0.0 No README data
npm http GET https://registry.npmjs.org/mime/1.2.11
npm http 304 https://registry.npmjs.org/mime/1.2.11
mime@1.2.11 node_modules\mime
Finally the command has installed all the necessaries packages and modules into the project, all of them were created on folder /your-project-path/mySlotProject/node_modules:
$ ls -ltr node_modules/
total 24
drwxr-xr-x+ 1 cecheveria     None 0 Jun  5 18:12 bower
drwxr-xr-x+ 1 cecheveria     None 0 Jun  5 18:12 grunt
drwxr-xr-x+ 1 cecheveria     None 0 Jun  5 18:12 grunt-contrib-clean
drwxr-xr-x+ 1 cecheveria     None 0 Jun  5 18:12 grunt-contrib-concat
drwxr-xr-x+ 1 cecheveria     None 0 Jun  5 18:12 grunt-contrib-less
drwxr-xr-x+ 1 cecheveria     None 0 Jun  5 18:12 grunt-contrib-watch

Project Structure

Once the project has been created, it will containt a lot folders and the project configuration set in the slot.json file. It declares paths to folders and key attributes to use in the project.

Slot.json file
{
    metaData:     "/bind",
    webRootDir:   "/www",
    mvcRootDir:   "/app/mvc",
    restRootDir:  "/app/rest",
    dbRootDir:    "/app/db",
    restFilter:   "/rest",
    mvcFilter:    "/mvc"
}
Slot.json attributes
Name description
metaData By default is set to /bind, this attribute points to the folder that holds the fragments definitions used on design time.
webRootDir By default is set to /www, this attribute points to the folder that holds the resources used in the project; html files, css files, images, javascript files, and any other content needed to build the project.
mvcRootDir By default is set to /app/mvc, remember that Slot is a built in MCV framework, and to maintain separated layers, the mvcRootDir attribute was created to point to the folder that holds the auto generated MVC resources.
See Generating MVC Layer
restRootDir By default is set to /app/rest, this attribute points to the folder that holds the REST Api Methods created in the project.
See Rest Api in action
dbRootDir By default is set to /app/db, this attribute points to the folder that holds the Data Access Objects used to interact with databases, data storages and many other data sources.
restFilter By default is set to /rest, this attribute holds the URL path used to filter all REST Service calls.
Example:
If the restFilter attribute points to /rest and the REST Service to be consumed is /examples/contacts, then, the end point url to consume this service will be /rest/examples/contacts. Any other url will be unresolved.
mvcFilter By default is set to /mvc, this attribute holds the URL path used to filter all MVC Object requests.
Example:
If the mvcFilter attribute points to /mvc and the MVC Object to be downloaded is the /examples/mContact.js model, then, the end point url to consume this object will be /mvc/examples/mContact.js. Any other url will be unresolved.

Page Components

An easy way to understand the internal page structure, is taking in mind that a web page contains spaces where page portions can be inserted. Learn how to orchestrate this portions, and how to reuse them on many pages.

Components TODO: complete explanation
Name description
Slots The Slot is the page space where a portion of data will be inserted. To declare a Slot you must use the next syntax in the html template: {@slotName@}.
Fragments The Fragment is the page portion that will be inserted in a Slot.

A Fragment is central unit of design.

A Fragment is binded to a HTML template

A Fragment contains Attributes.

Attributes

An Attribute is a minimal unit of design, it contains a simple values like names, numbers, simple texts, etc. Also, an attr can contain any complex data you want to display in the page.

An attribute can be defined as a Slot, furthermore, a fragment can contain many slots.

The next is an example of a how to declare simple Slots on Design Time, we have taken the Contact example page from our tutorials. In this case just two simple attributes were defined in the page, userName and userNumber:

Simple Slots in /www/examples/contacts.html (on webRootDir folder)
<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>Hi {@useName@}, this is a demo of declaring slots</p>
        <p>You are the user number: {@userNumber@}</p>
    </body>
</html>
Fragment definition in /bind/examples/contacts.json (on metaData folder)
{
    binds: {
        userName:"Jhon Doe",
        userNumber:"#00001"
    }
}

Parting from a well done Design Stage with a depurated UI, and a clean metadata Model, is time to pass to your Development Stage. One of the main advantages of Slot's MVC, is that model objects can be used on client and server side, and controller object can be used to render fragments on both sides too.

Generating layer (refreshing page)

Base on the previous Slots and Fragments used on Design Time (see page components section ), the framework will Auto generate MVC Objects to be used on Development Time, a complete MVC Layer will be created on mvcRootDir folder. This generation will happen each time you refresh a page directly from your browser, you can see next the details of each object that will be generated.

Generated MVC Objects
Name description
Server Side View vContacts.js

An Attribute is a minimal unit of design,

An attribute can be defined as a Slot, furthermore, a fragment can contain many slots.

TODO: explain syntax
Server Side Model mContactsSrv.js

An Attribute is a minimal unit of design,

An attribute can be defined as a Slot, furthermore, a fragment can contain many slots.

TODO: explain syntax
Client Side Model mContacts.js

An Attribute is a minimal unit of design,

An attribute can be defined as a Slot, furthermore, a fragment can contain many slots.

TODO: explain syntax
Sample of Client Side Model /app/mvc/examples/mContacts.js
/**
 * Created using Slot Framework
 * Object model that represents the main Slot
 */
function main() {
    this.userName = "";
    this.userNumber = "";
}
main.create = function() { return new main(); }
main.prototype.layout = function() { return page.layouts["main"]; }
main.prototype.bind = function(json) {
    return this;
}
main.prototype.onPreRender = function() {
    return this;
}

Generating layer (slot command line)

This feature will be ready when Slot Command Line has been released. Meanwhile, those prompt lovers can easily generate the MVC Layer using the refreshing page.

Include Node.js Drivers in your project to connect with MySQL, MariaDB, SQLite, PostgreSQL, MS SqlServer, MongoDB and many others. Get knowledge of tips and tricks to lean and faster binding with the MVC Layer...

Equals Slot.attributes and Database.field-names

TODO: Complete this section

The API implements a stadarized output response

This api offers the opportunity to do lean web services implementations, now developers can enjoy a faster way to create RESTful services backed on modules, and relay on Default Convention to ease your work. Learn how to return Single Objects and Array Objects, what you need to scroll lot of data using Native Server Side Pagination, and how to consume services.

How to implement REST Modules?

REST Modules are the core in the Api and the most easy to implement feature, every time you want to serve a web service method you must implement a REST Module. Also, there are a few steps you need to follow to create an effective module.

Steps to implement a REST Module
1 Identify your REST folder, the default path for this folder is /app/rest but you can change it at your desire in the slot.json config file. This folder must contain all the REST Module you want to serve
2 Define a name space for your module, this name space will be the URL path used to invoke your service, by example you can define /examples/contacts as your name space
3 Define a module name, supposing you are going to name it as search, then you need to create the search.js javascript file in the REST folder. Note that module name and javascript file are syntactically equals.
4 Base on the name space and module name , the URL for consume the service will be /examples/contacts/search
5 Finally, you need to ensure that the REST module complies with the default convention and implements the Module functions and parameters

The next is an example of a plain REST Module, and the detailed table of functions and parameters to complie:

REST Module
var Slot = require('slotFramework');

function run(request,
             callback) {

    var data = new Object();
    /*"set attributes to object data"*/

    callback(data /*<<== "data to be saved on session"*/);
}

module.exports.run = run;
Module functions and parameters
Name description
run The run function is required, it is executed for the main controller when the REST service is consumed. If this function is not declared, an error will be throwed.
data Is a local variable declared in the module, and it represents the response that your REST service will return
request Is a parameter that main controller passes to run function. It encapsulates a HTTP style request, containing the request line, headers and content body
callback The callback function is a parameter that main controller passes to run function, you must invoke the callback at the end of your module execution, and must pass the data variable as a callback parameter
exports.run In order to complie with a Node.js module definition, you must set the run function to exported objects in the module. If this function is not exported, the main controller can not execute it, and an error will be throwed

Default convention

In order to standardize the output response, all REST services will return the same response body. Taking the previous REST Module example, the corresponding output will be the next:

Response body
{
    error: 0,
    msg: "",
    data: {}
}
Response attributes
Name description
error By default it returns a cero int value.
Reserved values:
0 = execution was successful
1 = execution has fail and there are errors

Also you can return any int value to handle you error situations.
msg Response message by default is an empty String, but you can return any statement to handle your alerts.
Example:
"Your transaction was successfully executed"
"Problems executing your transaction"
data Structured data contains a single JSON object with many attributes inside, also it can contain a paginated array when the REST service handle a JSON array on server side

Returning single objects

Implements a this kind of service when you want return a single JSON object, a contact information, a car detail or a just single pack on information. If you want to return a list of objects, absolutely this is not the kind of service tou need to implement, to handle lists better refer to Returning array objects.

Server side JavaScript
var Slot = require('slotFramework');

function run(request,
             callback) {

    var data = new Object();
    data.name = "Jhon";
    data.lastName = "Doe";
    data.birhtD = (new Date()).getTime();

    callback(data /*<<== "data to be saved on session"*/);
}

module.exports.run = run;
Response body
{
    error: 0,
    msg: "",
    data: {
        name: "Jhon",
        lastName: "Doe",
        birhtD: 1402546374639
    }
}

Returning array objects

Implement this kind of service when you want return a JSON array, a contact list, a car list or a list of items from a search. By convention JSON arrays are automatically paginated by the framework and must be consumed using the Native Server Side Scrolling.

Server side JavaScript
var Slot = require('slotFramework');

function run(request,
             callback) {

    var data = [];
    for(x=0; x<10; x++){
        var obj = new Object();
        obj.name = "Jhon " + x;
        obj.lastName = "Doe";
        obj.birhtD = (new Date()).getTime();

        data[x] = obj;
    }

    callback(data /*<<== "data to be saved on session"*/);
}

module.exports.run = run;
Response body
{
    error: 0,
    msg: "",
    data: {
        page: [
            { /* record One */ },
            { /* record Two */ },
            { /* record Three */ },
            { /* record Four */ }
        ],
        totalRows: 10,
        totalPages: 3,
        pageNumber: 1,
        pageSize: 4
    }
}
Data attributes
Name description
page A chunk from a paginated array, it holds a number of records specified by the pageSize attribute
totalRows Number of rows on server side buffer
totalPages Number o pages to scroll
pageNumber Current page number
pageSize Number of records per page

How to consume services?

The API implements a stadarized output response

Invoke a REST service
# Hit a service and set a callback wraper
http://127.0.0.1:81/rest/examples/contacts/search?callback=fnc

# Hit a service and set the page size, the number of records
# to be returned on each page
http://127.0.0.1:81/rest/examples/contacts/search?pageSize=4

Native Server Side Scrolling

The API implements a stadarized output response

Scrolling data back and forward
# Set cursor on first record
http://127.0.0.1:81/rest/examples/contacts/search/first

# Set cursor on next record
http://127.0.0.1:81/rest/examples/contacts/search/next

# Step back cursor to previous record
http://127.0.0.1:81/rest/examples/contacts/search/back

# Set cursor on last record
http://127.0.0.1:81/rest/examples/contacts/search/last

# Get current record
http://127.0.0.1:81/rest/examples/contacts/search/current

Explore themes

Install themes