Simple MVC for Flex and AIR

This weekend I tried to make an “Air” client for search using “Adobe Community Help. I had no prior experience with Flex and AIR. My first attempt ended as a simple project for college, a spaghetti code. All examples found on the web or official documentation are based on massive use mxml code. I ended up having a glorious mxml file. Huge :-).

Some smart guys are telling you to split your mxml using an ActionScript file but is like putting the trash under the carpet. It is still spaghetti code but in two dishes.

I tried to remember how I would have programmed it in Java Swing.  9 years have passed since then but I remembered. TableModel, DefaultListModel, ButtonModel etc. they all came out from a dark corner of my memory. Yes ! I remembered, Swing MVC.

A typical sample from documentation…..

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   3:     <mx:Panel x="10" y="10" width="350" height="200" title="Rate Customer Service">
   4:         <mx:ComboBox id="cbxRating" x="20" y="20" width="100">
   5:             <mx:dataProvider>
   6:                 <mx:Array>
   7:                     <mx:String>Satisfied</mx:String>
   8:                     <mx:String>Neutral</mx:String>
   9:                     <mx:String>Dissatisfied</mx:String>
  10:                 </mx:Array>
  11:             </mx:dataProvider>
  12:         </mx:ComboBox>
  13:         <mx:Button x="140" y="20" label="Send"/>
  14:     </mx:Panel>
  15: </mx:Application>

Who hard-codes his application in this way? In a typical application you get this stuff from files or database. But let’s see the good part, at least is giving you a hint, a ComboBox and List are accepting an Array as input.

MVC applied to Flex

First of all a briefing about MVC

  1. Model, is the data. Manipulates the internal state and fire events when the internal state changed.
  2. View, the visual representation for the Model’s data (controls on the screen)
  3. Controller, is responsible for interpreting the user actions on the view and make changes to the model. (usually an event handler in flex)

In reality there is no 100% demarcation between these three layers. Is not that easy to make them completely decoupled and usually we end up making some tradeoffs.

The controller will always know about the view and the view about the controller. Controller also knows about the model. In the end I could say that the model is the only piece of the MVC that can be “100% decoupled”.

Let’s try to put a simple screen like this into MVC.

image

We fill in some text and then press Add. After we press add the text box is cleared and the text is added into de the list. In the end wee look into it and try to make a reusable component.

Model

The model contains the actual data, and for our example it should a class that hold list values. As I pointed out earlier we could use an ArrayCollection to store the list. For this we make an actionscript class named ListModel

The view should display model’s changes and for this we mark the model class as [Bindable]. This is nice feature of ActionScript, no such thing in Java Swing.

Now, to add a new item in the list we simply nee an addElement function. In this example we make the model a singleton. This means that if we make more than one list they will share the same data.

   1: package org.bserban.flex.simplemvc.model
   2: {
   3:     import mx.collections.ArrayCollection;
   4:     /**
   5:     * Model class used to store list data and to
   6:     * provide access to the list content.
   7:     *
   8:     * For demo purposes, we have only addElement.
   9:      */
  10:     [Bindable]
  11:     public class ListModel
  12:     {
  13:         public var items :ArrayCollection = new ArrayCollection();
  14:         private static var instance:ListModel;
  15:         public function ListModel()
  16:         {
  17:             instance=this;
  18:         }
  19:         /**
  20:          * For this demo we treat this class as singletone.
  21:          * If list is reused the component that reuse it
  22:          * must keep reference to model and controler.
  23:          */
  24:         public static function getInstance():ListModel{
  25:             if(instance == null){
  26:                 instance = new ListModel();
  27:             }
  28:             return instance;
  29:         }
  30:         /**
  31:          * Add a new element to the list, the model is bindable,
  32:          * no further actions are required, the view
  33:          * is notified automatically.
  34:          */
  35:         public function addElement(itm:String): void{
  36:             items.addItem(itm);
  37:             trace(" item added, now we have:"+items.length);
  38:         }
  39:     }
  40: }

Controller

The controller is responsible for the interaction between view and model. In our case will make the validation of the text, it doesn’t allow the view to add empty text into the list. Let’s make a new class named Controller. As an exercise add also a sort function.

