Ionic Framework logo | how to create Ionic applications

I use Ionic Framework in many of my personal projects, especially when creating mobile applications. This post is intended to be an overview on Ionic Framework and an introduction to my series of “how to” posts centered on learning how to create Ionic applications. The quickness and ease of building an application with Ionic Framework, coupled with the stylish UI components, make it a great choice for beginners and experts alike.

“Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies – HTML, CSS, and JavaScript – with integrations for popular frameworks like Angular and React.”

Ionic Framework Series Overview

In addition to Angular and React, Ionic Framework can also be integrated with most other frontend frameworks successfully. The Ionic Framework team is currently working on official support for Vue and the integration with Vue is currently in beta. You may opt to not use any frontend framework and instead use a script include in your markup. This gets you the core Ionic features as well as Ionicons. I have primarily used the Angular integration and script include, but I did try out the React integration when it came out of beta.

Ionic Framework is not only for mobile and desktop applications. Web applications and progressive web applications (PWAs) can also be built using Ionic Framework. While you could just use a frontend framework like Angular for developing web applications, Ionic Framework provides pre-built web components, icons and easy styling which make development of beautiful applications quick and easy.

Ionic Framework Details

  • Cross Platform mobile application development from one codebase, complete with adaptive styling
  • Ready-made components, typography, and an extensible base theme that adapts to each platform
  • Emulates native application UI guidelines
  • Uses native SDKs
  • Uses Capacitor or Cordova to deploy natively or runs in the browser as a web application
  • Makes use of modern web APIs like Custom Elements and Shadow DOM to promote stability
  • Can be used in most frontend frameworks successfully, but some frameworks require a shim for full Web Component support
  • Can be used on a single page or even in a context like WordPress
  • Comes with Ionicons, an open source icon pack with support for SVG and web font
  • Ionic CLI: a command line tool for quickly scaffolding Ionic applications. Ionic CLI also provides helpful commands to Ionic developers like starting a local development server. Ionic CLI can perform cloud builds and deployments, and administer your account on Ionic Appflow
  • Ionic Appflow: A commercial service for helping build, deploy, and manage Ionic applications in production. It requires an Ionic account and comes with a free “hobby plan” to try out some of the features
  • MIT licensed (can be used in personal or commercial projects for free)

Ionic Framework Series Table of Contents

  • Create Amazing and Fun Applications with Ionic: Script Include
  • Creating a Node.js Ionic App – coming soon
  • Creating an Ionic Angular App – coming soon
  • Creating an Ionic React App – coming soon
  • Creating an Ionic Vue App (beta) BONUS – coming soon
  • Compile an Ionic App into an Android App – coming soon
  • Compile an Ionic App into an iPhone App BONUS – coming soon
  • Compile an Ionic App into a Desktop App – coming soon
  • Creating an Ionic Progressive Web App BONUS – coming soon
  • Using Ionic Appflow BONUS – coming soon

*** Posts marked BONUS are only available to our Patrons on Patreon. Head to our Patreon page and become a patron for exclusive content and deals.

If you enjoyed this post, please follow us on  social media, share the post, or leave a comment.

Categories: How-To

1 Comment

Ionic application using a script include | H. Rustad Design LLC · October 17, 2020 at 11:22 am

[…] Want to learn more about what Ionic Framework is? Check out my blog post, “How-To: Create Amazing and Fun Applications with Ionic | Overview”… […]

Leave a Reply