Some months ago, I started to completely redesign one of my web applications. My personal goal was to refresh my knowledge of designing and programming web applications with Java. The web application I started to redesign is isbn-search.co.uk (German version: isbn-buchsuche.de) which is a search engine for books. To put it simple: visitors can lookup information about a book by entering an ISBN (International Standard Book Number).
I finished the first major release version more than seven years ago. It was written in PHP and used a MySQL database which contained all the book data.
About two years ago, I finished the second major release version which was written in Java. The design and user interface stayed more or less the same. The purpose of the second version was to heavily simplify the architecture and source code as I wrote the first release version when I just started my studies in Computer Science and had not that much experience in designing perfect software architectures (In my defense, the first revision needed almost no maintenance and produced a very nice monthly income). 😉
Therefore, it was time for a third major revision as the majority of the visitors has started to use mobile devices to access the web application. So I started to improve the second revision of the web application. I had two (non-personal) goals: First, to further improve the architecture of the web application in order to add new features in almost no time. Second, to have a web application that looks always good even if accessed by smartphones with small displays. Furthermore, I wanted only one version of the website that supports both, mobile and desktop devices.
Based on my requirement analysis, I came up with these technologies:
The Eclipse Modeling Framework comes with a nice editor allowing to graphically design meta models. EMF uses Ecore as standard format for the meta models. Ecore is very similar to OMG’s MOF (sometimes one reads that Ecore is a subset of MOF, and sometimes one read Ecore is a de-facto reference implementation of MOF etc.).
Meta-model editor of Eclipse Modeling Framework.
Designing meta-models with EMF is very easy when you have learned the ropes. The first hours with EMF might be a bit frustrating as EMF is a very comprehensive framework and one might not know where to start. However, in my opinion, the frustration is worth the gain in productivity.
Once you have the graphic representation of your meta-model, the next step is to us them to generate some source code. In EMF the source code generation is more or less just pressing a button. There are tons of options, e. g. you can choose whether you want adapter classes, interface classes etc.
For persisting the model data, I used Hibernate. Hibernate is a well known and widely used object-relational mapping framework that maps an object-oriented domain model (like Ecore models) to a traditional relational database. If you are familiar with Hibernate, you know that you have to write annotations or mapping files in order to map your classes to tables etc. Luckily, there exists already a solution that does all the work for you: Teneo. Teneo is a so-called model-relational mapping and runtime database persistence solution that integrates EMF with Hibernate. Once Teneo is configured, it stores all your model data into a database. A big advantage of Teneo is that it is highly configurable. For example, you can decide how to solve the inheritance mapping problem.
Database Connection Handling
The more visitors a website has, the more queries are sent to its database (if it has one). If in addition some computationally intensive queries are sent, the database might be overloaded. Especially in such a scenario, a more advanced handling of the database connections is very helpful. I chose c3p0 as it allows me to perfectly configure the connection handling. For example, you can select the minimum and maximum number of connections, the maximum idle time of connections, the maximum number of statements per connection and so on. Once you are done with the configuration, you need not to care about idling database connections etc. anymore.
Java Servlets and JSF
My code contains some business logic which is implemented as Java servlets. There is nothing special to tell, the servlets get requests and send responses.
The User Interface was implemented with Java Server Faces (JSF). I did not write all the code in plain JSF, I made as much use as possible of PrimeFaces framework.
A screenshot showing the responsive design of the website isbn-search.co.uk.
PrimeFaces is a component library for JSF-based web-applications. PrimeFaces features more than hundred components ranging from simple buttons to very powerful data tables. All components are mobile-friendly, which made PrimeFaces the perfect choice for my ISBN search application. The framework does not only feature components, it comes with a nice theme-roller and ajax functionality to let the user interface smoothly interact with all the objects that live in the backend (servlets, JAVA beans etc.).
Although PrimeFaces is a very comprehensive and powerful framework, getting started is not that hard. Once you know the ropes, you can easily design and implement your website.
The major disadvantage of PrimeFaces is that it is not “100% open source”. Major versions are released as “Community Downloads” free for everyone. If you rely on bugfixes or features of minor versions, you must subscribe to the so-called ELITE or PRO support options. In my case, the latest community version had all the features I needed to implement my website.
Last but not least, my project needed some SEO-friendly URLs. I chose PrettyFaces as it worked well with the other technologies I used. Using PrettyFaces is rather simple, you configure URLs by mapping files. External (SEO-friendly) URLs are mapped to the project’s internal URLs. Since I have only eight or nine different “types” of URLs, my config file has only a few lines.
In summary, it was a lot of fun the implement the website by using many “state of the art” frameworks. It is good to know that the Java ecosystem offers many options to architect, develop and deploy a website for mobile and desktop devices. Certainly, I have to admit, that not everything worked directly out of the box. Most effort went into setting up and configuring all the different libraries and integrate them into the web application. However, once this is done, the development is rather fast.
Next, I want to start a new web project using a completely different ecosystem. I’m thinking of using Python+Django since it got a lot of attention lately and becomes more and more popular among web developers.