Iris helps with structuring and organizing jQuery applications. It provides different client-side optimization techniques for front construction:
This tutorial will teach you to build a complete application from scratch using Iris.
Open tutorialThe following is a list of code-level reference documentation you'll likely need in developing an Iris app.
View API Reference
All our JS code is split into small files providing scalability & maintainability. Don't worry about the large number of files created because you can concatenate them using iris-cli, thus avoiding a large number of HTTP requests.
Iris gives structure to web applications by providing templates, UI components, screens and resources. All visual components have templates that are written in HTML files. These are stored in separate *.html files, therefore a layout designer can edit them easily.
Screens are navigable elements, bound to a unique hash fragment (#screen), and are stored in separate *.js files. Screens use a template to add functionality and manage events like UI does. You can also instantiate UI objects within screens.
View on Github
<!doctype html>
<html>
<head>
<script src="js/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="js/iris-0.5.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
iris.path = {
screen: {
welcome: {html: "screen/welcome.html", js: "screen/welcome.js"}
}
};
$(document).ready(function () {
iris.baseUri('./');
iris.welcome(iris.path.screen.welcome.js);
});
</script>
</head>
<body></body>
</html>
iris.screen(function (self) {
self.create = function() {
self.tmpl(iris.path.screen.welcome.html);
self.get('name').on('keyup', function () {
self.inflate({ name : self.get('name').val() });
});
};
},iris.path.screen.welcome.js);<div>
<label>Name:</label>
<input type="text" data-id='name'>
<h1>Hello <span data-jq-text='name'></span>!</h1>
</div><!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/base.css">
<script src="js/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="js/iris-0.5.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
iris.path = {
"ui": {
"todo": { "js": "ui/todo.js", "html": "ui/todo.html" }
},
"screen": {
"welcome": { "html": "screen/welcome.html", "js": "screen/welcome.js" }
}
}
$(window.document).ready(function () {
iris.baseUri('./');
iris.welcome(iris.path.screen.welcome.js);
});
</script>
</head>
<body></body>
</html>iris.screen(function(self) {
self.todos = [
{ text: 'learn iris', done: true },
{ text: 'build an iris app', done: false }
];
self.create = function() {
self.tmpl(iris.path.screen.welcome.html);
self.get('archive').on('click', function (e) {
for ( var i = self.todos.length - 1; i >= 0; i-- ) {
if (self.todos[i].done) self.todos.splice(i, 1);
}
self.render();
});
self.get('add').on('click', function (e) {
var todo = { text: self.get('todoText').val(), done: false };
self.todos.push(todo);
self.get('todoText').val('');
self.render();
});
self.render();
};
self.render = function () {
self.destroyUIs('list');
var i, remaining = 0;
for ( i = 0; i < self.todos.length; i++ ) {
self.ui('list', iris.path.ui.todo.js, { index: i, parent: self }, self.APPEND);
remaining += self.todos[i].done ? 0 : 1;
}
self.inflate({
count: remaining + ' of ' + self.todos.length + ' remaining'
});
}
}, iris.path.screen.welcome.js);<div>
<h2>Todo</h2>
<div>
<span data-jq-text='count'></span>
[ <a href="#" data-id="archive">archive</a> ]
<ul class="unstyled" data-id="list"></ul>
<input type="text" data-id="todoText" size="30"
placeholder="add new todo here">
<input data-id="add" type="button" value="add">
</div>
</div>iris.ui(function (self) {
self.create = function() {
self.tmpl(iris.path.ui.todo.html);
var index = self.setting('index');
var parent = self.setting('parent');
var todo = parent.todos[index];
self.inflate(todo);
self.get().toggleClass('todo-done', todo.done);
self.get('check').on('click', function () {
todo.done = !todo.done;
parent.render();
});
};
},iris.path.ui.todo.js);<li>
<input data-id="check" type="checkbox" data-jq-prop-checked="done">
<span data-jq-text="text"></span>
</li><!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<script src="js/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="js/iris-0.5.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
iris.path = {
screen: {
welcome: {html: "screen/welcome.html", js: "screen/welcome.js"}
}
};
iris.locale(
"es_ES", {
dayNames:["Domingo", "Lunes", "Martes", "Miércoles", "Jueves",
"Viernes", "Sábado"],
monthNames: ["Enero", "Febrero", "Marzo", "Abril", "Mayo",
"Junio", "Julio", "Agosto", "Septiembre", "Octubre",
"Noviembre", "Diciembre"],
dateFormat: "d/m/Y H:i:s",
currency: {
formatPos: "n s", formatNeg: "- n s", decimal: ",", thousand: ".",
precision: 2, symbol : "€"
},
number : {
decimal: ",", thousand: ".", precision: 2
}
}
);
iris.locale(
"en_US", {
dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday",
"Friday", "Saturday"],
monthNames: ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November",
"December"],
dateFormat: "m/d/Y h:i:s",
currency: {
formatPos: "s n", formatNeg: "(s n)", decimal: ".",
thousand: ",", precision: 2, symbol : "$"
},
number : {
decimal: ".", thousand: ",", precision: 2
}
}
);
$(window.document).ready(function () {
iris.baseUri('./');
iris.welcome(iris.path.screen.welcome.js);
});
</script>
</head>
<body></body>
</html>
iris.screen(function (self) { self.create = function() { self.tmpl(iris.path.screen.welcome.html); // No select a value by default self.get('locale_select').prop("selectedIndex", -1); self.get('locale_select').on('change', function (e) { iris.locale(this.value); var params = { price : -1479.59 ,date : new Date() ,locale : iris.locale() }; self.inflate(params); }); }; },iris.path.screen.welcome.js);
<div>
<label>Select a locale: </label>
<select data-id='locale_select' class="form-control" style='width:160px;'>
<option value="en_US">English (USA)</option>
<option value="es_ES">Spanish (Spain)</option>
</select>
<div>
<h4>Locale code</h4>
<span data-jq-text='locale' class="label label-success"></span>
</div>
<div>
<h4>Number</h4>
<span data-jq-text='price' data-jq-text-format='number'
class="label label-success"></span>
</div>
<div>
<h4>Currency</h4>
<span data-jq-text='price' data-jq-text-format='currency'
class="label label-success"></span>
</div>
<div>
<h4>Date</h4>
<span data-jq-text='date' data-jq-text-format='date'
class="label label-success"></span>
</div>
</div>