Now that we have had a quick introduction to the hybrid mobile application development,

let's talk about one specific framework that is

useful for doing hybrid app development — the Ionic framework.

What is the Ionic framework?

What does it bring to the game and how can we leverage

the Ionic framework to develop hybrid mobile applications?

Let's talk briefly about that in this lecture

and then we will move on to the exercises where we

will use the ionic framework to start developing a mobile application and,

along the way, learn the details of both Ionic as

well as Cordova as we progress through this course.

When we talk about hybrid mobile application development,

we have to talk about before Ionic and after Ionic — BI and AI.

Before ionic, people had already started

leveraging the HTML CSS and Javascript skills to be able to target the mobile platform.

The HTML5 frameworks like Bootstrap and the use of responsive web design,

we had already started developing mobile applications using their skills.

jQuery Mobile, a derivative from jQuery,

that was targeted at the mobile platform,

formed a very important first step

towards targeting the mobile platform in an effective way.

But of course, both these approaches beat

the responsive web design that Bootstrap or the

jQuery Mobile were dogged with a lot of performance issues.

And hence, hybrid mobile app development received

a bad rap in its early days and led to not so good user experience,

whereby people abandoned that approach initially.

But then, once you have seen a way,

there is always somebody that comes along and discovers

a better approach for targeting

the same thing — and that is where the ionic framework came into being.

The Ionic framework is

an HTML5-based framework that is designed to help you develop mobile applications,

with a native look and feel, as far as possible.

As you develop the application in this course,

you will begin to see how well the ionic framework has been designed to

enable you to develop your applications with

as much of a native look and feel as possible.

Ionic is mainly focused on the front-end and uses Angular as

its foundation for developing

the Ionic components that we will use in developing the Ionic application.

So your skills in Angular that you have learned in

the previous course will definitely keep you in good stead as you go

through this course to learn about targeting mobile platforms

using your HTML5 CSS and Javascript based skips.

Before we talk about hybrid mobile development,

as we have already understood,

the best way to target a mobile platform is to use a fully native approach.

With the native approach, obviously,

you get full access to the data platform and you can get

full native look and feel for your mobile application.

That is definitely the best that you can

get in terms of targeting each specific platform.

But then, our question is to be able to leverage

our existing app development skills to be able to target that mobile platform.

Now this is where most of these mobile platforms also

support a Javascript API or a Javascript interface and that

is what was leveraged by platforms like Cordova to

develop plugins that enable access to the native capabilities.

So the Javascript API that is supported,

be it with Android or be it with iOS,

is what enables a framework like Cordova to be able to access the native capabilities.

So as long as a suitable working plugin that can be

developed using Javascript that can leverage the access to the native platform,

you have access to the underlying native capability at the Javascript level.

So as long as platforms like Cordova or PhoneGap export a javascript API,

this can be leveraged then by the hybrid app development frameworks like Ionic,

to be able to target specific mobile platforms.

So Ionic comes in with the ability to use your HTML CSS and Javascript

together with your skills in

the Angular framework to enable you to develop mobile applications.

That is the reason why I find Ionic to be interesting follow up

for the Angular skills that you have learned in the previous course.

In the next course we will be looking at using native script,

again using the Angular skills,

to be able to develop mobile applications.

So to summarize, Ionic brings

a mobile-optimized HTML5 CSS and Javascript based elements

that enable you to develop hybrid mobile applications.

It leverages Angular components.

Ionic itself provides a number of Ionic components which are built as Angular components

and also provides its own set of directives that you can use in their templates.

It is native style — meaning that once you develop your mobile application,

then you package the application for the different native platforms,

be it IOS or Android,

Ionic will automatically adapt your UI for using as

close to the native look and feel of each specific native platform.

And Ionic also uses Sass for its development and we will see how we can leverage

our Sass knowledge from the first course also to be able to

customize some of the aspects of Ionic in this course.

So where is the delay in getting started?

Let's go on to get hold of the Ionic platform,

the Ionic command line interface,

and Cordova and get started developing our Ionic application in this course.

Introduction to the Ionic Framework

Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

Conheça os instrutores