About a year ago, mobile internet usage surpassed desktop usage for the first time. Mobile use is skyrocketing right now, and the use of mobile apps is on a similar trajectory. In fact, among mobile internet users, mobile apps account for 84.9% of total mobile time spent.
So high performance is more critical than ever when it comes to mobile apps.
And Akamai is ready: our Mobile Application Performance (MAP) SDK — one of the top technologies we highlighted in the Developer Zone at Edge 2017 — is designed to help developers supercharge mobile apps. We’ve been getting incredible feedback on MAP SDK from developers across many segments of the market. We’re glad to see their enthusiasm around MAP SDK’s ability to optimize TCP connections, provide last-mile insights on users, circumvent congestion by providing optimal routing, and seamlessly pre-position content intelligently into the user’s device.
With the energy we’d seen around all of these features of MAP SDK, Edge 2017 seemed like the perfect time to reveal our new reference app. Aman Alam, my colleague and fellow developer evangelist, unveiled the app in the Developer General Session at Edge (see our video of the Developer General Session presentation at Edge 2017; Aman’s MAP SDK show begins at 47:19). The app was received with a lot of excitement. The idea of this post is to give you a bit more info about the app and the story behind it.
The philosophy behind building the reference app was to replicate a real-time mobile application supported by robust APIs with a solid backend. We also wanted to build a heavy-lifting app which would strongly demonstrate the use cases of MAP SDK. After careful consideration, we decided on a “travel guide” use case. The main criteria behind this decision were that travel-guide apps 1) are very complex, with a unique combination of APIs required to retrieve huge volumes of data, and 2) use a tremendous amount of rich media content like images, videos, and pdfs. We believed that by building a robust real-time travel app, we could really showcase the performance abilities and features of MAP SDK. Once the scope and boundaries were well defined, our new city-explorer travel app was christened “Urban Crawl”. Here’s a peek at the UI:
As you can see from the screenshots, the navigation for the app is quite simple. We wanted to keep it concise with a short list of traveler-favorite cities in the world. Tapping “city” takes you to a view of vital information and different places of interest in the city. When you tap on a place, you go to the place’s detail screen. Last but not least, there’s a rich image gallery with beautiful photos of the destination.
The important thing to notice here is that Urban Crawl is a media-intensive application. The images being fed by the APIs are very high resolution with top-notch quality. We designed the APIs in LoopBack (a Node.js-based framework) and hosted it all in Heroku. The images are stored and delivered via Akamai’s NetStorage, and their references are mapped back in the APIs to facilitate retrieval from the mobile app.
Also worth noting: Urban Crawl was created by keeping developers at the center. In order to get a useful, 360-degree view of the application, the app comes with a debug console and developer mode, just for developers. We understand the pain of adding debug logs and figuring out issues in the API request-and-response parameter. The in-app debug console in Urban Crawl lets you essentially see the overall data flow in a separate screen. Developer mode is an even more interesting feature in the app. Once you enable developer mode from settings, Urban Crawl morphs into a developer-friendly app with a console in every screen that lets you know every endpoint and its response time. You can also see real-time information like cache retrieval and total screen load time.
While you’re in developer mode, you can add an endpoint in your MAP SDK configuration and quick-test to see the bump in performance. You can also test the current network quality in the developer window.
Oh, did I mention? Because we’re always thinking about developers and their experiences, we tried to mimic Terminal-like styling with Urban Crawl’s developer mode window. Somewhere I can hear the echo from Steve Ballmer, “Developers, Developers, Developers!“ And of course, he was right. 🙂
Here’s a peek at the developer mode and debug console UI:
Gokul Sengottuvelu is a Developer Evangelist at Akamai Technologies.