Creating Apps with Ionic 2

Ionic is a fantastic and established framework for creating hybrid mobile apps for both iOS and Android. Ionic 2 modernizes the framework leveraging Angular 2, TypeScript and Webpack. Ionic 2 also simplifies common UX paradigms like tabs and view navigation. I’m going to build a simplified Twitter-style app called Chatter to show off what’s new in Ionic 2. The code examples in this post are simplified from the full-source app available on GitHub.

Building the Base

Chatter uses a tab-based layout with three tabs. In Ionic 1, tab-based apps required complex router configurations. Ionic 2 eliminates that and uses a single ion-tabs component that maps a Page component to a tab. Tab bars can be text-only, icon-only or have both text and icon.

<ion-tabs>
  <ion-tab [root]="tabFeedView" tabIcon="chatboxes"></ion-tab>
  <ion-tab [root]="tabMeView" tabIcon="person"></ion-tab>
  <ion-tab [root]="tabPeopleView" tabIcon="people"></ion-tab>
</ion-tabs>

Creating Views

Views, or pages, in Ionic 2 are created using the @Page annotation. The annotation contains information about the template, directives and providers. A controller for a Page is just a TypeScript class. It contains all the logic and properties for your view. Class properties are automatically bound to this, including parameters that have private or public access modifiers in the constructor.

@Page({
  template: `
    <ion-content>
      <post-item *ngFor="#post of posts" [post]="post" />
    </ion-content>
  `,
  directives: [PostComponent]
})

export class FeedView {
  posts: Post[] = []

  constructor(private postService: PostService) {
    this.postService.allPosts().subscribe(posts => this.posts = posts)
  }
}

Building Components

Components are reusable elements that contain logic in Angular 2. In Chatter, the post item is a component. To create one, you’ll have to import Component from angular2/core. Components are very similar to pages since they both have an annotation describing the component and a class that defines the logic. To use Ionic components within your custom component you’ll have to import them as directives. Finally, data you wish to pass to components, like post, are class properties marked with the @Input attribute. To use a component you have to register it in the Page directive attribute as shown in the previous code example.

@Component({
  selector: 'post-item',
  template: `...`
})

export class PostComponent {
  @Input() post: Post

  constructor(private postService: PostService) { }

  toggleFavorite() {
    this.postService.toggleFavorite(this.user.uid, this.post)
  }
}

View Navigation

What’s great about Ionic 2 is view navigation doesn’t require any router configuration so views can be added and moved around easily. The people view in Chatter shows a list of people using the app. Selecting their name will show all the posts that person has composed. Ionic 2 takes care of the navigation stack, animations and back button operations. To push to a new view, all you have to do is import the child Page component on the parent view then use the navPush attribute. You can page data to the child view too.

<button [navPush]="[peopleDetailView, {user: user}]">Show Detail</button>

The navPush attribute is an array that takes the view as the first element then an array of data the child view will need.

Observables

A common challenge in apps is keeping data in sync across multiple views or components when it changes. Http in Angular 2 swaps out promises for observables for stream-based updates. Multiple views and components can subscribe to an observable so they’re kept in sync. A great use case for this is getting the current authenticated user. In Chatter, each tab wants to know the current user and react based on if the user exists and is authenticated.

function getUser() {
  http.get('/api/user/current').map(response => response.json())
}

...

userService.getUser().subscribe(user => this.user = user)

In Angular 2, you map the json response from Http which returns an Observable. Each of the tabs can subscribe to this observable and get real time updates when the user changes. This cleans up the spaghetti code or unperformant broadcasts from Angular 1.

Chatter also uses observables in conjunction with Firebase to ensure real time updates of posts to the view feeds.

Tooling

Ionic 2 fully leverages Webpack to build a complete module of your application. This replaces Gulp which was used in Ionic 1. The Ionic 2 CLI generates a Webpack config file for you that’s feature complete. As always, you can customize your config file to add any Webpack loaders and plugins you might want to use.

Final Thoughts

Ionic 2 is an evolutionary step from Ionic 1 that reduces the amount of code and polishes the user interface. The full catalogue of Ionic components on iOS and Android feel and look even more native than Ionic 1. Angular 2 brings huge performance increases and neat things like observables to make your app more dynamic and responsive. I encourage you to take a look at the full source of Chatter to see an example app that has live real-time data.