Ionic Framework: A definitive 10,000 word guide

Ionic Framework: A definitive 10,000 word guide

原文：https://www.pluralsight.com/guides/front-end-javascript/ionic-framework-a-definitive-10-000-word-guide

Welcome! This definitive guide to the ionic framework -- an incredibly easy way to build beautiful and interactive mobile apps using HTML5 and AngularJS. We will help you understand the major aspects of the framework. We'll also be creating a running example of a calculator application throughout the tutorial.

In this first section, you'll learn:

• An overview of the choices for making applications
• Introduction to the Ionic framework
• How to install Ionic on both Mac and Windows
• How to use Ionic CLI to start an Ionic project
• How to run an Ionic application

Introduction

85% of mobile time is spent in apps

You're bombarded with reports all  over  the  web  that users tend to spend way more time on their phones and especially in apps (rather than surfing the web using their phones) and you decided that it's time to learn how to make an app.

Up until fairly recently, if you wanted to make an app for (currently) two most popular mobile operating systems (iOS and Android) your only bet was to make the, so-called, native application. This meant you needed to make two versions of your application. Therefore, developers were opting either for iOS or Android, whereas big firms had two developing departments, one for each platform.

Nowadays, with the Ionic Framework you can create one application by using the skills you, as a web developer, already have and then deploy this one codebase as an app to both iOS and Android stores.

Ways you can make an app these days

There are actually 3 ways that you can make an application for mobile devices these days.

Native app

You can make an app specifically for iOS and Android by using their specific SDKs. If you want to build a native application for iOS you have to:

• have a Mac computer
• download Xcode  from the App Store
• buy the Apple Developer license  that costs 99$ per year

If you want to build a native application for Android you have to:

• download the appropriate SDKs
• buy the Google Developer license  which is 25$ one time registration fee 

One of the pros of a native applications would be it's speed and direct access to a native API. A definite con of a native applications is that you need to build two (or more) applications, one for each desired platform.

Mobile website

Mobile website is actually a "normal" website that you visit with your browser on your phone, designed specifically to adapt to your phone's screen.

Developers used to make specific sites just for mobile browsers (on it's own domain; usually m.domain.com) but this proved to be hard to maintain. A practice called responsive website design  is used these days, where you basically have one HTML codebase, and you determine the look for specific devices (based on resolutions) by using the so-called media queries  in CSS.

A definite advantage of the mobile websites is that you can update them without waiting for the approval from Apple or Google. One of the disadvantages are that the mobile websites these days have way lower engagement than they used to, and that you can't use any of the additional phone features.

Hybrid app

A hybrid app is a mobile application, written with the same languages that you use when building websites, with the addition that it contains an isolated browser instance, called WebView, which runs this web application inside of a native app. Hybrid apps can access the mobile device and use the additional phone features like for example camera or GPS.

Definite advantage of the hybrid apps is that you can access the additional phone features via plugins and that you can do all the development with the same set of skills you use when developing "normal" web applications. One of the disadvantages is that, even though it's improving, the so-called Web View has it's limitations in terms of speed. Basically, you wouldn't use a hybrid approach if you want to build a 3D game.

1. What is Ionic and why it's so good

As I gave an answer on StackOverflow :

Disclaimer: This will sound like advertisement, so I have to say I'm in no way affiliated with Ionic, I just happen to like it so much that I'm sharing the love for it.

Ionic is so much more than “just” an UI framework. Ionic allows you to:

• generate icons and splash screens for all devices and device sizes with a single command: ionic resources. This alone saves you at least a day of image preparing for various sizes.
• instantly update your apps with code changes, even when running directly on your device with ionic run --livereload
• build and test iOS and Android versions side-by-side and see changes instantly with ionic serve --lab
• share your Ionic apps with clients, customers, and testers all around the world without ever going through the App Store with ionic share
• easily access the full native functionality of the device using ngCordova (here you get to use any Cordova plugin) Also, Drifty  (the team behind the Ionic framework) is building a full-stack backend services and tools for your Ionic app like Deploy  (for deploying a new version without going through Apple review process! - this is huge!), Analytics , Push notifications . Ionic CLI (command line interface) uses Cordova in the backend and allows you to build (directly using Ionic CLI) apps for iOS and Android (just by doing ionic build ios or ionic build android). Ionic uses Angular as a frontend framework so if you’re familiar with it, it will come as a bonus. They’re working closely with the Angular 2.0 team  too. All in all, I personally think Ionic framework has a bright future, so if nothing else – give it a try I bet you’ll like the ease of making an app with it.

Installing prerequisites for both Mac and Windows

We need to have Node.js  and Git  installed in order to install both Ionic and Cordova. If you're a web developer chances are that you already have these tools installed. If not, just visit the aforementioned websites and install them.

Installing Ionic

To install Ionic (both on Mac and Windows) you have to run the following command:

npm install ionic cordova -g

We had to install Cordova because Ionic uses it under the hood. We're using the -g flag to install the packages globally .

Using Ionic CLI

If you run ionic in your Terminal you will get a nice summary of all the commands that you can run using the ionic CLI, along with their short descriptions.

Starting a project with Ionic by using the existing templates

Ionic CLI allows us to start and initialize your project by using the ionic start command. If you just run ionic start appname the Ionic CLI will create a bootstrap application with all the needed parts in the appname folder, with the so-called blank template.

In our example, we will use the sidemenu template, so execute the following command:

ionic start Ionic_1stTutorial sidemenu

Running the Ionic application

First, change the directory to the name of the application you gave in the ionic start command (Ionic_1stTutorial in our case). There are few ways in which you can get your Ionic application running:

• ionic serve - starts the app in a local web browser
• ionic emulate android - starts the app in an emulator (in this example android is used; you can also use ios if you're on a Mac and have all the prerequisites installed)
• ionic run android - starts the app on the actual device that's plugged into your computer
• ionic build android - creates an .apk file which you can copy to your Android device and run it (this scenario doesn't work for iOS devices; you have to go through Xcode)

Run the following command in your Terminal:

ionic serve

You should get your local browser started up automatically, pointing to the address http://localhost:8100/#/app/playlists , with an output similar to the one on the image below:

image: http://i.imgur.com/Yvs4kzKl.jpg

Great thing about this is that you automatically have a live reload feature, which means that as soon as you change the code in your www folder, the application will reload automatically so that you don't have to do it manually.

If you like, you can get this project on Github .

Read more at https://www.pluralsight.com/guides/front-end-javascript/ionic-framework-a-definitive-10-000-word-guide#RhzKw8M4p8BGHVeW.99