Evaluating Large Scale Modular Web-Based Application Development

47
Evaluating Large Scale Modular Web-Based Application Development with Google Web Toolkit Model View Presenter MARTIN FINNSTRÖM Master of Science Thesis Stockholm, Sweden 2011

Transcript of Evaluating Large Scale Modular Web-Based Application Development

Page 1: Evaluating Large Scale Modular Web-Based Application Development

Evaluating Large Scale Modular

Web-Based Application Development with Google Web Toolkit

Model View Presenter

M A R T I N F I N N S T R Ö M

Master of Science Thesis Stockholm, Sweden 2011

Page 2: Evaluating Large Scale Modular Web-Based Application Development

Evaluating Large Scale Modular Web-Based Application Development

with Google Web Toolkit Model View Presenter

M A R T I N F I N N S T R Ö M

Master’s Thesis in Computer Science (30 ECTS credits) at the School of Computer Science and Engineering Royal Institute of Technology year 2011 Supervisor at CSC was Stefan Nilsson Examiner was Stefan Arnborg TRITA-CSC-E 2011:104 ISRN-KTH/CSC/E--11/104--SE ISSN-1653-5715 Royal Institute of Technology School of Computer Science and Communication KTH CSC SE-100 44 Stockholm, Sweden URL: www.kth.se/csc

Page 3: Evaluating Large Scale Modular Web-Based Application Development

Abstract

This thesis evaluates the model view presenter pattern that can beused when developing web applications with Google Web Toolkit. Theproject produced a prototype of a calendar module as a means of test-ing the pattern practically and incorporates dependency injection viaGoogle Gin. The prototype uses a dispatcher model with action re-sult handler for communication from client to server. This thesis alsogives backgrounds to all the frameworks which are used and their fu-ture stability and level of documentation. This is meant to establish afoundation for building a large modular application entirely in GoogleWeb Toolkit.

Page 4: Evaluating Large Scale Modular Web-Based Application Development

Evaluering av storskalig

webbaserad utveckling med

Google Web Toolkit Model

View Presenter

Sammanfattning

Denna avhandling utvärderar model view presenter mönstret som kananvändas vid utveckling av webbapplikationer med Google Web Toolkit.Det byggdes en prototyp av en kalendermodul för att pröva på mönstretpraktiskt och modulen använder sig av dependency injection via GoogleGin. Prototypen använder sig av action result handlers för att kommu-nicera mellan klient- och serverdel. Avhandlingen kommer också att geen bakgrund till alla de verktyg som användes och deras dokumenta-tionstandard och framtida stabilitet diskuteras också. Detta projekt ärtänkt att bidra med en grund för att bygga ett stort modulärt projekthelt i Google Web Toolkit.

Page 5: Evaluating Large Scale Modular Web-Based Application Development

Contents

1 Introduction 1

2 Important Results 3

3 Background 5

3.1 Eclipse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

3.2 Google Web Toolkit . . . . . . . . . . . . . . . . . . . . . . . . . . . 53.2.1 Model View Presenter . . . . . . . . . . . . . . . . . . . . . . 6

3.3 Gin and Guice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63.4 Apache Maven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3.5 Spring Security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73.6 Hibernate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3.6.1 Hibernate Annotations . . . . . . . . . . . . . . . . . . . . . . 83.7 EasyMock . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

4 Problem Statement 9

5 The Frameworks 11

5.1 Licensing and Open-source . . . . . . . . . . . . . . . . . . . . . . . 115.1.1 Eclipse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125.1.2 Google Web Toolkit . . . . . . . . . . . . . . . . . . . . . . . 125.1.3 Apache Maven . . . . . . . . . . . . . . . . . . . . . . . . . . 12

5.1.4 Spring Security . . . . . . . . . . . . . . . . . . . . . . . . . . 125.1.5 Hibernate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125.1.6 EasyMock . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

5.2 Documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

5.2.1 Eclipse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135.2.2 Google Web Toolkit . . . . . . . . . . . . . . . . . . . . . . . 135.2.3 Apache Maven . . . . . . . . . . . . . . . . . . . . . . . . . . 135.2.4 Spring Security . . . . . . . . . . . . . . . . . . . . . . . . . . 13

5.2.5 Hibernate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145.2.6 EasyMock . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

5.3 Version Stability and Backwards Compatibility . . . . . . . . . . . . 145.3.1 Eclipse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Page 6: Evaluating Large Scale Modular Web-Based Application Development

5.3.2 Google Web Toolkit . . . . . . . . . . . . . . . . . . . . . . . 145.3.3 Apache Maven . . . . . . . . . . . . . . . . . . . . . . . . . . 155.3.4 Spring Security . . . . . . . . . . . . . . . . . . . . . . . . . . 155.3.5 Hibernate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155.3.6 EasyMock . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

6 Method 17

6.1 Current Approaches to Developing with GWT . . . . . . . . . . . . 176.1.1 Only GWT . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176.1.2 GWT MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

6.2 Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186.2.1 Modified Requirements . . . . . . . . . . . . . . . . . . . . . 19

6.3 Planning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206.4 Setting Up The Environment . . . . . . . . . . . . . . . . . . . . . . 206.5 Execution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

6.5.1 Introducing the Patterns . . . . . . . . . . . . . . . . . . . . . 286.6 Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

6.6.1 Scalability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

7 Results and Conclusion 37

7.1 Results . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377.2 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Bibliography 39

Page 7: Evaluating Large Scale Modular Web-Based Application Development

Chapter 1

Introduction

This thesis focuses on web-based application development and will evaluate some ofthe currently most widely used tools to make such projects efficient. The thesis willbe carried out for the company Synergica, located in Stockholm, which developsa product called Team Engine. This is an online project collaboration platformwhich uses elements such as forums, online file managers and calendars to enhancethe productivity of multi-member projects or simplify the running of board groupsor apartment owner associations. Synergica is currently developing a new versionof the collaboration tool called MyTE using newer technology than the currentproduct uses today. The development of a modular component in MyTE usingGWT MVP touches on a large amount of different technologies currently used insoftware development. It ranges from modern database tools like Hibernate tosecurity implementations using Spring Security to dependency injection using Ginand Guice. This thesis focuses on using the tools of our trade, frameworks andpatterns, to develop elegant and modern solutions in a large-scale fashion.

1

Page 8: Evaluating Large Scale Modular Web-Based Application Development
Page 9: Evaluating Large Scale Modular Web-Based Application Development

Chapter 2

Important Results

• Google Web Toolkit using the Model View Presenter pattern are suitable fordeveloping large scale modular web applications.

• The incorporation of Google Web Toolkit, gwt-presenter, gwt-dispatch, Ginand Maven is not trivial.

• The leaning curve for using these patterns is steep.

• Understanding of the patterns is required to be able to utilize the patternseffectively.

• Google Web Toolkit is a good platform for building web applications and hasbeen in use for quite some time by a large community.

• The model view presenter pattern solves the problem of "seperation of con-cerns" making the presenter handle all the logic interactions with the modelwhile the view stays passive so the user does not have direct influence overthe datasets viewable.

• Dependency injection ensures modularity and improves maintainability overa large set of classes.

• Dispatching asynchronous actions works well in a web environment whererequest can take a variable amount of time to send and process.

• UiBinder removes code responsible for styling elements from the view andprovides readability and changeability.

3

Page 10: Evaluating Large Scale Modular Web-Based Application Development
Page 11: Evaluating Large Scale Modular Web-Based Application Development

Chapter 3

Background

This section contains some background to Google Web Toolkit (GWT) and theother tools we will integrate with GWT for easing the process of development,introducing scalability and maintainability of the final product. The prototype thatwas produced as a result of this project uses a Maven project structure, with GWTModel View Presenter on the client side using Gin for dependency injection and isusing Hibernate annotations as a means of storing and accessing data.

