Menu

Astro Overview

Astro is a framework that leverages JavaScript for building Progressive Mobile Apps that blends the best of native and web interfaces. Astro has a strong focus on having a consistent developer experience and keeping code maintainable. Astro is for the developer who wants to build an app that works across Android and iOS. This developer avoids rebuilding existing web features for each platform while retaining the flexibility of developing a native feature when it makes sense.

By the end of this article, you’ll be able to:

10,000 Foot View of Astro

Web and Native in Astro

Why did we build Astro?

In 2014, there was increasing customer demand for apps. We built Astro in response to a combination of customer demand and limitations with other technology options. Some of the driving forces that led to Astro include:

  1. Native is a maintenance nightmare - Before Astro, building a purely native app was a maintenance nightmare. Imagine that you’ve already invested hundreds of thousands of dollars building a great mobile website and you then wanted to build a native iOS app. First, if you don’t have APIs ready to use for your app, you’ll have to create an API so you can build your iOS app. Unfortunately, very little (if any) of the code used to build the iOS app can be reused when building your Android app.

  2. D.R.Y. - In addition, another problem we encountered building purely native apps was that we needed to hire developers with non-transferrable skillsets. It’s rare to find a developer that’s proficient in both iOS and Android development. Now, if you wish to add a new feature - let’s say it’s a "product recommendation" feature - you would have to build the same feature in three places:

    • Mobile Web;
    • iOS app and
    • Android app.

    You can quickly see how maintaining three codebases can become very costly and slow down your development team. This goes against one of the fundamental principles in software development, which is to keep your code D.R.Y.: Don’t Repeat Yourself.

  3. Current solutions were not feasible - Unfortunately, we could not find any solutions that addressed our needs. Solutions, such as PhoneGap, did not deliver a compelling user experience because the entirety of the user interface was built in HTML5, while more modern solutions such as React Native would require the use of APIs, which most of our customers lacked. The other issue with React Native is that the same feature would need to be built multiple times, which violated the DRY principle mentioned above. Our customers simply could not afford to build pure native apps, even though their users would expect nothing less.

Native Development Timelines

Introducing Mobify’s Astro Solution

Without a feasible technology to work with, we decided to build our own solution that would allow us to build apps in a more cost-effective way and make it easy for our customers to manage. Our solution was to build Astro as the "Goldilocks approach" to building apps: not too much native and not too much web, just the right amount.

We want to ensure that our apps feel and behave natively and that we choose to use the right technology where it makes sense. We focus on JavaScript (as well as HTML / CSS) because it runs on both iOS and Android, which:

The biggest benefit of reusing code is saving time and money. You can take advantage of your earlier investment (your mobile website) when building an app. You can also reuse code when building for another platform (such as Android). Because of these time savings you can invest your productivity-spoils on important screens or interactions to improve your app’s experience.

Astro Development Timelines

Astro Developer Benefits

  1. Native SweetSpot: We’ve taken the best of native, such as the transitions, animations and the navigation bar, and made them part of the core experience. Astro’s true advantage lies in its flexibility to jump back into native code for screens where you really need the extra horsepower.

  2. JavaScript: Write your apps in JavaScript. Specify the application logic and design the native components from one file. Writing your app in JavaScript creates a consistent development experience across Android and iOS.

  3. Don’t Repeat Yourself: Don’t repeat yourself by writing the same feature again for iOS and Android. Ongoing maintenance is much easier when you use HTML and CSS to display your app's content. It also makes getting started much easier.

  4. Native Transitions: Get beautiful transitions out-of-the-box as you navigate around your app. Very quickly your mobile website will feel like an app.

  5. Message Management: Astro has a powerful message bus to handle the complexities of cross-view communication between native and JavaScript events.

  6. Extensible: We’ve built a very flexible plugin system to make it easy for native developers to write their own plugins and expose JavaScript APIs.

  7. Cordova Plugin Support: Astro integrates the Cordova webview so that you can leverage their large ecosystem of plugins to add extra functionality to your app.

Mobify’s Astro Examples

Apps built with Astro can vary a lot in size, ranging from complex native interfaces to custom redesigned content to smaller apps that leverage most of the pre-existing mobile web designs. Below are three examples that we feel showcase Astro’s flexibility. Also, because these customers did not have pre-existing APIs (a common requirement for building native apps), Astro made it possible for them to build an app where they otherwise might not have been able to.

Ritchie Bros. Auctioneers, an auctioneer that sells construction equipment, launched their app for Android and iOS. Key features of their app:

ThinkGeek, the online retailer that caters to "geeky" culture, built their iOS app with Astro in order to publish it in time for the Christmas holidays. They also wanted to lay the foundation to build a featureful iOS app that could be leveraged for an Android app in the coming year. The app was a great success and has been showcased at conferences. The ThinkGeek app also has features that are unique to app users, such as favoriting products, and most of the screens have been modified to account for iOS style design patterns to make the app feel indistinguishable from native.

London Drugs, a Canadian retail store, built an app for their loyalty program. Even though the app leverages their website, certain parts were redesigned to feel more app- like. Also, they take advantage of native features (such as offline mode) to ensure customers can still have access to their loyalty card when they might have limited internet access in-store.

Apps Using Astro

Real-world examples powered by Astro.

Core Concepts of Astro

app.js

When your app launches, it's completely empty except for one webview that’s tucked away. The webview runs a JavaScript file called app.js, which loads your plugins, creates your native/web views, defines your layout and hooks up all the event handlers. Writing your app in JavaScript creates common ground between iOS and Android: it's a way to standardize creating apps between the two platforms.

app.js Overview

Native View Stacking & Transitions

