Write handsome, hybrid mobile apps with Ionic

Everyone wants the apps they write to run on multiple platforms, but no one wants to give up the native features of mobile devices. That’s why you find so many tools to create hybrid apps, where core HTML5 and JavaScript code is packaged to run on Android, iOS, Windows Phone — even on legacy BlackBerry and Symbian devices.

With technologies like Apache Cordova, it’s easy to access hardware-specific features from your JavaScript code before wrapping apps and delivering them to your chosen app stores. They’re useful tools, but while they’re focused on getting apps to work well on mobile hardware, they’re not great for giving your app a modern look and feel.

That’s where Ionic, a relatively new JavaScript framework, comes into play. Ionic is designed to fill the UI gap in hybrid mobile apps, building on the familiar AngularJS MVC tooling with new interaction models and CSS styling.

You can build the core of your code in Cordova, then use Ionic to build the app’s UI. Iconic is a popular tool that shows up in the top 40 GitHub projects, with more than 500,000 applications using the framework. It’s designed to build mobile apps that bridge native and Web technologies — don’t try to use it for a Web app, not even a mobile Web app.

Spinning up Ionic

Getting started with Ionic is easy: Use Node.js to download and install the Ionic and Cordova tooling.

Once that’s in place, start with one of Ionic’s templates. If you’re building an Ionic app on a Windows development machine, you’ll find the templates in the Visual Studio gallery. The three basic templates are a blank app, a tabbed app with a header, and a side menu (using the much maligned hamburger control).

You can then add your own content and code to your chosen template. The Ionic command line lets you choose the platforms you’re building for and includes build tools along with an emulator that lets you quickly test your code.

The heart of Ionic lies in its CSS components. While you can customize them, the defaults are more than adequate to build prototypes or departmental apps with a very iOS look and feel. Key elements include headers available in a range of colors — each with their own name, so you can use conditional CSS to change colors as required. For example, you can use a red header to indicate an alert, with blue for normal conditions.

Ionic’s headers and footers are fixed, while the main content block is scrollable, so you can display large amounts of data. Because Ionic builds on AngularJS, you can use it to host a single-page application, simplifying layout and reducing the amount of content that needs to be downloaded with each interaction.

Icons, buttons, and fonts

Buttons are an interesting case. While you can use your own graphics, Ionic includes a set of its own icons delivered as a font. It’s an approach that simplifies header and menu design.

You can use standard blocks of colored text as buttons as well, with CSS definitions for finger-friendly buttons that can be variable width — as wide as the parent block or as wide as the screen. There’s also the option to use outlined buttons with colored text.

If you’ve used Microsoft’s modern design language, you’ll find Ionic’s icon font familiar. It’s a selection of simple, clear icons that handle most app use cases, with more than 500 icons for everything from email to cloud sync. You can build icons into buttons or embed them in header and footer buttons for commonly used tasks.

One useful option for header icon buttons is to use the clear option, so you have only icons or text in your header. Using a font can also reduce the size of an app, because you no longer have to pack various-size icon images for different screens. The fonts simply render appropriately on screens of different sizes.

Ionic provides CSS classes to handle layouts for most common UI models. You’ll find tools for handling lists with the option of including buttons and icons alongside text and images. If you’re building an Android app, you can also use cards to display larger amounts of information. Cards can have lists and images embedded, so they’re useful UI elements in their own right.

Making it real

After you’ve chosen your Ionic UI elements, you can use AngularJS (or other JavaScript) code to hook them up to dynamic content. Static lists make good navigation elements, but in practice much of your mobile app will drive Ionic programmatically.

Ionic’s CSS-based approach makes a lot of sense, because you can simply wrap your dynamic JavaScript code in Ionic CSS. If you prefer to use a grid, Ionic uses flexboxes to build complex row and column-based interfaces, including responsive grids for UIs that will work on different-size screens.

Forms are important for any HTML-based app, and Ionic makes it easy to give your forms a native look and feel. If you’re using HTML5 forms, Ionic will even work with the appropriate keyboard, launching a numeric one when necessary. Forms can even be embedded in headers, giving you a constant search box, for example. There are also interesting adaptations for touch UIs, with check boxes replaced by a sliding toggle switch and a range input manifested in the form of a simple slider.

More complex UI elements are available as JavaScript modules that can be called from AngularJS code. Whereas CSS elements are relatively static, these modules can be animated — for switching between hidden and visible states,for example, or allowing you to open up a slide-out settings pane or a pop-up action. Other options include support for a range of touch actions and gestures, so you can trigger different actions with long- and short-presses or with swipes.

Ionic goes a long way to deliver a native look and feel to hybrid apps. If you’re using Cordova, all you need are references to Ionic’s CSS and JavaScript files. It’s a good idea to build a UI using Ionic’s templates before merging it with Cordova code — and to ensure your AngularJS code works as a stand-alone Web app before using Ionic to style it and add app-specific UI elements. You’ll be pleased with the end result.