What Is Ionic?

Maximilian Schwarzmüller
A free video tutorial from Maximilian Schwarzmüller
Professional Web Developer and Instructor
4.7 instructor rating • 38 courses • 1,609,082 students

Lecture description

What is Ionic? That's an important question and in this lecture, I'll explain in detail what Ionic is all about and why it's amazing!

Learn more from the full course

Ionic - Build iOS, Android & Web Apps with Ionic & Angular

Build Native iOS & Android as well as Progressive Web Apps with Angular, Capacitor and the Ionic Framework (Ionic 4+).

20:11:17 of on-demand video • Updated August 2021

  • Build native apps and progressive web apps from one and the same codebase
  • Build native apps for iOS and Android, using Angular and the powerful features Ionic offers
  • Dive deeper into Ionic to learn more about core and advanced features
  • Test iOS and Android apps on real devices and publish those apps to the app stores of the two platforms
English So what is Ionic? In the past, this would have been a bit easier to answer because Ionic evolved quite a bit across the last years and I'll come back to a brief history and future outlook later in this module. So assuming that you don't know anything about Ionic, which is fine, this course is for you just as it is for people who know a little bit about Ionic or have worked with older versions of Ionic, Ionic in the end is all about having one codebase which is the codebase for a web app and therefore uses HTML, Javascript and CSS, so what you would use to build normal user interfaces in the web and you use these tools and these techniques and these languages which you already know and take some magic to which I will come back in the next few seconds, added by Ionic to generate web apps, progressive web apps and I'll come back to what this is in a second too, iOS and Android apps and if you want, even electron desktop apps. Electron is a certain technology that allows you to wrap a web app into a desktop app so to say. So you can build an app for different platforms with one and the same codebase, with minor adjustments as you will learn in this course but really minor adjustments, not big ones and that of course is a big selling point. You can use your existing knowledge and get different apps which allows you to distribute your app on different channels. Now regarding that progressive web app part, a progressive web app in the end is a normal web app that looks and feels a bit like a native mobile app. It isn't a native mobile app, you don't distribute it through the app stores, it's still a website which you can find why via Google and so on but it's optimized to be reliable which means it even works offline or parts of it work offline, it should be fast and give the an user instant feedback upon actions and you also want to have an engaging app which is able to tap into some native device features, like using the location of the user or the camera. And with Ionic, you can build such a progressive web app, you can also build a normal web app which isn't particularly fast or which doesn't tap into native device features and you can also though get a real native app out of it, so that you can really target the broadest range of channels possible. Now let's dive a bit deeper into the Ionic platform then because it's nice that we know that with Ionic we can build such cross platform apps but what does this mean, what really is Ionic, how does it do that, what's this magic ingredient it adds? The Ionic platform as we should call it, is all about Ionic which in its core is a set of web components. Now web components on the other hand are a technique, a technology supported by modern browsers which allows you to basically build your own HTML elements that behind the scenes have more complex logic, something like a tabs component let's say where the user can toggle between different tabs. In the past, you could build something like this on your own by writing your own HTML, adding your own CSS and adding your own Javascript logic, Ionic gives you such a functionality packaged up in a finished, ready-to-use web component and it has lots of web components you can use. And that is the core of Ionic, this suite of nicely styled, platform-agnostic and automatically adjusting, so that the automatic you'll have to look of the platform you're running on web components which can dump into your web project. So these custom HTML elements could be built by you but with Ionic, you don't have to, you get a finished suite of such web components. Now these web components therefore are what you can see on the screen but Ionic and the Ionic ecosystem is more than just that because Ionic is not just this suite of components, Ionic is also the name of the company who developed or which developed these components and this company has more than just these components suite, it also works on a tool named capacitor. Now capacitor is essentially a tool that is capable of taking your existing web app and wrapping it into a so-called web view into a native mobile app. So in the end, it gives you a native mobile app that runs your web app inside of it but in a way that is indistinguishable for the user to a normal native app because it is a normal native app, just with a web app included in it but it looks and feels like a regular mobile app which you build with native mobile controls as you will see in this course and that's amazing because this allows you to take your web app and convert it into a mobile app easily. Now if you're a little bit more experienced in this area. you also might know Cordova which is a similar tool doing something similar, capacitor is basically a more modern version of that built from the ground up by the people at Ionic who have a lot of experience with that, who used Cordova in the past but now have their own solution which we'll also use in this course which is super fast, super easy-to-use and makes it really easy to build native mobile apps. So this is the part that allows us to use our web app and run it on a native device as a native mobile app and not just as a website opened in the browser. Now last but not least, the Ionic platform, so the set of tools we use from the Ionic ecosystem also has the Ionic CLI which stands for command line interface, which can work with other CLIs, like in this course the Angular CLI which it will use behind the scenes, which helps us create Ionic projects, manage them, use capacitor to convert our web app into a mobile app, so basically which helps us with the entire build workflow, that is the last important part from the Ionic world we'll be using. This makes developing simply easier, faster and allows us to finally build and package our app up. Now this is the Ionic platform, these are the tools you will learn about in this course in detail and this is just a big picture here obviously and this is what Ionic gives us to build amazing web apps which can work and run as web apps but then they look like native mobile apps already, thanks to these nice Ionic web components which by the way are also not just about the looks but also have a lot of rich functionality included in them, like this tab functionality I mentioned earlier but then Ionic doesn't stop there, doesn't stop at that web user interface, it then also gives you the tool to build that in an easy way and to then also convert it into mobile apps or even desktop apps if you want to. This is the Ionic platform in its core, there also are certain premium and cloud services offered by Ionic, for some of them you have to pay, others are free, I won't dive too much into them in this course but I want to mention nonetheless, these services allow you to build your app in the cloud, for example if you want to build an iOS app on Windows, this would be possible with the services and they also have other services for easier development or previewing and you can find all of that on their official web page which I'll also show you in a second. But this is Ionic in its core.