Introduction
The web developer's ecosystem has shifted dramatically over the last few years, and this has created opportunities for new approaches to mobile development. The Ionic framework from Drifty Co is a great example of this. Ionic came late into the hybrid-mobile-app development game, but it almost immediately found it’s place as a leader in the industry and is now almost synonymous with mobile HTML5 development for many people.




You can see Ionic’s meteoric rise over the process of just 2 years, when you compare it to other web based mobile solutions.

With Ionic 2 recently hitting beta, the team over at Drifty Co have re-worked Ionic from the ground up to take advantage of the opportunities provided to them by Angular 2. This post will be a quick tutorial on how to setup an Ionic 2 application, but I’ll also talk about some of the new opportunities available with Ionic 2!

Setup
For those who are familiar with the Ionic CLI, the setup hasn’t changed very much. Let’s go over the basics:

Note that most of what I’ll be going over will be covered in more detail by the CLI doc's, so check them out if you need more information.

First, you’ll want to install the CLI tool. Even if you already have the Ionic CLI installed - you’ll need to make sure to install the beta version.

npm install -g ionic@beta

Luckily, you still can create and run your regular Ionic 1 applications with this CLI, so if you already work with Ionic 1 you won’t have to worry about having two separate Ionic CLIs installed. Next let’s take a look at what are probably the three most commonly-used commands:

ionic start [projectName] [optional: starterTemplate] --v2 --ts

This command creates a project with a name of your choosing and with an optional starting template from the list of currently available starters. If you don’t pick a template, you’ll just get the tabs starter.

Notice the two flags --v2 and --ts. With --v2 you’re just telling the CLI that this is an Ionic 2, instead of Ionic 1, project. In fact, if you spend time looking at the commands available, they’re almost identical for Ionic 1 and 2. Finally, --ts is a strictly optional tag that sets up the Ionic application to use TypeScript. If you don’t use --ts it will generate an ES2015 project instead using Babel.

So, to get started with the Ionic 2 tutorial app using TypeScript, type:

ionic start ionic2App tutorial --v2 --ts

Once you have your app folder created, you can traverse into it and type in

ionic serve

Now you’ll be able to see your application run in the browser! It should just be a starter, but even getting this far is something to celebrate, I think. A useful tidbit that not everyone knows about is the optional flag, --lab. It opens up your application in a browser and simulates how it would look on both android and ios, side by side. I think it’s cool.

Build
If you are new to Ionic, you might be confused when you see some of the config files available in the root of a new application. There are quite a few there, and they can generally be ignored for now, but one that you should spend some time to familiarize yourself with is the webpack.config.js file - this is the config file for the module bundling tool used in Ionic 2. This file is going to be increasingly important when you start introducing libraries to your application or want to understand how to handle linting and preprocessing alongside module bundling.

I won’t go over webpack in this blog post, but we have a few resources that can help out:

Rangle.io’s webinar on Webpack, Angular2 and Typescript
Our Angular2 gitbook’s section on webpack
egghead.io’s free intro to webpack video
The official webpack documentation
Finally, don’t be afraid to explore the wild web to find the right resources for you!

Bootstrapping
So let’s start looking at some code - if you’ve been following along you should have an app/app.ts file available which contains the app’s bootstrap code. This is the entry point of the application: webpack loads this file and crawls your import statements to generate the application bundle.

This is inside the webpack file, you can see here that it’s the last item in the entry properties array, which is an important spot!

If you’re familiar with Angular 2’s dependency injection system and/or how it bootstraps, you’ll notice that all that code doesn’t seem to be here. The Ionic team has made a custom decorator that handles the bootstrapping of your application for you, while still providing you robust app-wide customization options.

I think the goal here is to help really take away a lot of that boilerplate code we see with starting up angular 2 applications while still allowing developers to fine-tune the process if necessary. For those curious about how these custom decorators have been written, feel free to dive into Ionic’s open-source code base and see for yourself!

An important thing to note is that this and the @Page decorator (which we’ll be looking at later) are extensions of Angular 2’s @Component decorator. So all the meta-data that you pass to @Component applies as well: template urls, providers, directives, pipes, etc. With the @App component, you can also pass in another property called ‘config’. This property allows you to change core attributes of your application, optionally on a per-platform basis.

Remember, when it comes to resolving dependencies in Angular 2 applications, it follows the component tree structure. This means that things like providers that are injected into a component are available and instantiated in all child components. When you inject a provider in the root of your application (in the @App decorator), it’s available everywhere.

Using this tree structure to properly segment your application is something that will really pay off if you want to make a testable and durable code base. Even though this is not directly related to Ionic, remember that Ionic is built upon Angular, so it’s important to explore these concepts.

@Page Components
Ionic 2 provides a second custom decorator for you to use: @Page. This decorator extends @Component to include Ionic’s built-in UI components, as well as Angular 2’s core directives and form components. This means is you don’t need all the boilerplate that normally imports and injects directives into your application.

Using @Page is also important for routing in Ionic, so you can’t ignore this decorator when making your Ionic application. Not every component needs to be a @Page component, but if you want to hook into Ionic’s (extremely nice) router, you need to be aware of that expectation. This means that modals can now seamlessly be a part of your applications routing just by using @Page.

Aside from that consideration, Ionic 2 is pretty flexible about how you structure your application. You can have regular Angular 2 components peppered throughout your application - but remember, there are a whole lot of Ionic built-ins as well! Not only are these well designed but they also replicate a lot of the functionality and best practices available in native apps, including material design.


This is enough to get you started, but there is still a lot more of note that I will be getting to in Part 2 of this blog post, where I’ll touch on the new Ionic 2 Router, the replacement to ngCordova (Ionic Native) and how to tackle theming customization. All within a fun sample app!