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
orionic 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 browserionic 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 computerionic 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