Monday, September 2, 2013

Build Library Manager using mgwt : Requirements and why mgwt ?



In the previous blogposts we have seen how to create mgwt and cordova projects and configure them in Android and iOS environments.

I was thinking about a demo mobile app for this blogpost series,and I thought library manager would be a good one.It is a perfect utility app and also we can develop it as a hybrid app. As we discussed in earlier blogposts, hybrid apps are best suitable for productivity and utility apps.

I read a lot, and there are my family members and colleagues who share the same passion.We normally share books, and so times we end up buying same books.So I thought developing a library manager which keeps track of the books read, books which I wish to read would be a good use case for this demo app.

Library Manager Requirements


  • The high level requirements for this library manager demo app are:


      1. App will display all the books that
      2. I own.
      3. I borrowed.
      4. I read.
      5. I wish to read.


  • App will allow the users to add new books with the following information.


      1. Book Title
      2. Author name
      3. Publisher
      4. Category
      5. Edition
      6. ISBN Code
      7. Book Type
      8. Status
      9. Recommendation
      10. Feedback



  • Users will also be able to modify the book information.


  • The below mock ups are self descriptive of the functionalities we want, but we may take the liberty of deviating a little bit from these mock ups if required.


  • Now we know the requirements of the app we want to build and so let us decide on the technology stack or the frameworks we would use to build this app.


  • Since we have decided on using Apache Cordova, the final deployable code needs to be in javascript. But coding bigger apps in javascript is not easy. 
  • Javascript is an interpreted programming language with dynamic typing. While it is fast, developers lost all the advantages of a static,strong and safe languages like Java.And javascript doesn't have good tool support like Java or .Net had.
  • Wouldn't it be great if we can combine the best of javascript with the best of static, strong and object oriented languages. Yes ? 


  • If you are some one like me, who is trying to web development from java experience. The options seem to be few.


JSF:


Pro


  • Creating facelets xhtml components is simple, which promotes re-use.
  • Decent templating abilities using built in tags like ui:insert, ui:include, and ui:decorate
  • Simple access to Spring beans through faces-config
  • XHTML based so web developers unfamiliar with java can still be effective
  • Allows get requests and bookmarking
  • Has built in Ajax support

Con


  • But if you want exquisite javascript behaviour, you'll have to write some javascript
  • JSF tracks the current UI state in client or server-side. This is a tradeoff between network traffic or server memory.


GWT


Pro


  • If you are a Java Programmer with experience in Swing or AWT, then there is bare minimum learning curve to start using GWT. Even if you don't have UI development experience using Java, you can still work on the server side components.
  • The major work is done on the client side, and so the response of the servers will be better.GWT follows the concept of stateful client and stateless server.
  • It takes care of all the cross browser compatibility issues.
  • There is good IDE support for GWT since you code in java, and there are a good number of IDE's for java. Eclipse, IntellJ Idea and Netbeans, all major Java IDE's support GWT framework explicitly. With this you have all the advantages of using an IDE, like refactoring, Debugging, auto complete code, syntax help, compilation errors etc.
  • The code is written in Java and GWT compiler compiles it into JavaScript. And GWT compiler can consistently generate a code which is optimized for specific browsers. Say if you want to run your web app on IE9, then there is specific permutation available while compiling which produces the best possible javascript for that browser. GWT compiler also ignores the unwanted dead code and also obfuscates the javascript.
  • There is an inbuilt browser back button support even with Ajax.
  • You can use the available unit testing frameworks like JUnit and TestNG for unit testing.
  • You can use all the helpful java tools like FindBugs, CheckStyle PMD etc which helps you in monitoring the code quality.

Con:


  • With lot of advantages on its favor, GWT has also few disadvantages against it
  • The GWT compilation is very slow. But you wouldn't do compilation very often since it GWT compilation requires only during production deployment. During the development, you can use Dev mode which works on refreshing the screen without compiling the app.
  • The GUI widgets are limited, and the advanced UI widgets are not available directly.You will need to extend the frame work to create the widgets you require, or integrate external widgets. Sencha and Vadding provide excellent UI widgets on top of GWT.


  • The widgets for mobile are not available.


GWT on Mobile 



  • mgwt is a mobile gwt framework developed by Daniel Kurka, who is also a member of GWT steering committee,and the source is open sourced.
  • mgwt is built on top of gwt and so all the advantages in GWT will still be available.
  • mgwt provides lots of mobile widgets and animations which are required for developing mobile applications.
  • mgwt works with GWT designer and UI Binder. There are different themes for iPhone, iPad, Android Phones, Android tablets. So the look and feel of the app which change based on the device the app is running on.
  • mgwt provides touch event and animation event support on top of GWT. Mouse input and finger touch are considered in the same way and so you can run the code on the desktop browser and check for issues before actually running it on mobile browsers.
  • mgwt adds touch event support and animation event to GWT by adding a custom DOM implementation. Mouse input is treated as one finger touching the device, so you don´t have to write code to handle both mouse and touch.
  • Most of the styling,layouts and animations in mgwt is done using more css and no graphics. So the size of the app is small, there by reducing the start up times or loading time.
  • The useful features of GWT like Model-View-Presenter architecture, Deferred binding and client Bundles are supported by mgwt and so GWT compiler can produce the most optimized code of your app.
  • During the compilation, GWT compiler can remove the unwanted css. So the application performance will be fast.


These advantages make me believe that mgwt is the apt for the app we intend to build. So we will start building the app using mgwt. As and when I encounter new information, I will be writing about that.

In the next blogpost I will start creating the UI as per the mock ups.


2 comments:

  1. Very nice post! I am looking forward to see how mgwt and Apache Cordova works together. I started developing an mgwt app 3 month ago and I am very impressed from its performance! Every good tutorial strengthens the project and the community...

    ReplyDelete
  2. Hello

    In your post you said mgwt has support for uibinder and gwt designer. do you have some info about how to support mGWT in GWT Designer? We are trying from different ways, but it seems our release of GWT Designer doesn't support mGWT.

    Any references will be very appreciated.

    Thanks in advance

    ReplyDelete