Flutter vs React Native : which one is worth it, and why?

hey friends today we're going to take a look at the differences the relative strengths and weaknesses of flutter and react native our goal is to together gain a better understanding of these two solutions which is the right fit for you as react native has a lot in common with react.js we'll go into greater depth into flutter's specificities and into dart the programming language used in flutter now what's the problem that flutter and react native are both trying to provide an answer to well have you ever thought that you'd like to develop your own app app stores on ios and android are big money makers for some developers and if you have a great idea you might be wondering what the best way is to bring that idea to life you might decide to build it on the web but mobile performances aren't always great you might try to use native sdks provide provided by apple and google but that means coding twice in two different languages for each platform there's a third solution which to me in my situation is in fact the only valid way of doing things unless you have the luxury of hiring a large team but if you have that kind of money you maybe shouldn't be looking for advice on youtube that solution is to use development kits or sdks which offer a common layer of abstraction a common foundation that allows the same code to run on both ios and android and i've got good news for you if you're already developing for the web developing apps won't be too hard thanks to flutter created by google and react native created by facebook and what strikes me is how much this comparison reminds me of the one already made between angular and react i've already talked about these two previously but in other ways this opposition is radically different from the one between react js and angular what do i mean by that well first of all flutter and react native share some of the common ground that angular and react share first like angular and rec js flutter and react native are both declarative and reactive what does this mean each of these four solutions uses the state to generate an output interface this is what we call being reactive and when writing this input we only care about the point of arrival we don't specify how to change the starting point we just specify the endpoint and this is what we call declarative code as a smaller side if you use a query that's imperative and not declarative in jquery we change the existing interface we say fetch this element from the page and do this or that to them to produce the new interface these things that contain the rendering functions are usually called components in all four solutions you build build the interface using these components although in flutter they call widgets and in fact in flutter everything is a widget now we've seen what all these four solutions share they're also parallel in the opposition between react native and flutter and between react.js and angular for example react.js is focused and offers a limited range of features and angular offers a wide range of services and features that are included in the price well in the framework in the same way flutter offers a lot more features and react native focuses on a simple call that follows the unix philosophy of doing one thing and doing it well so for example translation is handled in the engine in flutter and in angular and it requires external code in react.js and racknative another example react native offers about 20 components in all which covers blocks text images lists scrolling flutter on the hand has 21 different components just for animations or three different widgets to manage aspects of accessibility and this rich library of specific components brings us to new topic what new ground is there in this opposition between flutter and react native the first specific difference is the programming language unlike angular react.js and rack native flutter uses dart it's a programming language invented by google to my knowledge there's no other popular use case than flutter so what is dart and what's the point why was it created now dart shares much of its syntax with javascript if you speak javascript you can read at least 90 of dart the variable decorations the for loops the if and the wire all this can be almost copy pasted between javascript and dart like typescript dart has a strong typing that allows compiling to javascript so what's the point of the 10 difference between javascript and dart well the typescript developers choose to make it a superset of javascript in other words javascript code is valid typescript code this means that the improvements that typescript provides are optional and typescript's point is to add a constraint to the code this variable is of that type this avoids stupid bugs or erroneous variable assignments dart takes the same idea and pushes it further and is able to do that because it has a different purpose a different goal it doesn't have to be a superset of javascript so it can fix some of the weaknesses of that language now what do i mean by that and more importantly what is the purpose of dart well dart aims to run code on mobile devices in the cleanest and the most optimal way possible now this leads to some unexpected behaviors the remaining 10 of differences with javascript that i mentioned above for example i struggled for a few hours with a const declaration why because it doesn't have the same meaning as in javascript in dart a const has to be intrinsically constant it must have the same value each time the program is launched in react we declare const for the return of use take hook in javascript we can say const date equals new date time now in dart this declaration is invalid the value of date is not intrinsically constant and that makes sense it's just unexpected when you're used to coding in javascript and of course there are other differences between dart and javascript but they're beyond the scope of this video let me know if you feel like a more in-depth video on the subject but back to our comparison of flutter and react native what are the other differences a second fundamental difference is how the two solutions draw the interface flutter and react native choose radically different strategies react native outsources the display of the interface to native widgets this makes sure that the final result is in line with each oss design philosophy this rendering is as simple as it can be flusher on the other hand use a 2d rendering engine called skier this rendering engine is also used in chrome and firefox and android i'll let you calculate how many users are running the code of this library but loads and loads should just about cover it and it probably includes about 75 of you who are actually watching this right now this allows flutter to offer a level of graphical flexibility that is out of reach for react native and the third big difference is the consequences of these choices of dart and ski on one hand and the javascript and native interface elements on the other flutter compiles the dart code to an ios on android binary in react native things are slightly more complicated react native has a lightweight virtual machine that runs javascript now this virtual machine communicates with the native coded core of the application there used to be a javascript bridge which worked a bit like a network transport now things are a bit more optimized now and this architectural choice is not as bad in terms of efficiency loss as hybrid engines such as cordova or ionic in those the application bundles a browser that runs a javascript now in react native we have a fully native application and to be honest there was kind of a clue in the name but compared to flutter react native runs the risk of lower performance because the javascript virtual machine and the way it communicates with the native core but in most cases the differences will be imperceptible one last point that needs to be addressed in this comparison between react native and flutter when i talk about react versus angular one important point is the fact that react is more popular than angular is this is due to fact that anger is older react in this context is a newcomer that has learned from angular's mistakes or is just shinier and newer but for flutter this situation is the other way around in this stack overflow 2001 developer survey flutter was the second most popular solution far ahead of react native we came into ninth place and google trends tells a similar story the relative popularity of flutter and versus react native shows a reversal over time react native had overwhelming popularity in 2018 but today flutter is ahead what does all this mean for us today well some of the conclusions from the comparison between react and angular apply and some don't for example just like angular flutter is more complex to learn simply because there's so much more to learn there are more services provided directly by the solution and a lot of widgets and components flutter is also harder to learn because it relies on the dart language that doesn't have that many other uses rag native on the other hand reproduces the mechanisms of react.js the mental model is transposable react native is much easier to learn than flutter if you've had some experience with react.js this makes react native the easy solution but if flutter is more complex to learn it's also more powerful more versatile it can do more things angular was in my opinion the classic the path of wisdom and react was the exciting disruptive solution here things are slightly reversed react native is the easy solution coming from react.js it conforms the usability standards of both platforms and of the two flutter is the disruptive more powerful solution it enables you to try exciting and original things so here again your choice is going to depend on who you are and what you want to do and what means you have if you want something effortless but also with a slightly more limited range rack native might be the solution for you but if you're willing to invest time and effort if you're aiming for a pixel perfect design i'd recommend flutter and if you liked this video if you want to continue learning more about development and code my advice is to watch the next video

Channel: Kodaps Academy

Views: 69,183

Keywords: flutter vs react native, flutter vs react, react native vs flutter, react native, flutter react native comparison, flutter vs react native performance, app development, flutter vs react native app, react native vs flutter performance, react native and flutter, flutter vs react native 2022, flutter vs react native 2020, flutter vs react native 2021, react native vs flutter 2022

Id: 0zY-5z_8D4o

Length: 10min 19sec (619 seconds)

Published: Sat Jun 25 2022