The controller holds a reference to the model and provides functions to the view. In a more advanced implementation the Controller would listen for events from the view and the decides what action should do.

   1: package org.bserban.flex.simplemvc.controller
   2: {
   3:     import org.bserban.flex.simplemvc.model.ListModel
   4:     import mx.utils.StringUtil;
   5:     public class Controller
   6:     {
   7:        private var model:ListModel = ListModel.getInstance();
   8:         /**
   9:          * Glue the interaction between view and model.
  10:          */
  11:         public function Controller(){
  12:         }
  13:         /**
  14:          * add a new item into the list model.
  15:          */
  16:         public function addPerson(name:String):void
  17:         {
  18:             if(name==null || StringUtil.trim(name).length==0){
  19:                 trace("empty name");
  20:             }
  21:             else{
  22:                 model.addElement(name);
  23:            }
  24:         }
  25:     }
  26: }

View

The view is the graphical representation of the component. Usually it is a an mxml file but it can be also an actions script file for advanced programmers. It binds his data to the model and use the controller to process the view events. Let’s name it SimpleAirMVC.mxml. I added Air to its name because i decided to make an air project in Flex Builder.

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="226" width="235">
   3:     <mx:Script>
   4:         <![CDATA[
   5:         import mx.controls.List;
   6:         import org.bserban.flex.simplemvc.model.ListModel;
   7:         import org.bserban.flex.simplemvc.controller.Controller;
   8:
   9:         [Bindable]
  10:          private var model:ListModel = ListModel.getInstance();
  11:         private function clickHandler():void
  12:             {
  13:                 var controler:Controller = new Controller();
  14:                 controler.addPerson(personTxt.text);
  15:                 personTxt.text="";
  16:             }
  17:              ]]>
  18:     </mx:Script>
  19:
  20:     <mx:TextInput x="10" y="10" id="personTxt" text="" width="145"/>
  21:     <mx:Button x="163" y="10" label="Add" id="btnAdd" click="clickHandler()"/>
  22:     <mx:List x="10" y="40" width="218" dataProvider="{model.items}"></mx:List>
  23: </mx:WindowedApplication>

This a  simple way to implement a MVC in a small application. Things can become more complicated if the application is big. If this is the case then you should look over Pure MVC framework or Cairngorm. They eliminate the dependencies between MVC layer by using events. It is an event driven approach.

You may download the source code here SimpleAirMVC

Further reading

I recommend you to read the books ActionScript 3.0 Design Patterns and Advanced ActionScript 3 with Design Patterns

WEB API best practices

Recently I had to do an API for my application. Coming from the world of J2EE, my first thought was to make a web service based on SOAP, but I soon realized that this type of J2EE web services is heavy. They are slow and cumbersome and requires the use of specialized frameworks or j2ee containers that support such services. After a careful study of the problem I have concluded that the best solution would be using services REST like, based on XML and JSON.

Read more about REST services in Roy Thomas Fielding’s dissertation paper Representational State Transfer (REST). This will give you some insides about what REST should be.

Anyway, I don’t plan to write about REST, I just want to share you some of the best practices for developing an web API. When you design an API you should be aware that from the moment that it’s launched to the public, changing it will become impossible An API evolves over time, but because you already have customers, you need to be compatible with earlier versions, otherwise customers will leave

Some things to keep in mind.

  1. Create a subdomain for the API, it will help you a lot to load balance your traffic. You could also have an URL path, but still will have the same entry point as the main application. However, the best is to create a subdomain for API.
  2. Version the API by including the version in the URL. This will help you stay compatible with earlier versions of the API, until everyone will upgrade to new version. Example: 
       1: api.mydomain.net/v1/my_api_name/my_entry_point

  3. You should split your API in packages by using the URL namespace, Example
       1: api.mydomain.net/v1/namespace1/my_entry_point1
       2: api.mydomain.net/v1/namespace2/my_entry_point2

  4. Create API keys. You need a way to see who is using your API and how. If you do not have such keys you’ll never know how many customers you have.This practice would allow the measurement of service usage by customers and to impose limits for use.
  5. Monitor everything. Use your access log to monitor use of services. You need to know how many accesses, errors, readings, queries, changes you have for each service.
  6. Create API documentation with examples. Create applications for demo purposes.
  7. Use GET for read and POST for change. If the changes do not require a large volume of data, transmit data via POST URL, in this way you can log them into access.log. This is useful for statistics.
  8. You should use data collected in access logs to improve service or to create  personalization and recommendation engines

Keep an eye on this post, because I intend to update it regularly. Know other good practices? If yes, then leave a message. Thanks!

First GA of RESTeasy Released

On 21 January JBoss announced the first GA of RESTeasy was released

Like any other java nuts and bolts framework it is “certified” against JAX-RS specification which makes me worry about being a heavy approach.

