sitecore

#bootjS

##Introduction

bootJS is used by SPEAK in order to parse the DOM, create the appropriate components and executing pageCodes.

bootJS size minified and gzip is just 8KB !

There is no dependency on jQuery, Backbone, Knockout, Underscore but it does not mean you can't use them in your component.

##What bootJS is not ?

• bootJS is not opionated, bootJS can make any kind of components working. Pick your favorite libraries, create some components with them and make it availabe to SPEAK by creating a Presenter (if needed).
• bootJS is not a AMD loader, it can use an in-house AMD loader or the famous requireJS.
• bootJS does not provide a template engine but expects one for creating "Javascript Template" component. By default, bootJS expect HandlebarsJS otherwise you need to configure a small adapter.

##What bootJS is ?

• bootJS parses the DOM in order to re-create an application tree which is available to your pageCodes.
• bootJS provides you a simple default component that you can use in order to add behavior to your components.
• bootJS makes different kind of components working together with the help of a Presenter.
• bootJS helps you in enhancing existing components or applications by creating plugins.
• bootJS helps you in creating complex properties for your component and exposes them in a consistant manner. This makes those properties "speak" with other components via cross-bindings.

##Development

###Re-generate the file

If you want to change the code of bootJS and rebuild it, you will need to install node.js (with npm).

As soon as you have node.js installed, you can go to the directory where bootJS's source code is and execute:

npm install

This will install all the dependencies needed by the project in order to generate the files and execute the tests.

When done, to generate the dist file, you can execute:

on windows

grunt.cmd

on mac os or linux

grunt

###Coding Style

####commonJS

We have applied the commonJS pattern for splitting the code into different modules. We use a tool called "browserify" in order to reassemble the code into one file supported by the browser.

index.js is the main file.

####Comments We use the docBlockR notation for our comments.

####Styles

We use JSformatter to automatically format the JS code as we have decided.

####Configuration

You can find those configurations inside the "conf" folder of our structureJS repository.

####Documentation

You will find in the docs folder, a doc website generated based on the comments written in the Code.

####Test

The test folder has all the tests that can be run inside a node.js environment. The testClient folder has all the tests that must be run in the browser (we use phantomjs for executing them automatically).

To run the test:

grunt test

##Component

SPEAK is all about components, in a case you want special behaviour for a component, you will need to register this behaviour using the component method.

###Object literal

You can use object literal notation.

sitecore.component({
  name: "name", //required
  initialize: function() {
    this.test = true;
  },
  doSomething: function() {
    alert("Hello World");
  }
});

###Class

You can also pass a pure javascript object or a typescript class to the component method. In that case you will need to pass the name of the component as a parameter at the end.

class MyTypescriptClass {
  initialize() {
    this.isInitialize = true;
    this.isInitialized = true;
  }
}

sitecore.component(MyTypescriptClass, "MyTypescriptClass");

###Depedencies

If you need some dependencies for your component. You can pass those in the first parameter using an array.

sitecore.component(["/path/to/deps1", "/path/to/deps2"], { name: "MyComponent" initialize: function () { this.test = "Hello World" } });

##PageCode

To register a pageCode using bootJS, you will need to use the pageCode method.

sitecore.pageCode({
  initialize: function() {
    this.Component01.test = "Wouhou!";
  }
});

###Depedencies

If you need some dependencies for your pageCode. You can pass those in the first parameter using an array.

sitecore.pageCode(["/path/to/deps1", "/path/to/deps2"], {
  initialize: function() {
    this.Component01.test = "Wouhou!";
  }
});

##Plugins

A plugin is an object which can extend all the components inside your page and/or all the applications inside your page.

Here is a basic example, on how to create a plugin for adding jQuery.

sitecore.plugin(["path/to/jQuery"], {
  extendComponent: function(component) {
    component.$el = $(component.el);
  },
  extendApplication: function(app) {
    app.$el = $(app.el);
  }
});

Please note, those code wil be executed just after your initialize method.

##Presenter

A presenter lets you use the framework of your choice in order to add shared behaviour for a set of components.

sitecore.presenter(["path/to/knockout"], {
  initialize: function() {
    this.createViewModel();
  },
  createViewModel: function () {
     //some magics
  }
});

##Property

This method is used by SPEAK in order to register custome type for your property.

Here is an example of a property which could expose a property fullName constructed by the firstname and lastname property present inside your component.

sitecore.propertyType( {
  name: "fullname",
  get: function () {
    return this.component.firstname + " " + this.component.lastname;
  }
} );

##more to come