Sunday, March 25, 2012

Java architecture with DTOs

The DTO Discussion

The DTO (Data transfer objects) pattern is really useful if you intend to achieve a clean separation between the service layer and the presentation layer of the application. DTOs are part of the service layer API and therefore something that is best to have than not to.

DTOs also serve another purpose: Adapt model values, which in most cases are normalized, to view-friendly values, which most of the time presents particular values from an object graph and also calculated values.

Very often, applying the DTO pattern in a given architecture is not an easy task, you earn an application easy to maintain  by spending a lot of time (shallow) copying data from one object to another.

One solution for the data copy problem can be found by using a framework, in this case jDTO Binder. jDTO Binder makes easy for the programmer to achieve some tasks:


  • Receive form values and copy them to target business objects.
  • Create lists with data from particular properties of an object graph.
  • Add to those lists calculated values.
  • Change the format of the data to be more appropriate for display or network transmission.
I've taken the time to create a sample maven project with a very popular setup: Spring Web MVC, Spring Framework and Hibernate. Although you can use this project as a starting point to build a web application with this technologies, this project incorporates jDTO Binder into its ecosystem and demonstrates how it makes your life a lot easier.

To run the project, just unzip the file, open the terminal and type the following commands:

$ cd <path to the unzipped folder>
$ mvn clean install tomcat:run

Project Description and Walkthrough.


Required Skills: To go through this project, basic Spring Web MVC knowledge is required. Even though the important part is written on the service layer, Spring MVC and Spring Context knowledge helps a lot to put all the pieces together.

The DTOs

The following snippets shows the DTOs this project uses and its purpose:

public class PizzaDTO implements Serializable {
    
    @Source("id")
    private Long pizzaId;
    
    
    @Sources(value={@Source("pizzaName"), 
        @Source("price")}, merger=StringFormatMerger.class, mergerParam="%s ($ %.2f)")
    private String description;
    
    private double price;
    private int rating;
    ...
}


The first DTO to analyze is the PizzaDTO, this one is intended to serve in a listing of available pizzas. It has a description attribute which is intended for display and is created from the pizza name and the pizza price in a formatted string.

public class PizzaOrderForm implements Serializable {
    
    @NotEmpty //validation annotation
    @Source("whoOrderedName")
    private String customerName;
    
    @NotEmpty //validation
    @Source("contactNumber")
    private String customerPhone;
    
    @NotEmpty //validation
    private String customerAddress;
    
    @Size(min=1) //validation
    @DTOTransient
    private List<PizzaDTO> pizzas;
    ...
}

The second DTO is really the model of a form to take a pizza order, it does not only have DTO binding annotations but also standard JSR 303 bean validation annotations so the data can be validated automatically.

public class OrderDTO implements Serializable {
    private static final long serialVersionUID = 1L;
    
    private Long id;
    
    @Source("whoOrderedName")
    private String customerName;
    
    private String customerAddress;
    
    @Source("contactNumber")
    private String customerPhone;
    
    @Source(value="orderDate", merger=DateFormatMerger.class, mergerParam="MM/dd/yyyy hh:mm")
    private String orderDate;
    
    @Source(value="pizzas", merger=SumMerger.class, mergerParam="price")
    private Double orderPrice;
    ...
}

Next on the line is a DTO intended for a list of pizza orders, it contains most of the data the pizza order has but also it calculates the price of each order so you don't have to do it manually or save the amount in an extra field on your database table.

The Service Class

Now we've got to the interesting part, how the service layer takes advantage of these DTOs to make your life easier. The following is the declaration of the PizzaOrderService, I'll show separately the implementation methods so I can give a little more explanation of each without having you to scroll up and down repeatedly :).

@Service
@Transactional
class PizzaOrderServiceImpl implements PizzaOrderService, Serializable {

    private static final long serialVersionUID = 1L;
    @Autowired
    private HibernateTemplate hibernate;
    @Autowired
    private DTOBinder binder;
    @Autowired
    private Validator validator;
    
    ... //implementation goes here
}


This is a normal service class, it is transactional because it interacts with hibernate, it has injected an instance of the very helpful class HibernateTemplate, also has injected an instance of the DTOBinder (which is configured as a spring bean in applicationContext.xml), finally the JSR 303 standard bean validator to perform validations on objects (also declared as a spring bean).

