Book Image

Ionic 2 Cookbook - Second Edition

By : Hoc Phan
Book Image

Ionic 2 Cookbook - Second Edition

By: Hoc Phan

Overview of this book

Developing real-time apps is the need of the hour, and apps that deal with humongous amounts of user data and real-time information that needs to be updated frequently are in high demand. Currently, one of the most popular frameworks for this task is Ionic Framework, which is undergoing a major makeover. This book will get you started with Ionic and help you create Angular 2 components that interact with templates. From there, you’ll work with Ionic components and find out how to share data efficiently between them. You’ll discover how to make the best use of the REST API to handle back-end services and then move on to animating the application to make it look pretty. You’ll learn to add in a local push notification in order to test the app. You’ll work with Cordova to support native functionalities on both iOS and Android. From there, you’ll get to grips with using the default themes for each platform as well as customizing your own. Finally, you’ll see how best to deploy your app to different platforms. This book will solve all your Ionic-related issues through dedicated recipes that will help you get the best out of Ionic.
Table of Contents (16 chapters)
Ionic 2 Cookbook Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Introduction


There are many options for developing mobile applications today. Native applications require a unique implementation for each platform, such as iOS, Android, and Windows phone. It's required for some cases such as high-performance CPU and GPU processing with lots of memory consumption. Any application that does not need over-the-top graphics and intensive CPU processing could benefit greatly from a cost-effective, write once and run anywhere HTML5 mobile implementation.

For those who choose the HTML5 route, there are many great choices in this active market. Some options may be very easy to start, but they could be very hard to scale or could face performance problems. Commercial options are generally expensive for small developers to discover product and market fit. The best practice is to think of the users first. There are instances where a simple responsive design website is a better choice; for example, when a business mainly has fixed content with minimal updating required or the content is better off on the web for SEO purposes.

The Ionic Framework has several advantages over its competitors, as shown:

  • It's written on top of AngularJS. Ionic 1.x was based on AngularJS 1.x, while Ionic 2.0 is on top of AngularJS 2.0.

  • UI performance is strong because of its usage of the requestAnimationFrame() technique.

  • It offers a beautiful and comprehensive set of default styles, similar to a mobile-focused twitter Bootstrap.

  • Sass is available for quick, easy, and effective theme customization.

There have been many significant changes between the launch of AngularJS 1.x and 2.0. All of these changes are applicable to Ionic 2 as well. Consider the following examples:

  • AngularJS 2.0 utilizes TypeScript, which is a superset of the ECMAScript 6 (ES6) standard, to build your code into JavaScript. This allows the developers to leverage TypeScript features, such as type checking, during the complication step.

  • There will be no more Controllers and Directives in AngularJS. Earlier, a controller was assigned to a DOM node while a directive converted a template into a component-like architecture. However, it is very hard to scale and debug large AngularJS 1.x applications due to the misuse of Controllers and/or issues with conflicting directives. Moving to AngularJS 2.0, there is only a single concept of Component, which eventually has a selector corresponding to an HTML template and a class containing functions.

  • The $scope object will no longer exist in AngularJS 2.0 because all properties are now defined inside a component. This is actually good news because debugging errors in $scope (especially with nested scenarios) is very difficult in AngularJS 1.x.

  • Finally, AngularJS 2.0 promises to have better performance and supports both ES5 and ES6 standards. You could write AngularJS 2.0 in TypeScript, Dart or just pure JavaScript.

In this chapter, you will go through several HelloWorld examples to Bootstrap your Ionic app. This process will give you a quick skeleton to start building more comprehensive apps. The majority of apps have similar user experience flows, such as tabs and side menus.