Gmail for iOS Hybrid implementation

Google recently released its new Gmail app for iOS and got the web excited about the possibly rebranded Sparrow client that Google bought back in july.

I’ve downloaded the new client and it really is a big improvement from the last version, but still something was a bit off…

The first thing I noticed was a strange pixelation when zooming in on the content of a message:

Gmail for iOS - Blurry Text
Gmail for iOS
Apple Mail.app - Crisp Text
Apple Mail.app

Compared to Apples Mail.app Gmail does a pretty bad job, strange.

Having seen that I decided to explore further. Looking at the default message view you’ll guess the message content is displayed using UIWebview, nothing special, but playing around with the UI elements revealed the following:

Selectable UI Elements

The Toolbar is selectable, a clear sign it was implemented using a UIWebView. This repeats itself in other UI elements across the app:

Another Example of Selectable UI Elements

At this point I fired PhoneView and copied the Gmail app to my machine. The app was named GmailHybrid.app so I had a good feeling about it using UIWebview :)

Inside the app bundle you’ll find a list of JavaScript files, including one interestingly named: GIPSuperWebViewInit.js

You’ll notice the initialization of an iframe, and the dispatch function used for communication with the native portion of the app.

Some other JavaScript files included in the Gmail app bundle are:

  • GIPSuperWebViewActionMenu.js
  • GIPSuperWebViewGps.js
  • GIPSuperWebViewMediaPicker.js
  • GIPSuperWebViewNetworkActivity.js
  • GIPSuperWebViewRpc.js
  • GIPSuperWebViewSpeech.js
  • GmailNativeMessagingBridge.js
  • GmailTopToolbarMessagingBridge.js

A mix of UI elements (e.g. GmailTopToolbarMessagingBridge.js) and Hardware related functionality like the GPS or Speech recognition.

Most of the talk around the web about the new app mentions the new “native” implementation, but as you can clearly see It’s not a fully native app, but a hybrid app with carefully crafted web elements.

Google made a big effort with its Hybrid implementation to give users a native-like experience while maintaining the flexibility web development gives you in terms of remote update etc. Although not perfect, it’s one of the best hybrid apps I’ve seen in a long time.

Let’s hope this trend continues and gives developers and users the best of both worlds.