This class is serializable because it may be serialized for example in a web session.

    @Override
    public List<PizzaDTO> listAvailablePizzas() {

        DetachedCriteria criteria = DetachedCriteria.forClass(Pizza.class);
        criteria.addOrder(Order.asc("pizzaName"));

        return binder.bindFromBusinessObjectList(PizzaDTO.class, hibernate.findByCriteria(criteria));
    }

This method queries the database for pizzas, and returns the list as a list of PizzaDTO by taking advantage of the DTO Binder. Please note that if we hadn't used the DTO framework, we would have had to iterate over the list returned by hibernate template and build the DTO instances ourselves by setting and formatting the values; all is taken care by the framework.

    @Override
    public boolean placeOrder(PizzaOrderForm form) {

        //may validate with hibernate validator
        if (!validator.validate(form).isEmpty()) {
            return false;
        }

        PizzaOrder order = binder.extractFromDto(PizzaOrder.class, form);


        order.setOrderDate(new Date());
        order.setPizzas(new ArrayList<Pizza>());

        for (PizzaDTO pizzaDTO : form.getPizzas()) {
            Pizza pizza = hibernate.get(Pizza.class, pizzaDTO.getPizzaId());
            order.getPizzas().add(pizza);
        }

        hibernate.save(order);

        return true;
    }

This method may look familiar to you if you had to build functionality for adding data to a database in the past :). In this case we get a PizzaOrderForm as a parameter, use the validation framework to check the data, extract the form values into a proper business object using de DTO framework, set data that was not inputted, relate the order with the actual pizzas and finally persist the order!

That's a lot for the few lines of code we've written! If we hadn't had use the DTO framework, then we would have had to manually copy each property of the form into the appropriate property of the business object, which can take several more lines.

    @Override
    public List<OrderDTO> listOrders() {
        DetachedCriteria criteria = DetachedCriteria.forClass(PizzaOrder.class);
        criteria.addOrder(Order.desc("orderDate"));

        return binder.bindFromBusinessObjectList(OrderDTO.class, hibernate.findByCriteria(criteria));
    }

The last method is much the same as the first one so no further discussion is needed.

A couple of final words.

As we may have noticed, this architecture is rather simple but full featured. It uses data validation, transactional behavior and the code is kept really small and clean thanks to the DTO Binding framework.

When used the right way, DTOs are a very powerful tool and makes our application even more bullet-proof by isolating completely the database code (persistent objects included) from the presentation tier.

Another thing to note is that, if you need to change from where data is acquired, add or remove fields is just a matter of configuring the DTO object and nothing else! Compare this to the traditional approach in which you would have added the extra field and then going through each loop when you populated the DTO and add the extra data copy operation.

Saturday, March 10, 2012

Web Based VS Native - Mobile Application Development

I think one of the biggest challenges of mobile application development is supporting an acceptable number of devices, which have different screen sizes (and generally speaking hardware abilities), which can be a real problem because developers need to build multiple versions of the application, say one per device they want to support. The question is: is there any way around this?

Well, some would say, "just build the thing web-based", of course, this has some advantages (at first sight at least) you code it in javascript with HTML 5 and it theoretically will run on most of the devices since most of them have webkit-based web engines!  This approach has proven on the past to work really well for desktop environments, so let's listen to the story of an embedded-web app development.

The story of a mobile web development.
Say we start building the app with this approach. For now everything is working fine, we spent 3 or 4 days just coding plain html and javascript with one framework like Sencha touch or jQuery Mobile and it runs fine on the device (say iphone) emulator, then we spent 4 to 6 days coding a data layer using local storage or web SQL and finally a couple more of days testing on a real device. 

Well, let's try it on the Android emulator.... "DANG! those animations were supposed to work!, and also why the layout is so off? And this looks like an iOS app, my android users won't dig that!

After going through the first experience you realize, you need a theme engine!! and switch the theme for each device... also it would be nice to add some code to adapt the components layout for each screen size and done! after 4 more days of writing javascript your app works fine on the iphone and android, now what? My friend has a blackberry!! Well, a couple more days to build the blackberry theme...

And the story could go on and on while testing on tablets of different brands and screen sizes, but finally... why the app is so slow?? it leaves me without enough battery to make phone calls!

Well finally we wrote just one application that works (awful) on every device, and also we as developers had to deal with thinks like there's no javascript debugger on the device emulators.

The story of a native mobile app development.
After going through the mobile experience we decided to give native application development a try, so started eclipse with the Android plugin and created the user interface with the visual designer, after a couple of hours we have the same 10 screens our web app used to have, with android user experience, ok, we found we have frameworks for data storage so after two days of work we have the same app running.

