Outlook Online & Google Mail for developers – What’s the difference?

We’ve previously explored the different options for developing gadgets for Gmail as well as what options are available to developers to create apps that run on both the desktop and web editions of Microsoft Office. The two platforms are very different and offer varying degrees of customizations.

In this article we’ll assess the differences between the two platforms as well as what we’ve learned so far.

• Extensibility
• Solution architectures & object models
• Gmail gadget store vs. Office Apps store

Extensibility

Let’s see what Microsoft and Gmail have to offer in terms of extensibility.

Outlook Online

Outlook Online offers developers the same amount of freedom when it comes to designing their user interfaces as Word and Excel Online. Microsoft encourages the use of the jQuery library, by automatically including a reference to it when creating a new Mail App. This is not necessarily a bad thing, since jQuery is one of the most popular JavaScript libraries on the internet and it does make manipulating the DOM much easier – especially for developers that are new to web development.

Outlook Mail Apps offers two choices when it comes to building user interfaces:

• Read apps
• Compose apps

Read apps are comparable to Gmail’s contextual gadgets, and are activated when a user opens an e-mail. All read apps are listed at the top of the message body and are activated by clicking on a name. In the following image, two mail apps are displayed at the top of the message body:

• My Cool App
• ADX Answers

Compose apps have been introduced in the second release of the Office apps platform and was something I neglected to mention in my previous blog post about Creating Outlook Apps. I am excited about compose apps, since this is the first step in getting closer aligned with the desktop programming model of Office. Compose apps are analogues to Office Task Panes as it is displayed on the right-hand side of the e-mail or appointment compose windows.

A compose app is activated by clicking on the APPS button inside the compose window, this will open a side bar with which the user can select the app to use for the specific message. In the following image, we clicked on the APPS button and the app selection side bar is displayed, listing two available apps:

Clicking on an app name, activates the specific app as illustrated in the following image, where we clicked on the My Templates app:

Google Mail

Google mail’s offering is called gadgets, which are essentially custom HTML, CSS and JavaScript that runs within the context of the user’s Gmail inbox. As with Apps for Office, the custom code is run inside an iframe and can contain almost the same Html as most webpages.

Google offers two customization options, namely:

• Sidebar gadgets
• Contextual gadgets

Sidebar gadgets are small web pages that are located on the left-hand side of the Gmail user interface. You can either create a gadget spec that contains all the necessary HTML, CSS and JavaScript for the entire gadget or you can load the gadget from an external url. Creating a spec is the preferred approach. In the following image, a Gmail gadget that displays the latest Add-in Express blog posts are shown:

Contextual gadgets are somewhat similar to the read apps for Outlook, in the sense that they are activated below the message body. The contextual gadget is activated not by the user, but rather by contextual clues inside the body or subject of the e-mail. There are a number of pre-canned extractors provided by Google or you can write your own. In the following image, a search result from the Add-in Express website is displayed after it was activated by contextual clues inside the message subject:

Both the Gmail sidebar and contextual gadgets are relatively relaxed with UI considerations. In the above image, you can see that we used the Bootstrap framework to style the user interface and jQuery was also allowed.

Solution architectures & object models

Both platforms provide very different approaches and architectures for further development. Let’s take a closer look.

Hosting

Gmail Sidebar gadgets are hosted on third party servers; it can be as simple as saving the gadget specification xml file on a web accessible server and adding the gadget by pointing to the correct url.

Gmail Contextual gadgets are a completely different story and involve the need to first log into your domain’s console and creating a new project. From there you’ll upload the manifest file and any custom extractors you’ve written. You’ll also need to grant data access for the gadget, before users can use it inside their own Gmail application.

To use Outlook Online, you need to first provision a developer site on SharePoint in order to create the app. Once the app is created using the Napa Development Tools, you can run it inside Outlook Online. Deploying the mail app involves logging into the Exchange Admin Center, which you can read more about on how to deploy a mail app on MSDN.

Development environment

Unlike Google Sheets and Google Docs, Google does not offer an integrated online development environment for Gmail gadgets. Instead, you can develop Gmail gadgets as you would any standard Html web page, using your favorite text editor. The big drawback of not having an IDE to develop gadgets is the lack of intellisense and compile-time error checking, which make debugging your gadget codes somewhat more challenging.

Microsoft offers Napa Development Tools, which is a rather nice online IDE, but it does not offer much in the line of compile-time error checking, nevertheless it does offer fairly decent intellisense. Of course, you can always download the mail app project and open it inside the desktop version of Visual Studio that will provide all the functionality .Net developers have become accustomed to.

Object models

The JavaScript API for Office allows access to an Outlook e-mail message’s body and subject text. Whilst in compose mode, the body and subject values, however, are not available. You are able to add data to the beginning of the message body using the prependAsync method. It also supports the setSelectedDataAsync method, which replaces the current selection with the specified text.

The Gmail API on the other hand does not offer much flexibility when it comes to sidebar gadgets. Side bar gadgets cannot access the user’s inbox or e-mail message, you are nonetheless able to set certain properties for the gadget like its title and preferences.

Contextual gadgets also only provides flexibility via extractors, where the extractor checks the subject, sender, or body etc. of the email message.

Gmail gadget store vs. Office Apps store

I could honestly not find anything that resembled a store for Gmail gadgets, the closest I could find was the Labs tab under my Gmail settings. There is a wide variety of gadgets, but you must keep in mind that they may change, break or disappear at any time.

With Office 365 you can add apps by clicking on the “Manage apps” link under the settings menu:

From here you have three options to add apps:

• Add from the Office Store
• Add from Url
• Add from file

Clicking on the “Add from Office Store” option will take you to the Office store where you can add a new app by simply clicking on the Add option underneath its name.

Conclusion

For me personally, when comparing Gmail gadgets to Mail Apps for Office, mail apps is the winner. The Gmail gadgets API feels somewhat disconnected from the Google Sheets and Google Docs API, whereas the JavaScript API for Office/Outlook is shared for Outlook, Word and Excel Online and provides a common API.

Thank you for reading. Until next time, keep coding!