2024-02-04T07:25:10.644Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
4e7fbfbb-2702-41f3-a812-62fae75e9d07
3ba8255beb09325eb6150e673b6e783f4ff9d2c30f3b3a4f198be099db5c0b2e
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
The beta release of Ionic 4 was announced yesterday.
And with it comes a whole suite of new features that take advantage of the best technologies that we have available on the web.
In today's video I'll show you some of the most important changes if migrating from version 3 to 4, but we'll also answer the question of should I use Ionic?
Because in 2018 there's a whole bunch of different we can build and deliver apps, and you really need to know the trade offs between each strategy to make a good business decision.
If you're new here, like and subscribe.
And if you're serious about Building apps, consider becoming a pro member at angularfirebase.com.
So should you use Ionic to build your mobile app?
To answer this question, you really need to understand your own technical demands and weigh the pros and cons of different mobile app development approaches.
There are basically three main ways that people are building mobile apps The first one we'll look at is using the native SDKs directly.
This means you'll write a separate app for each platform that you wanna target in its native language.
For Android, that would be Kotlin or Java.
In iOS, that means Swift or Objective c.
And on the web, that means JavaScript.
Generally speaking, the highest quality, best performing apps that you'll find are built in their native SDKs.
But there's a pretty obvious drawback here and that's the cost.
More code to maintain obviously means more operating cost, but you also have to hire the right talent to be able to maintain these code bases, which is pretty hard to do especially for iOS and Android.
This brings me to the second strategy, which is where Ionic 4 falls, and that's building a hybrid mobile app using web technologies.
The idea is to write your code once and run it on multiple platforms seamlessly.
And while that sounds great, it's not without its trade offs.
A hybrid app is really just a web app that gets embedded on the native device through a web view.
A hybrid app is not able to communicate with a lot of native device features directly, So it uses a bridge known as Apache Cordova or Capacitor that wrap native code in a JavaScript API so it can be Accessed by the web app.
So the obvious benefit here is that you can leverage web developers to build mobile apps that are cross platform for a lot less money.
And if done well, it should be indistinguishable from a from a truly native app.
But because you've decoupled yourself from the native SDKs, they sort of just become a black box.
That means debugging and performance optimization become a little more difficult.
And the 3rd approach is to use a framework like React Native, Flutter, or NativeScript to build your mobile app.
The primary difference between Ionic is that these frameworks don't use a web view for the UI.
They go about it in different ways, but that's the primary distinguishing feature between these frameworks and Ionic and that can offer some advantages which I'll talk about here in a minute.
So now let's look at a couple of real scenarios to decide if Ionic is a good fit or not.
Let's say you're the CTO of your company and you need to decide if Ionic is going to be a good front end for your software as a service product.
In my opinion, the right decision really comes down to how you're going to be delivering the app to your customers.
Let's say you're focusing only on progressive web apps, which are now shipped in all major browsers.
In this scenario, Ionic is going to be mostly useful to you as a component library.
When we get to the code, we'll see that an Ionic Core app looks very similar to just a vanilla Angular 6 CLI app.
So the primary value add of Ionic over just Angular is that you have access to these prebuilt components and services that help you solve common UI use cases.
Another potential scenario is that your primary product is a progressive web app, but your customers also want Support for iOS and Android apps.
This is the niche where hybrid apps shine the brightest.
If a PWA is your primary product, You really wanna focus your resources on optimizing that experience.
But Ionic makes it relatively easy to take that existing code base and get it deployed to the App Store.
And you can do it without tripling your development cost, which is always worth considering.
That brings us to the 3rd scenario where the mobile app is your primary product And a progressive web app is more of just an afterthought or nonexistent at all.
Ionic 4 has hedged its bets on web technologies such as web components, and it really feels Optimize for products that are building progressive web apps.
You can definitely use Ionic for exclusively building native mobile apps, But there's a few advantages to using non WebView frameworks that you should be aware of.
The biggest advantage, in my opinion, is that you can run purely native code inside of frameworks like React Native and Flutter.
This means that you can overcome certain performance issues because you're no longer using a bridge.
You're actually just interacting directly with native SDK code.
And Flutter doesn't use a bridge at all, so you're just more likely to get better performance right out of the box.
Another thing these frameworks do is hot reloading, which is different than the live reloading that Ionic as hot reloading maintains the state of the app while simultaneously updating any changes to your code.
This might not sound like a big deal, but I found that it makes the development process go significantly faster when you're working with native emulators.
And the 3rd advantage you'll notice is with testing.
Ionic does have some testing guidance in version 4, which is based off the Angular CLI's implementation with Jasmine and Karma.
That's great for the web, but with React Native and Flutter, you'll notice a lot more resources dedicated to testing on real mobile Devices.
So those are the main benefits of these frameworks, but they also have their drawbacks as well.
For Flutter, you'll have the learning curve of the Dart programming language, which is pretty obscure.
And it's common to hit performance bottlenecks with the React Native Bridge, so you may end up writing more native code than you had intended originally.
So the bottom line is that you need to look at your own situation and then weigh the pros and cons of the various options that are out there.
Now that we know that, let's go ahead and jump into an Ionic 4 app and take a look at the actual developer Experience.
You'll need to install Ionic globally with NPM and you'll wanna make sure that you have version 4 point o or greater installed.
One of the biggest differences with Ionic 4 is that instead of using Angular components, it uses Web Components, which is made possible by a really awesome library called Stencil, which you should definitely check out if you're into web components.
One of the key benefits of this move is that Ionic 4 is now framework agnostic, meaning you can use Vue JS, Angular, React, or just plain JavaScript to build your apps.
But if you're an Angular developer, you still have first class support for Angular, and that's what I'm going to show you today.
So we can run Ionic start with the tabs template and we'll set the type to Angular.
If you open up this project, you'll know that it looks very similar to an Angular 6 CLI project, and that's because it's using the Angular 6 CLI under the hood.
It adds a few extra things here specifically for native mobile apps, such as the config XML for Cordova and then this resources file for your native builds.
The CLI does have some extra commands for building your apps on native platforms, but for the most part, it works just like the Angular CLI.
If you're migrating from Ionic 3, you'll notice some changes to the project directory structure.
All of the app code is contained in the app directory, which follows the same pattern as you would see in a typical Angular app.
To migrate your code over, you could simply copy and paste into the app directory, and there's a few Versus Code plugins out there that will help you rewrite all of the paths in your app.
Perhaps the biggest change you'll notice in Ionic 4 is that it now uses the Angular router instead of Bionic's own push pop kind of navigation system.
In my opinion, this is a really positive change because The Angular router is super powerful and I've covered this in previous videos.
You'll have better tools in place for managing router state and your end users won't notice any changes whatsoever.
Let's take a closer look at the router by generating a new page component.
In Ionic, a page is just a component, but it will automatically be wired up with your router for lazy loading.
You'll notice that generates a new directory called profile in the app directory.
And if we go into the App Routing Module, you'll see that it is set up this component to be lazy loaded to the profile path.
This is actually a really nice feature, I kind of hate setting up lazy loading manually, so it's nice that the Ionic framework does this for you right out of the box.
If we serve the app, we can just route directly to that profile path and we'll see this component gets rendered there.
Yet another benefit of using the Angular router is that our paths are now much easier for deep linking because they're just a regular URL and not using the hash location strategy, which was the case in Ionic 3.
There's a long list of breaking changes with the way components are set up, But these are all pretty minor breaking changes, so it's not that hard to migrate in my experience.
One change you'll notice is that the Ionic button is now a custom element instead of a And it still comes with all the built in mechanisms that you would expect to control the shape, color, and style of the button.
Navigating to different pages with a button is easier than ever because we can just use the router link directive from Angular and pass them the path that we want to navigate to.
Then if we go into the component itself and click this button, you'll see that it navigates between components, but it also adds this nice little animation between those transitions.
So that's a nice little UI feature to have implemented right out of the gate.
And if you're worried about breaking changes, there's a detailed doc on GitHub that will break each one of down.
Obviously, we can't cover them all here, but they're really just different naming conventions and everything will basically feel the same from Ionic 3.
And another thing you should be aware of is that it will be possible to use capacitor plugins instead of cordova plugins in the future.
I covered this in my 5 apps in 5 minutes video, so make sure to check that out if you haven't seen it already.
Another minor but important change you'll notice is that instead of providers in Ionic, they're now called services, which again aligns with the Angular conventions.
So if you're migrating over, you'll likely wanna change your providers to services.
And aside from the naming, they work exactly the same as they did previously.
And the last thing you'll notice is that some of the synchronous APIs are now asynchronous APIs.
We can show an example of this by using the alert controller.
And we'll go ahead and inject that in the constructor in this component.
Rendering these UI elements happens in the context of a Promise now, so we can use the AsyncAwait syntax which is really nice.
Aside from using AsyncAwait, everything else looks pretty much exactly the same.
And you could even convert these promises to observables if you wanna do it in more of a reactive programming style.
But basically all we're doing here is writing a method that will be able to show the user an alert message when a button is clicked.
This is really common functionality that you'll use all the time and it's really nice to have a framework that does this kind of stuff for you.
So should you use Ionic 4?
And in my opinion, the answer is yes, assuming that you have the right use case for a hybrid app strategy.
I'm gonna go ahead and wrap things There.
If this video helped you, please like and subscribe.
And if you're ready to build a production grade Ionic app, consider becoming a pro member to get access to my Ionic native plus Firebase course.
Thanks for watching and I'll see you soon with more Ionic 4 content.

