Ionic Framework Development Glossary

We created this article as a guide of concepts related to Ionic Framework. We want this to be like a dictionary of Ionic basics and also a place where you can find lots of references to expand your expertise about Ionic Framework.

We will update this article frequently, so bookmark it in your browser and use it for reference.

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's the only mobile app stack which allows developers to design apps for all App Stores and the mobile web, using a 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!

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.

The Android Studio is the official Integrated Development Environment (IDE) to develop Native Android apps.

Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, and the web. These apps are called "Native Progressive Web Apps".

This tool is a spiritual successor to Cordova and Adobe PhoneGap. Capacitor has backwards-compatible support for many existing Cordova plugins.

It provides a consistent and web-focused set of APIs which enable an app to stay as close to web-standards as possible, while accessing rich native device features on platforms that support them. Adding native functionality is easy with a simple Plugin API for Swift on iOS, Java on Android, and JavaScript for the web.

Learn everything about Capacitor in our post What is Capacitor and how to use it with Ionic Framework

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.

The Ionic CLI is go-to tool for developing Ionic apps and can be used for many things, such as creating a new app, building the app for android or ios platforms, adding plugins to your current app and also to generate framework features such as pages, components, directives and so.

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.

CORS stands for Cross-Origin Resource Sharing and is a mechanism that browsers and webviews — like the ones powering Capacitor and Cordova — use to restrict HTTP and HTTPS requests made from scripts to resources in a different origin for security reasons. This ins mainly to protect user's data and prevent attacks that would compromise your app. More information about CORS in Ionic apps.

CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document. In fact, CSS variables are one of the main reasons CSS preprocessors exist at all. The ability to set a variable for something like a background-color, use that variable throughout the CSS you write, and know that it will be consistent, DRY, and easy to change is super useful.

You may be familiar with variables from Sass. CSS Variables enable the same functionality but are built into the browser.

Shadow Parts are very powerful and a HUGE win for customization in Ionic Components. Being able to customize any property on an element inside of a shadow root (as long as it has been exposed as a part) takes away the need for CSS variables for every property possible.

CSS Shadow Parts give users the ability to target an element inside of a shadow tree from outside of it. In order for the element to be targeted, it has to be exposed by the library author, in this case, Ionic Framework.

Learn how to Customize your Ionic Framework app with CSS Shadow Parts.

Ionicons is an open-source icon set used and created by Ionic. It includes iOS and Material Design icons, as well as commonly used social/application icons. They are premium designed icons for use in web, iOS, Android, and desktop apps and with support for SVG and web font.

Ionic Native is a curated set of wrappers for Cordova plugins that make it easy to add native device functionality to any Ionic app with Capacitor or Cordova. It wraps plugin callbacks in a Promise or Observable, providing a common interface for all plugins and making it easy to use plugins with Angular change detection.

Ionic Native also works in Capacitor projects. It's important to mention that these Cordova plugins are submitted and maintained by the Ionic community.

Normally when a user opens a page, all content on the page is downloaded and rendered in a single go. While this allows the browser or app to cache the content, there's no guarantee that the user will actually view all of the downloaded content.

This is where Lazy Loading plays an important role, instead of bulk loading all the content at once, it can be loaded when the user accesses a part of the page that requires it. With lazy loading, pages are created with placeholder content which is only replaced with actual content when the user needs it.

Lazy loading sounds like a complicated process, but actually is very straight forward. Conceptually, we're taking one segment of code, a chunk, and loading it on demand as the app requests it.

This is a very framework agnostic take on things, and the finer details here come in the form of modules for Ionic apps. Modules are the way we can organize our app's pages, and separate them out into different chunks.

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 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.

Observables are provided by the RxJS library – they are not specific to Ionic or Angular.

Observables provide support for passing messages between parts of your application. They are the recommended technique for event handling, asynchronous programming, and handling multiple values.

The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of state changes. Learn how to use Observables in Angular.

RxJS refers to Reactive Extensions for JavaScript and is a library for composing asynchronous and event-based programs by using observable sequences.

RxJS provides an implementation of the Observable type, which is needed until the type becomes part of the language and until browsers support it. The library also provides utility functions for creating and working with Observables. These utility functions can be used for different things such as: iterating through the values in a stream, filtering streams, mapping values to different types among others.

RxJS is very powerful and useful and it offers a number of functions that can be used to create new observables. These functions can simplify the process of creating observables from things such as events, timers, promises, and so on.

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.

An important aspect of Web Components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to attach a hidden separate DOM to each element.

Shadow DOM is an API which is part of the Web Component model. It helps isolating component internals, protecting users from breaking changes and global CSS. It is built based on two simple ideas: isolation and location.

The Document Object Model (DOM) is a tree-like structure of connected nodes that represents the different elements and strings of text appearing in a markup document (usually an HTML document in the case of web documents). The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.

So, Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree. Then, this new shadow DOM tree starts with a shadow root, underneath which can then be attached to any elements, in the same way as the normal DOM.

Shadow DOM terminology:

• Shadow host: it is the regular DOM node that the shadow DOM is attached to.
• Shadow tree: it is the DOM tree inside the shadow DOM.
• Shadow boundary: it is the place where the shadow DOM ends and where the regular DOM begins.
• Shadow root: it is the root node of the shadow tree.

