What's the Difference? What's Better?

when it comes to building mobile apps for iOS or for Android you of course can learn Java and Android for Android and Objective C and Swift for iOS now of course learning all these languages is a bit cumbersome now imagine you are a web developer who knows react and you want to use what you already know there to build native mobile apps with that well guess what you can do that and not just since today actually for quite some time there is this react native thing which you might have heard of which allows you to build native mobile apps for iOS and Android with react well now we got a brand new option available and that is ionic with react now no matter if you know ionic or not it is with you I will explain what ion against but most importantly I will explain what the difference between react native and ionic with reactors and why you might go for one or the other approach so hopefully this helps and hopefully this helps you build the mobile apps you want to build so what's the difference between react native and ionic react or when should you use which now for one I do have a comparison about react native versus ionic and also versus flutter and native script already so you might want to check this out for my general thoughts on this in this video I'll just focus on the main thing that sets the two solutions react native an ionic react apart so let's start with react native react native is a project maintained and actively developed by Facebook so by the same company which in the end also works on react react native users react but you don't build a web application with it instead react native code looks like this what you see here and in the end what you have here looks very similar to our normal react for web application but it's not the same instead what you will see here is that you find no normal HTML elements here all the elements is here view header text are imported from react native or from custom components because react native doesn't have access to these web primitives instead the idea behind react native is that you have these components for which react native knows how to compile them to native iOS or Android UI elements and that's really the big thing react native applications are all about compiling your user interface code to real native UI elements our JavaScript code for example your JavaScript logic for sending HTTP requests or for handling authentication will stay JavaScript so that's not compiled but your UI is compiled to a native UI so you get kind of a real native app as if you would write it directly with Swift or objective-c or with Java but with the one important exception that all your logic JavaScript code is yet just hosted in a virtual machine of that app it's not compiled but that's the thing with react native now.i Jana has a different goal ioniq if we have a look at it is actually two things for when it's a company called ionic second this company has a product a library open source free to use library which is also called ionic now this library in the end is just a web component library so in the anti yannick framework is simply a package you could say which you can import into any application which gives you a bunch of web components now in case you're not sure what web components are I do have a complete course about them web components have nothing to do with native mobile apps or with ionic or anything like that you can build web components your own custom HTML elements with just JavaScript that's all you need and that's me and also what the ionic team did they built a suit a collection of custom components with a beautiful styling and of course also with some logic attached to them which you can import and then use like a regular HTML elements in any web project so in any web app you're building that's ionic now the ionic company has a different background though in the past when they built Yanik one currently were on ionic 4 but when they built a onok one that was actually a library for angular so for only angular actually only for angularjs and it was not about web components it was about angular components in the end it also mainly was about building native mobile apps so that you could use angular and your web development knowledge to build native mobile apps nowadays ionic is a bit more flexible as I just explained ionic itself is just this collection of web components but the ionic team also has another product also a free to use library which is open source and the name of the libraries capacitor capacitor is a library that allows you to take any web app doesn't even have to use ionic any web app and turn it into a native mobile app how does this work well it's not magic and it's also not compiling code instead it gives you a mobile app shell and then hosts your web app in a webview inside of this app so what you deploy is a real app which you share to the Google Play Store and the Apple App Store but it's basically that shell with the web app inside of it and actually capacitor is not just for ios and android it's all the for electron which allows you to build desktop applications and you can also enhance your web app with capacitor because capacitor gives you a lot of api's which you can use to implement things like geolocation or the device camera and so on and things like the camera then even work in a web app where it also tries to access the well device camera if one is available so capacitor is really a project that can take any web app to the next level and also allows you to turn a web app into a mobile app well and capacitor works together really well with ionic because all these ionic components which you can use without capacitor as well it's not a must use but all these ionic components are really configured and styled to look especially great and stunning on native mobile apps now they also look great in on a desktop device but they also have everything built in to look great on mobile apps they even have automatic detection of which underlying platform they're running on so that for example a toggle like this one looks like a toggle should look like on iOS and looks like a toggle should look like on Android automatically so that's ionic you build web apps with it and together with capacitor you can turn this web app into a native mobile app with react native you build a native app because your code gets compiled to native code or at least your UI code gets compiled there also is a project react native web which allows you to use your react native code to get a web app out of it but the difference to a yannick is that you need this extra project to do the translation with ionic you can just use normal HTML elements in your code for example here you see a h2 in a paragraph element in some ionic react code and I'll come back to ionic react in a second so that's the thing you build a normal web app with ionic with react native you don't of course the advantage of react native is you get a compiled user interface which typically will offer a little bit better performance than the hosted web app as you can imagine and this might matter in some apps in addition react native of course has generally its own approach its own API switch it exposes and it's also really nice to work with now I do have a complete react native crash course video which you can check out if you want to learn more about it and if you want to learn all about it I also got a complete course the best-selling react native course on udemy which you can also check out to learn all about react native and you'll find links to all these resources with a great offer included below the video so what's the special thing about ionic react and react native already allows us to build native mobile apps it gives us everything we need for that it's developed by the company which also develops react why would we use ionic with react well maybe because of the ease of use ionic since you build a web app with it makes it really easy to build a cross-platform application for mobile and the web with the tools you already know in the end you will build a normal web app a normal react web app your code will look like this these special tags here are simply these web components exposed by the ionic framework other than dead you work with normal HTML elements you work with regular CSS styling you work with all the browser api's you know and so on so you work with react as you're used to it and that makes building cross-platform apps super simple you don't have to worry about the complex stuff unlike react native which of course has its own merits but unlike react native you don't have to learn a new way of styling or a new way of structuring your layout or of navigation instead you basically work with the things you already know of course the downside is the potential performance disadvantage and maybe you also want to use this new approach react native gives you maybe you're all looking for a certain API switch only exists in react native and not really in ionic or capacitor then of course react native is great and there are a lot of great reasons for a react native in general but ionic react is a great alternative it makes building cross-platform apps really really easy and I can only recommend that you give it a try and that you have a look at ionic it's an amazing project over the last year I worked a lot with ionic and capacitor and it's really simple and fun to build cross-platform apps with these technologies and it's simply great to have another alternative besides react native and you can try them out both have a look at them and then go with your favorite it's amazing to have these options and now there's really nothing in your way to build a real native or even better a real cross-platform application with Evo react native or with ionic react

Channel: Academind

Views: 40,141

Rating: 4.9221501 out of 5

Keywords: react, reactjs, react.js, react native, ionic, ionic react, mobile apps, native apps, react native apps, react mobile, ios, android, tutorial, comparison

Id: I6mCTKst9II

Length: 11min 8sec (668 seconds)

Published: Wed Oct 16 2019