Calibration Assignment Submission (Firebrick JS)

Firebrick JS is a MVC structure built on top of JavaScript, used to provide elegant and useful user interface elements for any web applications. It is an open source software that is simply a bootstrap based component library and MVC/MVVM framework.<ref name="FireBrickJS Documentation">"FireBrickJS Documentation"</ref> Firebrick uses jQuery, Knockout JS and Require JS to provide these user interface element. Examples of the type of interfaces currently supported by Firebrick JS include data fields, buttons, different types of display and alert boxes, containers, navigation panels and editable tables. By including Firebrick JS, a web developer has access to all the supported elements and can include them in the web application, thus reducing redundant code.

Firebrick JS uses another framework in conjunction, called Firebrick UI which is an extendable User Interface component library to provide these interfaces.

Overview

Firebrick JS started development in September 2014 and are currently at version 0.13.12 as of February 2016.<ref name="smasala/firebrick">"smasala/firebrick" 2016-02-15</ref> It was created by Steven Masala along with his team. It is one of the many flavors of JavaScript MVC frameworks. What makes Firebrick JS something to look out for is that it utilizes the frameworks of jQuery, Knockout JS and Require JS to built it's own frameworks.

jQuery is a lightweight JavaScript library which provides the users more functionality with less code.<ref name="jQuery Introduction">"jQuery Introduction" 2016-02-05</ref> It provides the user with in built methods that a user can call with a single line of code. This saves the user many lines of codes and also facilitates reusability.

Knockout is a JavaScript implementation which provides MVVM patterns and templates . The underlying principles are therefore:

• a clear separation between domain data, view components and data to be displayed
• the presence of a clearly defined layer of specialized code to manage the relationships between the view components<ref name="Knockout (web framework)">"Knockout (web framework)"</ref>

Require JS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node.<ref name="RequireJS">"RequireJS" 2016-02-05</ref>

Usage

Firebrick JS can either be downloaded via GitHub

• Firebrick JS

Alternatively and preferably the libraries can be downloaded with bower

	bower install firebrick

Firebrick JS controllers help in designing the UI of an HTML website. Examples of these UI elements include:

Username Input:

define( [ "text!./Input.html", "Firebrick.ui/containers/Panel", "Firebrick.ui/containers/FormPanel", "Firebrick.ui/containers/Box", "Firebrick.ui/fields/Input", "../ComponentTemplate" ], function( input ) {
	"use strict";
	return Firebrick.defineView( "FBJS.view.components.fields.Input", {
		extend: "fbjs.componenttemplate",
		title: "Input Field",
		topTitle: input,
		demo: {
			sName: "containers.formpanel",
			title: "Demo",
			collapsible: true,
			items: [{
				sName: "fields.input",
				inputAddon: true,
				iconClass: "glyphicon-home",
				label: "Username",
				placeholder: "Enter Username",
				tooltip: "tooltip!"
			},{
				sName: "fields.input",
				inplaceEdit: true,
				label: "Username",
				placeholder: "Enter Username",
				value: "'John Doe'",
				tooltip: "tooltip!"
			}]
		}
	});
});

As of now Firebrick JS has a good built-in API that can be used to handle events, prep applications, load different templates, etc.

Other UI elements and renditions of Firebrick JS can be found on this website.

See also

• Firebrick UI
• JavaScript

References

<references/>