3.1 Eclipse

Eclipse is a popular Integrated Development Environment (IDE). The program’scode is open source and has a lot of customization options available for developersfocusing on a specific programming language or use many different ones. At Syner-gica this is the most widely used IDE and all development with GWT is done withthe help of Eclipse and its plugins. Plugins that will be installed and used withEclipse include the GWT plugin, the Maven plugin for eclipse and the Spring andHibernate plugins.

3.2 Google Web Toolkit

Google Web Toolkit is a development tool for creating advanced web applicationsand it is used today, amongst other things, for development within Googles Waveand AdWords applications. The GWT software development kit consists of a JavaApplication Programming Interface (API), a Java-to-JavaScript compiler and a de-velopment server. The Java-to-JavaScript compiler compiles code written in Javato JavaScript producing several versions of the application, one for each majorbrowser, and then only provides the correct version per browser on request, so thateach browser only downloads the code optimised for that particular browser. Thisreduces the amount of JavaScript code downloaded and makes the experience assmooth as possible for the end user. GWT has standard widgets that covers all ofthe standard HTML tag behaviours and can be used to quickly set up a site with

5

Page 12: Evaluating Large Scale Modular Web-Based Application Development

CHAPTER 3. BACKGROUND

basic functionality. These widgets also include handlers for user interaction withinthe objects and these can all be handled in Java code. Developers can easily maketheir own specialized widgets, with inheritance and extensions offered through Java,customize existing widgets or make completely new ones.

3.2.1 Model View Presenter

Model View Presenter (MVP), shown in Figure 3.1, is a design pattern for effec-tively splitting up your widgets so that different MVP components can be changedat any time without affecting the others. This also makes it easier for multiple de-velopers to work on the same widget simultaneously and still merge their view andpresenter components seamlessly, provided they do not change the structure of theconnecting interfaces. The Model is a Plain Old Java Object (POJO) for storingsome information that should be accessible to the widget; this object is handledby the Presenter, which is responsible for all the logic within the widget, and alsohandles events from the user interface component; the View. The View should beas dumb as possible and only contain the structure of UI elements and ways for thepresenter to fetch them.

View Presenter Model

Fetch Update

RetrievePush

Figure 3.1: The Presenter does all the work.

3.3 Gin and Guice

Gin and Guice are tools for providing Dependency Injection (DI) to GWT develop-ment. Guice is the server side DI tool and Gin is built on top of Guice to provide theGWT client side code with the same options for dependency injection. Dependencyinjection is another mean for making the entire application more loosely coupled, byremoving the need for classes themselves to initiate everything necessary for theirown dependencies before they can be run individually. The DI frameworks in thiscase are responsible for providing a fully instantiated instance of some class A tothe current class B so when changing the implementation of class A, class B justgets injected with the new class A instead and is blissfully ignorant of the changesto class A. The upsides to this are very clear when dealing with multiple classeswhich all are dependent on class A but have all instantiated the class themselves,which makes reworking all the classes a chore in large projects.

6

Page 13: Evaluating Large Scale Modular Web-Based Application Development

3.4. APACHE MAVEN

Injector

Class A

Class B

creates

injects

3.4 Apache Maven

Apache Maven is a project management tool that provides a standardized struc-ture and customizable options for building and managing a multi project structure.Maven does this by using a Project Object Model (POM) for every project. Thepom is an XML file that handles all the project wide dependencies and version con-trols. The plugin for Eclipse called maven2eclipse also automatically ensure that theenvironment has those dependencies available by downloading them from a centralrepository of projects. The plugin also works well with GWT while using the GWTdevelopment mode.

3.5 Spring Security

Spring Security was formerly known as Acegi Security but has since then beenincorporated into the Spring Portfolio of tools as the standard way of securing Springapplications. Spring Security is the authentication and access control branch of theSpring Framework and provides the application with very customizable options foruser management and security. This security can be configured in many differentlayer from sub-url security within a domain, down to method security on a per userand method call level.

3.6 Hibernate

Hibernate is a object/relational mapping (ORM) library that translates the logicalrepresentation of objects into an atomized form that is capable of being stored in adatabase[19]. This solves the problem that arises when using plain old java objects(POJOs) together with for example collections, which are not suitable for beingstored in the basic form of integers and strings that a relational database offers.Hibernate offers this functionality to "persist" Java objects, making them accessiblebetween different sessions of the application.

7

Page 14: Evaluating Large Scale Modular Web-Based Application Development

CHAPTER 3. BACKGROUND

3.6.1 Hibernate Annotations

Hibernate Annotations provide developers with a convenient way to configure Hi-bernate specific configurations within their Java classes, eliminating the need forthe traditional XML configuration file, and also places the configuration in a morehuman readable form right next to the classes they are affecting. This ensures theleast possible amount of XML configuration specific to Hibernate and removes onelayer of complexity in the project.

3.7 EasyMock

EasyMock is a Java "mocking" tool for writing complex tests involving multipleobjects that only work in unison. Mocking in this case is the creation of dummyobjects with fixed behaviour which simplifies testing. EasyMock provides the meansof mocking away the instances of classes that are of no importance to the currenttest and expect, record and play back methods finding errors in the results andexecution. These mock objects are only affected by the fundamental changes andnot by small re-factorings, making Easymock a good way of handling testing on anever-changing code-base[4].

8

Page 15: Evaluating Large Scale Modular Web-Based Application Development

Chapter 4

Problem Statement

Efficient development, maintainability and stability is what companies should beinterested in when developing a product that will hopefully be used for many yearsto come, by a large number of users. Can these frameworks and tools be combinedand used efficiently to meet the standard that is required on today’s competitivemarket?

9

Page 16: Evaluating Large Scale Modular Web-Based Application Development
Page 17: Evaluating Large Scale Modular Web-Based Application Development

Chapter 5

The Frameworks

So why should we use all these different tools to do things that most people han-dle the old fashioned way, without using any external frameworks? First of all itintroduces a new level of complexity with each new layer to the application whichmakes the knowledge requirements for developers higher. This can in turn be out-weighed by structural improvements and maintainability of the code-base, whichwill stabilize and ease development in years to come. But do the pros outweigh thecons?

5.1 Licensing and Open-source

Since the final product in this case will be sold commercially and the code will notbe released to the public, the individual licences of the frameworks determines ifthe tools can be used or not. The licensing of computer software range from openand free for all to closed and usable only through end-user licence agreement bythe user of the product. When talking about open-source software the majorityof the software uses some version of the GNU public license (GPL) as writtenby Richard Stallman of the GNU Project[18]. Software that uses the GPL areconsidered copylefted as opposed to copyrighted, this play on words enhances thefeeling of opposition between the two, since the copyrighted material can not beredistributed freely and the copylefted material has to be available freely and also thesoftware that uses these products must be free and open-source. The GPL can thusnot be used in commercial software where the code is not public and we shall avoidusing software with this license attached. So we need open-source projects withfewer restrictions for using it in proprietary software. This is where the BSD, MITand Apache licenses come in, they all provide developers with access to the sourcecode of the projects while not restricting their use in commercial software with anon-open-source code base. These are called permissive free software licenses[20].

11

Page 18: Evaluating Large Scale Modular Web-Based Application Development

CHAPTER 5. THE FRAMEWORKS

5.1.1 Eclipse

Although the Eclipse IDE is released under the copyleft Eclipse Public License(EPL), which is an alteration of the GPL, it is not the source code we alter and usebut the program itself. As stated on the OSS Watch’s explaination of the EPL[17]:

• The Eclipse Foundation makes clear that, in their opinion, merely interfacingor interoperating with an Eclipse plugin does not make your code a derivativework of the plugin.

• Therefore original software developed using the Eclipse platform can bear anylicence its author chooses when distributed.

