Ionic 4: Should you Build a Hybrid App?

[Music] 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 should I use ionic because in 2018 there's a whole bunch of different ways 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 angular firebase comm 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 today the first one we'll look at is using the native SDKs directly this means you write a separate app for each platform that you want to 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 costs 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 webview 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 truly native app but because you've decoupled yourself from the native SDKs they sort of just become a black box then debugging and performance optimization become a little more difficult and the third approach is to use a framework like react native flutter or native script to build your mobile app the primary difference between ionic is that these frameworks don't use a webview 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't offer some advantages which I'll talk about here in a minute so now let's look at a couple real-world 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 4 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 pre-built 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 want to 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 rippling your development cost which is always worth considering that brings us to the third scenario where the mobile app is your primary product and a progressive web app is more of just an afterthought or non-existent at all ionic 4 has hedged its bets on web technology such as web components and it really feels optimized for products that are building progressive web apps you can definitely use ionic 4 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 why 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 does 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 third advantage you'll notice is with testing ionic does have some testing guidance in version 4 which is based off the angular CLI is implementation with Jasmin 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 will need to install ionic globally with NPM and you'll want to make sure that you have version 4.0 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 bjs 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 that config.xml for Cordova and in 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 same pattern as you would see in a typical angular app to migrate your code over you could simply copy and paste it into the app directory and there's a few vs code plugins out there that will help you rewrite all the paths in your app perhaps the biggest change you'll notice an ionic 4 is that it now uses the angular router instead of ionic zone pushpop 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 edit 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 directive and it still comes with all the built-in mechanisms that you would expect to control the shape color and style of the button itself 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 is a detailed dock on github that will break each one of them down obviously we can't cover them all here but they're really just different naming convention and everything will basically feel the same from ionic three 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 five 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 and ionic they're now called services which again aligns with the angular conventions so if you're migrating over you'll likely want to 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 API zarnow asynchronous api's 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 async await syntax which is really nice aside from using async await everything else looks pretty much exactly the same and you could even convert these promises to observables if you want to do it and 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 up 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

Channel: Fireship

Views: 216,120

Rating: 4.9396396 out of 5

Keywords: angular, webdev, app development, javascript, lesson, tutorial, ionic, ionic 4, ionic4, ionic native, ionic android, ionic ios, ionic flutter, ionic react native, react native, flutter, nativescript

Id: 34fDUKaJBtw

Length: 10min 34sec (634 seconds)

Published: Thu Jul 26 2018