Speaker 0: The beta release of Ionic 4 was announced yesterday. And with it comes a whole suite of new features that take advantage of the best technologies that we have available on the web. In today's video I'll show you some of the most important changes if migrating from version 3 to 4, but we'll also answer the question of should I use Ionic? Because in 2018 there's a whole bunch of different we can build and deliver apps, and you really need to know the trade offs between each strategy to make a good business decision. If you're new here, like and subscribe.

And if you're serious about Building apps, consider becoming a pro member at angularfirebase.com. So should you use Ionic to build your mobile app? To answer this question, you really need to understand your own technical demands and weigh the pros and cons of different mobile app development approaches. There are basically three main ways that people are building mobile apps The first one we'll look at is using the native SDKs directly. This means you'll write a separate app for each platform that you wanna target in its native language.

For Android, that would be Kotlin or Java. In iOS, that means Swift or Objective c. And on the web, that means JavaScript. Generally speaking, the highest quality, best performing apps that you'll find are built in their native SDKs. But there's a pretty obvious drawback here and that's the cost.

More code to maintain obviously means more operating cost, but you also have to hire the right talent to be able to maintain these code bases, which is pretty hard to do especially for iOS and Android. This brings me to the second strategy, which is where Ionic 4 falls, and that's building a hybrid mobile app using web technologies. The idea is to write your code once and run it on multiple platforms seamlessly. And while that sounds great, it's not without its trade offs. A hybrid app is really just a web app that gets embedded on the native device through a web view.

A hybrid app is not able to communicate with a lot of native device features directly, So it uses a bridge known as Apache Cordova or Capacitor that wrap native code in a JavaScript API so it can be Accessed by the web app. So the obvious benefit here is that you can leverage web developers to build mobile apps that are cross platform for a lot less money. And if done well, it should be indistinguishable from a from a truly native app. But because you've decoupled yourself from the native SDKs, they sort of just become a black box. That means debugging and performance optimization become a little more difficult.

And the 3rd approach is to use a framework like React Native, Flutter, or NativeScript to build your mobile app. The primary difference between Ionic is that these frameworks don't use a web view for the UI. They go about it in different ways, but that's the primary distinguishing feature between these frameworks and Ionic and that can offer some advantages which I'll talk about here in a minute. So now let's look at a couple of real scenarios to decide if Ionic is a good fit or not. Let's say you're the CTO of your company and you need to decide if Ionic is going to be a good front end for your software as a service product.

In my opinion, the right decision really comes down to how you're going to be delivering the app to your customers. Let's say you're focusing only on progressive web apps, which are now shipped in all major browsers. In this scenario, Ionic is going to be mostly useful to you as a component library. When we get to the code, we'll see that an Ionic Core app looks very similar to just a vanilla Angular 6 CLI app. So the primary value add of Ionic over just Angular is that you have access to these prebuilt components and services that help you solve common UI use cases.

Another potential scenario is that your primary product is a progressive web app, but your customers also want Support for iOS and Android apps. This is the niche where hybrid apps shine the brightest. If a PWA is your primary product, You really wanna focus your resources on optimizing that experience. But Ionic makes it relatively easy to take that existing code base and get it deployed to the App Store. And you can do it without tripling your development cost, which is always worth considering.

That brings us to the 3rd scenario where the mobile app is your primary product And a progressive web app is more of just an afterthought or nonexistent at all. Ionic 4 has hedged its bets on web technologies such as web components, and it really feels Optimize for products that are building progressive web apps. You can definitely use Ionic for exclusively building native mobile apps, But there's a few advantages to using non WebView frameworks that you should be aware of. The biggest advantage, in my opinion, is that you can run purely native code inside of frameworks like React Native and Flutter. This means that you can overcome certain performance issues because you're no longer using a bridge.

You're actually just interacting directly with native SDK code. And Flutter doesn't use a bridge at all, so you're just more likely to get better performance right out of the box. Another thing these frameworks do is hot reloading, which is different than the live reloading that Ionic as hot reloading maintains the state of the app while simultaneously updating any changes to your code. This might not sound like a big deal, but I found that it makes the development process go significantly faster when you're working with native emulators. And the 3rd advantage you'll notice is with testing.

Ionic does have some testing guidance in version 4, which is based off the Angular CLI's implementation with Jasmine and Karma. That's great for the web, but with React Native and Flutter, you'll notice a lot more resources dedicated to testing on real mobile Devices. So those are the main benefits of these frameworks, but they also have their drawbacks as well. For Flutter, you'll have the learning curve of the Dart programming language, which is pretty obscure. And it's common to hit performance bottlenecks with the React Native Bridge, so you may end up writing more native code than you had intended originally.

So the bottom line is that you need to look at your own situation and then weigh the pros and cons of the various options that are out there. Now that we know that, let's go ahead and jump into an Ionic 4 app and take a look at the actual developer Experience. You'll need to install Ionic globally with NPM and you'll wanna make sure that you have version 4 point o or greater installed. One of the biggest differences with Ionic 4 is that instead of using Angular components, it uses Web Components, which is made possible by a really awesome library called Stencil, which you should definitely check out if you're into web components. One of the key benefits of this move is that Ionic 4 is now framework agnostic, meaning you can use Vue JS, Angular, React, or just plain JavaScript to build your apps.

But if you're an Angular developer, you still have first class support for Angular, and that's what I'm going to show you today. So we can run Ionic start with the tabs template and we'll set the type to Angular. If you open up this project, you'll know that it looks very similar to an Angular 6 CLI project, and that's because it's using the Angular 6 CLI under the hood. It adds a few extra things here specifically for native mobile apps, such as the config XML for Cordova and then this resources file for your native builds. The CLI does have some extra commands for building your apps on native platforms, but for the most part, it works just like the Angular CLI.

If you're migrating from Ionic 3, you'll notice some changes to the project directory structure. All of the app code is contained in the app directory, which follows the same pattern as you would see in a typical Angular app. To migrate your code over, you could simply copy and paste into the app directory, and there's a few Versus Code plugins out there that will help you rewrite all of the paths in your app. Perhaps the biggest change you'll notice in Ionic 4 is that it now uses the Angular router instead of Bionic's own push pop kind of navigation system. In my opinion, this is a really positive change because The Angular router is super powerful and I've covered this in previous videos.

You'll have better tools in place for managing router state and your end users won't notice any changes whatsoever. Let's take a closer look at the router by generating a new page component. In Ionic, a page is just a component, but it will automatically be wired up with your router for lazy loading. You'll notice that generates a new directory called profile in the app directory. And if we go into the App Routing Module, you'll see that it is set up this component to be lazy loaded to the profile path.

