Complete Ionic Glossary

We built this article as a guide of concepts related to Ionic Framework. We want this to be like a dictonary for the core concepts of Ionic and also a place where you can find lots of references to expand your expertise about Ionic Framework. We will be updating this article often so stay in the loop!

What is Ionic Framework?

Ionic framework allows you to easily build apps using friendly web tech you are already familiar with like JavaScript, CSS and HTML.

Ionic Framework offers the best web and native app components for building highly interactive native and progressive web apps.

It is the only mobile app stack which allows developers to design apps for all app stores and the mobile web, using an unique code base. Moreover, Ionic’s Platform Continuity guarantees your app will look superb on every single device.

It's completely free and open source which means you can use Ionic in personal or commercial projects for free.

It offers a complete mobile toolkit built for web developers plus everything you need to start creating fully functional mobile apps in just a few minutes.

You can think of Ionic as the front-end UI framework that handles all of the look and feel and UI interactions your app needs in order to be compelling. It’s like a kind of “Bootstrap for Native” but with all the support for a broad range of common native mobile components, slick animations, and incredible design.

Without further introduction let's get started!

Ionic Concepts

Angular

Angular is the underlying framework that powers Ionic. It is responsible for the component API that is the building block of Ionic.

Angular is a JavaScript open-source front-end web application framework. It is primarily sustained by Google together with an extended community of people and companies, to approach many of the challenges faced when developing single page, cross platform, performant applications. It is fully extensible and works well with other libraries. For additional details visit their official documentation pages.

If you want to learn more about Angular you can use this free and complete tutorial Learn Angular from scratch step by step.

TypeScript

TypeScript is a superset of JavaScript, which means it gives you JavaScript, along with a number of extra features such as type declarations and interfaces. Although Ionic is built with TypeScript, using it to build an Ionic app is completely optional.

Sass

Sass is a stylesheet language that compiles to CSS and is used by Ionic. Sass is like CSS, but with extra features such as variables, mixins, and for loops.

Ionic CLI

CLI stands for Command Line Interface and is text-based interface for interacting with a program.

The common command-line app for a Mac user is the Terminal app, and Windows users often use Command Prompt.

Ionic's CLI can be used for many things, such as creating a new app, building the app for android or ios plarforms and adding plugins.

Cordova

Cordova wraps your HTML/JavaScript app into a native container which can access the device functions of several platforms such as the camera. These functions are exposed via a JavaScript API, allowing you to easily write one set of code to target nearly every phone or tablet on the market today and publish to their app stores.

Android SDK

The Android SDK is a Software Development Kit for developers building apps for Google's Android Platform. It includes tools for building, testing, and debugging Android applications. You can install these tools through Android Studio.

Xcode

Xcode is the Apple IDE used to developr software on Apple operating systems. In Ionic apps, we will use Xcode to build the app for iOS devices.

Node

node is a runtime environment that lets you write JavaScript on the server-side. In addition to being used for web services, it is often used to build developer tools like the Ionic CLI.

npm

npm is the package manager for the Node JavaScript platform. It puts modules in place so that node can find them, and manages dependency conflicts intelligently. It allows you to install, share, and package node modules. Ionic can be installed with npm, along with a number of its dependencies.

Typically when you start your new ionic app you will run on your console: npm install in order to install all the dependencies of your app.

Ionic Components

Ionic Framework apps are made of high-level building blocks that are named Components. These components allow you to quickly build an interface for your app. Ionic comes with lots of components such as lists, tabs, modals, and cards. Check out the definitions below to see what is each component.

Ionic List

Lists are commonly used to display rows with information, such as a user list, a playlist, a list of interests or even a menu with options.

Ionic Framework offers different types of lists from very basic ones to more complex designs with sliding functionality and multiple components. Let's explore the available options:

These are just some possible ready-made arrengments you can use, however, possibilites are endless and you are free to build the kind of list that best works for your mobile app. Some mobile design inspirations can be found in Lists Design Inspiration.

Ionic Button

Buttons are an essential component of mobile apps, because they provide a way to interact with and navigate through the app. When it comes to UI design principles for designing buttons, the most important thing to focus on is the button’s purpose. Buttons should clearly communicate what will happen after the user clicks them.

In Ionic Framework buttons can consist of text and an icon, and can be enhanced with a large variety of attributes such as borders, sizes, icons and positions. These are different out of the box styles that you can find within the Ionic Framework styles.

Ionic Input

Forms are usually one of the major interaction points between an app and the user, allowing them to send data to the application Inputs are super important for data collection. They should follow styling and interaction guidelines for each platform, so that they look intuitive and secure for users.

