What do you get with eBook?

Instant access to your Digital eBook purchase

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Ionic Framework By Example

Chapter 1. First Look at Ionic

Before we begin this book, it is very important that we understand just exactly what we are dealing with. The best way to understand this is by having a short history on mobile development, in general, and understand how tools like Ionic help mobile developers create beautiful mobile apps.

The beginning

The year 2006 saw the beginning of the smartphone era with the launch of the iPhone by Apple. By 2008, Google had launched its answer to Apple's iOS operating system. This new operating system was called Android, and by 2010, it was clear that smartphones running iOS and Android dominantly covered the mobile ecosystem. Fast forward to today, the dominance of iOS and Android is not so different even though Windows for mobile by Microsoft has made some gains on the mobile front. It is fair to say that Android, iOS, and Windows make up the majority of the ecosystem with the first two at the forefront by a large margin.

The launch of the smartphone era also gave birth to the concept of mobile applications. Mobile apps are the medium by which we deliver and obtain most of our content on mobile phones. They are great and everyone with a smartphone pretty much has a number of apps downloaded on their devices to perform specific actions or achieve specific goals. This was massive for developers, and the software vendors also provided tools that enabled developers to create their own third-party mobile apps for users. We refer to these applications, built using the tools provided by the software vendors, as native mobile applications.

The problem

As great as mobile apps are, there is a small problem with how they are developed. Firstly, for each mobile development platform, the software vendor provides its own unique set of tools to build applications for its platforms. We know these tools as SDKs. The following table shows how each platform differs in terms of tools and SDK options to create native mobile apps for their ecosystems:

Operating system	SDK	Programming language
iOS	iOS SDK	Objective-C/Swift
Android	Android SDK	JAVA
Windows for mobile	Windows SDK	.NET

To make a clear statement, we are not trying to downplay the use of native tools. As noted earlier, native tools are great but come with a great cost and time constraint. Firstly, you are unable to build the same app for different platforms with the same set of tools. For the Android version of your app, you will need a team of skilled android developers. For the iOS version of your app, you will need a team of Objective-C or Swift developers to create the iOS version of the same app. Also, there is no code sharing between these two teams, meaning that a feature developed on one platform will have to be completely developed on the other platform again. This is highly inefficient in terms of development and very time consuming.

Another problem is that because you are hiring two separate teams that are completely independent of one another even though they are both trying to create the same thing, you are left with a growing cost. For example, if you decided you wanted to create a Windows for mobile version of your mobile app, you will need to recruit another team of .NET developers and they will have to build everything present on the other existing platforms from scratch since they cannot reuse any of the already built tools.

For a company like Facebook, which makes revenue in the billions, it might make sense to go down the native path as cost and talent for native development would probably not be a part of their concern. However, for the most part, not everyone building or trying to build a mobile app is a company like Facebook. Most people want to get a simple, great, powerful app out there as quick as possible. Furthermore, some of these people want to use their preexisting skill set to build apps for multiple platforms without having to learn new programming languages.

Before mobile applications, web apps ruled the world for the most part. We had more people developing for the web technologies consisting mostly of HTML, CSS, and JavaScript. One great thing we got used to with the web was that it was platform independent. This meant that as long as you had a browser application on any device, you were able to interact with any web application without any problem.

So when mobile apps came, it was a big change for most web developers because with mobile apps, each platform was self-dependent, and apps made for one platform would not work for another platform.

Apache Cordova

Apache Cordova is a technology that lets any web application be packaged as a native mobile application while also providing access to device features. Thanks to Adobe and the open source community, this technology has seen great growth over the years and more and more apps are being built with Cordova. The apps built with Cordova are commonly referred to as hybrid applications. But what is a hybrid app?

A hybrid application in the context of Cordova is actually a web app that lives within the thin container of a native mobile application.

In reality, the only difference between a native mobile app and a web application in terms of what they can do is the fact that the native mobile app has access to the device hardware features.

In truth, a hybrid app is actually a native app that serves up a web application on the phone's web view. It behaves and acts like a normal application and has complete device access, thanks to Cordova.

However, the main advantage that Cordova has over native development techniques is that you only have to maintain one code base, and can use that same code base to build applications for multiple platforms. This was and still is the main selling point of Cordova to date, as with this technique you are provided with a big cost and time saving advantage.

Early hybrid apps

When the first few hybrid apps started rolling out, there were a couple of problems that seemed to persist. The first problem was that a lot of people complained that these hybrid applications did not have the same user interface and user experience as native mobile apps. The major reason for this was that when building a native app, all the building blocks are already provided for you. For example, we have things like pre-provided animations, swipe gestures, tabs, and so on. Hybrid apps failed to provide similar features like these because on the web, all we have is HTML, CSS, and JS. There is no pre-provided component for things like animations, gestures, and tabs.