Hence this does not affect our ability to use eclipse in commercial development.

5.1.2 Google Web Toolkit

GWT is released under the Apache 2.0 License and this requires us to release ourproduct with a copy of the license attached and we also need to state in any fileswe change which changes we have introduced. This also means we can attach anyother license we want to our own product when finally distributing it.

5.1.3 Apache Maven

Maven is also distributed under the Apache 2.0 License but since this software willnot be distributed with the product and no changes will be made to the actual codein this case the license does not need to be attached on account of this software.

5.1.4 Spring Security

Some of the Spring Security framework will be shipped as the access control func-tionality within the product and since the framework is distributed under the samelicense as GWT (Apache 2.0) Spring we already have this covered.

5.1.5 Hibernate

Hibernate states on their homepage[12]:

Hibernate is licensed under the Lesser GNU public License v2.1(LGPL).The LGPL is sufficiently flexible to allow the use of Hibernate in bothopen source and commercial projects. The LGPL guarantees that Hi-bernate and any modifications made to Hibernate will stay open source,protecting our and your work.

Lesser GPL is a alteration to the standard GPL which removes the copyleft portionof the license.

12

Page 19: Evaluating Large Scale Modular Web-Based Application Development

5.2. DOCUMENTATION

5.1.6 EasyMock

EasyMock is also released under the Apache 2.0 License and will be covered by thecopy we will attach.

5.2 Documentation

Since some of these frameworks are old and some quite new the documentationprovided for each plays a big role when learning and using them in your product. Agood documentation can help bring new people up to speed and help solve problemsthat developers are bound to run into when working with new tools. A bad or nonexistent documentation can on the other hand make the framework all to taxing touse to make it worth the effort of introducing it to your team.

5.2.1 Eclipse

The documentation for Eclipse is kept up to date with all new versions released andcan be found at Ecilpses homepage[7]. It provides all its information in a categorizedand searchable interface, which makes it very easy and efficient to find what youare looking for.

5.2.2 Google Web Toolkit

GWT’s documentation is wrapped in a pretty tutorial and feature showcase[10] . Itseasy to browse and provides examples for using most of the standard widgets andsystems provided in the toolbox. When developing a bit more advanced applicationsthe Java doc overview can sometimes be more helpful when figuring out how tosolve the problem you are faced with, this is also provided by Google here[9]. Allthe GWT sub-projects like GWT-MVP, GIN, and UiBinder are also explained anddocumented on Google code, which is Googles project database.

5.2.3 Apache Maven

Maven is all about structure and configurations and while their documentation[6]have some "getting started in 5 minutes"-guides the process of understanding Mavenand what it is trying to accomplish takes quite a bit longer. Following the docu-mentation can be tedious at times but gets the job done if you follow it to theletter.

5.2.4 Spring Security

Spring Security’s documentation[16] consists of a reference manual and a javadoc.The reference manual is html based, only text and contains some code examples forconfiguration specifics and the javadoc is in the standard format.

13

Page 20: Evaluating Large Scale Modular Web-Based Application Development

CHAPTER 5. THE FRAMEWORKS

5.2.5 Hibernate

Hibernate’s documentation[2] features a html based web page which includes somegetting-started tutorial downloads. It is thorough and easy to follow.

5.2.6 EasyMock

The documentation for EasyMock is shorter than all the other frameworks we havelooked into so far, but its not the functionality of EasyMock that is hard to under-stand, it is using it effectively and correctly since the ideas might be different fromthe regular testing developers are used to.

5.3 Version Stability and Backwards Compatibility

The products developed at Synergica will hopefully be used a long time to comeand the management is therefore interested in whether the frameworks being usedwill be maintained and updated with bug fixes and fixes for other issues, since theservice they provide demands a certain amount of reliability and security. Theproduct is only as secure as its weakest link and even a small hole in some part ofthe system can amount to a severe leak of information.

5.3.1 Eclipse

According to Jeffrey S. Hammond’s publication about IDE Usage Trends[11] theEclipse IDE is used by 70 percent of all Java developers on the market and has beenaround for close to 10 years now. In addition to fixing bugs, many new features andenhancements have been introduced with each version of the IDE building upon thealready solid base. One might argue that when such a big majority of the field usesthis one development environment its quality will continue to improve as the user-base demands more features and submits bug reports of their daily use. Eclipseensures that they support backwards compatibility on their own software[7] butsome issues may occur with plugins installed prior to upgrading to a new version ofEclipse. From personal experience and from the extensive daily testing done by thedevelopers using eclipse every day, I would qualify the Eclipse IDE as a very stableworking environment with a very small chance of disappearing from the market.

5.3.2 Google Web Toolkit

As GWT has been around for 5 years now a lot of the infancy bugs and glitcheshave been worked out since Google released the milestone release 2.0 in Novemberof 2009. The community is growing large as more and more companies discoverhow much GWT can help them in quickly develop simple JavaScript widgets andweb pages. This community is also good at writing articles and help improvingthe framework by means of writing bug reports and submitting fixes themselves.Some methods stay in the API as deprecated each new version to provide backwards

14

Page 21: Evaluating Large Scale Modular Web-Based Application Development

5.3. VERSION STABILITY AND BACKWARDS COMPATIBILITY

compatibility while making room for new and improved functions. GWT has thepotential to stay around the web development scene for a long time to come.

5.3.3 Apache Maven

Maven also ensures backwards compatibility in their release notes[6]:

• Maven 3 aims to ensure backward compatibility with Maven 2, improve us-ability, increase performance, allow safe embedding, and pave the way toimplement many highly demanded features.

Support for Maven can be accessed through the Maven homepage and the developersencourages Maven users to subscribe to the "Maven Users Mailing list" where all thequestions and answers are archived for future viewing. The project can be activelycontributed to by user who feel like helping out, making it constantly evolve. Thecore development crew can also be contacted via IRC.

5.3.4 Spring Security

According to Borys Burnayev’s guide for upgrading from version 2 to 3 of SpringSecurity[1] is seems like upgrading is not something that the team themselves havemade any effort to make easier for their users. This suggests that future releasesmight suffer from the same lack of compatibility which is not optimal. Fortunatelywe will use Spring Security 3 from start and not have to worry about the transitionfrom version 2 to version 3.

5.3.5 Hibernate

Hibernate is today actively being developed by people at JBoss Inc as a part of theRed Hat company. It is being reviewed by an increasingly larger number of devel-opers as it is growing in use on the market. Today they are working on releasing themajor milestone version 4.0.0, which was alpha released on May 5, 2011. Hibernatealso gives the users access to migration guides[3] as a helping hand when movingprojects across versions, they are short guides on a per version-to-version basis withconcise information of the steps needed to safely upgrade to a new version whilestaying compatible with the old functionality.

5.3.6 EasyMock

The EasyMock 3.0 Documentation[5] states that:

• EasyMock 3 still has a Class Extension project (although deprecated) to allowan easier migration from EasyMock 2 to EasyMock 3. It is a source not abinary compatibility. So the code will need to be recompiled.

15

Page 22: Evaluating Large Scale Modular Web-Based Application Development

CHAPTER 5. THE FRAMEWORKS

• EasyMock 2.1 introduced a callback feature that has been removed in Easy-Mock 2.2, as it was too complex. Since EasyMock 2.2, the IAnswer interfaceprovides the functionality for callbacks.

This basically states that backwards Compatibility exists and some changes whichwill increase productivity have been added, so these should be changed where ap-plicable.

16

Page 23: Evaluating Large Scale Modular Web-Based Application Development

Chapter 6

Method

This section contains the work preformed by me when constructing the proof-of-concept (PoC) for the calender module. The execution of the development phasewill include setting up a new working environment, planning the project and devel-opment of the proof of concept calender module widget. Some of the requirementshave already been defined by the board of administration but some alterations andrefinements are required to fit the scoop of the PoC.

