Is GWT Dead, Dying or Thriving?

So I haven't written about GWT for several years, apologies.  Apart from the birth of my new baby twin boys, (2 years ago) I haven't had much spare time, or frankly the inclination to write about GWT.  Why?  Well I am just not that enthused about the platform anymore.  As a software engineer you are always conscious whether you are using the best tool for the job, it is on your mind constantly.  You are constantly bombarded with forum discussions, technology posts, how-to videos, conferences, product releases.  All building a narrative of what is the best and most current technology to use.  A lot of these are gumpf, but some are enlightening.

GWT used to enlightening.  I was coming off 5 years of Microsoft development and I was wowed by the GWT SDK.  It did so much.  I could write client code in the same language as my server.  It would compile to that horrid Javascript language for me and also take account of all browser differences.  WOW.   I had just about had it with IE.  Internal thought GWT means never having to deal with IE again. Sign me up!

GWT was good.  It was refreshing.  It was new.  Google IO 2010 was all about GWT.  The only Google IO I have ever been to was confirming all my suspicions about GWT.  They built ADWORDS with it, for god sake.  Google loves it.  I love it.  Lets jump in.  And then it happened.  I built something large with GWT.   9 minute compile time? Hmmmm.... ouch.

For years we have been constantly reminded about how the compile time will speed up.  About how it is constantly being adjusted and improved.  Which is nice.  It's nice to know that it's a problem for others.  I guess maybe I should have been thankful for my 9 minute compile, as it could have been 20 minutes.

The web moves fast and so does this engineer.  I have been using Angular for the last 4 years and it is clear that the leap in productivity I experienced from moving to GWT from legacy web dev, has been achieved again by moving to Angular 1.XX and now Angular 2.XX.  This will be the last post on GWT.  I wish it all the best in the future and hope it rests in peace quickly.  Goodbye GWT - You were briefly awesome.

GWT-Tour - Awesome GWT guided tour functionality.

GWT-Tour is a GWT library to make it easy for developers to add product tours to their pages. GWT-Tour accepts a Tour object as input and provides an API for the developer to control rendering the tour display and managing the tour progress.

Framework website - http://eemi2010.github.io/gwt-tour/

Dart with GWT

5 Tips learned from building an large GWT application with Apptegic

I should really start with an apology.  For the past year or so I have been working at a fantastic startup and have really let my blog submissions slide.  So to the three people that have been sitting on the edge of your seats, I apologize.

So where have I been?

UNLOCK CUSTOMER USAGE DATA, DRIVE CUSTOMER SUCCESS
www.apptegic.com

In November 2011 I interviewed for a company called Apptegic.  A Boston based tech start-up that is helping businesses unlock their customer behavioral data to measure engagement and reduce churn.  There is a lot to that last sentence so lets break it down.

Unlocking behavioral data relates to how Apptegic integrates with your site and leverages data so you can understand what your customers are doing.  Using a customizable piece of javascript customer information is sent including user and account, coupled with any custom field key-value pair you want to record.  This information is processed and using our analytics platform you can view what your customers are, and sometimes more importantly, are not doing.

Engagement is a customizable measurement based on  key data, such as visit, user performed actions, and business information.   The measurement helps answer common key questions all web based businesses have:  How engaged your users?  How does this engagement change over time? Has engagement changed after releasing new features?

Reduce Churn:  A wise woman once said: "it is easier and more cost effective to retain a customer than to go find a new one".  Apptegic helps reduce churn by helping you understand what your customers are doing but also offers one distinct and important advantage.  Behavioral based messaging.   This is the killer feature, in my humble but biased opinion, whilst the user is in the application, and in real time, you can display messages based on their usage behavior.  The traditional model is to analyze stats the next day, build an email campaign based on usage, then send out an email two days later.  Ours is to collect metrics in real time, display relevant message whilst you are in the application, and increase your engagement with the product.  By informing you with relevant information we can prevent you from losing that customer - churning.

Using Google Web Toolkit at Apptegic

At Apptegic we have built a large scalable application using common techniques recommended by the GWT community.  Below are five tips that I would recommend to anyone building a large scale GWT application:

Tip 1: Scalability built-in

If you aren't using a design standard to build your application you are going to run into problems when you scale your application.  You'll end up in a spaghetti highly-coupled mess.  Believe me I have been there.  For GWT I recommend GWTP.  The guys over at GWTP are great.  Over the past several years they have built a mature useful MVP implementation for GWT.  I have used it on several products now and it just keeps getting better with time.  I will leave their own marketing to help with the promotion.  Grab the framework over at GitHub:  https://github.com/ArcBees/GWTP

