The Iris way
Understanding Fundamentals and Concepts of
What is Iris?
Iris is an open-source Javascript MVP framework for creating single-page apps based on JQuery.
It provides different client-side optimization techniques for front construction:
Mandatory file system organization
Reusable components
Fast templating engine
Client-side navigation with hashbang urls
Easy i18n support
Why Iris matter?
There are dozens of libraries based on MV * patterns.
Today the dominant frameworks are AngularJS, Backbone.js and Ember.js
However, trends are constantly changing and each day comes a new solution.
This means that the best and definitive solution is yet to come.
Iris brings a different and original approach to the problem of building a single-page app.
Why Iris matter? (cont)
Iris's key concept is to structure large applications in highly cohesive and loosely coupled small components to facilitate maintenance and reuse.
Unlike other frameworks, Iris clearly separates the concepts of views and presenters. The views are passive and do not contain application logic.
Thus, the designer stays in her own scope (HTML5 and CSS3) and is not necessary for her to know the application logic or to use things like loops or conditions.
Instead, the developer can focus on application logic without worrying how it will be presented to the end user.
Why Iris matter? (cont)
In contrast to other frameworks like AngularJS or Knockout, Iris has no bidirectional bindings.
We believe that the two-way binding, although at first it may seem marvelous and magical, makes the developer loses control of what is going on and introduces inefficiencies in the application behavior.
Iris is not intended to prevent the developer to write code, but allows the code is better organized.
Iris depends on JQuery because it is the most popular JavaScript library and it is widely used.
Iris resources
Iris resources (cont)
Iris resources (cont)
Iris resources (cont)
Iris resources (cont)
Iris components
iris.Model
The purpose of models is to contain the application logic.
A model represents a unique entity.
Although not mandatory, it will usually be a record in the database.
The model merely gives you a way to read and write arbitrary properties or attributes on a data set.
iris.Resource
Resources are singleton components and have methods to communicate with the server via AJAX and RESTFul services.
Typically are collections of models.
iris.UI
UIs define the view of the application.
They have two elements: template and presenter.
Template is a pasive HTML file.
Presenter is a JavaScript file and defines the view logic.
iris.Screen
Screens are navigable components.
Screens have a hash-URL asocciated.
Like a UI, a Screen has a template and a presenter.
When navigating to its hash-URL, the screen's template will be displayed.
A Screen can contain UIs or others Screens. A UI may contain other UIs.
When navigating to a Screen, its UIs are displayed.
Components life cycle
Iris components have a life cycle.
All components have a 'create' method.
Models, UIs and Screens have also a 'destroy' method
.
UIs and Screens have also an 'awake' and a 'sleep' methods.
When navigating to a Screen, its 'awake' event is triggered, as well as that of its children.
Besides, the actual Screen will be hidden and its 'sleep' event will be triggered.
iris.path
All components must be defined in the iris.path variable
iris.path is an object whose values are the path to the JavaScript file of the component.
iris.welcome
Iris applications have an entry point defined by a special screen called Welcome Screen.
The iris.welcome() method loads the welcome Screen.
The iris.welcome() method receives the path to the Welcome Screen.
This method loads the Welcome Screen template.
Anatomy of a component
All Iris components have a JavaScript file with a similar structure.
iris.xxx(fn,path) defines a component, where 'xxx' are the component type.
'fn' is a function that receives a 'self' variable.
'self' is the created component itself.
Thus, we avoid the problem with the "this" object in JavaScript.
'path' is the iris.path definition of the component.
Inside 'fn' function, we define the life cycle methods of the component.
Iris examples
the iris way
By Javier Pérez
