Coding

Which one is best for you? Flutter, React Native, Ionic or NativeScript?

2 years ago
  • 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

You may also like