Inputs usually live inside a Form. Developing good forms requires design and user experience skills, as well as a framework with support for forms, change tracking, validation, and error handling such as Angular. As you may know, Ionic is built on top of Angular and uses Angular forms library. If you didn’t know that you should consider reading Ionic Framework introduction and key components.

Ionic Forms

Because Forms are the pillar of any business applications is that we build a complete tutorial for mastering Forms and Validations in Ionic Framework.

There are some attributes that can be used to style forms and their various input fields in Ionic Framework and are listed below.

Ionic Icons

Ionic comes with a range of more than 700 beautiful and free icons that you can use through your apps.

Using the ionicons is as easy as putting the name attribute on the ion-icon component:
<ion-icon name="heart"></ion-icon>

Icons can be used on their own, or inside of lots of the Ionic components. For a full list of available icons, check out the Ionicons docs.

A great and important thing about Ionicons is that icons can change slightly depending on the platform the app is running. For example, by setting the icon name of person, on iOS the icon will automatically apply ios-person, and on Material Design it will automatically apply md-person. This allows the developer to write the markup once while Ionic applies the appropriate icon based on the mode.

ionicons

Ionic Grid

The grid system of Ionic Framework is based on flexbox. Flexbox is a new layout mode in CSS3 supported by all devices that Ionic supports.
The ionic grid is heavily influenced by Bootstrap's grid system. It is a mobile-first system made up of any number of rows and columns and is extremely responsive.

This is how the Ionic grid works:

  • The grid is composed of three units: a grid, rows and columns.
  • The grid act as a container for all its rows and columns.
  • Columns will expand to fill their row, and will resize to fit additional columns.
  • Rows are horizontal groups of columns that line the columns up properly.
  • Content should be only placed within columns, and only columns may be immediate children of rows.
  • It is based on a 12 column layout with different breakpoints based on the screen size.
  • The number of columns and breakpoints can be fully customized using Sass.
  • The components that make up the grid can be written as an element (<ion-grid>) or added as an attribute to any element (<div ion-row>)

The Ionic grid is super flexible so make sure to check the complete docuementation to learn everything you can do with it.

Ionic Navigation

Navigation in Ionic 3 apps works like a stack, where new pages are pushed onto the top of the stack. This takes us forwards in the app and shows a back button on the nav bar of the app. To go backwards, we just pop the top page off.

If we set this.navCtrl in the constructor, we can call this.navCtrl.push() in order to navigate. We can pass an object as a param containing data we would like to pass to the page being navigated to. Ionic navigation system is very flexible. Check out the navigation docs to see more advanced navigation examples.

You can find a clear and complete example of navigation in Ionic Framework apps in Building a complete mobile app with Ionic 3.

Ionic Native

Ionic Native is a TypeScript wrapper for Cordova or PhoneGap plugins that allows to add any native functionality to your Ionic app super easy.

You can check all the existing Ionic Native wrappers in the framework documentation.

We have the following Ionic Framework tutorials that will guide you through the step by step of adding the following native features into your Ionic App:

Authentication

Functionalities

Firebase Integrations

Backend for Ionic Apps

As you may know, when it comes to data handling and backend for mobile apps there are some different options available.

It's important to clarify that Ionic Framework does not integrate directly with your backend, it just communicates with it. So, if we want to enable Ionic to integrate with a backend, your backend will need to implement some kind of API that the Ionic application can make HTTP requests to.

Backend as a Service (BaaS)

If you don’t want to have to deal with your own infrastructure and backend implementation, then there are a few backend as a service options. We have an Ionic Tutorial where we explain how to use Firebase as an authentication provider for your Ionic Apps.

Wordpress is a well known CMS and in same cases you could use it as the backend of your Ionic app. That's why we created a tutorial where we explain how to integrate Wordpress to your Ionic app using Wordpress REST API.

Your own API implementation

Basically, you can integrate any backend into your Ionic app. Remember that Ionic Framework just handles the frontend part, so it is agnostic to the backend. In order to integrate any backend you need to create an API that is able to accept HTTP requests. Then, to CRUD (create, read, update or delete) data to your backend, send an HTTP request from your Ionic app to the API.

Keep learning Ionic Framework

As mentioned before, this Ionic dictionary will be in continous growth, we will be adding new concepts regularly. If you want us to add information about any topic related to Ionic Framework please feel free to leave a comment below.

If you need an introductory tutorial to learn Ionic Framework with a real world example app just check Building a complete mobile app with Ionic 3.