6.1 Current Approaches to Developing with GWT

Google announced GWT at the JavaOne conference in 2006 and was released onMay 16 that same year. Since then it has spread at a rapid pace through theweb development scene and is today used by many thousands of developers fordeveloping AJAX web applications[8]. So lets take a look at how these developershave used it over the years.

6.1.1 Only GWT

At first GWT was only used as a standalone kit for web page development withthe built-in Java-to-JavaScript compiler making it easy for developers to get upbasic functionality quickly. The result of this is a JavaScript front-end with GWTgenerated components and is suitable for displaying information in the standard webpage fashion and some simpler client-side computations such as mortgage calculatorsand keeping track of shared expenses[14]. As the Tool Kit became bigger with moreadded functionality and user wanted more advanced web sites developers requireda better way to structure their bigger projects. This helped bring together GWTand some older design patterns such as model view controller.

6.1.2 GWT MVC

The Model View Controller (MVC) design pattern was first introduced in the late70’s by Tryngve Reenskaug and was conceived as a general solution to the problem

17

Page 24: Evaluating Large Scale Modular Web-Based Application Development

CHAPTER 6. METHOD

Model

ViewController

modifies

user input

updatesmodifies

of users controlling a large and complex data set[15]. It is a predecessor to the MVPpattern but is not as loosely coupled as the view monitors the model for changed andinteracts with the controller. Some MVC frameworks that has been used togetherwith GWT include Spring MVC and gwt-mvc. Gwt-mvc is a stand-alone projectthat eases the structuring of GWT application to the MVC pattern.

6.2 Requirements

The requirements as specified for the complete calendar module:

• Users should be able to create a calendar or have one created for them.

• Users should be able to edit their calendar.

• Users should be able to save their calendar.

• Users should be able to import their own and others calendars from GoogleCalendar and similar services.

• Users should be able to export their own calendars to Google Calendar andsimilar services.

• Users should be able to have multiple calendars within the same view.

• Users should be able to customize some aesthetic aspects of their calendars,like individual calendar colouring.

• Each user should have a personal calendar.

• Each place should have a calendar that all members of the place has accesstoo.

• Access control should be in implemented, allowing only authorized personnelto make changes in the place calendars.

18

Page 25: Evaluating Large Scale Modular Web-Based Application Development

6.2. REQUIREMENTS

• The calendar should feature different views encompassing different number ofdays being displayed.

• Each calendar entry should be editable via a separate view and via a drag-and-drop resizing feature.

• Each entry should contain all the necessary information required to effectivelykeep the appointment.

• Notifications of upcoming events.

• Smooth handling of displaying overlapping events.

6.2.1 Modified Requirements

Modification to the requirements to fit the scoop of the PoC include removal ofinter-application communication and removal of the access control lists on a percalendar basis and only put into effect the database access control layer. Thereduced scoop will help focus the project to framework integration and operationwhile still retaining its use as a proof of concept for future development.The new requirements consists of these points from the original requirement:

• Users should be able to create a calendar or have one created for them.

• Users should be able to edit their calendar.

• Users should be able to save their calendar.

• Users should be able to import their own and others calendars from GoogleCalendar and similar services.

• Users should be able to export their own calendars to Google Calendar andsimilar services.

• Each user should have a personal calendar.

• Each place should have a calendar that all members of the place has accesstoo.

• The calendar should feature different views encompassing different number ofdays being displayed.

• Each calendar entry should be editable via a separate view and via a drag-and-drop resizing feature.

• Each entry should contain all the necessary information required to effectivelykeep the appointment.

19

Page 26: Evaluating Large Scale Modular Web-Based Application Development

CHAPTER 6. METHOD

6.3 Planning

The planning phase requires a lot of time when working with best practices methodsinvolving many frameworks. Since there are a lot of different patterns that needsto be able to function together, some problems will always arise during the pro-gramming phase and these problems can be lessened some by research and planningbeforehand.The Calendar needs standalone testing capabilities as well as integration capabili-ties with the MyTE product and this functionality will be provided by the modularstructure we will apply to the project. The Calender will in the future both be avail-able as a personal calendar and as a calendar for workspaces or places. These canuse the same layout with the only difference being access control on features relatedto specific calendars. Each calendar should also be able to contain multiple custommade sub-calendars. The solution to this is that the "calendar" you see is in fact acollection of several calendars being displayed in the same view. This enables usersto subscribe to places of which they are members of, giving the users an overviewof all their activities in all places in their own calendar. User should also be ableto create private sub-calendars within their own calendar and this is also solved viacollections of calendars instead of a single calendar per calendar view. Storing thecalendar data can be done with the help of calendar servers using the CalDAV com-munication scheme. By communicating with the server via the CalDAV standardwe maintain the modularity and can easily change server implementation at a laterdate if one shows some more advantages over the others. Some things like creatingaccounts for users logging on to the server might nor be the same for all the Cal-DAV servers but this can be fixed by using an interface for this and swapping theback end implementation. While planning is a necessity one can not foresee all thedifficulties one will face and there might even be some changes to the specificationthat will alter major parts of the project and require us to rethink some aspects ofthe set-up, nonetheless its nice to have a solid ground to stand on.

6.4 Setting Up The Environment

After we have planned the project we need to get all our tools together so thatwe can begin executing the plan. Fist of all we need to download the Eclipse IDEsince its with its help we will puzzle together most of the other tools required forthis project. Eclipse can be downloaded from several places and the best beingEclipse’s own download section on www.eclipse.org. The newest version at the timeof writing is version 3.6 (Helios) so we will use that. Eclipse comes packaged in aarchive which can be unpacked and placed at ones own discretion, the eclipse folderis mostly self-sufficient and can be moved around if need arises, no installation nec-essary. When first starting eclipse we will need to specify a workspace where wewant to put our project and then we are inside the Eclipse workspace. Now wewill need to install all the nifty plugins that will help us piece this puzzle together.

20

Page 27: Evaluating Large Scale Modular Web-Based Application Development

6.4. SETTING UP THE ENVIRONMENT

Eclipse uses a update-site style installation where repositories with plugins residesomewhere on the web which we can connect to and then download and install plu-gins from within eclipse itself. Some kind of version control system is a must whendeveloping large scale applications and I choose to go with subversive svn whichcan be downloaded from the standard eclipse update-site and integrates nicely withEclipse.Now we need the Google Plugin for Eclipse 3.6 v2.3.1.r36v201105092302 which willprovide us with eclipse integration for GWT features, the Google Web Toolkit SDK2.3.0 v2.3.0.r36v201104261928 which contains all the software development toolsneeded to get started with GWT and the Maven Integration for Eclipse-plugin whichwill let us use many of the features of Maven directly in Eclipse. The first two can beobtained from Google’s update site for Helios http://dl.google.com/eclipse/plugin/3.6.They have separate version of the plugin for all the recent builds of eclipse so weneed to go to the right update-site, in our case 3.6. The Maven integration pluginis distributed by Sonatype and can be gotten from the m2eclipse Core Update Site:http : //m2eclipse.sonatype.org/sites/m2e

To install the m2eclipse plugin in the Eclipse IDE as specified by the Sonatypeteam:

• Select Help > Install New Software. This should display the "Install" dialog.

• Paste the Update Site URL into the field named "Work with:" and pressEnter. Pressing Enter should cause Eclipse to update list of available pluginsand components.

• Choose the component listed under m2eclipse: "Maven Integration for Eclipse(Required)".

• Click Next. Eclipse will then check to see if there are any issues which wouldprevent a successful installation.

• Click Next and agree to the terms of the Eclipse Public License v1.0.

• Click Finish to begin the installation process. Eclipse will then download andinstall the necessary components.

