Coding

What’s the Difference? What’s Better?

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