I'm creating a new mobile app in RN which will require a login page. I can build all of this from scratch of course but I wanted to find out, based on the latest technology and trends, the most common tools, technologies and aproaches that RN devs are currently using for this. Essentially, if you were to create a brand new mobile app in RN today, what approaches and components would you use? My preference is to implement the login module for free, except for my labor, unless there's a high quality aternative for a few dollars per month, which saves a significant amount of implementation/troubleshooting/overhead/etc that a lot of RN devs are currently leveraging.
Your question is quite open ended but here you go.
UI Components
You need your new app to look good and user friendly, these two are what i would almost always choose between they provide all the components you need to have an elegant app and are light-weight dependencies:
react-native-paper
react-native-elements
State Management
Almost always you will need to share certain values, arrays, objects, etc. between components, to achieve this i usually decide between:
React Context - if i am building a simple small scale application.
React Redux - if the application needs to be highly scalable and need enable certain features Redux can help with (i.e. offline application usage, etc.)
Note: i would highly recommend you using Redux for state management, true the boilerplate is a pain but it will help you greatly on the long run.
Miscellaneous
Expo - Pretty much most of my applications use expo platform, i would say your application development timeline is cut by 1/3 using it, however the greatest downside would be the inability to integrate native modules with it like how you use link in a normal react native application.
Axios - For any HTTP related requests
React Navigation - For handling my application routing and navigation
Bonus
If you are actually just starting a new application, i have just finished setting up a quick boilerplate that pretty much uses all the technologies i mentioned above. as well as pre-setup authentication flow, theming (Light and Dark theme) and some extra stuff!
Check it out on GitHub :)
Hope this Helps!
Related
i am react native developer , and my question is more generic than code
i am getting really frustrated with react native and the amount of bugs it has
and the extremely low performance on android devices specially the old ones
almost all of the important api are third party developed on github and they not maintained anymore with alot of bugs.
some codes doesn't work sometimes,
what i noticed with highly used(10k+ users) application in react native
on some android devices fetch request is repeated 4 times.
on some android devices async-storage is working probably .
on await and async are getting ignored
React.usestate is buggy and it is ignored sometimes
does flutter offer a better environment with less bugs
Speaking from personal experience, flutter is better than react native for several reasons, but I'll list the few best ones here:-
More interactice community :- Flutter has way more answered question in the past 2 years on stackoverflow than react
Better docs - The flutter docs cover everything, I mean everything\
Nativeness - Flutter does a great job at making the app look as native to the platform as possible
Wide range of packages - Like it says, there is a package for everything, You can also use platform views just in case there is something on the native side you want to add so there are no limits
The editors - OMg I cannot say how much easier it is with good descriptions of all the commands within the code. I mean you can hover on a function and if made by the flutter team or a proper package team, you'll see the full implementation
Rid of any form of html or css - The designing, is much much much much much * infinity easier because everything makes just more sense from a programmer's poin t of view
Great debugging - With flutter, you can debug on different scales, even on the release scale just in case there is a problem with release mode instead of debug mode and ofcourse the community is always there to help
Regular awesome updates - While react is slowly dying down on new features, flutter is booming. With the recent update to flutter 2.0 introducing null safety, the chance of bugs have gone down even more
So yes, I recommend you try to shift to flutter. There is even a full tutorial in the flutter docs for react-native decs to learn flutter.
With the release of tfjs-react-native and the ample support for the platform, is React Native stable and reliable enough for a startup to go all-in on to build cross-platform Machine Learning apps?
Note: We are building a Health-Tech app that uses dietary and physiological data to recommend exercise plans and meal options for optimal health. The most resource-intensive task the app would likely perform is to use open-pose like models to improve exercise posture.
From AirBnB's blog, they moved away from React Native because they had to maintain 3 different codebases as they had started with native development. We are just about starting and have experience with React but are open to considering others like Flutter.
I think you're asking two different questions, you can use tensorflow-js in any js framework. If you want my opinion: go with React, there's simply more documentation on using tensorflow with React, and you already have experience with it. Just don't start developing three different codebases, that's not a matter of React/TF vs Flutter/TF, it's a matter of organisation.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 1 year ago.
Improve this question
Hi I want to check out a new framework to develop an app. Now I'm wondering about which one to choose, for example React Native or Flutter. Can you give me some suggestions or experiences about what to choose and maybe their advantages or disadvantages?
Thanks!
Summary:
React uses JS, Flutter uses Dart
The learning curve for Flutter is pretty steep since if you don't already know Dart, you're going to have to learn that too as well as a new framework (and reactive programming).
For React Native, it's pretty easy to pick up if you have used React or just JS in general which I'm sure you have.
Architecture
Flutter tends to rely on the BLoC pattern which is endorsed by Google Developers.
React Native relies on Flux and Redux.
Ecosystem
Flutter came out in May 2017 so it has less of an ecosystem than React Native which came out two full years prior.
Compilation
Flutter compiles to device-native code which you can change when you create a Flutter project. All of this is done on one thread! For intensive works, you might want to use a Dart Isolate which spins up a new spot on the memory to do intensive works while Flutter works on the UI and other stuff. Dart is designed for asynchronous workloads. Dart has Streams and Futures (basically Promises in JS). You can use a package that essentially brings in Redux to Dart to allow for Observables (better Promises).
React Native does not compile to native-device code and instead compiles to device equivalent. The JS runs on a separate thread and communicates to UI components through bridges. For asynchronous workloads, you can use Promises like in JS.
Documentation
As far as documentation goes, React Native wins at being more user-friendly than Flutter. Although, Flutter does have what they call cookbooks with easy to follow along with code samples. Overall, this is up to you.
Cross Platform
Flutter allows you to make apps for way more devices than React Native can. React Native is only for Android & iOS (though you can make web apps with react-native-web, thanks #VilleKoo) while Flutter hopes to support desktop, and web apps as well as the aforementioned iOS & Android all from a single codebase which is pretty impressive. Keep in mind, web support is in beta and desktop apps are not stable at this moment in time.
Further reading:
https://nevercode.io/blog/flutter-vs-react-native-a-developers-perspective/
https://hackr.io/blog/react-native-vs-flutter
https://hackernoon.com/react-native-vs-flutter-which-is-preferred-for-you-bba108f808
I see that the technical side of the question is covered pretty well by the others, but it's worth having a look at this issue from the standpoint of the technology's popularity, community support, and how it will keep up in the long run. Here is what I've found:
The category of most loved technologies due to the StackOverflow statistics shows how many specialists began using a particular tool and would like to continue working with it. By this criterion, Flutter’s score is 68.17%, while React Native has 58.08% of voices. Github says that the number of open source projects is growing day by day. The statistics present the number of contributors to open-source projects. React Native has 9.1k contributors, while this number for Flutter reaches 13k. Google Trends is a metric that shows how often a particular query is entered into the search in relation to the overall search volume for a specific period. It means that it estimates a query as a percentage of all search queries in Google. We can see that Flutter’s popularity amounted to nearly twice the React Native. The average number of “Flutter” queries score is 86, while React Native takes 58. With Google Trends, we can also analyze how popular other hybrid frameworks are compared to the described two. The statistics have shown us that Flutter is the best hybrid app framework in 2020, and React Native is in second place. Interestingly, if we take the 5 years’ overview instead of 12 months, we can see the whole picture. The trend for Flutter has rapidly grown in the last 3 years’ time. The popularity of React Native and Cordova was stable, and Xamarin’s number of queries is steadily decreasing.
So as you see Flutter gains popularity very quickly, and I am rather surprised how quick it is. It looks like Flutter might be more future-proof because of the wider community, more new modules, and features, which result in better support, more updates, etc.
Here is some additional reading for you on that matter:
StackOverflow statistics 2021
Flutter vs React Native: Which is better?
Statistics about other frameworks' popularity
What is the difference between React-native and Flutter technically?
Both technologies seem to do relatively the same thing, and Flutter even admits that it takes inspiration from React: faq
This is even more obvious when they list the same features and have almost the same syntax (StatefulWidget vs Component class).
Similarly to AngularDart being a Dart implementation of Angular; is it right to assume that Flutter is a Dart implementation of React?
Architecturally, React Native (RN) and Flutter are very similar.
What Flutter calls a "Widget" is the strict equivalent to React's "Component". That's what Flutter means when it says its inspired from React.
The difference between them lies in the other aspects of the frameworks:
Interpreted Javascript VS Compiled Dart
Flutter uses Dart, a typed language that offers both "Just in time" (JIT) and "Ahead of time" (AOT) compilation (with tree-shaking included)
In development, Flutter uses JIT compilation to empower hot-reload. And for production builds, it uses AOT compilation for better performances.
React-Native uses Javascript enhanced by some syntax sugar called JSX.
JSX being a different language, it compiles to JS, then evaluated at runtime.
Bridge to native VS Complete rewrite
React native is built on the top of native.
When using a button or a text in React Native, you are manipulating the official object used for native Android/iOS apps.
We can consider React as a common language between Android/iOS to declare layouts – but fundamentally the applications are different with potential inconsistencies.
It's is not true cross-platform. But at the same time, it allows better interoperability with native elements.
Flutter is the opposite. The goal of Flutter is to use as few native elements as possible.
Flutter requests to the OS a window, and then entirely manage its content using Dart and Skia (it's c++ graphics engine).
It has a few implications:
All the UI logic had to be reimplemented by Flutter. Be it scroll, touch events, animations, ...
The application is written entirely in Dart, even deep into the lower layers. It means that whatever the platform is, it's always the same code that is executed.
Potentially anything that can run Dart code and create a window can run Flutter and apps should work with little to no change. As such, web is in progress ( Hummingbird) and basic support of desktops is available.
To some extent, we can compare Flutter to a webview/game engine, but optimized for casual applications.
Remi already has a couple good points. I have one more.
Interpreted with bridges - vs. native and no bridges
Despite what the name might imply, React Native apps are not compiled to native code. React Native apps interpret Javascript code during runtime, and component updates in a React Native app go through a bridge to the native view counterpart. This might slow things down a little bit and be a bottleneck.
On the contrary, Flutter apps (on release mode) are compiled to native code and don't require a bridge for manipulating the UI. This in turn, at least in theory, will be more performant - there's no need to do roundtrips to the native land to make simple UI changes. Not to mention that release Flutter code is natively compiled and there are no interpreters involved.
Dance monkey, dance
Now that we know that release mode Flutter apps don't have an interpreter or the need for bridges for UI manipulations, let's see what those two things actually are in the first place.
We'll do this with a highly hypothetical example app. Our React Native app has a button that makes a monkey dance on the screen. In React Native, our button and the dancing monkey components are written in Javascript and React.
Interpreters
Since Javascript is not a first class language on Android or iOS, your React Native app includes a Javascript interpreter that interprets your Javascript code in runtime. Without the interpreter, you wouldn't be able to write apps with Javascript at all - even a simple console.log('Hello World!') wouldn't work.
According to the React Native docs, in "most cases", the Javascript code will be interpreted with JavascriptCore.
Bridges
Under the hood, React Native uses the native Android Views and iOS UIViews for displaying UI components (such as dancing monkeys) on the screen. But since the UI parts of the Android and iOS SDKs don't use Javascript, you can't make the monkey dance by using Javascript alone.
This is where a bridge comes into play. On the other side of the bridge are your React Native components and logic, written in Javascript. On the opposite side, we have the host Android/iOS app that renders native views into the screen.
From now on, let's call the two sides of the bridge as the Javascript land and the native land.
So, what happens when the user clicks on our "dance, monkey, dance!" button?
The native Android/iOS view dispatches an onclick event, which goes over the bridge to the Javascript land.
Our onclick listener written in Javascript gets invoked. It is a simple call that toggles a boolean inside the component. Something along the lines of setState(() {isMonkeyDancing = true}) or similar.
React sees that something has changed. It comes up with an updated representation of UI elements that has a dancing monkey. The representation is just a tree of plain Javascript objects that describes the updated state of the UI.
The Javascript object tree gets serialized and sent over the bridge to the native land.
The host app receives the serialized object tree and deserializes it. Now it can update the native Android/iOS view to match the deserialized UI representation. Our monkey is now dancing and our user is eternally happy.
So in this example, one button click required going over the bridge two times.
Actually, it's three - just simply rendering a button initially is a call across the bridge itself.
In an app that is more than just one button and a dancing monkey, you're likely to go over the bridge a lot more. And every time you do, it requires serializing data and sending it over from one side to the another.
This is slower than just coming up with the UI representation and updating the UI with that directly. Additionally, there's a cost of interpreting Javascript in runtime compared to having the code compiled ahead of time.
The bottom line
Since Flutter is essentially a portable rendering engine, Flutter doesn't need a bridge to do an UI update. And because of that, UI updates, at least in theory, are faster. That's one reason why building apps with complex animations or things like Flare, SpriteWidget, or even games would be more lucrative with Flutter compared to React Native.
And because Flutter on release mode is AOT compiled, Flutter doesn't need an interpreter either. That's the difference between Flutter and React Native.
Flutter vs React Native: A Developer’s Perspective
React Native by Facebook and Flutter by Google – two hot cross-platform app development technologies creating a buzz. In this post, we will compare both of them in detail from a developer’s perspective.
What’s Flutter and React Native?
React Native is a project started by Facebook internally that they open-sourced in 2015. On the other side is Flutter, a project started by Google which they have been heavily promoting since I/O 2017. Both of these technologies help app developers build cross-platform apps faster by using a single programming language. React Native is already a mature tool and has a huge community, but Flutter also started seeing huge adoption rates since 2017. In this post, we will compare each of them using ten criteria:
Programming language
Technical architecture
Installation
Setup and project configuration
UI components and development API
Developer productivity
Community support
Testing support
Build & release automation support
DevOps and CI/CD support
Programming Language
The key benefit of using a cross-platform mobile app development technology is the ability to use a single programming language to develop apps for both iOS and Android.
React Native — JavaScript
Flutter — Dart
Installation
The installation method should be straightforward without having too many complicated steps so that it could be easily learned by developers that are just starting with it.
React Native - NPM
Flutter - Binary Download from Source
UI Components and Development API
React Native - Less Components
Flutter - Rich in Components
Conclusion
React Native and Flutter both have their pros and cons. Some of the industry experts have predicted that Flutter is the future of mobile app development. Considering the comparison above, it’s clear that Flutter has entered the cross-platform mobile development race very strongly. Let’s not predict the future but wait and watch!
If you learn both technology in deep. So, you will find big differences:
Programming language- Java Script and Dart
Technical architecture- Flex and Skia.
UI components and development API: Widget in flutter but views in React native.
Developer productivity: Debugging is very easy in Flutter.
Community: Big Community support in React Native.
Documentation & Toolkit: Flutter team have created simple duc for all widgets.
Testing support: Flutter providing testing libs.
DevOps and CI/CD: Flutter Providing CI/CD supports.
There are more difference between React Native and Flutter that you can read her.
I'm working on a new project for a Fintech company and I have been tasked with looking into whether we should go with React Native or native Swift/Objective-C/Java for our mobile app development technology and strategy going forward.
I have done loads of research into this and have read many of the case studies relating to React Native, but I still don't feel I have enough to make an informed decision at this point.
The broad app functionality will include things like:
Data related functions such as Account Balances and Statements (pretty simple)
Image capture of identity documents and selfies of the users
Capture of biometric data
Push notifications
Some of this is pretty standard and simple, but some of it will require the app to use low level device functions and/or use 3rd party Android and iOS SDKs.
So, in terms of working towards the decision of a mobile development strategy, can I ask you for your input, based on your recent experience, on reasons to consider React Native over native Swift/Objective-C/Java development in the light of the planned functionality listed above (including reasons why it may be far better to stick with the native languages/platforms).
From own experience I can tell that React Native is a good choice for most of the apps when you need to develop and iterate fast. It usually means it would be cheaper to develop for a customer.
Looking at the list of features I can not see anything that can not be done in RN. Sooner or later you'll have to dive into native code, usually to bridge native modules with JS. I've done this multiple times, it's not that hard and documentation on RN website helps a lot.
Be aware that you'll most certainly run into stupid bugs and you'll have to find workaround. At least this happened to me multiple times when I was building RN app half a year ago, maybe now it's more stable.
Also I believe it really depends on what are the devices of potential app users. I've never developed for Android, but heard from fellow developers, that on mid-level Android devices RN runs much slower, this should be tested from the very beginning.
React Native has a really nice and tempting idea behind sounds like "unified and almost fully shareable codebase for different platforms including Web". But from my experience (not so extensive but still) the reality is a little bit different – at some point you will face some issues with native code for sure, and it would be really good if you have experienced Swift/Objective-C/Java developers in your team to deal with it. Don't trust the promises "all you need is just a React Front-End Developer". The React Native platform itself seemed to me more like a magical blackbox which I ran with a single command having no any idea what's inside and how it actually works. You have to know at least something about Xcode and Android Emulator even if Facebook is trying to hide this aspect it from you as much as they can.
TL;DR In my opinion if you really want to try React Native for something more complex than TodoMVC then you need to have at least 3 developers: Web (JavaScript/React), iOS (Swift/Objective-C) and Android (Java). Or just one Superhero.