• Once the installation process is finished, Eclipse will ask you if you want torestart the IDE. Sonatype strongly recommends that you restart your IDEafter installing m2eclipse.

That is it for the plugins required. Maven will handle the downloading of theother libraries we need when we start building our project structure. To be ableto create the server connectivity required for storing the calendar data we mustfirst have a CalDAV server operational at the office. While researching the differentoptions for CalDAV servers i came across several different implementations in severaldifferent languages and structures, all following the standard RFC4791 as set forthby IETF Trust in 2007[13].

21

Page 28: Evaluating Large Scale Modular Web-Based Application Development

CHAPTER 6. METHOD

• DAVicalOpen Source/PHP/PostgreSQLImplementation of CalDAV Access and Scheduling with web-based adminis-tration.

• DavMailOpen Source/JavaDavMail is a POP/IMAP/SMTP/Caldav/LDAP exchange gateway allowingusers to use any mail/calendar client with an Exchange server through OutlookWeb Access.

• Dingo Calendar ServerOpen Source/Perl/CGIDingo is a CalDAV compatible server using MySQL, written in Perl as a CGIscript.

• ModCalDAVOpen source/cross-platformApache plugin implementing CalDAV Access.

• Oracle BeehiveCommercialImplementation of CalDAV Access and Scheduling.

• RadicaleOpen Source/cross-platformImplementation of CalDAV Access.

• SabreDAVOpen Source (alpha)SabreDAV is a free WebDAV server and includes support for CalDAV.

• Sun Java Calendar ServerCommercialImplementation of CalDAV Access and Scheduling.

• Zimbra (VMWare)Commercial/Open SourceImplementation of CalDAV Access and Scheduling.

• Chandler Server (Cosmo)Open SourceJava-based server that includes support for CalDAV.

• BedeworkOpen source/cross-platformImplementation of CalDAV Access and Scheduling. Java-based. Includes aWeb UI.

22

Page 29: Evaluating Large Scale Modular Web-Based Application Development

6.4. SETTING UP THE ENVIRONMENT

I choose to look more into Bedeworks implementation since it uses technologieswhich are most similar to the ones we’re working with. It is built in Java witha hibernate solution as the back end. Bedeworks is used primarily by universitiesall around the world including Yale, Brown, Julliard, Duke in the United Statesand Stockholm University in Sweden. It has been deployed for a long time and itcan be considered stable enough to suit our needs at Synergica. I proceeded to setup their quick-start server version on my local computer as a temporary solutionfor internal testing. After trying to get it to run without succeeding for a while, istarted looking into the system requirements for the Bedeworks server.

• JDK 6

• JAVA HOME environment variable must be set in your command/shell win-dows

• Hardware for testing: most current desktop or laptops will be adequate.

• Hardware for production: A server class machine generally with at least 2Gigsallocated to the JVM (more is better).

• An adequate database system. In particular, the database should supportUnicode. Most Bedework installations use PostgreSQL, MySQL or Oracle.The quickstart ships with Apache Derby, It isn’t recommended for productionsystems.

Why I could not get it to work might have something to do with the 2 Gigabytesof required ram to be allocated to the Java Virtual Machine (JVM). This amountmay be acceptable for a production servers but not for testing purposes on my de-veloping laptop which has a total of 2 Gigabytes of ram.The situation required me to look in a different direction for the temporary devel-opment server and I finally settled on the Chandler Server Cosmo. Compared toBedeworks, Cosmo was lightweight and it was easy to set up a server with basicfunctionality. The reason it wont be an option later in the process can be summedup by this quote from Nathan Willis, a freelance Linux and open source writer.

Cosmo supports a wide array of iCalendar and CalDAV extensions,including free/busy information, email notifications, and even CardDAVaddress book synchronization. Still, site administrators should give care-ful consideration to Cosmo because its future is uncertain. OSAF hashalted development on Chandler, and while Cosmo is still in workingorder, if you run into trouble several years from now, you may have aharder time finding support.

That they have stopped maintaining the Cosmo server makes it unsuitable for futureuse while in production. This is the beauty of working with standards, when oneserver fits our production needs and one server fits our testing needs we can useboth since they support the same standard and can be swapped without making any

23

Page 30: Evaluating Large Scale Modular Web-Based Application Development

CHAPTER 6. METHOD

changes in our own implementation. Bedeworks high requirements and stability canbe swapped in when its time for production and Cosmo can be used for lightweighttesting and development.

6.5 Execution

So now that we have a working development environment and a working test serverwe can start building the project structure for our GWT module. First of all weneed to create a base project structure in accordance with both Mavens project stan-dard and the GWT standard directory and package layout. The standard Maven

Figure 6.1: Standard GWT layout

project structure contains a pom.xmlfile to handle all the project configu-ration, a resources folder for storingweb resources and a target folder in-stead of the GWT war folder for en-capsulating the built project. Figure6.1 displays the standard GWT lay-out with the src folder containing allthe Java classes and the war folderhosting the deployed project insteadof the target folder.The Maven integration for Eclipseplugin we installed earlier helpsus with the problem of combin-ing these structures so that we canuse the standard way of buildingMaven while maintaining the abil-ity to use the standard GWT devel-oping tools. While creating a newproject through the New Projectwizard in Eclipse we should chooseNew Maven Project in the Mavensubcategory and in the second step pick the archetype we want to create a projectfor. We want to use codehaus’s gwt-maven-plugin with group id org.codehaus.mojoand use the latest version 2.2. This will prompt us to name our project and specifythe module name. Maven will then proceed to build and configure our project forus creating all the folders and even a sample project which can be run out of thebox. The resulting structure is shown in figure 6.2.That the project contains errors at creation time is the result of some of the buildgoals that the project contains. When installing the module the first time the goalsi18n and generateAsync will be run and these will create the files that we are miss-ing right now. We will use our own implementations of both of these later but theproject can be run as-is now. We will use Synergicas own language module since the

24

Page 31: Evaluating Large Scale Modular Web-Based Application Development

6.5. EXECUTION

product requires us to change the language of the entire site at runtime and this isnot supported by the standard nationalization package. As for the generateAsyncbuild goal we will replace the standard GWT Async classes with gwt-dispatch andfollowing the gwt-presenter structure so that we can utilize the MVP pattern itprovides us with. Now that we have a working base project we need to start cus-tomizing it and download all the things we will depend upon, our "dependencies".

Figure 6.2: GWT Maven

Dependencies are organized by Maven with thehelp of the pom.xml file in our Maven project. Thepom-file is a simple xml file specifying everythingMaven needs to know to be able to download, main-tain, update and configure our project. If we spec-ify another projects pom as a dependency to ourproject Maven will proceed to download everythingthat project has specified as dependencies as well as theproject itself. Maven does this process recursively un-til everything needed by us and our dependencies hasbeen downloaded and included in our project. This isvery convenient when distributing the project amongstco-workers and via Mavens repositories, as one onlyneed to say that we want the base project we intendto use and will automatically have all its dependenciesdownloaded as well. There are a very large number ofoptions available to be configured in the pom file andthe Maven plugin for eclipse supplies us with an graph-ical user interface, see figure 6.3, to ease the stress of

configuring everything manually. The image also gives a hint about everything thatmay be customized with the pom as the sub menus at the bottom correspond tothe major sections of the pom file.As we talked about earlier we want to replace the inherent asynchronous structurewith gwt-dispatch to use the Action-Result-Handler pattern, see Figure 6.4. Thismethod is a asynchronous client-server communication where the client sends anAction that is serializable through the dispatcher which is then handled by the cor-responding Handler on the server side which then sends a serializable Result backto the client. The Action and Result can be either dumb objects without any infor-mation or can contain any serializable Java structure which are used to carry thenecessary information to the server-side and back again. Any combination of theseAction and Results can be used depending on the functionality required by the call,for instance an insert into some database can contain the data in the Action objectbut can return an empty Result on success. The method onSuccess or onFailureis executed when the asynchronous call returns. They correspond to a successfulasynchronous call and a failed asynchronous call.