JBoss RESTEasy is a framework that allows you to write RESTFul Web Services in Java. It is a fully certified and portable implementation of JAX-RS specification.

It can be run in Servlet container such Tomcat but the full benefits come when integrated with JBoss AS. What is new is that despite JAX-RS which is a server side specification the JBoss team innovated on the client side and they implemented JAX-RS Client framework to speed the development process.

Features

* Fully certified JAX-RS implementation
* Portable to any app-server/Tomcat that runs on JDK 5 or higher
* Embeddedable server implementation for junit testing
* Rich set of providers for: XML, JSON, YAML, Fastinfoset, Atom, etc.
* JAXB marshalling into XML, JSON, Fastinfoset, and Atom as well as wrappers for arrays, lists, and sets of JAXB Objects.
* Asynchronous HTTP (Comet) abstractions for JBoss Web, Tomcat 6, and Servlet 3.0
* EJB, Spring, and Spring MVC integration
* Client framework that leverages JAX-RS annotations so that you can write HTTP clients easily (JAX-RS only defines server bindings)

I know that it sounds like another heavy J2EE framework but give it a try.

MySQL Index Performance

When you create an index at design time, you only can guess what would happen with you application in production. After you are live, the real hunt for creating indexes is just begining.  Very often we tend to choose bad indexes ignoring basic rational thinking. I’ve seen a lot indexes that were slowing the application instead of increasing speed.

Right now, the current databases advanced so far that the differences between indexing a number column and indexing a varchar column are not so obvious anymore. Either you think to create an index on a varchar or on a number column, first you need to lay down the selects that you are going to run against that table.  Not doing so is a waste of time. Next, think at the distribution.

For example let’s assume that we store 11,000,000 users in a table called my_users. We would have the following fields: username, email, first name, last name, nickname, birthday, age, gender, country.  Our application will search for users using the following fields:

  1. username
  2. first name, last name, gender
  3. email

For 1 and 3 the indexes are obvious, we could make an index on username and an index on email. If the username is unique their selectivity will be equal with the primary key selectivity. But what is selectivity? A simple definition is that the selectivity of a column is the ratio between # of distinct values and # of total values. A primary key has selectivity 1.

So coming back to case number 2, what would be the best indexes? Let’s take the gender column first. Here we have only two possible values M and F. This means a selectivity of 2/11,000,000 which is 0, an awful index. If you have such an index you may well drop it because a full table scan could be more efficient than using this index.

How about first name and last name? This is a little more complicated, it differs on what names are you storing. If you have 30,000 of Johns and 50,000 of  Smiths the index is useless, a simple select distinct on each column will give you the number to calculate the selectivity. If it is above 15% then the index is good, otherwise drop it. But one great thing is that in this case you could create a composed index on first name+last name which it will give you a higher selectivity for sure . Don’t forget  that in MySQL an index on string columns allows only 1000 characters, which means when using UTF-8 you can only inlcude 333 characters.

Select the worst performing indexes by using the following sql. Note that composed indexes will apear multiple times, in the result, for each column so you need to pick the last apearance. Everything is below 15% it needs to be analyzed.

/*
SQL script to grab the worst performing indexes
in the whole server
*/
SELECT
t.TABLE_SCHEMA AS `db`
, t.TABLE_NAME AS `table`
, s.INDEX_NAME AS `inde name`
, s.COLUMN_NAME AS `field name`
, s.SEQ_IN_INDEX `seq in index`
, s2.max_columns AS `# cols`
, s.CARDINALITY AS `card`
, t.TABLE_ROWS AS `est rows`
, ROUND(((s.CARDINALITY / IFNULL(t.TABLE_ROWS, 0.01)) * 100), 2) AS `sel %`
FROM INFORMATION_SCHEMA.STATISTICS s
INNER JOIN INFORMATION_SCHEMA.TABLES t
ON s.TABLE_SCHEMA = t.TABLE_SCHEMA
AND s.TABLE_NAME = t.TABLE_NAME
INNER JOIN (
SELECT
TABLE_SCHEMA
, TABLE_NAME
, INDEX_NAME
, MAX(SEQ_IN_INDEX) AS max_columns
FROM INFORMATION_SCHEMA.STATISTICS
WHERE TABLE_SCHEMA != 'mysql'
GROUP BY TABLE_SCHEMA, TABLE_NAME, INDEX_NAME
) AS s2
ON s.TABLE_SCHEMA = s2.TABLE_SCHEMA
AND s.TABLE_NAME = s2.TABLE_NAME
AND s.INDEX_NAME = s2.INDEX_NAME
WHERE t.TABLE_SCHEMA != 'mysql'                         /* Filter out the mysql system DB */
AND t.TABLE_ROWS > 10                                   /* Only tables with some rows */
AND s.CARDINALITY IS NOT NULL                           /* Need at least one non-NULL value in the field */
AND (s.CARDINALITY / IFNULL(t.TABLE_ROWS, 0.01)) < 1.00 /* Selectivity < 1.0 b/c unique indexes are perfect anyway */
ORDER BY `sel %`, s.TABLE_SCHEMA, s.TABLE_NAME          /* Switch to `sel %` DESC for best non-unique indexes */