You can find more info about Shadow DOM in Shadow DOM in Ionic (and Why it's Awesome)

Stencil is a toolchain for building reusable, scalable Design Systems. Generate small, blazing fast, and 100% standards based Web Components that run in every browser. Because each component of Ionic is a web component, Stencil was created as web component compiler for building fast, reusable UI components and Progressive Web Apps.

Learn out to Master Web Components in Ionic Framework and how to get started with Stencil.

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.

The Web Components are a set of web platform APIs that allow you to create custom, reusable, encapsulated HTML tags to use in web apps and web pages. Their functionality is encapsulated away from the rest of your code and you can utilize them in your web apps.

One way to explain what Web Components are, is to imagine them as reusable user interface widgets that are created using open web technologies. As they are part of the browser, don't need any external library or framework.

Using Web Components, you can create almost anything that can be done with HTML, CSS and JavaScript. So, this way you can create a portable component that can be easily reused. One of the aims of the web components is to help developers re using code as much as possible.

Web Components are based on 4 specifications:

• Custom Elements. They define the bases and fundamentals to design and use new types of DOM elements.
• Shadow DOM. It defines how to use encapsulated styles and markup within a web component. We will learn more about Shadow DOM below.
• ES Modules. It defines how to include and reuse JS documents in a standards based, modular, performant way.
• HTML Template. It defines how to declare code fragments that will not be used while the page is loading, but could be later instantiated at runtime.

Webpack bundles together JavaScript modules and other assets. It can be used to create single or multiple "chunks" that are only loaded when needed. Webpack can be used to take many files and dependencies and bundle them into one file, or other types.

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.

Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Check out the definitions below to learn more about some of these Ionic UI Components.

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.

Possibilities 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.

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.

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. Learn how to build forms with Ionic and Angular.

The Ionic grid is a powerful mobile-first flexbox system for building custom layouts.

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 CSS.

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

We know that building beautifully designed Ionic apps from scratch can be frustrating and very time-consuming. That's why we created Ionic 6 Full Starter App - The most complete Ionic Starter App to help you save hundreds of hours of design and development.

Some of the features you can find in this Ionic template are: Firebase integration, authentication, forms and much more. Also you will get more than 100 ready to use Ionic pages and components such as profiles, forms, cards, lists, categories, listings, and so much more.

I know, it may sound like a lot to start, but you are free to use just what you need and remove all the rest.

Try the demo

One of the biggest changes introduced by Ionic 4 is that now Ionic is completely agnostic of the base framework (previously this place was occupied only by Angular).

Since the components of Ionic Framework, such as <ion-button>, are now encapsulated as Web Components, it's no longer necessary to bind to a base framework. Web components work with any framework, in fact if you prefer you can not use any Framework at all!

This was a huge change for the Ionic community because it opened the door to applications that can be created in Vue or in React using the Ionic web components.

Navigation is one of the most important parts of an app. Solid navigation patterns help us achieve great user experience while a great router implementation will ease the development process and at the same time make our apps discoverable and linkable.

Because Ionic doesn't depend on a frontend framework anymore (previously it was binded to Angular), the navigation of your Ionic app will depend on how you choose to build your app.

For example, if you are building an Ionic and Angular application, you will use the Angular Router. But, if you are building an Ionic and React application, you will use the popular React Router library.

Ionic Angular Navigation

For Angular apps, Ionic Navigation relies on the Angular Router. The Angular Router is a solid, URL based navigation library that eases the development process dramatically and at the same time enables you to build complex navigation structures.

Additionaly, the Angular Router is also capable of Lazy Loading modules, handle data through page transitions with Route Resolvers, and handling Route Guards to fine tune access to certain parts of your app.

If you want to learn more about navigation in Ionic and Angular app, check out Ionic Navigation & Routing: The Ultimate Guide.

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 a backend 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 the 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.

If you want to build a more robust Ionic app, you can go with Nest. NestJS is basically a Node.js framework that enables you to easily build efficient and scalable server-side applications. The architecture is heavily inspired by Angular so if you are familiar with Angular, you will find very enjoyable to work with Nest. Learn how to integrate NestJS to your Ionic App.

PWAs are web applications that are regular websites or web pages, but can look to the user like traditional native mobile applications. Progressive web apps attempt to combine features offered by most modern browsers with the benefits of a mobile experience.

They are a new way to offer incredible mobile app experiences that are highly optimized, reliable, and accessible completely on the web.

Benefits of Progressive Web Apps

There are lots of benefits from usign PWAs such as:

• Escaping from the App Stores monopoly.
• Getting easily discovered through a simple web search.
• PWAs work offline and perform well on low quality networks.
• PWAs are fast! They load in seconds, with smooth interactions inside the app.
• Super accessible as they run on desktop and mobile and anywhere you have a browser.
• Small bundles. PWAs have a fraction of the size of a traditional mobile app.

Large and small brands are jumping on Progressive Web Apps to create better user experiences.

Learn everything about Progressive Web Apps in Ionic Framework and jump in this new and promising world.

As mentioned before, this Ionic dictionary will be in continuous 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 app to learn Ionic Framework with a real world example app just check Ionic 6 Full Starter App.