This version of Astro is only compatible with Xcode 7.3
Menu

What is Astro?

Astro is a Javascript framework for building native apps. It helps developers blend the best of native components and web content to create first-class native app experiences. Astro was built with a 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.

How does it work

App.js #

When your app launches, it's completely empty except for one webview that's hidden offscreen. 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. We believe that writing your app in Javascript creates common ground between iOS and Android: it's a way to standardize creating apps between the two platforms.

Native View Stacking #

Whenever you tap on a link in a webview 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). As more and more webviews get stacked on top of one another, Astro will automatically start dehydrating earlier views (to save memory) and proactively begin rehydrating those views when navigating backwards. The navigation plugin is not contstrained to webviews either. You can navigate in and out of native views as well, which is really useful when a screen makes sense to be native. Check out the navigation plugin for more details.

Layouts #

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. Typically your app's header bar 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. You can also add more than one view to the top or bottom, for example you could add a view with a search bar below your header bar. Astro's drawer plugin can create flyout (left and right) menus and typically contain an anchored layout in the main content area of the drawer plugin.

Native Components #

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 CSS hacks that have inconsitent performance across devices. We've also built a really light-weight 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. A promise returns an object that promises to return something 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.

Example

Below is probably the simplest example of apps.js. It loads a webpage and sets is as the main view of the app:

require([
    'astro-full',
    'bluebird',
    'application',
    'plugins/navigationPlugin',
    'plugins/anchoredLayoutPlugin'
],
function(
    Astro,
    Promise,
    Application,
    NavigationPlugin,
    AnchoredLayoutPlugin
) {
    // Initialize plugins
    var navigationViewPromise = NavigationPlugin.init();
    var layoutPromise = AnchoredLayoutPlugin.init();

    // Navigate to your website
    navigationViewPromise.then(function(navigationView){
      navigationView.navigate("https://m.reddit.com");
    });

    // Set the website as the main view of our app's layout
    Promise.join(layoutPromise, navigationViewPromise,
        function(layout, mainNavigationView) {
            layout.setContentView(mainNavigationView);
    });

    // Set our layout as the main plugin
    layoutPromise.then(function(layout) {
        Application.setMainViewPlugin(layout);
    });

}, undefined, true);