25

Page 32: Evaluating Large Scale Modular Web-Based Application Development

CHAPTER 6. METHOD

Figure 6.3: pom.xml GUI

Dispatcher

onSuccessonFailure

Action

Result

Handler

Client Server

Figure 6.4: Action-Result-Handler pattern

To add gwt-dispatch as a dependency we open up the pom-file and switch tothe Dependency tab. When pressing add here we are asked to search the standardMaven repositories for the dependency we are looking for. Most of the projectswe want are already on the standard repository and can be browsed to via thesearch and find functionality. If the project we are looking for does not exist onthe repository we need to add its external repository to our pom file so that Mavenknows where to look for the project. One project we will want to use in the futureis Caldav4j, a Java project with caldav connectivity as an extension of HttpClient.This project is not found on the global Maven repository but can instead be foundat a repository hosted by Google. We could add the repository via the Repositoriestab in the pom GUI or we could simply add these line directly into the pom-file

26

Page 33: Evaluating Large Scale Modular Web-Based Application Development

6.5. EXECUTION

after the dependencies section.

<repositories>

<repository>

<id>caldav4j.repo</id>

<name>CalDav4J Repository</name>\\

<url>https://caldav4j.googlecode.com/svn/maven/</url>

</repository>

</repositories>

So we search for gwt-dispatch in the add menu and find a match called net.customware.gwt.dispatch, double-click the latest version and the entire package willbe added to our pom. Now we do the same for the gwt-presenter project whichwill help us structure our project in the GWT MVP pattern and find that it isthe same provider for both of them as they are meant to work together. When wesave the pom file the jars we just requested will be downloaded for us and placedin the Maven Dependencies jar folder. We can now clean up the project fromerrors, removing the language related code and the references to the asynchronousimplementation which would have been created for us at runtime, as we want to usethe gwt-dispatch method instead. To be able to use dependency injection withinour project we need to also depend on the Gin library provided by Google. Thisdependency will be specified as com.google.gwt.inject in our pom and we will useversion 1.5.0.Before we begin structuring everything, we want to be able to start the modulestand alone for testing and development and for this we need an entry-point class.The entry-point class contains the method onModuleLoad() and its function is toact as Java’s main method but for GWT. Here we request the presenter via Ginand bind and display its display on the root panel of our html, creating the widgeton an empty page. When we want to integrate the widget with the final product weneed another module without an entry-point specified and for these two separateconfigurations we use different module-gwt-xml files. These files functions a lot likedependencies in Maven, specifying every other module this module depends uponand this file is used when importing this module into other encompassing modules.In the base module XML file we inherit our dependencies for the core libraries weuse and not specify an entry-point, while in the entry-point XML we will inheritthe base module and specify an entry-point keeping the separate configuration to aminimum, seen in Figure 6.5.

Now we have all the necessary libraries for implementing the client server com-munication according to the patterns we are investigating and can begin structuringour project around all these patterns. This next part requires us to do extensivere-factoring of our project and add many new files, which of none will compile untileverything is linked up and connected properly. This will take a long time whendoing it for the first time since the myriad of patterns in play are not entirely trivialto set up. The more you read and understand about the individual patterns the

27

Page 34: Evaluating Large Scale Modular Web-Based Application Development

CHAPTER 6. METHOD

Calendar.gwt.xml

<?xml version="1.0" encoding="UTF-8"?>

<module>

<!-- Inherit the core Web Toolkit stuff. -->

<inherits name="com.google.gwt.user.User" />

<!-- Inherit the UiBinder stuff. -->

<inherits name="com.google.gwt.uibinder.UiBinder" />

<inherits name="com.google.gwt.user.theme.standard.Standard" />

<!-- Dependency Injection -->

<inherits name="com.google.gwt.inject.Inject" />

<!-- Inherit gwt-presenter -->

<inherits name="net.customware.gwt.presenter.Presenter" />

<!-- Inherit gwt-dispatch. -->

<inherits name=’net.customware.gwt.dispatch.Dispatch’ />

<!-- Specify the paths for translatable code -->

<source path="client" />

<source path="shared" />

</module>

CalendarEntryPoint.gwt.xml

<?xml version="1.0" encoding="UTF-8"?>

<module rename-to="Calendar">

<!-- inherit all the required things for the calendar -->

<inherits name="se.synergica.myte.calendar.Calendar" />

<!-- class containing onModuleLoad() for stand-alone entry-point usage -->

<entry-point class="se.synergica.myte.calendar.client.Calendar" />

</module>

Figure 6.5: The base gwt.xml on top, entrypoint gwt.xml below

easier it will become to see the pros of using them together, nonetheless it requirestime and study to be able to incorporate them without help.

6.5.1 Introducing the Patterns

We’ll begin with introducing the Model View Presenter pattern on the client-sidebecause this is the most fundamental pattern we will use. When starting our entry-point for the module we use the entry-point class to initiate and "bind" our modules,more on bindings later, the entry point class acts as a basic application starter. Herewe will create our topmost presenter-view and attach that to the root-panel of thehtml page that acts as a container for our module. But before we can add andbind we need to create the presenter and view files. Since I needed a wrapper forthe different calendar views my topmost element became the CalendarWrapperP-resenter which is displayed by the corresponding CalendarWrapperView. The classextends WidgetPresenter which is an abstract GWT presenter class found in thegwt-presenter package we added via Maven. The parameter is our own displayinterface we specify within this class, the CalendarWrapperPresenter.Display. Byextending this class we get are forced to implement the onBind(), onUnbind() and

28

Page 35: Evaluating Large Scale Modular Web-Based Application Development

6.5. EXECUTION

public class CalendarWrapperPresenter extends

WidgetPresenter<CalendarWrapperPresenter.Display> {

public interface Display extends WidgetDisplay {

}

public CalendarWrapperPresenter(Display display, EventBus eventbus) {

super(display, eventbus);

}

protected void onBind() {

}

@Override

protected void onUnbind() {

}

@Override

protected void onRevealDisplay() {

}

}

Figure 6.6: CalendarWrapperPresenter.java

onRevealDisplay() abstract methods we get from the superclass of the WidgetPre-senter class, the BasicPresenter. "Binding" is the process of initializing all handlersand configuration for that specific widget presenter and is called via the bind()method in BasicPresenter. The unbind() method provides us with a safe way ofremoving our handlers when we remove the widget again and also calls onUnbind()method for specilized configuration at removal. The method onRevealDisplay() iscalled when the widget is attached to the page.The display interface will be implemented by our view class and here we will specifyall the possible interactions the presenter can have with the view. We will use inter-faces as return types to be able to freely change the components in the view amongstthose that implement the same interfaces. Take for example a button which turnsa section of the page red. If we specify this as;

public interface Display extends WidgetDisplay {

public Button getRedButton();

}

we need to change this interface if we want to exchange it for a HyperLink insteadsince there is a type conflict. But if we specify the method in the interface as;

public interface Display extends WidgetDisplay {

public HasClickHandlers getRedChanger();

}

we can change the object in the view to any object that implements HasClick-Handlers, for example Anchor, Button, ButtonBase, CheckBox, CustomButton orHyperlink. The Display needed as an argument is our own display which will beused within this class to retrieve objects from the view before interacting with them.We should also get used to register our handlers so that the unbind() function au-tomatically removes them on unbinding of the module.

29

Page 36: Evaluating Large Scale Modular Web-Based Application Development

CHAPTER 6. METHOD

protected void onBind() {

registerHandler(display.getRedChanger().addClickHandler(

new ClickHandler() {

public void onClick(ClickEvent event) {

//Change to red.

...

}

}));

}

The EventBus is a application-global bus that enables different presenters to listento and fire events across the entire application.Now that we have specified a method we need to create our view. As said earlierthe view implements the display interface located in our presenter and require usto implement its methods. This class also extends Composite which is encapsulatesa Widget.

import {...}.client.wrapper.CalendarWrapperPresenter.Display;

...

public class CalendarWrapperView extends Composite

implements Display {

Button button;

public CalendarWrapperView() {

button = new Button("Red");

button.setSize("80px", "60px");

}

@Override

public HasClickHandlers getRedChanger() {

return button;

}

}

This way of building user interfaces is a bit outdated and there are many more com-pelling alternatives than old-school Java swing code where you have to program-matically set sizes and such. One of these is the UiBinder method which connects adeclarative layout in HTML, which can contain entire GWT widgets, with the view.You can declare your own xmlns link on the top to import your own custom widgetsto the ui.xml file, this file contains the uibinder link represented by "ui" and thestandard gwt widget library link represented by "g". We can style the elements withcss directly in the uibinder-file by linking them with styleName="style.buttonstyle"eliminating the need to style them in Java. Since we are working with web thisapproach feels more appropriate and makes it easier both to change things and to"see" the layout a bit more. This does requires some changes in the view and weneed to add UiBinder as a inheritance in the gwt.xml file if we have not done soyet;

<inherits name="com.google.gwt.uibinder.UiBinder" />

The view-changes needed can be seen in the modified View code below and whileit might look confusing it is just a local interface extending a UiBinder class ofwhich an instance is then produced with GWT.create(). GWT.create is a special

30

Page 37: Evaluating Large Scale Modular Web-Based Application Development

6.5. EXECUTION

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"

xmlns:g="urn:import:com.google.gwt.user.client.ui">

<ui:style>

.buttonstyle {

height: 60px;

width: 80px;

}

</ui:style>

<g:FlowPanel>

<g:Button styleName="{style.buttonstyle}"

text="Red" ui:field="button" />

</g:FlowPanel>

</ui:UiBinder>

Figure 6.7: CalendarWrapperView.ui.xml

GWT function which is needed when working with GWT since the many differentcompilations that are produced with the GWT compiler has some special quirks.This feature is called deferred binding. The CalendarWrapperUiBinder object isthe initialized in the constructor and it searches for the current class name as aui.xml file in the current directory, which is why it is important that the view anduibinder-file have the same names. The elements we wish to link into the Java classhas to be annotated with the tag @UiField so that the parser can correctly connectthe elements together. Now we can do all our styling in pure css and just handlethe functionality in Java.

import {...}.client.wrapper.CalendarWrapperPresenter.Display;

...

public class CalendarWrapperView extends Composite

implements Display {

interface CalendarWrapperUiBinder

extends UiBinder<Widget, CalendarWrapperView> {

//Empty

}

private static CalendarWrapperUiBinder uiBinder =

GWT.create(CalendarWrapperUiBinder.class);

@UiField

Button button;

public CalendarWrapperView() {

initWidget(uiBinder.createAndBindUi(this));

}

@Override

public HasClickHandlers getRedChanger() {

return button;

}

}

31

Page 38: Evaluating Large Scale Modular Web-Based Application Development

CHAPTER 6. METHOD

Let’s switch over to the presenter again and take a look at dependency injection.Dependency injection with Gin is specially made for use with GWT applicationsand the thought behind it is to move the creation of objects required for a class tofunction outside of the class itself. This way the class knows what it needs and weuse the dependency injection pattern to supply a implementation of that require-ment when the object is being created. This enables us to change implementation ofthe provided object via outside wiring without having to notify the created objectof the change.

public class CalendarWrapperPresenter extends

WidgetPresenter<CalendarWrapperPresenter.Display> {

public interface Display extends WidgetDisplay {

}

private CalendarSevenDayPresenter calendarSevenDayPresenter;

@Inject

public CalendarWrapperPresenter(Display display, EventBus eventbus,

CalendarSevenDayPresenter calendarSevenDayPresenter) {

super(display, eventbus);

this.calendarSevenDayPresenter = calendarSevenDayPresenter;

}

protected void onBind() {

calendarSevenDayPresenter.bind();

registerHandler(display.getRedChanger().addClickHandler(

new ClickHandler() {

public void onClick(ClickEvent event) {

//Change to red.

...

}

}));

}

@Override

protected void onUnbind() {

}

@Override

protected void onRevealDisplay() {

}

}

We add whatever module we think we will need in the argument-list in the construc-tor and annotate the constructor with @Inject which signals to Gin that it shouldlocate the appropriate implementations for all the arguments when constructingthis object in the future. To help Gin along the way in between all the presenters,views and displays we need to map up which should be provided where. This isdone with the help of ginmodules and ginjectors. Ginmodules is in charge of themapping between interfaces and implementations and the Ginjector acts as the firststepping stone when introducing your topmost module in the app-starter. A gin-jector is not needed for the sub modules as we can include their ginmodules in themain ginjector interface and have them be configured that way.

@GinModules( { CalendarGinModule.class })

32

Page 39: Evaluating Large Scale Modular Web-Based Application Development

6.5. EXECUTION

public interface CalendarGinjector extends Ginjector {

CalendarWrapperPresenter getCalendarWrapperPresenter();

}

public class CalendarGinModule extends AbstractPresenterModule {

protected void configure() {

bind(EventBus.class).to(DefaultEventBus.class)

.in(Singleton.class);

bindPresenter(CalendarWrapperPresenter.class,

CalendarWrapperPresenter.Display.class, CalendarWrapperView.class);

bindPresenter(CalendarSevenDayPresenter.class,

CalendarSevenDayPresenter.Display.class, CalendarSevenDayView.class);

}

}

We will now use the Ginjector inside our entry-point class to retrieve our firstpresenter which will in turn inject and initilize all the sub-modules.

public class Calendar implements EntryPoint {

private final CalendarGinjector ginjector =

GWT.create(CalendarGinjector.class);

public void onModuleLoad() {

CalendarWrapperPresenter calendarWrapperPresenter =

ginjector.getCalendarWrapperPresenter();

calendarWrapperPresenter.bind();

RootPanel.get().add(calendarWrapperPresenter.getDisplay().asWidget());

}

}

Too explain a little behind the reasoning for using the injection pattern instead ofusing new everywhere let us try an analogy. Lets say we have a class Mixer thattakes an object in its constructor and when the function powerOn() is called theMixer calls mix() on the object provided in the constructor. The Mixer knows thatit should mix the object it gets injected with but it does not know the resultingjuice, that will be regulated with the object we provide, be it an Apple or an Orangeobject. Outside configuration affects the end result with the Mixer just doing its job.

Finally we will incorporate the gwt-dispatcher in our presenter for client-servercommunication with serializable objects. Now that we are using dependency injec-tion we will add a DispatchAsync in the constructor and include the StandardDis-patchModule available in the gwt-dispatcher package in our ginjector, which willbind DispatchAsync to an implementation of StandardDispatchAsync. All of thiscan be customized extensively, with building our own DispatchAsync class and hav-ing multiple servlets running simultaneously, but that is not in the scope of thisproject.

private final DispatchAsync dispatcher;

@Inject

public CalendarWrapperPresenter(Display display, EventBus eventbus,

33

Page 40: Evaluating Large Scale Modular Web-Based Application Development

CHAPTER 6. METHOD

DispatchAsync dispatcher, CalendarSevenDayPresenter

calendarSevenDayPresenter) {

super(display, eventbus);

this.dispatcher = dispatcher;

this.calendarSevenDayPresenter = calendarSevenDayPresenter;

}

@GinModules({ CalendarGinModule.class, StandardDispatchModule.class })

