By the end of this article, you’ll be able to:
- Talk to your friends and colleagues about Astro.
- Understand when and why Astro can be used.
10,000 Foot View of 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:
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.
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.
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.
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.
- Makes code more reusable;
- Lowers build times, and
- Makes it easier to pick up.
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 Developer Benefits
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.
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.
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.
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:
- Leverages the company’s web content where appropriate but also has a very complex native interface;
- Native interface is realtime, with hundreds of people simultaneously bidding on equipment (both onsite and online) and,
- The auctioneer can be heard through the app which adds another layer of immersion that’s an important part of the auction experience.
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.
Real-world examples powered by Astro.
Core Concepts of Astro
When your app launches, it's completely empty except for one webview that’s
app.js, which loads
your plugins, creates your native/web views, defines your layout and hooks up
between iOS and Android: it's a way to standardize creating apps between the two
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).
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:
- A main content view and optional views that can be anchored to the top or bottom;
- Your app's header bar typically occupies a spot at the top while your tab bar sits at the bottom. These views can be either native views or webviews depending on the need of your app.
- More than one view that can be added to the top or bottom, for example you could add a view with a search bar below your header bar.
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
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.
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)
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
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?
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.
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 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.
If you cannot find what you are looking for after reading the Astro documentation, please ask us online by joining the Slack Astro Community.!
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: