In this chapter, we will cover the following topics:
- Setting up a development environment
- Creating a HelloWorld app via the CLI
- Creating a HelloWorld app via Ionic Creator
- Viewing the app using your web browser
- Viewing the app using the Ionic CLI
- Viewing the app using Xcode for iOS
- Viewing the app using Genymotion for Android
- Viewing the app using Ionic View
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
$scopeobject 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.