We will need an implementation of a dispatch servlet on the serverside to handleour asynchronous requests from the client. For simple cases we can use the Sim-pleDispatchServlet available in the example in gwt-dispatch’s documentation. Herewe register our handler so that it catches actions intended for it and returns theappropriate result.

public class SimpleDispatchServlet extends RemoteServiceServlet

implements StandardDispatchService {

private Dispatch dispatch;

public SimpleDispatchServlet() {

InstanceActionHandlerRegistry registry =

new DefaultActionHandlerRegistry();

registry.addHandler(new OurHandler());

dispatch = new SimpleDispatch(registry);

}

public Result execute(Action<?> action) throws DispatchException {

try {

return dispatch.execute(action);

} catch ( RuntimeException e) {

log( "Exception while executing " +

action.getClass().getName() + ": " +

e.getMessage(), e );

throw e;

}

}

}

We need to be able to communicate with the CalDAV server from our backend and for that we need some way of connecting Java to CalDAV. After someresearch I found a project supplying this service on Google code and it is calledcaldav4j. Caldav4j is, at the time of writing, not available through the standardMaven repository so we need to add a remote repository as a dependency to be ableto access the caldav4j project through Maven. This is done with the repositories tagas shown earlier when discussing the pom file. Caldav4j has classes helping us withbuilding the queries for our CalDAV server and implements all the functionalityas descried in the CalDAV specification[13]. This library enables us to connect toand interact with calendars and events stored on our server. When working on theserver side and while not having to worry about ui-elements we can make full useof the EasyMock framework for testing our methods that will send and retrieve thedata from the server. With Easymock we can mock the requested results from the

34

Page 41: Evaluating Large Scale Modular Web-Based Application Development

6.6. PERFORMANCE

server and thus test just the functionality of one methods, one at a time, withouthaving to have a fully operational server already in place. This enable us to usesmall, fast unit tests without network connectivity within continuous integrationtools that continuously test our code on commits or specified times of the day.

With this final addition we can start building our application. With all thesepatterns in mind we use standard Java to add functionality while doing all thestyling in HTML-like environments with CSS. This feels familiar to everyone thathas worked with web before which makes it easy to work with. The patterns iswhat really brings complexity to the ordeal and that can set back the project quitesome while at first. Some of GWTs standard widgets, like the Horizontal- andVerticalPanels, generates tables when compiled which creates clutter in the result-ing HTML. Nestling such elements make for complex and confusing HTML aftercompilation. The rest of the implementation pertains to mostly standard program-ming problems and does not contribute valuable information to understanding andevaluating the frameworks.

6.6 Performance

Due to the project taking longer than expected making a thorough testing of theperformance of the frameworks have not been carried out. The fact that the serverwill be stateless speaks for the fact that simultaneous usage will not be a problem.Stateless server does not depend on previous results to answer requests from usersbut will handle all requests individually. That GWT uses deferred bindings withinthe code results in optimized JavaScript code for the user’s preferred browser andthis helps reduce the bandwidth. The browser also caches the version it has re-quested which speeds up further request since the uses does not have to downloadthe entire application again. Since we want the module to function standalone weshould host the CalDAV server separately. This will require us to minimize thetime requests between the GWT server and CalDAV server take to execute. Thedifferent browser most popularly used today range in their effectiveness of executingJavaScript and old browsers can struggle with heavy JavaScript applications. Theframeworks in themselves, when combined, provide quite a large overhead in theJava-code but this is then highly optimized by the GWT compiler producing a verycompact JavaScript end-product.

6.6.1 Scalability

If the server load rises above reasonable levels the statelessness of our server providesus with the option of simple load-balance between several machines running thesame service.

35

Page 42: Evaluating Large Scale Modular Web-Based Application Development
Page 43: Evaluating Large Scale Modular Web-Based Application Development

Chapter 7

Results and Conclusion

7.1 Results

I have built a prototype calendar module for the MyTE web application usingGoogle Web Toolkit. I have incorporated current design pattern which are supposedto help companies develop stable, scalable and modular applications. The scopewas reduced during development to not include the use of Spring or Hibernate sincesimilar solutions where already present in open-source libraries which may be usedin future development on the module. To realise the MVP pattern I used gwt-presenter and gwt-dispatch providing modularity and serializable communicationwith the server respectively. The dependency injection for the GWT applicationwas done with Google Injection, Gin. I used UiBinder for structuring the visualcomponents of the module in HTML instead of using Java to programmaticallybuild the user interface.

7.2 Conclusion

The frameworks in themselves all provide a new take on old problems and try tosolve these problems in a better way. They all use their own special syntax foraccomplishing their tasks and this can get overwhelming when trying to start fromscratch. The learning curve is pretty steep and one almost needs to see the problemsthe patterns are trying to solve before realizing the potential and gain from usingthem. There are useful tutorials provided for most of the patterns so newcomers cancopy and paste their way to a functioning application without really knowing the insand outs of the solutions provided to them. I believe that understanding the toolsis as much a part of crafting as using them and understanding should therefore beencouraged when introducing new personnel to the patterns. Developing withoutunderstanding makes developing difficult.

37

Page 44: Evaluating Large Scale Modular Web-Based Application Development
Page 45: Evaluating Large Scale Modular Web-Based Application Development

Bibliography

[1] Borys Burnayev. How to upgrade spring security 2 to spring security 3.http://blog.burnayev.com/2010/04/how-to-upgrade-spring-security-2-to.html.

[2] JBoss Community. Documentation - hibernate.http://www.hibernate.org/docs.

[3] JBoss Community. Hibernate3 - migration guides.http://community.jboss.org/wiki/Hibernate3MigrationGuides.

[4] EasyMock. Easymock. http://easymock.org/.

[5] EasyMock. Easymock 3.0 readme. http://easymock.org/EasyMock3_0_Documentation.html.

[6] Apache Foundation. Maven - welcome to apache maven.http://maven.apache.org/index.html.

[7] Eclipse Foundation. Eclipse documentation.http://www.eclipse.org/documentation/.

[8] Google. Google web toolkit. http://code.google.com/intl/sv-SE/webtoolkit/.

[9] Google. Gwt javadoc 1.5. http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/index.

[10] Google. What’s new? http://code.google.com/intl/sv-SE/webtoolkit/overview.html.

[11] Jeffrey S. Hammond, Carey Schwaber, and David D’Silva. Ide usage trends,02 2008.

[12] JBoos Community Hibernate. License - hibernate.http://www.hibernate.org/license.

[13] IETF. Calendaring extensions to webdav (caldav).http://www.ietf.org/rfc/rfc4791.txt.

[14] mark at ociweb dot com. Gwt - who’s using it?http://www.ociweb.com/mark/programming/GWT.html#WhoIsUsingIt.

[15] T. Reenskaug. Models-views-controllers. Technical note, Xerox PARC, Decem-ber, 1979.

39

Page 46: Evaluating Large Scale Modular Web-Based Application Development

BIBLIOGRAPHY

[16] SpringSource.org. Spring security - documentation.http://static.springsource.org/spring-security/site/reference.html.

[17] OSS Watch. Oss watch - the eclipse public license.http://www.oss-watch.ac.uk/resources/epl.xml.

[18] Wikipedia. Gnu general public license.http://en.wikipedia.org/wiki/GNU_General_Public_License.

[19] Wikipedia. Object relational mapping - wikipedia.http://en.wikipedia.org/wiki/Object-relational_mapping.

[20] Wikipedia. Premissive free software licensing.http://en.wikipedia.org/wiki/Permissive_free_software_license.

40

Page 47: Evaluating Large Scale Modular Web-Based Application Development

TRITA-CSC-E 2011:104 ISRN-KTH/CSC/E--11/104-SE

ISSN-1653-5715

www.kth.se