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.
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.
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 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.
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.
If you want to start creating your Ionic Framework app but don't know how to start, I suggest you to try Ionic 6 Full Starter App. It's a mobile app and PWA built with Ionic and Angular that you can use to jump start your app development and save yourself 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.
If you are new to Ionic Framework, I suggest you 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!
Don't forget to 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. Thanks for reading.
Liked this Ionic Tutorial?
Leave your comments below.