Developing an Ionic Edge was published by Bleeding Edge Press on March 30. Take advantage of a limited-time offer of 50% off the book, and read a free excerpt from the book.

Bleeding Edge Press gathers teams of developers to write short ebooks on popular tech topics. Ionic developers Anton Shevchenko, Robin van Baalen, Keith D. Moore, Alan Levicki, and Diego Netto, who refer to themselves as “The Hybrid Collective,” teamed up to write Developing an Ionic Edge. Here, they share their process of writing the book.

How did you collaborate on the book?

Keith D. Moore: We primarily used Google Hangouts to collaborate on the book. About once a week, we had a scheduled Google Hangout meeting. We created a rough outline of the book chapters with the information we wanted to cover in the book and some of the Ionic features we wanted to use. A few ideas for an app were suggested, and then the team voted on which app to create. Once the app was decided, we brainstormed different features that we could add that would use one or more of the Ionic features we had listed previously. Basically, if an author developed an area of the application, they would in turn write about that area in the book. In addition to incorporating the feedback from editors and reviewers, we also reviewed each other’s writing and provided feedback.

Robin van Baalen: Collaboration is, like Keith said, the key word in this project. We all kept each other in the loop about our progress, and there was always someone in our Google Hangout to lend a helping hand to a fellow author when needed.

Can you tell us a little about yourselves as developers and writers?

Keith D. Moore: I am a full-stack web and mobile app developer and have worked with a variety of languages and technologies (Java, Backbone.js, jQuery, jQuery Mobile, Rails). As far as writing, I had written several blog posts and written documentation but had never written a book.

Robin van Baalen: I am a software engineer and have developed many websites and web applications, using a combination of PHP and JavaScript, before concentrating on front-end development, with Angular in particular. From there, it was a small step to hybrid mobile application development when I learned about Ionic.

Anton Shevchenko: I am a web developer at OSEDEA and am currently studying Computer Science at the University of Waterloo. I have developed numerous enterprise web applications and had the opportunity to use Ionic for multiple mobile applications. In terms of writing, I have been passionately documenting processes and guidelines at my workplace and have written a few blog posts on my personal website.

When did you start using Ionic, and what about it was compelling enough to you to write a book about it?

Keith D. Moore: While researching a jQuery Mobile issue for a mobile prototype I was working on back in January of 2014, I came across an article comparing jQuery Mobile with Ionic and a few other frameworks. jQuery Mobile was just not doing the kinds of things I wanted to do. Once I started looking at the docs and the examples, it was an easy decision and an easy sell to start using Ionic. Since Ionic is more than just a framework (more of an ecosystem), I felt there were plenty of areas to write about.

Robin van Baalen: At Neverwoods, we had a client who needed a cross-platform mobile application that would be compatible with a wide variety of devices. After some research and performance tests, Ionic became the framework of preference for this job.

Anton Shevchenko: Martin Coulombe introduced me to Ionic when we had to chose a hybrid framework to use for developing several mobile applications. Prior experience with Angular, as well as Ionic’s emphasis on design and thorough documentation, were the main factors that attracted us to the platform.

You built an Ionic app for the book. Can you tell us more about the development process?

Keith D. Moore: The feature assignment process was done in a very organic manner. We listed out the functional areas for the app. Then the developers signed up for the task(s) they were interested in. We used GitHub to track issues and Google Hangouts to collaborate.

Robin van Baalen: Before getting to the point where we split the tasks out and the assignments were made, we took a good look at the Ionic documentation and decided how we could fit as many Ionic features and UI elements in an app as possible without overdoing it.

Anton Shevchenko: As Robin said, our focus when developing our app was to showcase Ionic’s vast array of features and building blocks. As such, we tried to refrain from using custom components as much as possible and stick with Ionic’s built-in featureset.

Can you talk more about the functionality and technical aspects of the app that you feel are unique, interesting, important, etc.?

Keith D. Moore: The Trendicity app is an Instagram mashup that displays posts on a Google map, in a tinder-card view and in a list view. We show how you can construct an app with both a side menu and tabs. We were also able to show how you can use OAuth2 to authenticate and then make external requests. We influenced the addition of a “proxy” feature using the Ionic CLI. Otherwise, readers would have to experience the dreaded CORS issue while executing the app in the browser. I think this was a big win for the community at large.

Robin van Baalen: A question asked many times in the Ionic community is how to incorporate a Google map into an app. Ionic already provides a template application with Google Maps incorporated, and we took this integration a step further. By carefully selecting a proper Angular-based Google Maps library (directive) and implementing many common features, we were able to demonstrate great possibilities for map-based data in Ionic apps.

Could you talk about how you went about differentiating the app for different platforms? What did you do to align with the iOS platform, for example, vs. Android?

Robin van Baalen: Not much effort is needed from the developer to differentiate between the iOS and Android platforms with an Ionic application. For example, when incorporating an Action Sheet UI element in an app, Ionic itself creates a proper layout that matches iOS-style for iOS applications and Android-style for Android applications.

Anton Shevchenko: As Robin pointed it out, Ionic already provides many components that automatically change their design based on the platform, such as action sheets and tabs. Extending on Ionic’s platform continuity initiative, we have integrated a custom directive that automatically displays the correct icons depending on the device’s platform.

Signup for the Ionic Newsletter to get the latest news and updates!

4 Comments