This meant that pretty much anyone trying to build a hybrid app had to build these features from scratch. This was not very good and different people had different implementations of the same features. As a result, a lot of applications that were built by the hybrid way were not so visually appealing. What we needed was a framework that was centrally maintained that provided us with all the tools we needed to build features that native apps had with web technologies.

What is Ionic?

Ionic is a framework that lets you build hybrid mobile applications with web technologies like HTML5, CSS, and JavaScript. But that is not where it stops with Ionic. Ionic provides you with components that you can use to build native-like features for your mobile applications. Think of Ionic as the SDK for making your Hybrid mobile application. Most of the features you have on a native app such as modals, gestures, popups, and many more, are all provided to you by Ionic and can be easily extended for new features or customized to suit your needs.

Ionic itself does not grant you the ability to communicate with device features like GPS and camera; instead, it works side-by-side with Cordova to achieve this. Another great feature of Ionic is how loosely coupled all its components are. You can decide to use only some of Ionic on an already existing hybrid application if you wish to do so.

The Ionic framework is built with AngularJS, which is arguably the most well-tested and widely-used JavaScript framework out there. This feature is particularly powerful as it gives you all the goodness of Angular as part of any Ionic app you develop. In the past, architecting hybrid applications proved to be difficult, but with Angular, we can create our mobile applications using the Single Page Application (SPA) technique. Angular also makes it really easy to organize your application for the development and working across teams while providing you the possibility of easily adding custom features or libraries.

Short history of Ionic

Before we dive in, first let's revisit what we already know about hybrid applications and how they work. Remember that a hybrid mobile application is simply a web application that runs in a web view, within a thin native wrapper environment.

Also remember that native apps came with already built components that enabled you to create beautiful user interfaces for mobile applications. Since hybrid apps used web technologies, there was no SDK or components provided for creating mobile UIs. The Ionic team saw this problem and created a solution in the form of the Ionic framework. The Ionic framework provides UI components to build beautiful hybrid applications.

Features of Ionic

Ionic provides you with a lot of cool neat features and tricks that help you create beautiful and well functioning hybrid apps in no time. The features of Ionic come under three categories:

CSS features
JavaScript features
Ionic CLI

CSS features

To start off, Ionic comes stock with a great CSS library that provides you with some boilerplate styles. These Ionic CSS styles are generated with SASS, a CSS preprocessor for more advanced CSS style manipulation.

Some of the cool CSS features that come built-in with Ionic include:

Buttons
Cards
Header and footers
Lists
Forms elements
Grid system

All these features and more, are already provided for you and are easily customizable. They also have the same look and feel that native equivalents have so you will not have to do any editing to make them look like native components.

JavaScript features

The JavaScript features are at the very heart of the Ionic framework and essential for building Ionic apps. They also consist of other features that let you do things from under the hood like customize your application or even provide you with helper functions you can use to make developing your app more pleasant. A lot of these JavaScript features actually exist as HTML custom elements that make it easy to declaratively use these features.

Some of these features include:

Modal
Slide box
Action sheet
Side menu
Tabs
Complex lists
Collection repeat

All the JavaScript features of Ionic are built with Angular, and most can be easily plugged in as Angular directives. Each of them also perform different actions that help you achieve specific functions and are all documented in the Ionic website.

The Ionic CLI

This is the final part that makes up the three major arms of the Ionic framework. The Ionic CLI is a very important tool that lets you use the Ionic commands via the command line/terminal. It is also with the Ionic CLI that we get access to some Ionic features that make our app development process more streamlined. It is arguably the most important part of Ionic and it is also the feature you will use to do most actions.

Ionic CLI features let you do the following:

Create Ionic projects
Issue Cordova commands
Development and testing
Ionic splash/Icon generator
Ionic labs
SASS
Upload app to Ionic view
Access Ionic.IO tools

The Ionic CLI is a very powerful tool and most of the time, it is the tool we will be using throughout this book to perform specific actions. This is why the first thing we are going to do is set up the Ionic CLI.

Setting up Ionic

The following steps will give a brief of how to setup Ionic:

