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


We will now mention the key pieces that make the 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 or to add cordova plugins. By typing $ ionic --help in your console, you can see all the list of the available commands that you can use.

UI Components

Ionic works to enrich user interface and uses AngularJS to construct a functional application structure. 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 list views, navigation components like side menus and tab bars, action sheets, among others.


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

Ionic API

Ionic gets the most out of Angular to build the functional application structure. This includes UX interactions such as form validations, navigation logic between views and all the boilerplate to create custom UI components which makes a consistent app, not just html and css.


In the official docs, you’ll find more information and example about things like checkboxes, toggles, pull to refresh, scrollable panes, infinite scroll, and many more.

Ionic Native

Ionic Native is a TypeScript wrapper for Cordova plugins that make possible to use any mobile native functionality. 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 and also include a code example you can re use for your needs.

Angular / Angular 2+

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


During the past years, Angular’s 2 structure has unfolded and developed in quite an impressive way. Instead of a replacement for AngularJS 1.x, Angular 2 should be taken into account as a complete new framework built on the lessons learned with AngularJS 1.x. Therefore, the different name where Angular is applied to signify Angular 2 and AngularJS alludes to AngularJs 1.x. Here we will refer to Angular and Angular 2 mutually, but both of them make reference to Angular 2 or higher such as Angular 4.

Key highlights and differences between Ionic 2 and Ionic 1

Ionic 2+ takes everything you already know and love about Ionic 1 and builds on top of it to provide a much more flexible and mature framework. Personally, as a developer, I find Ionic 2+ apps to be incredible more performant than Ionic 1 apps.


Ionic 1 is based on Angular 1.x, and Ionic 2 is based on Angular >= 2.x. The performance boost you get just by using Angular >= 2.x alone is significant.


When it comes to URLs, Ionic 2 works a bit differently than Ionic 1 and Angular. Instead of using URLs to navigate, we use them to make sure we can always come back to a page (on app launch, for example). This means we aren’t limited to using href to navigate around. However, we still have the option to use a URL to navigate to a page when necessary.


All Ionic 2 components use the famous on push strategy, which means the change detection is not performed all the time, only when the inputs change.


In Max Lynch’s (one of the creators) words: “WIth Angular 2, we want to make Ionic faster, easier to use, and more powerful. The new component model makes building components and extending Ionic much easier. Angular 2 apps are easier to write and interact with your data in a more expected way. The framework naturally works with web standards instead of creating new ones. Learning Angular 2 will be easier, and more developers will be able to work on the code base. A win-win-win-win*N.”


Another comment from Max: “With Ionic 2, we've gone back to square one and completely rethought how a mobile toolkit should work. We've dramatically improved performance, reduced the complexity of the code you need to write, and made it possible to build completely bespoke apps that compete with the best apps in the world. We're pretty confident Ionic 2 will change what you think about mobile apps and the future of the web forever.”

Next Steps

Now that you know the basics about Ionic Framework, you can continue setting up your development environment to start building Ionic apps.


We have more beginners tutorials that you may find super useful during your learning journey.