- 00:00:01 so should you learn react native or
- 00:00:04 flutter or is ioniq better
- 00:00:06 what about native script there are many
- 00:00:08 options when it comes to building native
- 00:00:11 mobile apps with one code base instead
- 00:00:13 of two which you would normally would
- 00:00:15 have to use and in this video I will
- 00:00:17 give you my opinion on these options I
- 00:00:19 got a couple of categories where I will
- 00:00:21 compare these options so that you can
- 00:00:23 hopefully by the end of the video pick
- 00:00:25 your favorite for your next mobile app
- 00:00:28 you're going to build now
- 00:00:30 all these options are amazing but there
- 00:00:32 are differences which I'm going to
- 00:00:33 outline in this video and if you're then
- 00:00:36 interested in learning one of them or
- 00:00:38 learning all of them if you want
- 00:00:39 I got courses on these topics and you
- 00:00:42 find links with attractive offers below
- 00:00:44 the video so that's a great place to
- 00:00:46 then get started with these technologies
- 00:00:48 if you want you there below the video
- 00:00:50 you'll also find a full article where
- 00:00:52 you can basically find this video in
- 00:00:54 written form I guess so in case you
- 00:00:56 don't want to watch it with that let's
- 00:00:58 get started let's have a look at all
- 00:00:59 these topics and let's see which might
- 00:01:02 be best for your next project how they
- 00:01:05 differ and how they compare
- 00:01:09 so who wins react native flutter native
- 00:01:14 script or ioniq now let's generally
- 00:01:17 understand how all these options work
- 00:01:19 before I then dive into the detailed
- 00:01:21 comparison react native uses JavaScript
- 00:01:24 as a language and of course it uses to
- 00:01:26 react library so generally the idea with
- 00:01:29 react native instead you build native
- 00:01:32 apps for both ios and android with the
- 00:01:35 tools you all use for react web
- 00:01:38 application development that's the
- 00:01:39 general idea
- 00:01:40 flutter uses start programming language
- 00:01:44 developed by google it's therefore not
- 00:01:47 javascript but dart is relatively easy
- 00:01:49 to learn if you do know javascript so as
- 00:01:52 a web developer it shouldn't be too hard
- 00:01:53 to learn dart and flutter then is
- 00:01:56 basically a framework for dart you could
- 00:01:58 say it's also a collection of tools like
- 00:02:01 actually all these options they also
- 00:02:03 include tools which do the compilation
- 00:02:06 or the translation to native code and
- 00:02:09 that built the native apps in the end
- 00:02:11 native script like react native uses
- 00:02:15 JavaScript but it does not embrace react
- 00:02:18 there it does not use the react library
- 00:02:21 instead native script can be used with
- 00:02:24 vanilla JavaScript or typescript
- 00:02:26 actually and it also supports angular
- 00:02:30 and view really well so if you want to
- 00:02:32 build a native app with angular or with
- 00:02:34 view Jas with one of these two
- 00:02:37 frameworks then native script can be the
- 00:02:39 tool you use their ionic last but not
- 00:02:42 least also uses JavaScript because with
- 00:02:45 ionic you basically build a normal web
- 00:02:47 application more on that in a second so
- 00:02:49 speaking of that you use these different
- 00:02:52 languages and as you can tell none of
- 00:02:54 these languages is Java which you would
- 00:02:56 normally need for Android development
- 00:02:58 with the android framework or Swift or
- 00:03:01 objective-c which you would normally
- 00:03:02 need to get an iOS app so how can you
- 00:03:06 use these languages and still get a real
- 00:03:08 mobile app which you can distribute
- 00:03:10 through the App Store's how does that
- 00:03:12 work well react native in the end as I
- 00:03:15 mentioned like all the other options is
- 00:03:17 not just a library you dump into your
- 00:03:20 project instead this gives you a CLI
- 00:03:23 gives you some tooling which will
- 00:03:25 actually take your react native project
- 00:03:27 and kind of bundle this into a native
- 00:03:30 iOS or Android app so behind the scenes
- 00:03:32 it'll do a lot of stuff for you to give
- 00:03:34 you a native app that kind of uses your
- 00:03:36 code now the question is how does it do
- 00:03:38 that
- 00:03:38 and the answer is react native and the
- 00:03:40 tools that belong to it partly compile
- 00:03:43 your code your JavaScript code if you
- 00:03:45 will to native code now I'm saying
- 00:03:47 partly because what is compiled are
- 00:03:50 actually the user interface components
- 00:03:52 so if you use the the button component
- 00:03:55 in your react code was dead I don't mean
- 00:03:58 the button you would use in a react web
- 00:04:00 project but a specific button component
- 00:04:02 exposed to you by the react native
- 00:04:04 library if you use stat in your JS Xcode
- 00:04:07 that will actually be compiled to the
- 00:04:10 native widget for Android and iOS so to
- 00:04:13 the native equivalent if you will your
- 00:04:15 JavaScript logic so any Redux logic you
- 00:04:19 have or anything like that
- 00:04:20 whilst a JavaScript and will be hosted
- 00:04:23 on a virtual machine inside of your app
- 00:04:26 so to say so the react native tooling
- 00:04:28 will bundle an application with the
- 00:04:31 compiled user interface with the real
- 00:04:33 native user interface as I just
- 00:04:35 explained and your JavaScript logic
- 00:04:37 running on a virtual machine that's part
- 00:04:39 of that app so to say so it's all in one
- 00:04:42 app which you ship it's a normal app
- 00:04:44 which you deploy to the App Store's but
- 00:04:46 it includes disk native user interface
- 00:04:48 and then your jobs with logic and react
- 00:04:50 native all ensures that these two things
- 00:04:52 can talk to each other that's how you
- 00:04:54 can think about that now for flutter
- 00:04:57 it's a bit different there dart indeed
- 00:05:01 is really compiled to native machine
- 00:05:03 code if you will flutter like react
- 00:05:06 native in zone includes tooling that
- 00:05:08 does that and here the idea really is
- 00:05:10 that therefore you get a native app
- 00:05:12 that's made up fully off machine code
- 00:05:14 one important difference to react native
- 00:05:17 for example is that flutter and dart
- 00:05:19 don't really take let's say a button and
- 00:05:22 compile that to the native Android or
- 00:05:25 iOS button instead that all gets
- 00:05:27 compiled down to native code here that
- 00:05:29 runs on the machine you could say and
- 00:05:31 flattered really controls every pixel on
- 00:05:34 the screen manually so it doesn't
- 00:05:36 compile too
- 00:05:37 any native equivalents to any native
- 00:05:39 widgets it compiles everything to code
- 00:05:41 that directly runs on the machine and
- 00:05:43 therefore renders something to the
- 00:05:44 screen that's how you can think about
- 00:05:46 this now
- 00:05:47 native script is closer to react native
- 00:05:50 they are also the template the user
- 00:05:53 interface gets compiled to the native
- 00:05:55 widgets to the native equivalents if you
- 00:05:57 will so any state management code that
- 00:06:01 sends HTTP requests all of that stays
- 00:06:05 JavaScript code which like in a react
- 00:06:08 native code is embedded in your
- 00:06:10 application and is able to talk to the
- 00:06:12 user interface so again native script
- 00:06:15 gives you some tooling that creates that
- 00:06:17 bundling that does this connection of
- 00:06:19 JavaScript and compiled user interface
- 00:06:22 now for ionic we approached a bit
- 00:06:24 different there no compilation happens
- 00:06:27 neither for the user interface nor for
- 00:06:29 anything else instead with ionic you
- 00:06:32 built a normal web app and what ionic
- 00:06:34 gives you is a wrapper it gives you a
- 00:06:37 native app it gives you a real native
- 00:06:40 app all these options generate real
- 00:06:42 native apps but ionic basically gives
- 00:06:44 you a native app that has a webview in
- 00:06:47 there that hosts that webpage which
- 00:06:49 you're writing so you're just having a
- 00:06:52 web page encapsulated in a native app if
- 00:06:55 you will this is a great approach when
- 00:06:57 it comes to building the app because you
- 00:06:59 don't need to learn anything specific
- 00:07:01 you just build a web app and you get a
- 00:07:02 native app which is pretty sweet a minor
- 00:07:05 downside and I'll dive deeper into that
- 00:07:07 in a second is of course performance
- 00:07:10 because you have that wrapped up but
- 00:07:12 I'll say way more about this later in
- 00:07:14 the video because it's not as simple as
- 00:07:16 it might seem now what about the
- 00:07:20 languages we use there we use JavaScript
- 00:07:22 instead of Android were Java with
- 00:07:25 Android and instead of Swift and
- 00:07:27 objective-c is that a good idea
- 00:07:29 well JavaScript wasn't invented for this
- 00:07:31 but if you work with react native if you
- 00:07:33 have a look at apps that were built with
- 00:07:35 react native it turns out that this
- 00:07:37 works really well the same for flutter
- 00:07:39 and dart dart is older than the flutter
- 00:07:42 project and dart wasn't invented for
- 00:07:45 this but just as JavaScript it works
- 00:07:47 really well the compilation works really
- 00:07:49 well
- 00:07:50 I spent a lot of work ensuring that it
- 00:07:52 does and of course it's an advantage
- 00:07:54 that both dart and flattered are
- 00:07:57 developed by the same company which is
- 00:07:58 Google which of course means that they
- 00:08:00 go hand in hand during the development
- 00:08:02 and dart can be optimized to really suit
- 00:08:05 flutter and the other way around if you
- 00:08:08 will that's of course not really the
- 00:08:10 case for all these other options because
- 00:08:12 their javascript is not developed by the
- 00:08:15 teams behind react native and native
- 00:08:17 script anionic so they can only optimize
- 00:08:19 their libraries and their solutions for
- 00:08:22 JavaScript and not the other way around
- 00:08:24 so get the same arguments here for
- 00:08:27 native script and ionic as for react
- 00:08:29 native now another important thing when
- 00:08:32 you think about building these native
- 00:08:35 apps is not just which language we use
- 00:08:36 in which framework or library there as
- 00:08:39 you saw you can use ric native who's
- 00:08:41 react native script with angular or view
- 00:08:43 ionic I didn't mention this but ionic
- 00:08:46 can be used with any framework or no
- 00:08:48 framework at all because you just build
- 00:08:50 a webpage so you've got total
- 00:08:52 flexibility there and flatteri uses the
- 00:08:55 flutter framework so that's one
- 00:08:56 important thing but the questions also
- 00:08:58 when you build these apps with the
- 00:09:01 supported web tools web technologies web
- 00:09:05 frameworks which extra features do you
- 00:09:09 get besides the tooling to build a
- 00:09:11 native app from that and by that I mean
- 00:09:13 how easy is it you build user interfaces
- 00:09:15 because for dad you need some native
- 00:09:18 components you need buttons that look
- 00:09:21 and feel like the native buttons you're
- 00:09:22 used to from mobile apps you need
- 00:09:25 sliders that work great with touch
- 00:09:27 events and so on and they're react
- 00:09:29 native ships with some but only a few
- 00:09:32 pre-built components which partly adjust
- 00:09:35 itself adapt itself to the underlying
- 00:09:38 platform with that I mean that the
- 00:09:40 styling and maybe also the behavior
- 00:09:41 changes when this component is then used
- 00:09:45 in an app running on iOS versus the same
- 00:09:48 component in the same app running on
- 00:09:50 Android so react native really has a
- 00:09:52 minimalistic approach there you get some
- 00:09:54 core components with which you can
- 00:09:57 actually build any kind of interface but
- 00:09:59 you will need to build more components
- 00:10:01 on your own there only are some
- 00:10:03 restyle pre-configured components in
- 00:10:05 there which sometimes then even adjust
- 00:10:08 themselves to the underlying platform
- 00:10:10 for flatter it's different there you got
- 00:10:12 a huge suit of components flatter is all
- 00:10:16 about components widgets as they call it
- 00:10:18 and in flatter you've got so many
- 00:10:20 widgets you can basically build any user
- 00:10:22 interface with all these widgets you
- 00:10:24 don't have to reinvent the wheel in in
- 00:10:26 many cases there is of widget which you
- 00:10:29 can use which you then can configure to
- 00:10:31 suit your needs which you can style but
- 00:10:32 which generally is stair in which you
- 00:10:34 don't need to invent it built from
- 00:10:36 scratch and quite a lot of work quite a
- 00:10:39 few of those components or widgets also
- 00:10:42 adapt themselves to the underlying
- 00:10:45 platform which means that a slider on
- 00:10:47 iOS looks like a slider should feel on
- 00:10:50 iOS but if the same app is running on
- 00:10:52 Android it looks and feels like a slider
- 00:10:54 should feel like on Android now for
- 00:10:57 native script we got some pre-built
- 00:10:59 components most of them were quite a few
- 00:11:03 of them are adaptive but not as many as
- 00:11:06 we haven't flatter but it's a bit better
- 00:11:09 but more than we've react native I'd say
- 00:11:11 but generally react native native script
- 00:11:14 are comparable but native script gives
- 00:11:15 you more components that work and look
- 00:11:19 good and adapt themselves than react
- 00:11:21 native does now for ionic you again got
- 00:11:24 a huge suite of components components
- 00:11:28 for everything
- 00:11:29 so like flatter you got many components
- 00:11:31 and they're basically all adaptive so
- 00:11:34 all these components which ionic ships
- 00:11:36 adapt themselves to the underlying
- 00:11:39 platform and indeed ionic primarily is
- 00:11:42 actually a library or a framework for
- 00:11:46 web components so components which you
- 00:11:50 can use not just when you want to build
- 00:11:52 a native mobile app but also if you want
- 00:11:54 to build a normal web app ionic or the
- 00:11:57 team behind ionic then just also gives
- 00:11:59 you tools to get a native app out of
- 00:12:01 that to build a native app but primarily
- 00:12:04 ionic if you just take the ionic
- 00:12:06 framework itself is just about having
- 00:12:08 these pre style pre-configured and still
- 00:12:11 fully configurable by you components
- 00:12:13 which you can dump in any webpage so you
- 00:12:15 can also use ionic
- 00:12:17 non-native apps if you want so that was
- 00:12:22 the overview let's now compare all these
- 00:12:24 options and for dad I came up with a
- 00:12:25 couple of categories which are totally
- 00:12:27 subjective which are just reflecting my
- 00:12:30 thoughts and ideas and therefore you are
- 00:12:32 more than welcome to comment in there
- 00:12:34 well comments surprisingly and share
- 00:12:36 your thoughts on that and maybe also
- 00:12:39 share some other categories which I
- 00:12:40 don't have in this comparison so the
- 00:12:43 first category I came up with is right
- 00:12:46 once use everywhere so this quote here
- 00:12:49 what do I mean with that well if we have
- 00:12:51 a look at all these options the question
- 00:12:53 is how much code do we need to write to
- 00:12:56 get apps for both operating systems so
- 00:12:59 for iOS and Android now you could also
- 00:13:02 include getting a web app into the
- 00:13:05 equation but that's not really what the
- 00:13:07 video is about
- 00:13:07 so I'll just focus on iOS and Android
- 00:13:09 and see how much code needs to be
- 00:13:12 written to get apps for both platforms
- 00:13:14 because in an ideal world we only have
- 00:13:17 one code base one project which then
- 00:13:20 gives us apps for both platforms that
- 00:13:22 then still feel like they should feel
- 00:13:25 for the different platforms which means
- 00:13:27 that they look different on the
- 00:13:28 different platforms and that some
- 00:13:30 behaviors are different in an ideal
- 00:13:32 world we don't have to write much code
- 00:13:33 to achieve that so we could have these
- 00:13:36 two extremes that we write code only
- 00:13:38 once and then rewrite it twice now let's
- 00:13:41 throw in the native languages Java and
- 00:13:43 Swift or objective-c
- 00:13:45 obviously there we have to write it
- 00:13:47 twice because the Java Android app only
- 00:13:50 gives us well guess what an Android app
- 00:13:52 and the Swift objective-c app is just an
- 00:13:55 app that runs on iOS and we can't share
- 00:13:57 the code these are totally different
- 00:13:59 programming languages so if you want to
- 00:14:01 have an app for each operating system
- 00:14:02 well then we have to write two apps from
- 00:14:05 scratch basically now the other end
- 00:14:08 would be ionic since we build a web app
- 00:14:11 and we have this rich suit of
- 00:14:13 pre-configured components which
- 00:14:15 automatically adjusts themselves to the
- 00:14:17 underlying platform we don't have to
- 00:14:20 write much code to get to apps that we
- 00:14:23 can ship to the two platforms that still
- 00:14:26 look and feel distinctively different on
- 00:14:28 these platforms
- 00:14:31 react native would be somewhere in the
- 00:14:33 middle maybe a bit further to the right
- 00:14:35 but that really depends on the kind of
- 00:14:37 app you're building it's in the middle
- 00:14:39 because react native doesn't have that
- 00:14:41 many pre-built components in there so
- 00:14:43 you need to build many components on
- 00:14:45 your own and if these components then
- 00:14:47 should look and feel different on
- 00:14:49 Android than they do on iOS you have to
- 00:14:51 add your own logic you have to throw in
- 00:14:53 an if check into your code and say if
- 00:14:55 the platform this app is running on is
- 00:14:58 Android then do that otherwise do that
- 00:15:01 you can do that very easily in react
- 00:15:03 native but it still means that you have
- 00:15:05 to write some extra code for native
- 00:15:07 script it's about equal since it has a
- 00:15:09 bit more of components which
- 00:15:10 automatically adjusts themselves it's a
- 00:15:12 bit more on the left but as always it
- 00:15:15 depends on the kind of app you're
- 00:15:16 building maybe you're building a very
- 00:15:18 specific app where you need to write up
- 00:15:19 a lot of custom components then there's
- 00:15:22 all shifts more to the right
- 00:15:23 but that's generally where you could
- 00:15:25 categorize this Flattr is a bit more on
- 00:15:28 the left because it has many built-in
- 00:15:29 components and more and more of those
- 00:15:32 components adjust themselves to the
- 00:15:34 underlying platform and they're highly
- 00:15:36 customizable anyway so you can also find
- 00:15:39 a style that suits both platforms but
- 00:15:42 again it depends on the app and you
- 00:15:43 might very well also build a app where
- 00:15:45 this should be shifted further to the
- 00:15:47 right because you need to do a lot of
- 00:15:49 manual adjustment because just like in
- 00:15:51 react native and all the native script
- 00:15:52 in flattery you can also say if platform
- 00:15:55 is Android then do this otherwise do
- 00:15:58 that so it really depends on the app but
- 00:16:00 this is generally how I would categorize
- 00:16:02 this now kind of connected and still
- 00:16:05 totally different is my next category
- 00:16:07 learn once right everywhere now what do
- 00:16:10 I mean by that this means that we can
- 00:16:13 have an application or that we want to
- 00:16:16 build an application and we might be
- 00:16:19 fine with writing a bit more code with
- 00:16:21 writing some if checks to check on which
- 00:16:23 platform we're running to then render
- 00:16:26 different components or different styles
- 00:16:28 but the logic we learn and the code the
- 00:16:31 language the programming language will
- 00:16:33 learn dad should at least be the same so
- 00:16:36 here we all have two extremes we need to
- 00:16:38 learn ones we need to learn twice and
- 00:16:39 unsurprisingly if we use the native
- 00:16:41 languages we're on the right because
- 00:16:43 Java and
- 00:16:45 if an objective-c might have some
- 00:16:48 similarities but they are totally
- 00:16:50 different programming languages and you
- 00:16:52 have to learn them from scratch you have
- 00:16:54 to learn two different languages here
- 00:16:56 now for ionic of course we are on the
- 00:16:58 left because we work with but we build a
- 00:17:00 web app we build a web page and even if
- 00:17:03 you are in a web developer yet well you
- 00:17:05 just have to learn the web technologies
- 00:17:07 and you can get to different apps for
- 00:17:09 two different platforms so you'll learn
- 00:17:11 it once and get two apps now it's the
- 00:17:14 same for react native and also for
- 00:17:16 native script and for flutter they're
- 00:17:17 all here on the left and you can move
- 00:17:19 these arrows around they're basically
- 00:17:22 all using one language one library in
- 00:17:25 the end which you can then use to get to
- 00:17:27 native apps so we're definitely on the
- 00:17:30 left there now all the important when
- 00:17:33 building a native app is whether you
- 00:17:35 have a rich freestyle component library
- 00:17:38 available or not because that obviously
- 00:17:39 simplifies building the app and speeds
- 00:17:41 up the app building process if you have
- 00:17:44 to build and style and configure all
- 00:17:47 components from scratch then of course
- 00:17:49 that takes longer than if at least a
- 00:17:52 broad variety of core components is
- 00:17:55 already built into the solution you're
- 00:17:57 working with so here I got these two
- 00:17:59 extremes all you need were spilled
- 00:18:01 install yourself and for the native
- 00:18:04 language is where we're actually on the
- 00:18:06 Left here because these native languages
- 00:18:08 give you the widgets you need they're
- 00:18:10 obviously they're all about allowing you
- 00:18:13 to build an iOS or Android app so whilst
- 00:18:15 you can't share the code if you build an
- 00:18:18 iOS app with Swift and with Xcode which
- 00:18:20 is the development tool Apple gives you
- 00:18:22 then you have all these default
- 00:18:25 components available and that's really
- 00:18:27 easy to to work with ionic is also on
- 00:18:30 the Left because as I mentioned multiple
- 00:18:32 times it gives you a rich suit of
- 00:18:34 components which you can use react
- 00:18:36 native is on the right because react
- 00:18:38 native only gives you a few core
- 00:18:40 components which have no or only very
- 00:18:42 basic styling and which you then need to
- 00:18:45 style and configure on your own and
- 00:18:47 where you need to build your own
- 00:18:48 components which are composed from these
- 00:18:50 core components so there you have to do
- 00:18:53 a lot of that work on your own and there
- 00:18:55 are some third-party component kits
- 00:18:57 which you can use
- 00:18:58 but for one these might still not offer
- 00:19:01 everything you need an addition you'd
- 00:19:03 then depend on this third party to
- 00:19:05 maintain the kit and so on so react
- 00:19:07 native on its own doesn't really have a
- 00:19:09 big component library built in on which
- 00:19:11 you could rely native script somewhere
- 00:19:14 in the middle has quite a few built-in
- 00:19:16 components you might still need to build
- 00:19:19 a couple of components on your own and
- 00:19:21 installed yourselves but it definitely
- 00:19:22 has more than react native and flatter
- 00:19:25 as I also mention has a huge library not
- 00:19:28 all components are adaptive so that
- 00:19:30 might require some extra effort to make
- 00:19:33 all components look the way they should
- 00:19:34 look on the different operating systems
- 00:19:36 but that's getting better and better
- 00:19:38 this there has been a lot of development
- 00:19:40 on this over the last year and therefore
- 00:19:43 this is really not that bad here now
- 00:19:47 before I switch to next categories one
- 00:19:49 word about the future the past and the
- 00:19:51 prospects of all these options here now
- 00:19:54 I did this comparison a year ago and
- 00:19:56 especially Flattr has has gone a long
- 00:20:00 way since then it got much better has
- 00:20:02 more components built in a lot of bugs
- 00:20:04 have been fixed so this definitely
- 00:20:06 shifted into the better directions on
- 00:20:09 most of these categories here and all
- 00:20:11 the native script and all the react
- 00:20:13 native has seen some some development
- 00:20:15 here so generally you could say all
- 00:20:17 these options really got better since my
- 00:20:20 last comparison all the fray on ik for
- 00:20:22 example ionic 4 was released which was a
- 00:20:24 huge thing and which really helped ionic
- 00:20:28 and it's made it even more awesome and
- 00:20:30 below the video you'll also find a link
- 00:20:32 to video where I talk just about ionic 4
- 00:20:35 and what that offers on to the next
- 00:20:39 categories then what about the ecosystem
- 00:20:42 and the third-party libraries that is
- 00:20:44 important because none of these options
- 00:20:46 has everything built-in you might need
- 00:20:49 certain features certain native device
- 00:20:52 features like using the camera which is
- 00:20:55 not supported out of the box where you
- 00:20:57 would have to write your own logic to to
- 00:20:58 access that and therefore it of course
- 00:21:00 matters how active the ecosystem is and
- 00:21:03 which third-party libraries you find
- 00:21:05 there the ecosystem does also not just
- 00:21:07 include third-party libraries but also
- 00:21:09 how many tutorials you find and how
- 00:21:12 much help you're getting so if we plot
- 00:21:16 these different options here well
- 00:21:18 obviously for Android and for iOS
- 00:21:19 development you find tons of resources
- 00:21:22 tons of third-party libraries tons of
- 00:21:25 tutorials courses help documents
- 00:21:27 official Docs and so on of course these
- 00:21:30 are huge ecosystems there's a lot in
- 00:21:33 there for ionic it's also very good
- 00:21:35 ionic itself is popular but not even
- 00:21:39 close to of course native Android and
- 00:21:41 Java none of the options I show here is
- 00:21:43 by the way of course but ionic allows
- 00:21:46 you to build normal web pages right and
- 00:21:48 the web development community in turn is
- 00:21:50 really large it's really large there are
- 00:21:53 tons of third-party libraries and
- 00:21:55 generally you can use any library which
- 00:21:58 you can use in a normal webpage also in
- 00:22:01 an ionic app so that's really great when
- 00:22:03 it comes to using native device features
- 00:22:05 that's all – quite decent now for react
- 00:22:09 native it's also very good it's also a
- 00:22:11 web app it's a react app and therefore
- 00:22:15 since you have that restriction that it
- 00:22:17 must be react it can't be any web app
- 00:22:19 it's of course a bit further on the
- 00:22:21 right than ionic is but reactors popular
- 00:22:24 web apps are popular and react native
- 00:22:26 itself is also popular so you will find
- 00:22:29 plenty of resources there though I will
- 00:22:31 say the acro system of react native is
- 00:22:34 really good you find a lot there but a
- 00:22:37 lot of the core features which you need
- 00:22:40 and many apps are actually out sourced
- 00:22:42 to the community so for example native
- 00:22:44 modules for working with with Google
- 00:22:46 Maps or anything like that that is all
- 00:22:49 handled by the community and that isn't
- 00:22:51 it well maintained but it's not on the
- 00:22:54 same level as if the react team itself
- 00:22:56 would guarantee that they developed this
- 00:22:59 and they're really behind that native
- 00:23:02 script there it's it's a bit worse you
- 00:23:06 have a lot of plugins or libraries
- 00:23:08 managed by the native script team that's
- 00:23:10 great but native script just isn't as
- 00:23:13 popular as the other options the
- 00:23:15 ecosystem the community is way smaller
- 00:23:18 unfortunately because native script
- 00:23:20 really is a great tool great technology
- 00:23:23 but it's just not as popular as
- 00:23:25 our options and therefore you have a
- 00:23:27 smaller ecosystem there you have fewer
- 00:23:30 resources for example
- 00:23:31 Flattr is somewhere between ionic and
- 00:23:34 they react native i'd say simply because
- 00:23:37 a lot of cool features are baked in so
- 00:23:40 you rely a bit less on the echo system
- 00:23:42 anti echo system is really great
- 00:23:44 especially over the past year it has
- 00:23:47 grown tremendously there is so many
- 00:23:49 third-party libraries lots of discussion
- 00:23:52 on Stack Overflow lots of tutorials and
- 00:23:55 documentation and so on so that's really
- 00:23:57 good I'd argue somewhere around the
- 00:24:00 react native level maybe a bit better
- 00:24:01 but as always it depends on the app
- 00:24:03 you're building now let's talk about
- 00:24:05 popularity and that's of course kind of
- 00:24:08 related to the acquisition but here I
- 00:24:09 really mean at how popular it is when we
- 00:24:13 talk about available jobs available
- 00:24:15 projects and in general how how hot is
- 00:24:19 the topic so if we have a look at this
- 00:24:23 well obviously Java and Wright are very
- 00:24:24 hot these are huge topics you'll find
- 00:24:28 tons of jobs and so on and that's really
- 00:24:30 popular not much to say there ionic is
- 00:24:33 somewhere in the middle if we have a
- 00:24:35 look at the it's a web app aspect it's
- 00:24:38 obviously very popular web apps are very
- 00:24:40 popular but if we have a look at just a
- 00:24:42 yannick the ionic framework and solution
- 00:24:44 itself well then that's a bit smaller
- 00:24:49 obviously because it's kind of a niche
- 00:24:51 solution still and whilst we have a nice
- 00:24:54 and helpful community there and
- 00:24:55 everything
- 00:24:56 I'd say it's somewhere in the middle now
- 00:24:58 since you can build ionic gaps with any
- 00:25:00 framework be that angular view or a
- 00:25:02 library like react you also benefit from
- 00:25:05 the popularity of of those solutions so
- 00:25:09 that's a tiny plus and therefore yeah
- 00:25:11 somewhere in the middle react native a
- 00:25:13 bit more on the Left react is very
- 00:25:15 popular react native also is very
- 00:25:17 popular and therefore I'd say a bit
- 00:25:19 closer to these native solutions so this
- 00:25:22 is of course all meant relatively it's
- 00:25:24 not an absolute measure here if you
- 00:25:27 would have a look at absolute numbers
- 00:25:28 the distance between the native
- 00:25:30 languages Java and Swift and the other
- 00:25:33 options would probably be way bigger
- 00:25:36 native script as I mentioned is just not
- 00:25:38 as popular and for
- 00:25:39 gently and therefore it's further on the
- 00:25:41 right even though it's great but just
- 00:25:43 not as popular flatter I'd say is
- 00:25:47 roundabout I on the same place as react
- 00:25:50 native it is popular it's also growing
- 00:25:53 in popularity especially the last year
- 00:25:55 was awesome flutter is really getting
- 00:25:57 more and more popular so we can be
- 00:25:59 excited about what it will bring in the
- 00:26:01 future and therefore I'd say at the
- 00:26:03 moment you can definitely plot it at
- 00:26:06 this point
- 00:26:06 now the next category I want to have a
- 00:26:09 look at is performance the performance
- 00:26:12 of the app you're building of course
- 00:26:13 matters it matters whether it loads fast
- 00:26:16 but also ever it then runs fast or if
- 00:26:18 there are lags or delays or anything
- 00:26:21 like that
- 00:26:22 now it's needless to say that generally
- 00:26:24 native apps written with Java or Swift
- 00:26:26 or Objective C are pretty fast because
- 00:26:29 there's nothing in between this is as
- 00:26:31 native and as intended to be used as you
- 00:26:35 can get obviously now ionic would be on
- 00:26:39 the other end of this scale because
- 00:26:42 there you build a web app which then is
- 00:26:44 wrapped by a native app which just loads
- 00:26:47 the web app into a webview
- 00:26:48 now obviously of all these options where
- 00:26:52 at least some compilation happens for
- 00:26:54 the other options this has to be the
- 00:26:56 slowest approach but it's really
- 00:26:59 important to kind of put this into into
- 00:27:02 context or in in relation here it's not
- 00:27:05 the case and absolutely not what I mean
- 00:27:07 here that ionic apps are slow just of
- 00:27:11 all these options they of course tend to
- 00:27:15 have the worst performance but that is
- 00:27:18 not a must be because it's always
- 00:27:21 possible to write bad code with any
- 00:27:23 solution so you can definitely build a
- 00:27:26 react native app that's way slower than
- 00:27:28 an ion a gap so that's one thing and in
- 00:27:30 addition the performance difference I'm
- 00:27:33 talking about is very very small and on
- 00:27:36 most pretty much all modern devices you
- 00:27:40 will not feel it also especially with
- 00:27:44 ionic for performance of ionic apps got
- 00:27:46 much better also with their own tool
- 00:27:50 capacitor which is the tool that
- 00:27:51 actually takes your ionic
- 00:27:53 and allows you to put it into a native
- 00:27:55 app and therefore it's really easy to
- 00:27:57 look at this and think like ionic is
- 00:27:59 slow no it's not ionic is not slow it
- 00:28:02 might even be faster than some of the
- 00:28:04 other options depending on the app
- 00:28:06 you're building at the co you're writing
- 00:28:07 but even if it is slower if there is a
- 00:28:10 performance difference it will not be
- 00:28:12 measurable and will not matter in many
- 00:28:16 many many scenarios so don't rule out
- 00:28:19 ionic just because you read somewhere
- 00:28:21 that it's slow react native now
- 00:28:24 certainly is closer to the native
- 00:28:25 solutions that ionic though and again
- 00:28:27 this is not an absolute scale here this
- 00:28:29 is just some some relative subjective
- 00:28:32 placement of these options so react
- 00:28:36 native is of course closer because the
- 00:28:37 user interface gets compiled there which
- 00:28:39 is great your JavaScript code in general
- 00:28:42 does not get compiled though that's
- 00:28:43 hosted in react native but still you get
- 00:28:46 pretty well performing apps with react
- 00:28:47 native same for a native script not much
- 00:28:49 to say there it follows a similar
- 00:28:51 philosophy flattered certainly a bit
- 00:28:54 more on the left and you could even have
- 00:28:55 more distance between flattered and
- 00:28:57 react native native script it really
- 00:28:59 just depends on the kind of app you're
- 00:29:01 building since with flutter everything
- 00:29:03 gets compiled to native code and every
- 00:29:05 pixel gets controlled by flutter you
- 00:29:07 have the potential for a bigger
- 00:29:09 performance gain but you also have a
- 00:29:12 bigger opportunity of writing bad code
- 00:29:15 that leads to slower performance so
- 00:29:17 therefore you could have a bigger
- 00:29:19 difference between flutter and react
- 00:29:21 native but you can also build worst
- 00:29:22 performing apps with flutter than with
- 00:29:24 the Avro options but you can also build
- 00:29:26 way better performing apps theoretically
- 00:29:29 you could even build the apps that are
- 00:29:31 better performing that with the native
- 00:29:33 languages because no compilation to
- 00:29:35 these languages happens but flutter
- 00:29:37 controls every pixel on the screen
- 00:29:39 manually that's how you can think about
- 00:29:41 that so that's the performance really
- 00:29:44 important to not just look at the chart
- 00:29:46 but to also reflect what I said about
- 00:29:48 ionic and performance differences and
- 00:29:50 the code you write which matters and
- 00:29:52 with that onwards to the next category
- 00:29:55 almost the last one and this is how easy
- 00:29:58 it is to access native device features
- 00:30:00 and obviously that all the matters if
- 00:30:02 you're building a native app you want to
- 00:30:03 use the camera you want to use the user
- 00:30:05 location in some apps and therefore it
- 00:30:07 matter
- 00:30:07 – to know how easy that is or how hard
- 00:30:10 now of course if you're using Java and
- 00:30:13 Android it's very easy it's all built in
- 00:30:15 there you've got native api's provided
- 00:30:17 by Apple provided by Google which makes
- 00:30:20 it very easy for ionic we're a bit
- 00:30:22 further on the right though it really
- 00:30:25 depends on which feature we're talking
- 00:30:26 about ionic and with their a capacitor
- 00:30:29 project which is run and developed by
- 00:30:32 the same company you got access to a lot
- 00:30:34 of core native features in a very very
- 00:30:37 simple way so if you're just working
- 00:30:39 with some basic simple features like the
- 00:30:42 device camera you could definitely move
- 00:30:45 that further to the left it's all worth
- 00:30:47 noting that capacitor this project
- 00:30:50 developed by the ionic team which helps
- 00:30:51 you get access to the native API is
- 00:30:54 actually even works in non-native apps
- 00:30:57 so in web apps of course not all api's
- 00:31:00 are supported there but a lot of api's
- 00:31:02 are supported and there it's then also
- 00:31:04 still easy or very easy to for example
- 00:31:07 open the camera the webcam off the user
- 00:31:10 and take a picture so you can move ionic
- 00:31:13 wave further to the left if you're
- 00:31:15 working with basic features now if the
- 00:31:19 features are not basic however you
- 00:31:20 depend on third-party libraries or you
- 00:31:22 need to write your own native code and
- 00:31:24 that can be harder here so that's why I
- 00:31:26 put it there but again you could move it
- 00:31:28 somewhere else depending on what you're
- 00:31:30 building for react native we're a bit
- 00:31:34 further on the left I'd say though again
- 00:31:36 it also depends on the app but
- 00:31:37 especially if you're building your app
- 00:31:39 with Expo which is a tool that
- 00:31:41 simplifies building react native apps
- 00:31:43 you could say then you've got a lot of
- 00:31:45 native features easily available just a
- 00:31:49 click or just a coat line away and if
- 00:31:52 some feature is missing for some reason
- 00:31:54 you can write your own native code and
- 00:31:56 connect this to your react native app so
- 00:31:59 it's a it's generally a bit easier than
- 00:32:01 with ionic now for native script we're
- 00:32:06 even closer to the left because there
- 00:32:08 you also got a lot of features built in
- 00:32:10 or in packages managed by the team
- 00:32:13 behind native script that's different
- 00:32:15 for a react native as I mentioned with
- 00:32:17 Expo a lot is built-in but expo this
- 00:32:20 tool is
- 00:32:21 not managed by the react native team so
- 00:32:23 you rely on some third party that it
- 00:32:25 keeps maintaining it's it's a package
- 00:32:28 it's tool which is likely but not
- 00:32:31 guaranteed for native script since most
- 00:32:33 native modules and packages are
- 00:32:36 maintained by the native script team
- 00:32:38 that the chance of those packages being
- 00:32:41 maintained in the future is a bit higher
- 00:32:43 I'd say in addition if you need to write
- 00:32:45 and connect your own native code that's
- 00:32:47 currently a bit easier with native
- 00:32:50 script though it will all become easier
- 00:32:52 riff with react native without expo in
- 00:32:54 the near future flatter
- 00:32:57 somewhere in the middle flatter also has
- 00:32:59 a lot of native api's native features
- 00:33:01 baked in a lot of core features are
- 00:33:03 maintained by the flatter team just as
- 00:33:06 it is the case with ionic or native
- 00:33:08 script and if you need to connect your
- 00:33:10 own native code with flutter that's also
- 00:33:13 a bit easier than with react native at
- 00:33:15 the moment and with that onwards to the
- 00:33:18 last category real-world usage now there
- 00:33:22 I got these two extremes Facebook and my
- 00:33:25 first app so the idea simply is how are
- 00:33:28 these options getting used for real apps
- 00:33:31 now of course we got a bunch of real
- 00:33:34 apps out there in the App Store's which
- 00:33:36 are built with Java and Swift or
- 00:33:39 objective-c the vast majority of apps
- 00:33:41 there is actually built like this now
- 00:33:44 for ionic somewhere in the middle again
- 00:33:47 this is not an absolute measure
- 00:33:48 otherwise all options would be totally
- 00:33:51 on the right but ionic is nice for
- 00:33:53 building your own dummy apps but there
- 00:33:55 also are some real apps published on the
- 00:33:59 App Store's which are of different size
- 00:34:01 and if you google for ionic showcase you
- 00:34:04 will find this page which is
- 00:34:05 continuously updated where you see some
- 00:34:07 of the apps built with ionic which you
- 00:34:10 can find in the app stores
- 00:34:11 how about react native well that's a bit
- 00:34:14 hard to categorize I'd say it's pretty
- 00:34:17 good because if you check out the
- 00:34:19 official react native showcase you see
- 00:34:21 quite a lot of apps which you know are
- 00:34:23 built with react native it's just
- 00:34:25 important to note that not all these
- 00:34:28 apps are built with react native only
- 00:34:31 instead you can indeed use react natives
- 00:34:34 in
- 00:34:34 parts of your apps where the other parts
- 00:34:37 are built with Android and Java and iOS
- 00:34:41 Swift Objective C so not all the apps
- 00:34:45 listed here are built entirely with
- 00:34:47 react native it's hard to tell which
- 00:34:48 apps are built entirely with react
- 00:34:50 native and which aren't for example
- 00:34:52 Facebook and Instagram to my knowledge
- 00:34:55 are using react native in parts of their
- 00:34:57 app and not the entire app is driven by
- 00:34:59 it Facebook ad manager on the other hand
- 00:35:02 to my knowledge is powered entirely by
- 00:35:04 react native so react native is getting
- 00:35:08 used in some major apps but not
- 00:35:09 necessarily the entire app is powered by
- 00:35:11 react native it is also worth noting
- 00:35:14 that Airbnb quit using react native in
- 00:35:17 the last year but on the other end since
- 00:35:19 then react native has come a long way
- 00:35:21 and many of the issues Airbnb found in
- 00:35:23 there were being fixed or the react
- 00:35:26 native team is working on fixing them at
- 00:35:28 the moment now for native script it's
- 00:35:30 it's harder there we find less real
- 00:35:33 world apps simply because it's not that
- 00:35:35 popular if we have a look at the native
- 00:35:37 script showcase we see a couple of big
- 00:35:39 names there but a lot of these apps are
- 00:35:41 kind of internal apps so used in serve
- 00:35:43 the company or Nisha apps so
- 00:35:45 unfortunately there aren't that many big
- 00:35:47 applications using native script now for
- 00:35:50 a flatter that's a bit hard to tell
- 00:35:53 because flatter is still relatively new
- 00:35:56 but especially last year it has grown a
- 00:36:00 lot if we have a look at the flatterer
- 00:36:03 showcase we find quite some big apps
- 00:36:05 here which to my knowledge are indeed
- 00:36:07 built entirely with flutter where we see
- 00:36:11 that big companies like Alibaba or
- 00:36:13 Google are using flutter
- 00:36:15 well of course Google is developing
- 00:36:16 flutter but there they're using flutter
- 00:36:18 – for their Google ads application and
- 00:36:21 so on so still not the super big app
- 00:36:24 names in there but I'm pretty sure we'll
- 00:36:26 soon see more and more apps there and we
- 00:36:29 already have quite some nice apps in
- 00:36:31 here hence my positioning here on the
- 00:36:34 chart well and with that that's it now
- 00:36:37 as I said at the beginning this is
- 00:36:40 totally subjective and all these
- 00:36:42 technologies are also under highly
- 00:36:44 active development especially over the
- 00:36:46 last year all
- 00:36:48 lot has changed there not so much in my
- 00:36:50 charts but in the technologies and box
- 00:36:53 that were fixed and the ease-of-use I
- 00:36:56 think all these options are worth
- 00:36:58 checking out at least it's worth having
- 00:37:00 a brief look at them now of course if
- 00:37:03 you're not a react developer doesn't
- 00:37:04 make sense to you use react native if
- 00:37:06 you never work with angular or review
- 00:37:09 native script might not be your option
- 00:37:11 ionic is nice because you can build full
- 00:37:14 web apps with it even if you don't want
- 00:37:16 the native app and you still get
- 00:37:17 nice-looking web apps which you then can
- 00:37:19 easily transform into a native app so
- 00:37:21 it's nice to have that as a bonus and
- 00:37:23 flutter is pretty amazing because it's
- 00:37:26 growing so strong because it's so
- 00:37:28 popular and because Google really seems
- 00:37:31 to be going kind of all in on flutter so
- 00:37:34 that's also exciting to watch but
- 00:37:36 ultimately yes so often it's up to you
- 00:37:39 to have a look at all these options and
- 00:37:41 with have a look I don't mean learn them
- 00:37:44 entirely but dive into some dummy apps
- 00:37:47 dive into some examples get a feeling
- 00:37:49 for how it works build some very basic
- 00:37:51 apps with the help of some basic
- 00:37:53 tutorials and then maybe pick your
- 00:37:55 favorite there it's really great that
- 00:37:57 you're able to build native apps for
- 00:38:00 both platforms with one code base and
- 00:38:02 therefore I'd say it's definitely worth
- 00:38:03 learning at least one of these options
- 00:38:05 if mobile app development is a thing for
- 00:38:07 you because you can save a lot of time
- 00:38:10 there so I hope this was helpful and I
- 00:38:12 hope I also see you in future videos