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

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

Channel: Academind

Views: 166,549

Rating: 4.9659395 out of 5

Keywords: flutter, react native, ionic, nativescript, react native vs flutter, flutter vs react native, flutter vs ionic, ionic vs flutter, react native vs ionic, ionic vs react native, which one

Id: PKRXbLnfXXk

Length: 38min 18sec (2298 seconds)

Published: Wed Aug 14 2019