Why use Ionic?

Have you ever found yourself building a mobile application, but essentially duct taping together common components such as a side menu, modals, tabs, and buttons? Or perhaps you have used a mobile-first framework like Twitter Bootstrap that just doesn’t cover enough of what you need? Or perhaps you’ve already built a great mobile application in your desktop browser, only to find yourself stuck with a slow performing application that relies on many DOM manipulations on your devices?

If you answered yes to any of the above questions, you know why you should use Ionic. At its core, with the powerful AngularJS framework and a focus on native performance, Ionic is your first go-to library when developing a cross platform mobile application. Many issues like scrolling behavior, long list performance, and tap detection are already taken care of, allowing you to focus on developing your application without the headache of cross platform compatiblity issues.

What should readers know prior to reading this book?

Before reading this book, you should have at least a basic knowledge of web (application) development in general, including HTML, CSS, and JavaScript. For a better understanding of our example code and Ionic’s features, it would be best if you also have experience with JavaScript and in particular the AngularJS framework.

You won’t find a comprehensive reference to AngularJS-specific features or design patterns in this book.

Source code/sample app

For this book, we, the authors, have developed a demo application for you to play around with and as a reference to the mentioned techniques and features of Ionic.

he app is open source and available for free to anyone. Just head over to https://github.com/trendicity/trendicity and get your hands dirty with the source code, or directly clone the repository with git:

git clone https://github.com/trendicity/trendicity.git trendicity-app
 

What will this book teach you?

In this book, we take you through the process of starting, developing, customizing, and deploying a mobile application built with the Ionic framework and AngularJS. We start with covering some essential productivity tools such as the Ionic CLI. From there we dive into the development of TrendiCity, our mobile application we developed to demonstrate as much of Ionic’s features as possible.

Development environment, tooling, and workflow

It’s important to first get you started with the required and recommended tools and workflow for this and any future Ionic projects. The most important prerequisites such as installing Node.js, Git, and Ionic CLI are being covered. Some generic uses of the Ionic CLI are covered, and we start off by setting up our demo application project, TrendiCity, using front end power tools like gulp and Bower.

TrendiCity

We’ll start off by lining out the actual TrendiCity demo application. All views will be covered, and some core Ionic UI elements are mixed together to create a basic setup. From handling sidemenu madness to integrating a tab view inside of a nested view, this chapter has got you covered. In TrendiCity, a user will be able to set up some favorite locations, check nearby Instagram posts on a map, or open up the previously defined favorites to check out Instagram posts in that area.

Setting up the application routes and implementing the side menu

After we have outlined the big picture of the demo application TrendiCity, we dive straight in and start working with some of the most commonly used Ionic directives. We discuss the side menu related directives, how to use them and what they can do for your application. An honerable mention goes out the the menu-close directive which allows us to easily toggle the sidemenu upon navigation. After we discussed the side menu directives into detail, we continue on to lay out the application’s routing using Angular UI’s Router component. This is one of the few external components Ionic Framework depends on. In the end we dare to take a short peek at what the future of Angular Routing will bring us.

Storing favorite locations in TrendiCity

What is a location based app without favorite locations to store? Next up, we discuss how you can utilize the browser’s local storage to store collections of data in order to allow users to save their favorite locations. Using Ionic’s modal service, the user will be able to fill out an address as a favorite location which will be saved as a favorite location. Behind de scenes, the tailor-made GeolocationService are setup to convert that address to a geolocation object using the Google Maps API.

Integrating a map view with Ionic

Integrating a map view in your project in general is by now a pretty straight forward task for most developers. There are tons of libraries out there that specialize in integrating maps into a project. But doing so within an Ionic project needs a little extra attention due to Ionic’s homemade tap/click handling. Of course the team behind Ionic has got you covered, and that’s how we are able to integrate the open source Leaflet library into the project.

Authentication

Once we have most features in place, it is time to think about some security in our application. Most of the TrendiCity application is freely usable without an account but once a user starts interacting more with Instagram, it is time for some solid authentication. That’s where incorporating the angular-http-auth library comes in. We explain how we secured TrendiCity with http interceptors and OAuth authentication using the angular-http-auth library.

Designing the application

Working with a framework such as Ionic is great. It is a way for you as a developer to on one hand create fast protoypes and proof of concept mobile applications, which are on the other hand based upon a robust framework that allows you to easily edit its look and feel. Customization can be accomplished by utilizing SASS, a powerfull CSS extension language that adds some nice extra features to CSS, which we cover in this section of the book.

Creating an Instagram service

Most compelling mobile web applications integrate with some type of backend service. Trendicity integrates with Instagram through the Instagram API. In this chapter, we’ll cover everything you need to know to get started with it. From OAuth authentication, to installing required Cordova plugins, and building the views with Ionic to display the received data. Every aspect of the Model-View-Controller pattern is covered in this chapter.

What’s next?

In the end we will dare to look into the future of hybrid app development, AngularJS, and Ionic. Drifty has some exciting new features and products for Ionic on its roadmap, which we will discuss in this chapter. Their Ionic Creator product, and (currently upcoming) Ionic as a platform, promise to be of great value when developing applications based in Ionic.

The writing process

This book was written by five developers as a book sprint over the course of roughly two months. Especially with a topic like Ionic, which has been subject to constant change over its first year of development, this process has helped to keep the book’s content accurate and up-to-date, whereas conventional books often lag behind the coverage of cutting edge trends and technology due to longer writing and production timelines.

Authors

Anton Shevchenko is a Web Developer at OSEDEA building scalable enterprise web applications and mobile solutions for businesses. Currently studying Honours Computer Science at the University of Waterloo, Anton enjoys writing code, contributing to the open source community, biking, and watching Apple presentations, preferably all at the same time.

Robin van Baalen is a Dutch software developer with a passion for micro teams having macro ambitions. Working at Neverwoods in Curaçao, Robin works on AngularJS-based web applications with PHP backends and hybrid mobile applications for clients varying from local insurance companies to international banks. To combine his affection for web technologies with the island life, he can be found kitesurfing in the St. Jorisbay when ‘away from the keyboard’ on a windy day. You can send him a tweet @biinjo or ‘read his mind’ at http://forwebonly.com.

Keith D. Moore is an independent, full-stack mobile and web application developer/architect. Keith has experience working with a variety of languages and technologies in several industries and domains. He is passionate about solving problems for his clients (at http://kdmooreconsulting.com) using the latest and greatest technologies. While not solving all the world’s problems, Keith enjoys spending time with his wife, Tracey, his son, Kolton, and his daughter, Ashlyn.

As a software consultant and open source evangelist, Diego Netto wears the many hats of a full stack engineer and entrepreneur. Founder of http://vqtek.com, a software development agency operating out of Los Angeles and Dallas, Diego helps both startups and Fortune 500 companies leverage the power of open source technologies to deliver intuitive and disruptive products. In his spare time, Diego enjoys participating in various watersports and helps run a boat chartering company.

Alan Levicki is a technical lead and architect that has worked for major motion picture studios and led teams of engineers to build engaging experiences. He is passionate about technology, beer, and bourbon. He is currently located in Austin, TX and can be found on Twitter @alevicki.

Acknowledgments

Anton would like to thank Martin Coulombe for introducing him to Ionic. He is also thankful for his family’s support throughout the years.

Robin wants to thank his uncle René van Zon for introducing him to web development at the age of 8, and his friend and mentor Felix Langfeldt who always keeps pushing him towards the cutting edge of web technology.

Keith would like to thank his parents for sending him to college to pursue his passion for developing software. He would also like to thank his wife and kids for their support while writing this book.