Install NodeJS: To set up Ionic, the first thing you will need to do is to install NodeJS on your computer so you can have access to Node Package Manager (NPM). If you already have node installed on your computer, you can skip this step and go to step 2. To install NodeJS on your computer, perform the following steps:
1. Go to www.nodejs.org and click on the latest stable version for your computer. That should download the latest version of NodeJS on your computer. Don't worry if you are on Mac, PC, or Linux, the correct one for your operating system will be automatically downloaded.
2. After the download is finished, install the downloaded software on your computer. You might need to restart your computer if you are running Windows.
3. Open up the terminal if you are on Mac/Linux or the Windows command line if you are on a Windows machine. Type the command node –v and press Enter.
You should see the version number of your current installation of NodeJS. If you do not see a version number, this might mean that you have not correctly installed NodeJS and should try running step 1 again.
Install Ionic CLI: The next step is to use NPM to install the Ionic CLI.
1. Open a new terminal (OS X and Linux) or command-line (Windows) window and run the following command: npm install ionic –g. If you are on Linux/OS X, you might need to run sudo npm install ionic –g. This command will aim to install Ionic globally.
2. After this has finished running, run the command ionic –v on your terminal/command line and press Enter.
You should see a version number of your Ionic CLI. This means that you have Ionic installed correctly and are good to go. If you are on a Windows machine, you might need to restart your machine to see the version number appear.
If you did not see a version number, then you do not have Ionic installed correctly on your machine and should do step 2 again.

Key benefits

• Learn how to use one of the most exciting mobile development frameworks around to build even better apps

• Follow the featured sample projects to experience Ionic’s impressive capabilities

• Extend your developer skillset to build, test, and launch mobile apps with confidence

Description

Change doesn’t have to be challenging. Sometimes it can be simple – sometimes it just makes sense. With Ionic, mobile development has never been so simple, so elegant and obvious. By helping developers to harness AngularJS and HTML5 for mobile development, it’s the perfect framework for anyone obsessed with performance, and anyone that understands just how important a great user experience really is. This book shows you how to get started with Ionic framework immediately. But it doesn’t just give you instructions and then expect you to follow them. Instead it demonstrates what Ionic is capable of through three practical projects you can follow and build yourself. From a basic to-do list app, a London tourist app, to a complete social media app, all three projects have been designed to help you learn Ionic at its very best. From setting up your project to developing on both the server side and front end, and best practices for testing and debugging your projects, you’ll quickly become a better mobile developer, delivering high performance mobile apps that look awesome. Ionic Framework by Example is for people who don’t want to learn now, build later – it’s for people who want to learn and build at the same time – so they can meet today’s mobile development challenges head on and deliver better products than anyone else.

What you will learn

• Learn Ionic by creating three complete mobile applications

• Get to know the Ionic CLI

• Add basic and advanced features to the Ionic framework

• Connect an Ionic app with a Firebase back end

• Integrate PhoneGap plugins with NG-Cordova

• Test your apps to improve and optimize performance

What do you get with eBook?

Instant access to your Digital eBook purchase

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Frequently bought together

€24.99

€36.99

€24.99

Total € 86.97

Filter reviews by

All

Amazon verified reviews

Nadia Jalloh Jan 30, 2021

Love the cover😊

Amazon Verified review

Client d'Amazon Aug 07, 2016

J'avais des connaissances dans le domaine du web (HTML5, AngulaJS), j'ai très bien compris le livre, bien expliqué même avec mon anglais qu'est pas au top

Syed Peer Jun 14, 2016

This is a great little book. The style is smooth and well paced and the material presented in a non intimidating manner to the reader. The author makes sure to give the reader a quick ramp up on the key features so that you can immediately see results within your work -- and the gratification therefrom. This is an excellent, down and dirty, hand-on working book for the Ionic beginner and provides a nicely rounded out course of study that touches all the key points without getting the reader bogged down in minutiae. Highly recommended as a starter text for the aspiring Ionic Framework learner.

Rr Mar 03, 2016

Overall I liked the book. It serves its purposes well in that it was an introduction. It is definitely better than reading the manual as you get to EXPERIENCE some of the cool features in a very short amount of time as you just copy/paste (I read an online version from the library) the code and off you go. You can get a sense of accomplishment very quickly and you DO get to see quite a number of features.The short length of the book is its strength in that it is not overwhelming and is beginner friendly. But perhaps this also leave something to be desired. The book has a generous amount of screen shots and code samples which are completely necessary and helpful, but at 158 pages, if one are not counting these large pictures, there simply isn't whole lot of content (text).If the author makes the book bigger by adding more content, but keep the same easy to read format, I think the book would be even better.

Amazon Customer Apr 22, 2016

Ionic Framework By Example: Build amazing cross-platform mobile apps with Ionic, the HTML5 framework that makes modern mobile application development simple

What do you get with eBook?

Ionic Framework By Example

Chapter 1. First Look at Ionic

The beginning

The problem

Apache Cordova

Early hybrid apps

What is Ionic?