flutter vs react native, which one is good for you

React Native by Facebook and Flutter by Google are too hot cross-platform app development technologies creating a buzz in today's technology industry. Today in this video we will be comparing flutter with react native and I'll be helping you choose when you should choose one over the other. Okay, so let's get started. Now before I get started let me just give you guys a brief overview of the topics that will be touched upon by me today so first of all, I will be going through what is flutter and then I will be giving a similar brief introduction to react-native to so that we have a general idea of what we are talking about if you guys have no idea as to what flutter and react native is and would like to know more you could go ahead and check out my flutter tutorial which you can easily find out on Edureka channel. ok we don't have such tutorial for react native at the moment but we are working on that and that will be out soon too so for nowI'll be giving you guys a short introduction to both technologies andthen moving on we will be comparing the two technologies on various parametersnow these parameters include stuff like performance speed which already comesinto performance and the visualizations the types of confidence that you get thedeveloper creativity that it might imbue and a lot more so there are 10 pointsthat we will be comparing flutter and react native today and in the real-worldscenario you can find more than these 10 points but in my opinion these 10 pointsare the pillars when it comes to choosing a certain framework so theseinclude stuff like the quality of documentation now if some framework isnot properly documented it becomes really hard to adapt to that frameworkok so let's move on and start off with this session today before I keepblabbering on and on ok so our first topic of the day is whatis flutter Flutter is a cross-platform mobileapplication development framework that is provided to us by google so before wego ahead let me just explain what that meansso due to the growing popularity of mobile applications almost every companyneeds mobile apps or apps to remain competitive in the market and what ismore companies are looking for an option to build mobile applications especiallyfor ios and android with faster speed and less resources obviously Apple andGoogle have provided native tools and technologies to build applications iOSapp developers can build apps using Xcode and Swift while an Androiddevelopers use Android studio Kotlin Java and more of such things howeverthis requires engineer to learn two completely different sets oftechnologies as a result companies have started to adopt cross-platformsolutions over the needs of solution to build apps for both iOS and Androidwhich basically implements faster using a single language so flutter is aproject started by Google and it was started in 2017 it is a programmingframework built on the language of dart and it allows you to make cross-platformapps that behave natively for a mobile application if you want to know moreabout flutter please go check out my flutter tutorial where you will alsolearn how to make your first app using flutter itself moving on to react nativewell react native is something very similar to flutter it is a mobileapplication development framework that is developed by Facebook the people whobuilt react Jas and redux so this is their mobile application front so reactnative is what Facebook uses for its Facebook applications is messengers andeverything else now this works on both iOS and Android and main language thatthis whole framework is built around is JavaScript now before we go ahead andstart digging out each and every nitty-gritty of these both frameworksfirst of all let's go ahead and compare them so today we will be comparing onstuff like programming language technical architecture installationsetup and project configuration UI confidence and development API developerproductivity community support testing support build and release automationsupport and the DevOps CI CD support hearing all this you must have realizedthat this is a very developer specific video this is a developer's perspectiveon both these frameworks and this is not a layman's perspective where he tries tounderstand which installation is tougher or which framework is bigger like thatthis is a completely developers perspective as to what would help you ifyou are a developer whether you're using flutter or EF native now the first partthat we are going to be comparing is programming language so the key benefitof using a cross-platform mobile application development technology isthe ability to use a single programming language to develop apps for both iOSand Android so flutter uses the dart programming language which wasintroduced by Google in 2011 and is rarely used by developers Dart syntax iseasy to understand for JavaScript on Java developers as it supports most ofthe object-oriented concepts it's easy to get started with dart as there is agreat and easy to follow documentation available on the official dart sitereact native on the other hand uses Java Script to build cross-platformapplications javascript is very popular language in the web community at themoment it is commonly used with react and other popular JavaScript frameworksthanks to react native web developers can build mobile applications with alittle bit of training with this in mind companies adopted react native as ano-brainer javascript is a dynamically typedlanguage and anything can be done with JavaScript which is good and a bad thingat the same time so what do we analyze from this comparison javascript iswidely used by most web developers and hence it is easy to adopt the reactnative framework dart also has a great feature set but it's rarely used andless known in the developer community considering this it's clear that reactneither wins point in the programming language category our next point ofcomparison is installation so the installation methodbe straightforward without having too many complicated steps so that it couldbe easily learned by developers that are just starting out with itflutter can be installed by downloading the binary for a specific platform fromthe github page which is very easy in my opinon case of Mac OS you candownload the flutter dot zip file that is also there in the github page and youalso have to set up a separate path variable now you can do this easily bythe command line instructions that you can find on the official documentationso flutter should improve the installation method by supportingpackage managers like homebrew Mac board C um apt etcetera so that users won'tneed to perform these extra steps during installation react native framework canbe installed using the node package manager or NPM for short for developersthat have a Java Script background installation of react native is easywhereas other developers would need to learn the new package manager the nodepackage manager can install the packages locally or globally the developer willneed to understand where exactly the binary is located whilst installingreact native on Mac OS you will need to have the homebrew package manager aswell in short you can do it from the command line okay so what do we analyzefrom this comparison well both flutter and react need a black one-linerinstallation with native package managers for specific OS but flutterinstallation seems to require extra steps for adding the binary to the pathand downloading it from the source code which might be useful for non JavaScriptdevelopers react native can be installed by just using package manager withouthassle of downloading the binary from the source so in my opinion react nativewinds out here again when compared to the installation point now the nextparameter that we are going to be actually comparing react and flutter onis documentation so the process of setting up the developer machine to usethe new framework takes time it requires a lot of configuration of softwareinstallation and the technology should have proper documentation to get usersup and running getting started guide for flutterhas detailed information on IDE setup and platform setup for both iOS andAndroid you can read up all the required stepson the installation link on top of this flutter also has a command lineinterface tool called flutter doctor which can guide developers through thesetup it inspects which tools are installed on the local machine and whichtools need to be configured once the flutter doctor command is happywe can carry on with creating a new flutter app there is a separate page onhow to configure the editor to get going with flutter and you can also find thisin the documentation once all is set up and done we can create and run a newflutter app from the command line by just running a few simple instructionson the other hand the getting started guide of react native assumes that thedeveloper already has all the required setup for developing for iOS and Androidthere is little information on the Xcode command-line tools but it won't beenough to get going the documentation directly jumps to the step of creating anew project a new reactive project can also be created and run on an iOSsimulator using some few simple commands now at the step you must be thinkingwhat might be the result well from the comparison above it's clear that flutteroffers a better documentation and command-line support for setup andconfiguration so flutter takes the point out here now the next point forconfiguration is architecture now when choosing a cross-platform mobile appdevelopment framework it's essential to consider its technical architecture byknowing the internals of the framework we can make an informed decision andchoose the one that is better for our projectflutter uses the dart framework which has most of the components inbuilt soit's bigger in size and often does not require to bridge to communicate withthe needs of modules dart has so many frameworks like material design andCupertino packed inside which provide all the required technologies needed todevelop mobile applications dart framework uses key R C++ engine whichhas all the protocols compositions and channels the architecture of flutterengine is explained in detail on github in short flutter has everything neededfor app development in the flutter engine itself on the other hand reactnative architecture heavily relies on the JavaScript runtime environmentarchitecture also known as the JavaScriptnow the JavaScript code is compiled into native code at runtime react native usesthe flux architecture from Facebook and there is a detailed article on the corearchitecture of react native here now in short react native uses JavaScriptbridges to communicate with react native moduleswell the flutter engine has the most of the native confidence in the frameworkitself and it always doesn't need a bridge to communicate with the need ofconfidence react native however uses the JavaScript bridge to communicate withnative modules which results in poorer performance so from a developer'sperspective out here flutter wins again our next point of comparison is featuresand API so when developing cross-platform mobile applicationsupport for the native component is key without the support of native componentsour application moon feed like a native app and it's very important that theframework has an API to access the needs of modules without any pin so flutterframework is bundled with UI rendering components device API access navigationtesting stateful management and loads of libraries the rich set of componentsremove the need to use third-party libraries if you get the flutterframework it means you will be having everything needed for developing amobile application flutter also has widgets for material design andCupertino that allows developers to easily renderthe UI on both iOS and Android platforms on the other hand the core react nativeframework provides just the UI rendering and device access API is in order toaccess most of the native modules the ask native has to rely on third-partylibraries react native is too much dependent on third-party libraries andthe full list of development components and official ApS can be found on thedocumentation so from the analysis we reach to the conclusion that flutter isrich in development API and UI components while react native is toomuch dependent on third-party libraries so as a developer I would give my pointto flutter onion now the next point that we are going to be discussing isdeveloper productivity so developer productivity is key tobuilding faster apps and in this regard it's very important to be able to focuson application development without any kind of weight or distraction so on theside of flutter there is a hot reload feature and it's very easy to getstarted with the demo application however as the complexity of theapplication grows developers would need to learn a lot and adopt the new flutterconcepts in addition dart is not a common language and there is a lack ofsupport for it in many IDE s and text editors on the other hand for reactnative if the developer is skilled at JavaScript therein it's fairly easy touse those skills for a cross-platform application development react native hasa hot reload feature which saves a lot of developer time while testing thechanges in the UI in terms of IDE support developers are free to use anytext editor or IDE of their choice from the comparison we analyze and see thatbeing a mature framework react native has a great developer support in termsof IDE and language features flutter is fairly new at this point but we'll catchup very soon and the community around flutter is constantly growing nowtalking about community our next point of comparison is community support so assoon as developers start to show interest in the technology and adopt itin their development process they form a community to share knowledge a strongcommunity helps developers to learn from each other and solve the problems theyare facing so flutter has been around for a while but it gained a lot ofattention when Google promoted it in Google i/o conference in 2017 theflutter community is growing rapidly these days meetups and confidence aretaking place online and the biggest event coming will be the flutter live inDecember in short the flutter community is growing rapidly and yet there arestill not enough resources for developers to solve common issues whileon the react native side it was launched in 2015 and hence has gained a lot ofpopularity ever since there is a community of react native developers ongithub and it's a lots of meetups and conferences around the world one of themost recent conferences on react native was react native EU held in Poland butthere are meetups taking place in all most every major city in the world sothe react native community and resources have grown in size since the frameworkwas launched flutter is still fairly new all the community support is rapidlygrowing so my point again in this round goes to react native now our point ofcomparison is going to be something more technical and that is testing so writingtests is a great way to get quick feedback on the code that you havewritten there is always a testing framework associated with every maturetechnology to allow developers to create unit integration and UI tests for theapplications flutter provides a rich set of testing features to test applicationsat unit budgets and integration levels flutter has great documentation ontesting flutter apps and you can read about that in the official documentationalso flutter has a cool widget testing feature where we can create widget teststo test the UI and run them at the speed of unit tests on the other hand reactnative is a JavaScript framework and there are a few unit level testingframeworks available in JavaScript the tools like jest can be used for snapshottesting however when it comes to integration or UI level testing there isno official support from react native there are third-party tools like appiumand detox that can be used for testing and you can learn about them in myappium tutorial video so from this we analyzed that the react Native communityhas no official support for integration and UI level testing while flutter hasgreat documentation and a rich set of features for testing and other suchapplications so my point as a developer goes to flutter in this round now oursecond last point of comparison is automation support so releasing mobileapplications to the App Store or Play Store as a painful process it involvesthe complex task of code signing and all other application setup when it comes tocross-platform mobile app development it gets even trickier so it's alwaysnice to have some automation support there now let's talk about react firstthis time so the react native documentation doesn't have any automatedsteps to deploy iOS apps to App Store however it provides a manual process fordeploying the application from Xcode there is an article on how todeploy react and you can find that in the official documentationhowever you can do that using third-party tools like fastly in todeploy iOS and Android applications written in react native the process ofusing fastly into ship react native apps is kind of tricky but it is a thing thatyou can do for yourself this means that react native has to relyon third-party libraries for build and release automation flutter on the otherhand has a strong command-line interface we can create a binary of the app byusing the command-line tools and following the instructions in theflutter documentation for building and releasing Android apps and iOS apps ontop of this flutter has officially documented the deployment of processwith flash lean in their official documentation too so let's analyze nowflutter has a great build automation tooling and can be used to deploy appsfrom the command line we have native apps like support for a command lineinterface tools that are officially supported for build automation soflutter has got five points at this moment which means a react native hasjust scored the last point in order to tie the competition the last point ofcomparison is the CI CD support or as you might know it the continuousintegration and continuous development support so DevOps has become quite thebig thing today so continuous integration in containers deliverypractices are essential for any application in order to get continuousfeedback and avoid releasing buggy code so react native doesn't have anyofficial documentation on setting up CI CD however there are some articles whichdescribe the CI CD for react native applications you can find such articleson the web pretty commonly on the other hand flutter has a section on continuousintegration and testing which includes a link to external sources howeverflutters rich command-line interface allows us to set up CI CD very easilyand you can read about them on blog post found on the web so flutter apps areeasy and painless to set up on continuous integration and continuousdevelopment services by using its strong CLI tools react native doesn't provideany official instructions for CI CD practices so my point goes to flutteragain in this part so flutter wins six points and react native has four pointsso in conclusion we can say react native and flutter both have their pros andcons but flutter came out as a winner in this match some of the industry expertshave predicted that flutter is the future of the mobile applicationdevelopment considering the comparison we just did it's clear that flutter hasentered the cross-platform mobile development race in a very strong mannerlet's not predict the future but wait and watch.