This is taken from MySQL forge

Simple way to scale your Web App – Part 1

Every time i made an J2EE application, my main concern was about how many requests it could handle in the end. In my early dawns of my career I have been in the situation when my app was his own victim of success, to much load for a single server. We always had a reactive attitude and tried to deal with the problem when it happened, but some times it was too damn late. To be able to scale you application it must be made to be scaled.

But what would be a simple scalable architecture?

Simple Web Application Architecture

Let’s consider the diagram from the left.  Our application will be splited in three logical clusters.  First one is the application cluster, second database cluster and finally logging and statistic cluster.

The Load Balancer

A load balancer distributes the traffic among you application servers.  It can be  software or a hardware device.  A handy solution is to use a software balancer, such an Apache, but the software solution is not so robust and performant as a hardware balancer.

Hardware

A dedicated device for load balancing is more suitable and gives you more performance. Thus, this comes with an additional costs but there many devices on the market and you should choose the best one on cost/ features. When evaluating a load balancer some things must be kept in mind

Software alternatives

To balance SSL connections your balancer should provide SSL termination capability. Otherwise being a connection level protocol the SSL connection should persists between server and client by allocating the same host to the same client.

More about Load Balancing in a future post.

The Application Cluster

To be able to scale a web application, it has to be designed to scale. The main issue is session replication. Depending on the load balancing algorithm you will need to replicate the session or to use sticky session.

Stateless

This mode doesn’t require much from a load balancer. This is very common to REST applications.  For a web 2.0 application this could be the common aproach. The application stores everything it needs on the client side.  The first user request goes on the first machine while de second will hit a different machine. No data has to be shared between web servers. To handle more requiest new servers can be added in the web pool and the system will scale out.

Having a stateless design allows us a seamless failover. This can be achieved no matter what language we use to develop our application

Sticky session

Some times our application needs to store user specific data at session level. This means that every time a user hits the server we need some data to be able to process user request, we need local data and state. This data must be available on all server where the user request come. To cope with this problem we can use “sticky session” which means we need to ensure that the user will hit the same server as the initial request.

The most common aproach with sticky sessions  is:

Session replication

This technique is very common in J2EE where the Servlet Containers provide a way to replicate the session between the servers. There are several condition for a session to be replicated but it can be a viable alternative to sticky session.

The Database cluster

Obviously, my immediate choice will be to use MySQL as database server. It’s free, has a lot of community, it serves a lot of well known web 2.0 sites.

Using MySql you can scale horizontal by using MySql’s replication mechanism. When the database grows is time to partition our data horizontally into shards.

Replication

Master-Slave

This type of configuration will help you to scale the reads from the write.  The reads will always go to the Slave while the transactions that alter the data will go to the Master.  You can have one Master and multiple slaves.

Master – Master

Such an approach will distribute the load evenly and it also provides High Availability. MySQL 5.0 provides replication at statement level which often can crash the replication because of conflicts. The most common conflicts i ever met are for unique indexes but you can coupe with this problem by using “replace” command instead of insert. Anyway the MySQL 5.1 will have some semnificative changes in the replication module.

Tree Replication

This gives you a lot of posibilities, you can conbine master-master with master-slave in a tree structure and conbined with sharding it can result into a fine tuned MySQL cluster. More about Tree Replication and data partitioning in further posts.

Logging & Batch processing

In the end we reached the final component of our application.: the logging server and the batch processing machine. Why do we need them? Simply because somebody has to do them. Every application has some batch processing to be done. This is done usually by using cron and scripts. I recommend to use a scripting language for batch processing such as: bash, ruby, python etc.

For logging I would suggest you to use syslog or syslog-ng which has more advanced features than syslog, better performance in terms of cpu and supports UTF-8.

What’s next?

Next I would like to walk step by step through designing a J2EE based on the architecture discussed above by using Apache, Tomcat, Struts, Hibernate and MySQL.