Ok, now let's bring the iPhone version! We create an Xcode project, after a couple of hours we have the iPhone and iPad user interface, then by taking advantage of the data APIs build the business logic and done!, the app is ready to test on the new platform.

Same story goes for blackberry, and other mobile platforms, now we take a look at the apps, they're working fine but oh no!! we have the same codebase all over the place, in different programming languages and development environments! That's not good for sure.

Time for comparison.
After telling the two stories we had a not-so-happy ending for each. So we need to choose now!! What should we do for our mobile apps.

Well It depends of a few things: manly development costs, delivery time constraints and importance of the user experience, so let's take a look of each point for both platforms.

Development Costs.

On the one hand for a web development you need a web developer with basic knowledge of each platform on the native side, this is because even though embedded web applications are mostly wrote on javascript, you need to build and embedded app environment (or use something like PhoneGap which entails the same basic knowledge), also you need the native development environment to build and package the embedded app environment for each platform. 

On the other hand you need an application developer who has medium to advanced skills on building native mobile applications and also the same native development environments. 

Adding features to the application is relatively simple for embedded web applications while adding features to native applications would take to over and over add the same thing for each platform codebase. We can think here that since the user experiences and the capabilities of mobile devices are different, adding a feature would also be an easy thing for native but complex for web.

Another important thing is tooling, web applications have somehow basic tooling while native applications have very powerful tooling and also the ability to debug and profile the code.

So in my opinion, at the end od the day, the cost is greater for embedded web apps than native web apps even considering that the codebase is repeated.

Delivery Timing.

As the year 2012, people has a lot of experience writing web applications, we have a lot of frameworks and tools to write these things, but most of this is by taking advantage of powerful servers and helping the developers on not writing HTML and CSS, because writing HTML and CSS is a slow process! They're not meant for creating user interfaces but for creating documents, so we made a lot of things to manage achieving the look and feel of user interfaces. Even though frameworks like Sencha Touch or jQuery mobile makes creating the user interfaces rather simple, you still have the three to four days time to create a 10 screens app, and then lots of time and hacks to make it look native for each platform.

With the availability of developer tooling, native applications can be built very quickly, the pitfall is having to deal with lots of programming languages, a not-so-skilled developer could find writing code on different programming languages a hard task, but let's face it, data-driven mobile apps actually entails caching data locally and sending it to (or reading from) a server, with some documentation and examples the logic should be done in a couple of days.

So speaking of time, for web apps, you could have say three developers working on the same codebase, but truth is, the more developers are working on the same codebase the more they get into each others way.

If you have three targeted platforms and three developers you can start the development for each platform at the same time and see it code-complete in 4 to 6 days.

So in my opinion, at the end of the day, you can make delivery rather quicker if you pick native development since the tooling is better and you can have people working independently, with proper project management all the platforms will be finished mostly at the same time.

User Experience.

Finally, the user experience, every platform has its own user experience, meaning for touch gestures, ways of navigating through screens and so on, for example android apps have a back button and a home button which removes the need for applications to provide a "software" navigation button, iOS phones doesn't have this button but all the applications have the same set of ways for navigating.

Also widget layout, colors, sizes and icon meanings are different, also you may have to provide localization and so on. This on an embedded web app will take lots of lines of javascript, and the more lines of javascript you write, the more battery you consume which is also a really bad thing for user experience.

Finally, HTML user interfaces need to be parsed, and rendered by a relatively slow processor so the user would notice some degree of unresponsiveness while interacting with the application.

Native apps doesn't have this advantages, they are built for each platform and for that, you just build the user experience the platform has and later you don't need to adapt it for another platform (maybe only phone/tablet adjustments), so they run fast, very responsive and with low battery consumption.

Conclusion

At this point I hope you're more than convinced that creating embedded web apps for different mobile devices has only the advantage of one single codebase, which is also a drawback because on different platforms things are different. Taking the approach of creating unified user experiences will result on confusing the user and making him to learn new things while he only wants to get the task done; this only works for a little set of apps that has really well-known user interface interactions (like facebook).

In my opinion, building native apps is way better than building embedded web apps, specially thinking on the user experience.

It would be really nice to have a serious scientific study for this, but at least for me, I'm a lot more skilled for web development than native development and with all that, it takes me a lot less time to build the same app native than web based.