This is actually a really nice feature, I kind of hate setting up lazy loading manually, so it's nice that the Ionic framework does this for you right out of the box. If we serve the app, we can just route directly to that profile path and we'll see this component gets rendered there. Yet another benefit of using the Angular router is that our paths are now much easier for deep linking because they're just a regular URL and not using the hash location strategy, which was the case in Ionic 3. There's a long list of breaking changes with the way components are set up, But these are all pretty minor breaking changes, so it's not that hard to migrate in my experience. One change you'll notice is that the Ionic button is now a custom element instead of a And it still comes with all the built in mechanisms that you would expect to control the shape, color, and style of the button.

Navigating to different pages with a button is easier than ever because we can just use the router link directive from Angular and pass them the path that we want to navigate to. Then if we go into the component itself and click this button, you'll see that it navigates between components, but it also adds this nice little animation between those transitions. So that's a nice little UI feature to have implemented right out of the gate. And if you're worried about breaking changes, there's a detailed doc on GitHub that will break each one of down. Obviously, we can't cover them all here, but they're really just different naming conventions and everything will basically feel the same from Ionic 3.

And another thing you should be aware of is that it will be possible to use capacitor plugins instead of cordova plugins in the future. I covered this in my 5 apps in 5 minutes video, so make sure to check that out if you haven't seen it already. Another minor but important change you'll notice is that instead of providers in Ionic, they're now called services, which again aligns with the Angular conventions. So if you're migrating over, you'll likely wanna change your providers to services. And aside from the naming, they work exactly the same as they did previously.

And the last thing you'll notice is that some of the synchronous APIs are now asynchronous APIs. We can show an example of this by using the alert controller. And we'll go ahead and inject that in the constructor in this component. Rendering these UI elements happens in the context of a Promise now, so we can use the AsyncAwait syntax which is really nice. Aside from using AsyncAwait, everything else looks pretty much exactly the same.

And you could even convert these promises to observables if you wanna do it in more of a reactive programming style. But basically all we're doing here is writing a method that will be able to show the user an alert message when a button is clicked. This is really common functionality that you'll use all the time and it's really nice to have a framework that does this kind of stuff for you. So should you use Ionic 4? And in my opinion, the answer is yes, assuming that you have the right use case for a hybrid app strategy.