Whenever you tap on a link in a web view Astro will automatically navigate to the next screen in a smooth native transition. Going back happens instantly since the screens are 'stacked' on top of one another (on iOS you can also swipe from the left to go back).

Native View Stacking & Transitions

A problem native developers can run into when building an app is that view stacking often results in a lot of memory being used and might cause the app to crash. Fortunately, Astro will automatically start serializing and destroying earlier views (to save memory) and proactively recreates and restores the state of those views when navigating backwards. Navigation is managed through a plugin called the NavigationPlugin. This plugin enables navigation between web and native screens because you only need to understand one plugin.

Layouts in Astro

Astro's anchored layout is a simple but powerful layout plugin for your app. It consists of:

Layouts in Astro

Native Plugins

We’ve taken the best of native, such as the transitions, animations, tab bars and the header bar, and made them part of the core experience. This way you avoid the common Cordova/PhoneGap problem of using CSS hacks to style web content to look native and then dealing with inconsistent performance across devices. We've also built a really lightweight but extensible plugin system so that you can create native components and easily expose a JavaScript API for them. A lot of time was spent to make it easy for a native developers to create native plugins without feeling like they're working against the framework. Plugins are included in app.js by using RequireJS.

Promises

A promise is a way to write asynchronous code in JavaScript while avoiding callback hell. Promises are used extensively within Astro and make for much more maintainable JavaScript code. An asynchronous method returns a promise object that promises to return a value at some point in the future. Promises are useful when you're waiting for more than one object to be instantiated through something called "promise chains". Astro uses the BlueBird promise library as it was one of the most performant libraries we tested. BlueBird also has benefits over the "built-in" ES5 Promise object and so we plan to continue to use BlueBird even when we move to ES5 and onward.

The Astro framework provides a common API for using native components on both Android and iOS. To communicate with the native platforms, Astro makes asynchronous calls between app.js and the native application hosting it; receiving responses to these asynchronous calls would require the use of callbacks, which can result in Callback Hell. Promises are a great way to avoid deeply-nested callbacks, and they allow you to chain together other promises to write more imperative code, thus making them easier to work with.

Astro’s "Hello World" Example

Below a simple example of app.js. It loads a webpage and sets it as the main view of the app:

import Astro from 'progressive-app-sdk/astro-full'
import Promise from 'bluebird'
import Application from 'progressive-app-sdk/application'
import NavigationPlugin from 'progressive-app-sdk/plugins/navigationPlugin'
import AnchoredLayoutPlugin from 'progressive-app-sdk/plugins/anchoredLayoutPlugin'

const layout = await AnchoredLayoutPlugin.init()
const navigator = await NavigationPlugin.init()
// Navigate to your website
navigator.navigateToUrl("https://m.reddit.com")
layout.setContentView(navigator)
// Set our layout as the main plugin
Application.setMainViewPlugin(layout)

FAQ

How is Astro different than PhoneGap?

Astro is PhoneGap on steroids if it went to the gym a lot. Astro is similar to Cordova in that both frameworks display web content inside a native app shell, giving the web access to native features through JavaScript. That’s about where the similarities end.

Astro layers on top many native features to make the experience feel more snappy (such as native transitions) and also to make the experience feel more at home in an app (such as native header bars or tab bars). Astro has a Cordova Bridge which allows Astro to also run Cordova plugins (such as a barcode scanner).

How is Astro different than React Native?

React Native is a native development framework written by Facebook. Both Astro and React are the same in that a developer writes their native app in JavaScript. React creates only native interfaces, while great is some cases, does not work for many of our customers because they either do not have APIs (which are required for fully native apps) or have invested hundred of thousands of dollars on their mobile website and cannot afford to build and maintain two more front-end codebases (web, android app and iOS app). At this time React still does not enable a full write-once, run anywhere model between iOS and Android (for example, they have many components that are on iOS only or are iOS specific).

Aren’t hybrid apps slow?

Hybrid apps can be slow, but it is often the result of poor architecting, structuring, or rendering your web content. There are many examples of famous apps using a similar approach with impressive performance. There are many shortcoming in web that don’t live up to our expectations for a great user experience (e.g.s. flyout menus, smooth transitions and animations). We didn’t want to compromise on user experience which is why Astro forgoes the web in these unique cases and uses native elements instead.

How much longer does it take to build for Android with Astro?

Depending on how similar the design between Android and iOS apps are and the amount of custom native plugins, it can range from very few hours to about half as long as it took to build the iOS app.

Summary

Astro gives structure to apps by making it easy to use web or native screens where it makes sense. When it comes to building apps, we believe that developers should be pragmatic about their technology choices instead of being dogmatic by sticking to one strategy or the other. There are plenty of great reasons to render content in either web or native depending on the requirements of a feature.

Astro also places a big emphasis on experience, for both the developer experience and end-user experience. We’ve taken important user experience elements that an end-user would care about - such as smooth native animations and native header bars - and built those into Astro. For developers, we’ve standardised around a common language (JavaScript) and cherry-picked new development paradigms (e.g. Promises) to make building apps a pleasant experience.

Astro makes building and maintaining apps much more affordable for businesses. By leveraging your previous investment (i.e. your mobile website) you can get all the benefits of an app (e.g. push notifications). Over time you can continue to add to your app experience thanks to Astro’s flexible design. Also, you’ll be in good company, since Astro has been battle tested with many successful apps already in the App Store.

Getting Help

If you cannot find what you are looking for after reading the Astro documentation, please ask us online by joining the Slack Astro Community.!

Further Reading

Smashing Magazine Article about Astro: Building A First-Class App That Leverages Your Website: A Case Study

For more information on Promises, check out these links: