All you need to know to build your first Ionic 2 mobile app

Ionic 2 is based and integrates seamlessly with Angular 2 ,the next client side Javascript framework made by Google to build web apps and websites using modern Javascript standards ES6+.

Please note that these series of tutorials are for Ionic 2 which's a completly rewritten framework different from Ionic 1.So if you are looking to learn Ionic 1 ,this won't help you much .Ionic 2 is still in beta testing phase but it's the future framework for building mobile apps by Ionic team.

This tutorial has many parts :

Part 1 (this one) - Introduction to Ionic and the hybrid mobile apps.

Part 2 - Setup and installation.

Part 3 - ES6 and TypeScript.

Part 4 - Angular 2.

Part 5 - Building your first Ionic 2 app.

Part 6 - Creating pages and navigation.

Ionic and the hybrid mobile apps

So what's a hybrid mobile app ? and what's Ionic 2 ?

hybrid mobile apps are simply apps which are developed using web technologies like HTML,CSS and Javascript but run on mobile devices like native apps do, with the help of a native wrapper. Hybrid mobile apps allow web developers to develop for mobile devices using their web development skills with HTML,CSS and Javascript and any related technology and eliminates the need to learn native languages such as Java or Swift for developing mobile apps. One more nice thing about hybrid mobile apps.They allow developers to target multiple mobile paltforms such as Android,iOS and Windows with one code base so you don't need to create an app from scratch,implementing the same idea,for each platform.

Since hybrid mobile apps are just web apps ,to run them as mobile apps we need a native wrapper.There are many but the most popular one is Cordova.the main role of Cordova is to provide a web view for loading and rendering your app.Cordova has also another job which allows your app to use the native functionality of mobile devices such as Camera ,Sensors and Contacts list etc..

Cordova has many ready plugins to access the native features of mobile devices and developers can also create their own Cordova plugins.

What about Ionic 2 ?

Ionic 2 is the new version of Ionic framework which uses Cordova to access native device functionality and provides web developers with ready UI components styled to appear like the native mobile interface . Ionic 2 is based on Angular 2 instead of Angular 1 used by Ionic 1 .Ionic 2 is still in beta version and is completly rewritten from scratch to provide more performance for mobile apps. Also both Angular 2 and Ionic use ES6+ features to simplify app development.

So now thanks to frameworks such as Ionic 2 you can leverage your web development skills to not just build web apps but also mobile apps for your clients or to implement your ideas and publish them to the app stores .

Ionic has a great community around it and it's one of the most popular hybrid mobile frameworks out there .developers around the world are starting to adopt Ionic and you should do too, especially that's easy to learn if you are already a web developer also the Ionic marketplace and Ionic Themes can be very usefull if you want to buy or sell beautifull Ionic themes.

Is there any difference between native and hybrid mobile apps ?

Yes,there are many differences between hybrid and native mobile apps such as,for example, the tools and languages used to develop them but the most important difference is performance , a native app has always better performance since there is no middleware between the app and the device api (the native wrapper and web view in case of hybrid apps) but browsers (web views) are getting faster and also mobile devices become more powerfull each day making the difference in performance unnoticeable for the end user.There some type of apps that need every available bit of performance that mobile devices can offer so this kind of apps need to be native, but don't worry the majority of apps can be built with a hybrid framework without any problem.

The Ionic Show : Episode 7 about Ionic 2


So that's all for the first part .In the next part,we are going to setup our development environment for developing hybrid mobile apps using Ionic 2 and Angular 2.


Official Ionic 2

Blog post announcing Ionic 2

comments powered by Disqus