Tip 2: Decouple, decouple, decouple
Use the Dependency Injection design pattern.  Separate all of your concerns into logical entities then when you need them inject them as a dependency via the constructor or autowiring a variable.  For GWT the only choice is to use Google's GIN framework.  If you know Spring DI it is the GWT client equivalent of @Autowired.
http://code.google.com/p/google-gin/

Tip 3:  Helping the UI
GWT Query is basically a JQuery implementation for GWT.  It has lots of helper methods for direct dom manipulation, binding events and animations.  We found it to be great at writing succinct code that achieves a great deal.  In addition it has an active plugin community which build various beautiful UI components.  We use their draggable implementation and a fantastic looking combo box called GWT Chosen.  Check out the GWT Chosen demo page its awesome.

GWT Query: http://code.google.com/p/gwtquery/

GWT Query Plugins: http://code.google.com/p/gwtquery-plugins/

GWT Chosen: http://jdramaix.github.com/gwtchosen/

Tip 4: Be careful when selecting Smart GWT

I am am split on SmartGWT.  The widgets that come with GWT are woefully short of being fully featured.  With SmartGWT you get fully featured widgets that are more difficult to customize visually.  The problem lies in being able to mix the two.  It is well documented that mixing SmartGWT with regular GWT widgets is not supported and from experience is painfully difficult to achieve successfully.  My guideline would be:  If you are building an internal product that requires a full feature set but you don't want to customize visually;  or perhaps you are trying to prototype an idea and wan't to get something up and running quickly; then go with SmartGWT.  If however you want to build a customer facing beautiful SaaS application then I would use native GWT and pick certain SmartGWT widgets selectively.

Tip 5:  Build-in Customer Usage Analytics

If you are building a customer facing website and you want to understand how your users are utilizing your product.  Then build-in analytics from the ground-up.  As I am biased I will of course be recommending our own product - Apptegic.  There are alternatives, so go check out the competition I am confident that you will like what Apptegic is offering.

UNLOCK CUSTOMER USAGE DATA, DRIVE CUSTOMER SUCCESS

CSS3 Transitions and Transforms with Dart

Dart is the "new" web language for building concise, complex and professional applications.  As an avid GWT fan this is probably where GWT is heading, so I feel a need to get-up-to-speed in this area.  Experiment 1 - Try CSS Transitions and Transforms.  See code below:

#import('dart:html');

num rotatePos = 0;

var textElement;

var moveMe = false;

void main() {

  query("#text").text = "Click me!";

  textElement = query("#text");

  query("#text").on.click.add(fadeOutElement);

  query("#text").on.doubleClick.add(fadeInElement);

  query("#buttonMove").on.click.add(moveElement);

  query("#buttonRotate").on.click.add(rotateElement);

  query("#buttonRotateAndMove").on.click.add(rotateAndMoveElement);

}

void rotateAndMoveElement(Event event) {

  rotatePos += 360;

  Element element = textElement;

  

  String moveMeTransform = getMoveMeTransform();

  element.style.transition = "1s";

  element.style.transform = "${moveMeTransform} rotate(${rotatePos}deg)";

}

void rotateElement(Event event) {

  rotatePos += 360;

  Element element = textElement;

  element.style.transition = "1s";

  element.style.transform = "rotate(${rotatePos}deg)";

  

}

void moveElement(Event event) {

  rotatePos += 360;

  Element element = textElement;

  element.style.transition = "1s";

  element.style.transform = getMoveMeTransform();

}

void fadeOutElement(Event event) {

  rotatePos += 360;

  

  Element element = event.srcElement;

  

  element.style.transition = "1s";

  element.style.opacity = "0.2";

  element.style.transformStyle = "opacity(ease-in-out)";

}

void fadeInElement(Event event) {

  rotatePos += 360;

  Element element = event.srcElement;

  element.style.transition = "1s";

  element.style.opacity = "1";

  element.style.transformStyle = "opacity(ease-in-out)";

}

String getMoveMeTransform() {

  moveMe = !moveMe;

  if (moveMe) {

    return "translate(-100px,0px)";

  } else {

    return "translate(100px,0px)";

  }

}

Dart and GWT Videos from Google IO 2012

Google I/O 2012 - Dart - A Modern Web Language

Migrating Code from GWT to Dart

Putting the App Back into Web App - Web Programming with Dart

Google I/O 2012: Dart- A Modern Web Language (Video)