Original subtitles

Now that we have this detailed first look at what Ionic is and which kind of tools it gives us,

let's take a closer look at this Ionic ecosystem

and for that, let's go back to our starting point which is that we want to build a web app with or without

any framework,

so in this course with Angular but you could even build it with vanilla Javascript or with React or Vue,

Ionic works with all these alternatives.

So you're building this web app and you want to keep it as a web app, possibly a so-called progressive

web app with these cooler features,

this fast and reliable interaction

and you also want to have a native mobile app and then you have these suite of web components which

look like this, which look like normal HTML tags except for that they aren't.

You then have your tools to convert

this app and you have your tools for the development, so the Ionic CLI and so on. This is essentially what

we saw in the last lecture already

but this is just another way of depicting it or of showing it on a slide.

Now of course with that knowledge in mind, we can create an Ionic project and we'll do so in this section

already.

Now this project essentially is all about our app, so about our code we write to create a nice web application,

a nice website

in the end

and that of course means we will write our own code

and again, that could be written in vanilla Javascript or with any framework like in this course with Angular.

So we add such a front-end framework and that is optional

as I just mentioned, you could use vanilla Javascript and then we add the Ionic framework,

so this set of Ionic web components to get nice, rich, web elements added to this app automatically or with

very little effort, so that the app already looks nice and has a lot of nice capabilities which would

be quite a lot of work to build on our own otherwise.

So with that added and with a lot of cool functionalities added therefore, we can continue. Now as a side

note because that's already interesting to know here, the web components we're adding here, the Ionic

web components are built with a tool called Stencil.

You don't need to learn Stencil to work with Ionic, not at all

and we will not learn it in this course

but if you want to learn how the Ionic web components were built behind the scenes,

so if you want to know a little bit more about that or if you want to build your own web components

which you can use in conjunction with your framework and with Ionic, then learning Stencil could be

well worth it

and I do have a complete web component with and without Stencil of course,

so all in one course here on Udemy.

So definitely check this out if you want to learn all about the technology the Ionic team used to build

their Ionic web components but that's just a side note. So these web components are built with Stencil

and that is all done for you, you just add these web components. And in the end, you can then build different

kinds of apps based on your single codebase based on your app

and this is again done with Capacitor or Cordova

as I mentioned, in this course we'll use Capacitor which is a tool developed by the Ionic team,

so we'll stay entirely in that Ionic world and what this tool in the end does is it acts as a bridge

between our web code, our web Javascript code and then the native platform we're running on.

So that from our Javascript code, we can trigger certain functions which then in the end trigger native

code on your device,

so real native code there to for example open the camera, to get the user location, to show an alert or

anything like that,

this can then be done with real native code executed on your behalf without you needing to write it

by tools like Capacitor or Cordova which you can even use kind of together as I'll also show in

this course

but we'll primarily use Capacitor here.

So this is what Ionic is all about, in this course we will learn all about Ionic,

we will do that with Angular as a front-end framework and we'll also learn about Capacitor and we will

then therefore build a progressive web app, as well as our mobile apps. We'll not cover Stencil or anything

like that.