I'm gonna go ahead and wrap things There. If this video helped you, please like and subscribe. And if you're ready to build a production grade Ionic app, consider becoming a pro member to get access to my Ionic native plus Firebase course. Thanks for watching and I'll see you soon with more Ionic 4 content.
The beta release of Ionic 4 was announced yesterday. And with it comes a whole suite of new features that take advantage of the best technologies that we have available on the web. In today's video I'll show you some of the most important changes if migrating from version 3 to 4, but we'll also answer the question of should I use Ionic?
Because in 2018 there's a whole bunch of different we can build and deliver apps, and you really need to know the trade offs between each strategy to make a good business decision. If you're new here, like and subscribe. And if you're serious about Building apps, consider becoming a pro member at angularfirebase.com.
software development
So should you use Ionic to build your mobile app?
To answer this question, you really need to understand your own technical demands and weigh the pros and cons of different mobile app development approaches. There are basically three main ways that people are building mobile apps The first one we'll look at is using the native SDKs directly. This means you'll write a separate app for each platform that you wanna target in its native language. For Android, that would be Kotlin or Java.
software development
architecture
In iOS, that means Swift or Objective c. And on the web, that means JavaScript. Generally speaking, the highest quality, best performing apps that you'll find are built in their native SDKs. But there's a pretty obvious drawback here and that's the cost. More code to maintain obviously means more operating cost, but you also have to hire the right talent to be able to maintain these code bases, which is pretty hard to do especially for iOS and Android.
This brings me to the second strategy, which is where Ionic 4 falls, and that's building a hybrid mobile app using web technologies. The idea is to write your code once and run it on multiple platforms seamlessly. And while that sounds great, it's not without its trade offs. A hybrid app is really just a web app that gets embedded on the native device through a web view.
software
A hybrid app is not able to communicate with a lot of native device features directly, So it uses a bridge known as Apache Cordova or Capacitor that wrap native code in a JavaScript API so it can be Accessed by the web app. So the obvious benefit here is that you can leverage web developers to build mobile apps that are cross platform for a lot less money. And if done well, it should be indistinguishable from a from a truly native app. But because you've decoupled yourself from the native SDKs, they sort of just become a black box. That means debugging and performance optimization become a little more difficult. And the 3rd approach is to use a framework like React Native, Flutter, or NativeScript to build your mobile app. The primary difference between Ionic is that these frameworks don't use a web view for the UI. They go about it in different ways, but that's the primary distinguishing feature between these frameworks and Ionic and that can offer some advantages which I'll talk about here in a minute. So now let's look at a couple of real scenarios to decide if Ionic is a good fit or not. Let's say you're the CTO of your company and you need to decide if Ionic is going to be a good front end for your software as a service product. In my opinion, the right decision really comes down to how you're going to be delivering the app to your customers. Let's say you're focusing only on progressive web apps, which are now shipped in all major browsers. In this scenario, Ionic is going to be mostly useful to you as a component library. When we get to the code, we'll see that an Ionic Core app looks very similar to just a vanilla Angular 6 CLI app. So the primary value add of Ionic over just Angular is that you have access to these prebuilt components and services that help you solve common UI use cases.
Another potential scenario is that your primary product is a progressive web app, but your customers also want Support for iOS and Android apps. This is the niche where hybrid apps shine the brightest. If a PWA is your primary product, You really wanna focus your resources on optimizing that experience.
technology
software development
customer support
software
But Ionic makes it relatively easy to take that existing code base and get it deployed to the App Store.
And you can do it without tripling your development cost, which is always worth considering. That brings us to the 3rd scenario where the mobile app is your primary product And a progressive web app is more of just an afterthought or nonexistent at all. Ionic 4 has hedged its bets on web technologies such as web components, and it really feels Optimize for products that are building progressive web apps.
technology
phones
You can definitely use Ionic for exclusively building native mobile apps, But there's a few advantages to using non WebView frameworks that you should be aware of. The biggest advantage, in my opinion, is that you can run purely native code inside of frameworks like React Native and Flutter. This means that you can overcome certain performance issues because you're no longer using a bridge. You're actually just interacting directly with native SDK code. And Flutter doesn't use a bridge at all, so you're just more likely to get better performance right out of the box. Another thing these frameworks do is hot reloading, which is different than the live reloading that Ionic as hot reloading maintains the state of the app while simultaneously updating any changes to your code. This might not sound like a big deal, but I found that it makes the development process go significantly faster when you're working with native emulators. And the 3rd advantage you'll notice is with testing. Ionic does have some testing guidance in version 4, which is based off the Angular CLI's implementation with Jasmine and Karma. That's great for the web, but with React Native and Flutter, you'll notice a lot more resources dedicated to testing on real mobile Devices. So those are the main benefits of these frameworks, but they also have their drawbacks as well.
For Flutter, you'll have the learning curve of the Dart programming language, which is pretty obscure. And it's common to hit performance bottlenecks with the React Native Bridge, so you may end up writing more native code than you had intended originally. So the bottom line is that you need to look at your own situation and then weigh the pros and cons of the various options that are out there.
programming
Now that we know that, let's go ahead and jump into an Ionic 4 app and take a look at the actual developer Experience. You'll need to install Ionic globally with NPM and you'll wanna make sure that you have version 4 point o or greater installed. One of the biggest differences with Ionic 4 is that instead of using Angular components, it uses Web Components, which is made possible by a really awesome library called Stencil, which you should definitely check out if you're into web components. One of the key benefits of this move is that Ionic 4 is now framework agnostic, meaning you can use Vue JS, Angular, React, or just plain JavaScript to build your apps. But if you're an Angular developer, you still have first class support for Angular, and that's what I'm going to show you today. So we can run Ionic start with the tabs template and we'll set the type to Angular. If you open up this project, you'll know that it looks very similar to an Angular 6 CLI project, and that's because it's using the Angular 6 CLI under the hood. It adds a few extra things here specifically for native mobile apps, such as the config XML for Cordova and then this resources file for your native builds. The CLI does have some extra commands for building your apps on native platforms, but for the most part, it works just like the Angular CLI. If you're migrating from Ionic 3, you'll notice some changes to the project directory structure. All of the app code is contained in the app directory, which follows the same pattern as you would see in a typical Angular app. To migrate your code over, you could simply copy and paste into the app directory, and there's a few Versus Code plugins out there that will help you rewrite all of the paths in your app. Perhaps the biggest change you'll notice in Ionic 4 is that it now uses the Angular router instead of Bionic's own push pop kind of navigation system. In my opinion, this is a really positive change because The Angular router is super powerful and I've covered this in previous videos. You'll have better tools in place for managing router state and your end users won't notice any changes whatsoever. Let's take a closer look at the router by generating a new page component. In Ionic, a page is just a component, but it will automatically be wired up with your router for lazy loading. You'll notice that generates a new directory called profile in the app directory. And if we go into the App Routing Module, you'll see that it is set up this component to be lazy loaded to the profile path. This is actually a really nice feature, I kind of hate setting up lazy loading manually, so it's nice that the Ionic framework does this for you right out of the box. If we serve the app, we can just route directly to that profile path and we'll see this component gets rendered there. Yet another benefit of using the Angular router is that our paths are now much easier for deep linking because they're just a regular URL and not using the hash location strategy, which was the case in Ionic 3. There's a long list of breaking changes with the way components are set up, But these are all pretty minor breaking changes, so it's not that hard to migrate in my experience. One change you'll notice is that the Ionic button is now a custom element instead of a And it still comes with all the built in mechanisms that you would expect to control the shape, color, and style of the button. Navigating to different pages with a button is easier than ever because we can just use the router link directive from Angular and pass them the path that we want to navigate to.
Then if we go into the component itself and click this button, you'll see that it navigates between components, but it also adds this nice little animation between those transitions. So that's a nice little UI feature to have implemented right out of the gate. And if you're worried about breaking changes, there's a detailed doc on GitHub that will break each one of down.
animation
Obviously, we can't cover them all here, but they're really just different naming conventions and everything will basically feel the same from Ionic 3. And another thing you should be aware of is that it will be possible to use capacitor plugins instead of cordova plugins in the future. I covered this in my 5 apps in 5 minutes video, so make sure to check that out if you haven't seen it already. Another minor but important change you'll notice is that instead of providers in Ionic, they're now called services, which again aligns with the Angular conventions. So if you're migrating over, you'll likely wanna change your providers to services. And aside from the naming, they work exactly the same as they did previously. And the last thing you'll notice is that some of the synchronous APIs are now asynchronous APIs. We can show an example of this by using the alert controller. And we'll go ahead and inject that in the constructor in this component. Rendering these UI elements happens in the context of a Promise now, so we can use the AsyncAwait syntax which is really nice.
Aside from using AsyncAwait, everything else looks pretty much exactly the same. And you could even convert these promises to observables if you wanna do it in more of a reactive programming style. But basically all we're doing here is writing a method that will be able to show the user an alert message when a button is clicked.
programming
This is really common functionality that you'll use all the time and it's really nice to have a framework that does this kind of stuff for you. So should you use Ionic 4? And in my opinion, the answer is yes, assuming that you have the right use case for a hybrid app strategy. I'm gonna go ahead and wrap things There. If this video helped you, please like and subscribe. And if you're ready to build a production grade Ionic app, consider becoming a pro member to get access to my Ionic native plus Firebase course. Thanks for watching and I'll see you soon with more Ionic 4 content.
The beta release of Ionic 4 was announced yesterday. And with it comes a whole suite of new features that take advantage of the best technologies that we have available on the web. In today's video I'll show you some of the most important changes if migrating from version 3 to 4, but we'll also answer the question of should I use Ionic? Because in 2018 there's a whole bunch of different we can build and deliver apps, and you really need to know the trade offs between each strategy to make a good business decision. If you're new here, like and subscribe. And if you're serious about Building apps, consider becoming a pro member at angularfirebase.com. So should you use Ionic to build your mobile app? To answer this question, you really need to understand your own technical demands and weigh the pros and cons of different mobile app development approaches. There are basically three main ways that people are building mobile apps The first one we'll look at is using the native SDKs directly. This means you'll write a separate app for each platform that you wanna target in its native language. For Android, that would be Kotlin or Java. In iOS, that means Swift or Objective c. And on the web, that means JavaScript. Generally speaking, the highest quality, best performing apps that you'll find are built in their native SDKs. But there's a pretty obvious drawback here and that's the cost. More code to maintain obviously means more operating cost, but you also have to hire the right talent to be able to maintain these code bases, which is pretty hard to do especially for iOS and Android. This brings me to the second strategy, which is where Ionic 4 falls, and that's building a hybrid mobile app using web technologies. The idea is to write your code once and run it on multiple platforms seamlessly. And while that sounds great, it's not without its trade offs. A hybrid app is really just a web app that gets embedded on the native device through a web view. A hybrid app is not able to communicate with a lot of native device features directly, So it uses a bridge known as Apache Cordova or Capacitor that wrap native code in a JavaScript API so it can be Accessed by the web app. So the obvious benefit here is that you can leverage web developers to build mobile apps that are cross platform for a lot less money. And if done well, it should be indistinguishable from a from a truly native app. But because you've decoupled yourself from the native SDKs, they sort of just become a black box. That means debugging and performance optimization become a little more difficult. And the 3rd approach is to use a framework like React Native, Flutter, or NativeScript to build your mobile app. The primary difference between Ionic is that these frameworks don't use a web view for the UI. They go about it in different ways, but that's the primary distinguishing feature between these frameworks and Ionic and that can offer some advantages which I'll talk about here in a minute. So now let's look at a couple of real scenarios to decide if Ionic is a good fit or not. Let's say you're the CTO of your company and you need to decide if Ionic is going to be a good front end for your software as a service product. In my opinion, the right decision really comes down to how you're going to be delivering the app to your customers. Let's say you're focusing only on progressive web apps, which are now shipped in all major browsers. In this scenario, Ionic is going to be mostly useful to you as a component library. When we get to the code, we'll see that an Ionic Core app looks very similar to just a vanilla Angular 6 CLI app. So the primary value add of Ionic over just Angular is that you have access to these prebuilt components and services that help you solve common UI use cases. Another potential scenario is that your primary product is a progressive web app, but your customers also want Support for iOS and Android apps. This is the niche where hybrid apps shine the brightest. If a PWA is your primary product, You really wanna focus your resources on optimizing that experience. But Ionic makes it relatively easy to take that existing code base and get it deployed to the App Store. And you can do it without tripling your development cost, which is always worth considering. That brings us to the 3rd scenario where the mobile app is your primary product And a progressive web app is more of just an afterthought or nonexistent at all. Ionic 4 has hedged its bets on web technologies such as web components, and it really feels Optimize for products that are building progressive web apps. You can definitely use Ionic for exclusively building native mobile apps, But there's a few advantages to using non WebView frameworks that you should be aware of. The biggest advantage, in my opinion, is that you can run purely native code inside of frameworks like React Native and Flutter. This means that you can overcome certain performance issues because you're no longer using a bridge. You're actually just interacting directly with native SDK code. And Flutter doesn't use a bridge at all, so you're just more likely to get better performance right out of the box. Another thing these frameworks do is hot reloading, which is different than the live reloading that Ionic as hot reloading maintains the state of the app while simultaneously updating any changes to your code. This might not sound like a big deal, but I found that it makes the development process go significantly faster when you're working with native emulators. And the 3rd advantage you'll notice is with testing. Ionic does have some testing guidance in version 4, which is based off the Angular CLI's implementation with Jasmine and Karma. That's great for the web, but with React Native and Flutter, you'll notice a lot more resources dedicated to testing on real mobile Devices. So those are the main benefits of these frameworks, but they also have their drawbacks as well. For Flutter, you'll have the learning curve of the Dart programming language, which is pretty obscure. And it's common to hit performance bottlenecks with the React Native Bridge, so you may end up writing more native code than you had intended originally. So the bottom line is that you need to look at your own situation and then weigh the pros and cons of the various options that are out there. Now that we know that, let's go ahead and jump into an Ionic 4 app and take a look at the actual developer Experience. You'll need to install Ionic globally with NPM and you'll wanna make sure that you have version 4 point o or greater installed. One of the biggest differences with Ionic 4 is that instead of using Angular components, it uses Web Components, which is made possible by a really awesome library called Stencil, which you should definitely check out if you're into web components. One of the key benefits of this move is that Ionic 4 is now framework agnostic, meaning you can use Vue JS, Angular, React, or just plain JavaScript to build your apps. But if you're an Angular developer, you still have first class support for Angular, and that's what I'm going to show you today. So we can run Ionic start with the tabs template and we'll set the type to Angular. If you open up this project, you'll know that it looks very similar to an Angular 6 CLI project, and that's because it's using the Angular 6 CLI under the hood. It adds a few extra things here specifically for native mobile apps, such as the config XML for Cordova and then this resources file for your native builds. The CLI does have some extra commands for building your apps on native platforms, but for the most part, it works just like the Angular CLI. If you're migrating from Ionic 3, you'll notice some changes to the project directory structure. All of the app code is contained in the app directory, which follows the same pattern as you would see in a typical Angular app. To migrate your code over, you could simply copy and paste into the app directory, and there's a few Versus Code plugins out there that will help you rewrite all of the paths in your app. Perhaps the biggest change you'll notice in Ionic 4 is that it now uses the Angular router instead of Bionic's own push pop kind of navigation system. In my opinion, this is a really positive change because The Angular router is super powerful and I've covered this in previous videos. You'll have better tools in place for managing router state and your end users won't notice any changes whatsoever. Let's take a closer look at the router by generating a new page component. In Ionic, a page is just a component, but it will automatically be wired up with your router for lazy loading. You'll notice that generates a new directory called profile in the app directory. And if we go into the App Routing Module, you'll see that it is set up this component to be lazy loaded to the profile path. This is actually a really nice feature, I kind of hate setting up lazy loading manually, so it's nice that the Ionic framework does this for you right out of the box. If we serve the app, we can just route directly to that profile path and we'll see this component gets rendered there. Yet another benefit of using the Angular router is that our paths are now much easier for deep linking because they're just a regular URL and not using the hash location strategy, which was the case in Ionic 3. There's a long list of breaking changes with the way components are set up, But these are all pretty minor breaking changes, so it's not that hard to migrate in my experience. One change you'll notice is that the Ionic button is now a custom element instead of a And it still comes with all the built in mechanisms that you would expect to control the shape, color, and style of the button. Navigating to different pages with a button is easier than ever because we can just use the router link directive from Angular and pass them the path that we want to navigate to. Then if we go into the component itself and click this button, you'll see that it navigates between components, but it also adds this nice little animation between those transitions. So that's a nice little UI feature to have implemented right out of the gate. And if you're worried about breaking changes, there's a detailed doc on GitHub that will break each one of down. Obviously, we can't cover them all here, but they're really just different naming conventions and everything will basically feel the same from Ionic 3. And another thing you should be aware of is that it will be possible to use capacitor plugins instead of cordova plugins in the future. I covered this in my 5 apps in 5 minutes video, so make sure to check that out if you haven't seen it already. Another minor but important change you'll notice is that instead of providers in Ionic, they're now called services, which again aligns with the Angular conventions. So if you're migrating over, you'll likely wanna change your providers to services. And aside from the naming, they work exactly the same as they did previously. And the last thing you'll notice is that some of the synchronous APIs are now asynchronous APIs. We can show an example of this by using the alert controller. And we'll go ahead and inject that in the constructor in this component. Rendering these UI elements happens in the context of a Promise now, so we can use the AsyncAwait syntax which is really nice. Aside from using AsyncAwait, everything else looks pretty much exactly the same. And you could even convert these promises to observables if you wanna do it in more of a reactive programming style. But basically all we're doing here is writing a method that will be able to show the user an alert message when a button is clicked. This is really common functionality that you'll use all the time and it's really nice to have a framework that does this kind of stuff for you. So should you use Ionic 4? And in my opinion, the answer is yes, assuming that you have the right use case for a hybrid app strategy. I'm gonna go ahead and wrap things There. If this video helped you, please like and subscribe. And if you're ready to build a production grade Ionic app, consider becoming a pro member to get access to my Ionic native plus Firebase course. Thanks for watching and I'll see you soon with more Ionic 4 content.
The
the
beta
beta
release
release
of
of
Ionic
ionic
4
4
was
was
announced
announced
yesterday.
yesterday
And
and
with
with
it
it
comes
comes
a
a
whole
whole
suite
suite
of
of
new
new
features
features
that
that
take
take
advantage
advantage
of
of
the
the
best
best
technologies
technologies
that
that
we
we
have
have
available
available
on
on
the
the
web.
web
In
in
today's
today's
video
video
I'll
i'll
show
show
you
you
some
some
of
of
the
the
most
most
important
important
changes
changes
if
if
migrating
migrating
from
from
version
version
3
3
to
to
4,
4
but
but
we'll
we'll
also
also
answer
answer
the
the
question
question
of
of
should
should
I
i
use
use
Ionic?
ionic
Because
because
in
in
2018
2018
there's
there's
a
a
whole
whole
bunch
bunch
of
of
different
different
we
we
can
can
build
build
and
and
deliver
deliver
apps,
apps
and
and
you
you
really
really
need
need
to
to
know
know
the
the
trade
trade
offs
offs
between
between
each
each
strategy
strategy
to
to
make
make
a
a
good
good
business
business
decision.
decision
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe.
subscribe
And
and
if
if
you're
you're
serious
serious
about
about
Building
building
apps,
apps
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
So
so
should
should
you
you
use
use
Ionic
ionic
to
to
build
build
your
your
mobile
mobile
app?
app
To
to
answer
answer
this
this
question,
question
you
you
really
really
need
need
to
to
understand
understand
your
your
own
own
technical
technical
demands
demands
and
and
weigh
weigh
the
the
pros
pros
and
and
cons
cons
of
of
different
different
mobile
mobile
app
app
development
development
approaches.
approaches
There
there
are
are
basically
basically
three
three
main
main
ways
ways
that
that
people
people
are
are
building
building
mobile
mobile
apps
apps
The
the
first
first
one
one
we'll
we'll
look
look
at
at
is
is
using
using
the
the
native
native
SDKs
sdks
directly.
directly
This
this
means
means
you'll
you'll
write
write
a
a
separate
separate
app
app
for
for
each
each
platform
platform
that
that
you
you
wanna
wanna
target
target
in
in
its
its
native
native
language.
language
For
for
Android,
android
that
that
would
would
be
be
Kotlin
kotlin
or
or
Java.
java
In
in
iOS,
ios
that
that
means
means
Swift
swift
or
or
Objective
objective
c.
c
And
and
on
on
the
the
web,
web
that
that
means
means
JavaScript.
javascript
Generally
generally
speaking,
speaking
the
the
highest
highest
quality,
quality
best
best
performing
performing
apps
apps
that
that
you'll
you'll
find
find
are
are
built
built
in
in
their
their
native
native
SDKs.
sdks
But
but
there's
there's
a
a
pretty
pretty
obvious
obvious
drawback
drawback
here
here
and
and
that's
that's
the
the
cost.
cost
More
more
code
code
to
to
maintain
maintain
obviously
obviously
means
means
more
more
operating
operating
cost,
cost
but
but
you
you
also
also
have
have
to
to
hire
hire
the
the
right
right
talent
talent
to
to
be
be
able
able
to
to
maintain
maintain
these
these
code
code
bases,
bases
which
which
is
is
pretty
pretty
hard
hard
to
to
do
do
especially
especially
for
for
iOS
ios
and
and
Android.
android
This
this
brings
brings
me
me
to
to
the
the
second
second
strategy,
strategy
which
which
is
is
where
where
Ionic
ionic
4
4
falls,
falls
and
and
that's
that's
building
building
a
a
hybrid
hybrid
mobile
mobile
app
app
using
using
web
web
technologies.
technologies
The
the
idea
idea
is
is
to
to
write
write
your
your
code
code
once
once
and
and
run
run
it
it
on
on
multiple
multiple
platforms
platforms
seamlessly.
seamlessly
And
and
while
while
that
that
sounds
sounds
great,
great
it's
it's
not
not
without
without
its
its
trade
trade
offs.
offs
A
a
hybrid
hybrid
app
app
is
is
really
really
just
just
a
a
web
web
app
app
that
that
gets
gets
embedded
embedded
on
on
the
the
native
native
device
device
through
through
a
a
web
web
view.
view
A
a
hybrid
hybrid
app
app
is
is
not
not
able
able
to
to
communicate
communicate
with
with
a
a
lot
lot
of
of
native
native
device
device
features
features
directly,
directly
So
so
it
it
uses
uses
a
a
bridge
bridge
known
known
as
as
Apache
apache
Cordova
cordova
or
or
Capacitor
capacitor
that
that
wrap
wrap
native
native
code
code
in
in
a
a
JavaScript
javascript
API
api
so
so
it
it
can
can
be
be
Accessed
accessed
by
by
the
the
web
web
app.
app
So
so
the
the
obvious
obvious
benefit
benefit
here
here
is
is
that
that
you
you
can
can
leverage
leverage
web
web
developers
developers
to
to
build
build
mobile
mobile
apps
apps
that
that
are
are
cross
cross
platform
platform
for
for
a
a
lot
lot
less
less
money.
money
And
and
if
if
done
done
well,
well
it
it
should
should
be
be
indistinguishable
indistinguishable
from
from
a
a
from
from
a
a
truly
truly
native
native
app.
app
But
but
because
because
you've
you've
decoupled
decoupled
yourself
yourself
from
from
the
the
native
native
SDKs,
sdks
they
they
sort
sort
of
of
just
just
become
become
a
a
black
black
box.
box
That
that
means
means
debugging
debugging
and
and
performance
performance
optimization
optimization
become
become
a
a
little
little
more
more
difficult.
difficult
And
and
the
the
3rd
3rd
approach
approach
is
is
to
to
use
use
a
a
framework
framework
like
like
React
react
Native,
native
Flutter,
flutter
or
or
NativeScript
nativescript
to
to
build
build
your
your
mobile
mobile
app.
app
The
the
primary
primary
difference
difference
between
between
Ionic
ionic
is
is
that
that
these
these
frameworks
frameworks
don't
don't
use
use
a
a
web
web
view
view
for
for
the
the
UI.
ui
They
they
go
go
about
about
it
it
in
in
different
different
ways,
ways
but
but
that's
that's
the
the
primary
primary
distinguishing
distinguishing
feature
feature
between
between
these
these
frameworks
frameworks
and
and
Ionic
ionic
and
and
that
that
can
can
offer
offer
some
some
advantages
advantages
which
which
I'll
i'll
talk
talk
about
about
here
here
in
in
a
a
minute.
minute
So
so
now
now
let's
let's
look
look
at
at
a
a
couple
couple
of
of
real
real
scenarios
scenarios
to
to
decide
decide
if
if
Ionic
ionic
is
is
a
a
good
good
fit
fit
or
or
not.
not
Let's
let's
say
say
you're
you're
the
the
CTO
cto
of
of
your
your
company
company
and
and
you
you
need
need
to
to
decide
decide
if
if
Ionic
ionic
is
is
going
going
to
to
be
be
a
a
good
good
front
front
end
end
for
for
your
your
software
software
as
as
a
a
service
service
product.
product
In
in
my
my
opinion,
opinion
the
the
right
right
decision
decision
really
really
comes
comes
down
down
to
to
how
how
you're
you're
going
going
to
to
be
be
delivering
delivering
the
the
app
app
to
to
your
your
customers.
customers
Let's
let's
say
say
you're
you're
focusing
focusing
only
only
on
on
progressive
progressive
web
web
apps,
apps
which
which
are
are
now
now
shipped
shipped
in
in
all
all
major
major
browsers.
browsers
In
in
this
this
scenario,
scenario
Ionic
ionic
is
is
going
going
to
to
be
be
mostly
mostly
useful
useful
to
to
you
you
as
as
a
a
component
component
library.
library
When
when
we
we
get
get
to
to
the
the
code,
code
we'll
we'll
see
see
that
that
an
an
Ionic
ionic
Core
core
app
app
looks
looks
very
very
similar
similar
to
to
just
just
a
a
vanilla
vanilla
Angular
angular
6
6
CLI
cli
app.
app
So
so
the
the
primary
primary
value
value
add
add
of
of
Ionic
ionic
over
over
just
just
Angular
angular
is
is
that
that
you
you
have
have
access
access
to
to
these
these
prebuilt
prebuilt
components
components
and
and
services
services
that
that
help
help
you
you
solve
solve
common
common
UI
ui
use
use
cases.
cases
Another
another
potential
potential
scenario
scenario
is
is
that
that
your
your
primary
primary
product
product
is
is
a
a
progressive
progressive
web
web
app,
app
but
but
your
your
customers
customers
also
also
want
want
Support
support
for
for
iOS
ios
and
and
Android
android
apps.
apps
This
this
is
is
the
the
niche
niche
where
where
hybrid
hybrid
apps
apps
shine
shine
the
the
brightest.
brightest
If
if
a
a
PWA
pwa
is
is
your
your
primary
primary
product,
product
You
you
really
really
wanna
wanna
focus
focus
your
your
resources
resources
on
on
optimizing
optimizing
that
that
experience.
experience
But
but
Ionic
ionic
makes
makes
it
it
relatively
relatively
easy
easy
to
to
take
take
that
that
existing
existing
code
code
base
base
and
and
get
get
it
it
deployed
deployed
to
to
the
the
App
app
Store.
store
And
and
you
you
can
can
do
do
it
it
without
without
tripling
tripling
your
your
development
development
cost,
cost
which
which
is
is
always
always
worth
worth
considering.
considering
That
that
brings
brings
us
us
to
to
the
the
3rd
3rd
scenario
scenario
where
where
the
the
mobile
mobile
app
app
is
is
your
your
primary
primary
product
product
And
and
a
a
progressive
progressive
web
web
app
app
is
is
more
more
of
of
just
just
an
an
afterthought
afterthought
or
or
nonexistent
nonexistent
at
at
all.
all
Ionic
ionic
4
4
has
has
hedged
hedged
its
its
bets
bets
on
on
web
web
technologies
technologies
such
such
as
as
web
web
components,
components
and
and
it
it
really
really
feels
feels
Optimize
optimize
for
for
products
products
that
that
are
are
building
building
progressive
progressive
web
web
apps.
apps
You
you
can
can
definitely
definitely
use
use
Ionic
ionic
for
for
exclusively
exclusively
building
building
native
native
mobile
mobile
apps,
apps
But
but
there's
there's
a
a
few
few
advantages
advantages
to
to
using
using
non
non
WebView
webview
frameworks
frameworks
that
that
you
you
should
should
be
be
aware
aware
of.
of
The
the
biggest
biggest
advantage,
advantage
in
in
my
my
opinion,
opinion
is
is
that
that
you
you
can
can
run
run
purely
purely
native
native
code
code
inside
inside
of
of
frameworks
frameworks
like
like
React
react
Native
native
and
and
Flutter.
flutter
This
this
means
means
that
that
you
you
can
can
overcome
overcome
certain
certain
performance
performance
issues
issues
because
because
you're
you're
no
no
longer
longer
using
using
a
a
bridge.
bridge
You're
you're
actually
actually
just
just
interacting
interacting
directly
directly
with
with
native
native
SDK
sdk
code.
code
And
and
Flutter
flutter
doesn't
doesn't
use
use
a
a
bridge
bridge
at
at
all,
all
so
so
you're
you're
just
just
more
more
likely
likely
to
to
get
get
better
better
performance
performance
right
right
out
out
of
of
the
the
box.
box
Another
another
thing
thing
these
these
frameworks
frameworks
do
do
is
is
hot
hot
reloading,
reloading
which
which
is
is
different
different
than
than
the
the
live
live
reloading
reloading
that
that
Ionic
ionic
as
as
hot
hot
reloading
reloading
maintains
maintains
the
the
state
state
of
of
the
the
app
app
while
while
simultaneously
simultaneously
updating
updating
any
any
changes
changes
to
to
your
your
code.
code
This
this
might
might
not
not
sound
sound
like
like
a
a
big
big
deal,
deal
but
but
I
i
found
found
that
that
it
it
makes
makes
the
the
development
development
process
process
go
go
significantly
significantly
faster
faster
when
when
you're
you're
working
working
with
with
native
native
emulators.
emulators
And
and
the
the
3rd
3rd
advantage
advantage
you'll
you'll
notice
notice
is
is
with
with
testing.
testing
Ionic
ionic
does
does
have
have
some
some
testing
testing
guidance
guidance
in
in
version
version
4,
4
which
which
is
is
based
based
off
off
the
the
Angular
angular
CLI's
cli's
implementation
implementation
with
with
Jasmine
jasmine
and
and
Karma.
karma
That's
that's
great
great
for
for
the
the
web,
web
but
but
with
with
React
react
Native
native
and
and
Flutter,
flutter
you'll
you'll
notice
notice
a
a
lot
lot
more
more
resources
resources
dedicated
dedicated
to
to
testing
testing
on
on
real
real
mobile
mobile
Devices.
devices
So
so
those
those
are
are
the
the
main
main
benefits
benefits
of
of
these
these
frameworks,
frameworks
but
but
they
they
also
also
have
have
their
their
drawbacks
drawbacks
as
as
well.
well
For
for
Flutter,
flutter
you'll
you'll
have
have
the
the
learning
learning
curve
curve
of
of
the
the
Dart
dart
programming
programming
language,
language
which
which
is
is
pretty
pretty
obscure.
obscure
And
and
it's
it's
common
common
to
to
hit
hit
performance
performance
bottlenecks
bottlenecks
with
with
the
the
React
react
Native
native
Bridge,
bridge
so
so
you
you
may
may
end
end
up
up
writing
writing
more
more
native
native
code
code
than
than
you
you
had
had
intended
intended
originally.
originally
So
so
the
the
bottom
bottom
line
line
is
is
that
that
you
you
need
need
to
to
look
look
at
at
your
your
own
own
situation
situation
and
and
then
then
weigh
weigh
the
the
pros
pros
and
and
cons
cons
of
of
the
the
various
various
options
options
that
that
are
are
out
out
there.
there
Now
now
that
that
we
we
know
know
that,
that
let's
let's
go
go
ahead
ahead
and
and
jump
jump
into
into
an
an
Ionic
ionic
4
4
app
app
and
and
take
take
a
a
look
look
at
at
the
the
actual
actual
developer
developer
Experience.
experience
You'll
you'll
need
need
to
to
install
install
Ionic
ionic
globally
globally
with
with
NPM
npm
and
and
you'll
you'll
wanna
wanna
make
make
sure
sure
that
that
you
you
have
have
version
version
4
4
point
point
o
o
or
or
greater
greater
installed.
installed
One
one
of
of
the
the
biggest
biggest
differences
differences
with
with
Ionic
ionic
4
4
is
is
that
that
instead
instead
of
of
using
using
Angular
angular
components,
components
it
it
uses
uses
Web
web
Components,
components
which
which
is
is
made
made
possible
possible
by
by
a
a
really
really
awesome
awesome
library
library
called
called
Stencil,
stencil
which
which
you
you
should
should
definitely
definitely
check
check
out
out
if
if
you're
you're
into
into
web
web
components.
components
One
one
of
of
the
the
key
key
benefits
benefits
of
of
this
this
move
move
is
is
that
that
Ionic
ionic
4
4
is
is
now
now
framework
framework
agnostic,
agnostic
meaning
meaning
you
you
can
can
use
use
Vue
vue
JS,
js
Angular,
angular
React,
react
or
or
just
just
plain
plain
JavaScript
javascript
to
to
build
build
your
your
apps.
apps
But
but
if
if
you're
you're
an
an
Angular
angular
developer,
developer
you
you
still
still
have
have
first
first
class
class
support
support
for
for
Angular,
angular
and
and
that's
that's
what
what
I'm
i'm
going
going
to
to
show
show
you
you
today.
today
So
so
we
we
can
can
run
run
Ionic
ionic
start
start
with
with
the
the
tabs
tabs
template
template
and
and
we'll
we'll
set
set
the
the
type
type
to
to
Angular.
angular
If
if
you
you
open
open
up
up
this
this
project,
project
you'll
you'll
know
know
that
that
it
it
looks
looks
very
very
similar
similar
to
to
an
an
Angular
angular
6
6
CLI
cli
project,
project
and
and
that's
that's
because
because
it's
it's
using
using
the
the
Angular
angular
6
6
CLI
cli
under
under
the
the
hood.
hood
It
it
adds
adds
a
a
few
few
extra
extra
things
things
here
here
specifically
specifically
for
for
native
native
mobile
mobile
apps,
apps
such
such
as
as
the
the
config
config
XML
xml
for
for
Cordova
cordova
and
and
then
then
this
this
resources
resources
file
file
for
for
your
your
native
native
builds.
builds
The
the
CLI
cli
does
does
have
have
some
some
extra
extra
commands
commands
for
for
building
building
your
your
apps
apps
on
on
native
native
platforms,
platforms
but
but
for
for
the
the
most
most
part,
part
it
it
works
works
just
just
like
like
the
the
Angular
angular
CLI.
cli
If
if
you're
you're
migrating
migrating
from
from
Ionic
ionic
3,
3
you'll
you'll
notice
notice
some
some
changes
changes
to
to
the
the
project
project
directory
directory
structure.
structure
All
all
of
of
the
the
app
app
code
code
is
is
contained
contained
in
in
the
the
app
app
directory,
directory
which
which
follows
follows
the
the
same
same
pattern
pattern
as
as
you
you
would
would
see
see
in
in
a
a
typical
typical
Angular
angular
app.
app
To
to
migrate
migrate
your
your
code
code
over,
over
you
you
could
could
simply
simply
copy
copy
and
and
paste
paste
into
into
the
the
app
app
directory,
directory
and
and
there's
there's
a
a
few
few
Versus
versus
Code
code
plugins
plugins
out
out
there
there
that
that
will
will
help
help
you
you
rewrite
rewrite
all
all
of
of
the
the
paths
paths
in
in
your
your
app.
app
Perhaps
perhaps
the
the
biggest
biggest
change
change
you'll
you'll
notice
notice
in
in
Ionic
ionic
4
4
is
is
that
that
it
it
now
now
uses
uses
the
the
Angular
angular
router
router
instead
instead
of
of
Bionic's
bionic's
own
own
push
push
pop
pop
kind
kind
of
of
navigation
navigation
system.
system
In
in
my
my
opinion,
opinion
this
this
is
is
a
a
really
really
positive
positive
change
change
because
because
The
the
Angular
angular
router
router
is
is
super
super
powerful
powerful
and
and
I've
i've
covered
covered
this
this
in
in
previous
previous
videos.
videos
You'll
you'll
have
have
better
better
tools
tools
in
in
place
place
for
for
managing
managing
router
router
state
state
and
and
your
your
end
end
users
users
won't
won't
notice
notice
any
any
changes
changes
whatsoever.
whatsoever
Let's
let's
take
take
a
a
closer
closer
look
look
at
at
the
the
router
router
by
by
generating
generating
a
a
new
new
page
page
component.
component
In
in
Ionic,
ionic
a
a
page
page
is
is
just
just
a
a
component,
component
but
but
it
it
will
will
automatically
automatically
be
be
wired
wired
up
up
with
with
your
your
router
router
for
for
lazy
lazy
loading.
loading
You'll
you'll
notice
notice
that
that
generates
generates
a
a
new
new
directory
directory
called
called
profile
profile
in
in
the
the
app
app
directory.
directory
And
and
if
if
we
we
go
go
into
into
the
the
App
app
Routing
routing
Module,
module
you'll
you'll
see
see
that
that
it
it
is
is
set
set
up
up
this
this
component
component
to
to
be
be
lazy
lazy
loaded
loaded
to
to
the
the
profile
profile
path.
path
This
this
is
is
actually
actually
a
a
really
really
nice
nice
feature,
feature
I
i
kind
kind
of
of
hate
hate
setting
setting
up
up
lazy
lazy
loading
loading
manually,
manually
so
so
it's
it's
nice
nice
that
that
the
the
Ionic
ionic
framework
framework
does
does
this
this
for
for
you
you
right
right
out
out
of
of
the
the
box.
box
If
if
we
we
serve
serve
the
the
app,
app
we
we
can
can
just
just
route
route
directly
directly
to
to
that
that
profile
profile
path
path
and
and
we'll
we'll
see
see
this
this
component
component
gets
gets
rendered
rendered
there.
there
Yet
yet
another
another
benefit
benefit
of
of
using
using
the
the
Angular
angular
router
router
is
is
that
that
our
our
paths
paths
are
are
now
now
much
much
easier
easier
for
for
deep
deep
linking
linking
because
because
they're
they're
just
just
a
a
regular
regular
URL
url
and
and
not
not
using
using
the
the
hash
hash
location
location
strategy,
strategy
which
which
was
was
the
the
case
case
in
in
Ionic
ionic
3.
3
There's
there's
a
a
long
long
list
list
of
of
breaking
breaking
changes
changes
with
with
the
the
way
way
components
components
are
are
set
set
up,
up
But
but
these
these
are
are
all
all
pretty
pretty
minor
minor
breaking
breaking
changes,
changes
so
so
it's
it's
not
not
that
that
hard
hard
to
to
migrate
migrate
in
in
my
my
experience.
experience
One
one
change
change
you'll
you'll
notice
notice
is
is
that
that
the
the
Ionic
ionic
button
button
is
is
now
now
a
a
custom
custom
element
element
instead
instead
of
of
a
a
And
and
it
it
still
still
comes
comes
with
with
all
all
the
the
built
built
in
in
mechanisms
mechanisms
that
that
you
you
would
would
expect
expect
to
to
control
control
the
the
shape,
shape
color,
color
and
and
style
style
of
of
the
the
button.
button
Navigating
navigating
to
to
different
different
pages
pages
with
with
a
a
button
button
is
is
easier
easier
than
than
ever
ever
because
because
we
we
can
can
just
just
use
use
the
the
router
router
link
link
directive
directive
from
from
Angular
angular
and
and
pass
pass
them
them
the
the
path
path
that
that
we
we
want
want
to
to
navigate
navigate
to.
to
Then
then
if
if
we
we
go
go
into
into
the
the
component
component
itself
itself
and
and
click
click
this
this
button,
button
you'll
you'll
see
see
that
that
it
it
navigates
navigates
between
between
components,
components
but
but
it
it
also
also
adds
adds
this
this
nice
nice
little
little
animation
animation
between
between
those
those
transitions.
transitions
So
so
that's
that's
a
a
nice
nice
little
little
UI
ui
feature
feature
to
to
have
have
implemented
implemented
right
right
out
out
of
of
the
the
gate.
gate
And
and
if
if
you're
you're
worried
worried
about
about
breaking
breaking
changes,
changes
there's
there's
a
a
detailed
detailed
doc
doc
on
on
GitHub
github
that
that
will
will
break
break
each
each
one
one
of
of
down.
down
Obviously,
obviously
we
we
can't
can't
cover
cover
them
them
all
all
here,
here
but
but
they're
they're
really
really
just
just
different
different
naming
naming
conventions
conventions
and
and
everything
everything
will
will
basically
basically
feel
feel
the
the
same
same
from
from
Ionic
ionic
3.
3
And
and
another
another
thing
thing
you
you
should
should
be
be
aware
aware
of
of
is
is
that
that
it
it
will
will
be
be
possible
possible
to
to
use
use
capacitor
capacitor
plugins
plugins
instead
instead
of
of
cordova
cordova
plugins
plugins
in
in
the
the
future.
future
I
i
covered
covered
this
this
in
in
my
my
5
5
apps
apps
in
in
5
5
minutes
minutes
video,
video
so
so
make
make
sure
sure
to
to
check
check
that
that
out
out
if
if
you
you
haven't
haven't
seen
seen
it
it
already.
already
Another
another
minor
minor
but
but
important
important
change
change
you'll
you'll
notice
notice
is
is
that
that
instead
instead
of
of
providers
providers
in
in
Ionic,
ionic
they're
they're
now
now
called
called
services,
services
which
which
again
again
aligns
aligns
with
with
the
the
Angular
angular
conventions.
conventions
So
so
if
if
you're
you're
migrating
migrating
over,
over
you'll
you'll
likely
likely
wanna
wanna
change
change
your
your
providers
providers
to
to
services.
services
And
and
aside
aside
from
from
the
the
naming,
naming
they
they
work
work
exactly
exactly
the
the
same
same
as
as
they
they
did
did
previously.
previously
And
and
the
the
last
last
thing
thing
you'll
you'll
notice
notice
is
is
that
that
some
some
of
of
the
the
synchronous
synchronous
APIs
apis
are
are
now
now
asynchronous
asynchronous
APIs.
apis
We
we
can
can
show
show
an
an
example
example
of
of
this
this
by
by
using
using
the
the
alert
alert
controller.
controller
And
and
we'll
we'll
go
go
ahead
ahead
and
and
inject
inject
that
that
in
in
the
the
constructor
constructor
in
in
this
this
component.
component
Rendering
rendering
these
these
UI
ui
elements
elements
happens
happens
in
in
the
the
context
context
of
of
a
a
Promise
promise
now,
now
so
so
we
we
can
can
use
use
the
the
AsyncAwait
asyncawait
syntax
syntax
which
which
is
is
really
really
nice.
nice
Aside
aside
from
from
using
using
AsyncAwait,
asyncawait
everything
everything
else
else
looks
looks
pretty
pretty
much
much
exactly
exactly
the
the
same.
same
And
and
you
you
could
could
even
even
convert
convert
these
these
promises
promises
to
to
observables
observables
if
if
you
you
wanna
wanna
do
do
it
it
in
in
more
more
of
of
a
a
reactive
reactive
programming
programming
style.
style
But
but
basically
basically
all
all
we're
we're
doing
doing
here
here
is
is
writing
writing
a
a
method
method
that
that
will
will
be
be
able
able
to
to
show
show
the
the
user
user
an
an
alert
alert
message
message
when
when
a
a
button
button
is
is
clicked.
clicked
This
this
is
is
really
really
common
common
functionality
functionality
that
that
you'll
you'll
use
use
all
all
the
the
time
time
and
and
it's
it's
really
really
nice
nice
to
to
have
have
a
a
framework
framework
that
that
does
does
this
this
kind
kind
of
of
stuff
stuff
for
for
you.
you
So
so
should
should
you
you
use
use
Ionic
ionic
4?
4
And
and
in
in
my
my
opinion,
opinion
the
the
answer
answer
is
is
yes,
yes
assuming
assuming
that
that
you
you
have
have
the
the
right
right
use
use
case
case
for
for
a
a
hybrid
hybrid
app
app
strategy.
strategy
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
There.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you're
you're
ready
ready
to
to
build
build
a
a
production
production
grade
grade
Ionic
ionic
app,
app
consider
consider
becoming
becoming
a
a
pro
pro
member
member
to
to
get
get
access
access
to
to
my
my
Ionic
ionic
native
native
plus
plus
Firebase
firebase
course.
course
Thanks
thanks
for
for
watching
watching
and
and
I'll
i'll
see
see
you
you
soon
soon
with
with
more
more
Ionic
ionic
4
4
content.
content
success
The speakers discuss the benefits of using Ionic 4 for mobile apps, including native SDKs and web developers. They highlight the pros and cons of building a hybrid mobile app using web technologies, including the use of a framework like React Native, Flutter, or NativeScript. They also discuss the benefits of using non- WebView frameworks like Flutter and the use of the Angular router for lazy loading. The speakers provide brief overview of developers experience, including the use of Ionic 4 for web development and navigating websites and components, and mention a new file system and a new command line. They also encourage viewers to check out a video and subscribe to their channel.
Ionic 4: Should you Build a Hybrid App?
Is Ionic 4 right for your mobile app compared to Flutter, React Native, or Native Script? Get my opinion in this video and explore the changes the latest version of the framework. https://itnext.io/should-you-use-ionic-4-fa04daebaffd

- Ionic 4 Beta https://blog.ionicframework.com/announcing-ionic-4-beta/
- Flutter https://flutter.io/
- React Native https://facebook.github.io/react-native/