What is Ionic Framework?

Ionic framework allows you to easily build apps using friendly web tech you are already familiar with. The good news is: if you can manage to create websites, you already know how to build mobile apps. 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, one of the main concepts of Ionic Framework is Adaptive Styling that guarantees your app will look superb on every single device because every Ionic component adapts its look to the platform on which the app is running on.

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

Let's see the key pieces that make Ionic Framework such a solid tool.

CLI

The Ionic CLI is a fantastic tool for developing Ionic apps. It will help you along your developing journey to do things such as building your app for iOS or Android platforms both with Cordova or Capacitor. By typing $ ionic --help on your console, you can see the list of available commands that you can use.

UI Components

Ionic works to enrich user interface and can be used with a framework such as Angular, React or Vue to construct a functional application structure. Also it can be used without any framework at all. This offers a mix of power and beauty. Core mobile UI paradigms and out of the box components are handy to developers, allowing them to concentrate in assembling apps, rather than common user interface elements. These includes lists, cards, inputs, navigation components such as side menus, tab bars, action sheets, among many others.

Ionic apps are made of high-level building blocks called components. The framework provides some super handy components and directives, as well as CSS components which will provide most of the basic elements you need to build a mobile application. Also, the Ionic components allow the addition of common UI/UX solutions such as sliding menus, modals, alerts and many more.

Ionic Native APIs

Ionic Native APIs allow you to build native-powered app experiences with a collection of open source plugins and integrations that make it easy to add native device functionality to any Ionic app with Capacitor or Cordova. A typical example is if you want to use the phone's camera inside your app to let the user take a picture (that you will then use in the app). There are plenty of Ionic Native plugins that you can use to extend your app functionality.

In our blog you can find lots of tutorials that show how to add Ionic Native components to your Ionic app. Our tutorials also include a code example like a free starter app that you can re use in your own projects.

Main differences between Ionic versions

Everything started back in 2013 with Ionic 1 which was based on Angular 1. Many years have passed from then and made the Ionic Framework a solid tool to build any kind of app!

Then Ionic 2 arrived which was based on Angular 2.x. That change was huge and brought lots of breaking changes but the performance boost was worth it. Because back then Ionic was tied to the Angular framework, they were changing their versions as Angular did.

Ionic 3 brought lots of performance improvements, and reduced the complexity of the code you need to write to create an app. Navigation was a bit different, because instead of using URLs to navigate, they used an on push strategy. It worked like a stack, you pushed a page on top of the stack to navigate forward and pulled the last one to go back.

Ionic 4 was a huge change! This new version offered significant changes in performance, compatibility with multiple frameworks (not only with Angular as previous versions). Ionic 4 introduced Web Components.

Web Components

Ionic Framework 4 has been completely rebuilt from the ground up using standard Web APIs, and each component is packaged up as a Web Component. This allowed Ionic framework to be projected into the future by relying only on the APIs browsers support natively and also keeping the public API for each component stable.

Because each component of Ionic 4 is a web component, they created and open sourced a tool called Stencil. Stencil is a web component compiler for building fast, reusable UI components and Progressive Web Apps.

Web Components? Shadow DOM? CSS Variables? Stencil? Are you getting lost by all these new and important concepts? Don't worry, we wrote a ionic web components guide covering everything from styling and customizing Ionic web components, to building custom web components with Stencil and then use them in your Ionic projects.

Framework Agnostic

One of the biggest changes introduced by Ionic 4 is that it's 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.

Framework-specific tooling

Ionic 4 also embraced framework-specific tooling. Ionic 3 had custom command line and build tooling, as well as custom router implementations, which has often led to some churn and confusion. So Ionic 4 embraced the tooling and architecture of each specific framework, which makes much simpler to integrate our technology. Using Angular? Use the Angular CLI. Using Vue? Use the Vue CLI, etc.

And this also applied to Navigation, Ionic Angular apps will now use Angular Router library, Ionic React apps will use React Router library. In my opinion, this was a big win.

So, this change brought the best of both worlds because as your framework of choice evolves, you get the latest and greatest tooling, leaving more time to focus on what really matters: adding more value to your app!

Because the change from Ionic 3 to Ionic 4 was so important we wrote a specific post and migration guide that you can visit to learn more.

Then, at the beginnings of 2020, Ionic 5 arrived! The highlights of Ionic 5 were mainly centered around design and UI/UX, featuring a brand new API to create outstanding animations, new and improved Ionicons icon library, components featuring iOS new design spec and also some useful customization improvements regarding component styling.

As we write this post (August 2020), Ionic 5 is currently the latest version. The migration process from Ionic 4 to Ionic 5 is very straight forward.

We know that building good Ionic apps from scratch can be frustrating and very time-consuming. That's why we created Ionic 5 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 will be able to find in this ionic template are: Firebase Integration, Firebase CRUD, Social Authentication, Forms and Validations, Capacitor, examples of how to use google maps, video playlists, internationalization and much more. Also you will get more than 125 ready to use Ionic pages and components such as Profiles, Forms, Cards, Lists, Categories, Listings, eCommerce, and so much more! Try the demo to see all the types of apps you can build with this premium Ionic Starter.

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!

Next Steps

If you are new to Ionic Framework, I suggest your to read how to build and Ionic 5 app from scratch. On this post you will be able to learn all the core concepts of Ionic Framework such as Project Structure, Navigation, UI Components, Design tips and Data Integration with a remote API.

Also, to help you through your Ionic Framework learning process, we created an Ionic Angular app with a question and answer format (Q&A), where users will be able to ask, answer and vote questions. So, on build a complete app with ionic framework tutorial you will learn all the concepts needed to create your first ionic app!

Also, make sure you already setted up your development environment to start building Ionic apps.

Enjoyed this ionic guide? We have more beginners tutorials that you may find super useful during your learning journey. Please feel free to leave any question or comment below.