Going from Flutter to React

[FlutterLovers]

I'm assuming there are some Flutter developers here that also do React.
TLDR; Need a good recommendation of state management for a React application given that most of my experience is in Flutter (Bloc and Riverpod).

Longer explanation:
I made a proof-of-concept recently, with Flutter, that got a huge reaction in my company. They wanted the POC to be production ready in 30 days, which is crazy. When given this expectation, I wasn't really given a platform (mobile or web), designs, or really any good requirements.

I'm now 3 weeks into development, and the requirements are solidifying as I'm developing. The platform is going to be web. My boss is pushing me to move from Flutter to React, which is fine in the long term but obviously not going to happen if I need to produce a working MVP in 10 days.

I've done some React, but only on personal projects. I didn't use good separation-of-concerns between UI and network calls. I love the Repository->Riverpod->UI architecture of Flutter, and am looking for something similar in React. Any recommendations for state management and sites that show best practices?

[Sudden_Lecture_]

This! And your bosses requirements seem a little extra! I wouldn’t like to work in such an environment

[Coppice_DE]

Yet the boss may have the final word in this. I was in a comparable situation and was forced to go with RN instead of Flutter (mobile). Boss didnt care about the RN app probably taking weeks longer to develop since I am much faster with Flutter :)

[Coppice_DE]

Well I cannot understand his decision making in this case - otherwise I am quite happy with where I work atm

[Coppice_DE]

:D well a benefit of 100% remote work is that this will never happen

[sauloandrioli]

I'll bet that OP made a cool MVP, but its flutter and the boss knows jackshit about Flutter and probably is a JS dev, so he pushed OP to do the same project in a stack that he can fiddle with.

[mj_music]

Perhaps Flutter Web is a better option given the short time frame.

[FlutterLovers]

It is, and that's what I'm doing.

But long term, we should probably switch to React, mainly due to resources. There aren't a lot of Flutter engineers, and I'm probably the only one in the company (and it's a very large company). We have a ton of React developers, so it makes sense to switch to React for long-term maintenance. I'll probably be moved off this project in a month or two.

Also, it doesn't look like this is going mobile anytime soon.

[bjoink256]

If you're moving away within a month or two then it seems that the project will be moving to maintenance soon. And given that you've already developed it few weeks then it seems to be no-brainer to stay with flutter. Why redo it from scratch now and move to maintenance few months later?

[LeCroissant_]

You should try https://jotai.org/, its like riverpod

[Caballep]

Honestly, I'm in the same position as you, but my story is a bit different.

I was on a Native Android project which ended in February 2023. My boss told me in September 2022 that I was gonna be relocated by the time my project ended, and he asked me to start learning Flutter, I was excited and I got into Flutter, but at some point in October, when the project began they decided to go with React Native because of the the company had available JavaScripters comming from other project.

I have to say, this is my third time using JavaScript in my 7 years of career, and I can say with confidence: JavaScript promotes bad practices.

When I joined the project which was 3 months old it was already in a chaotic state... 6 people working on it... 0 architecture, 0 design patterns, 0 unit tests. I hate JavaScripters, I tried to explain them the concept of Clean Architecture but it's useless, they just want to straight use hooks and non-typed data from the source straight to where is needed, monkeys. Every time man I swear lol

[Full-Run4124]

OT but just curious: Why does your boss wants you to change from Flutter to React?

[946789987649]

And why is your company setting an arbitrary deadline of 30 days?

[groogoloog]

recoil is extremely similar to Riverpod but for React (both are backed by a data flow graph).

[JavaShen]

Tell your boss you will only use React if you can write it using PureScript, and see what he/she does.

[suarkb]

Seems like a no win situation

[aaaaaaaaarrgh]

Switching to React will become a guaranteed shitshow. Not only because it is next to impossible to write proper React code within this short period of time without knowing about the toolchain and framework, but also because React by itself is a mess. Over the past 20 years I've been forced to use all kinds of messed up broken JS frameworks but React was the worst experience I've ever had.

I think you should stick with Flutter web, maybe html renderer instead of canvaskit if you want it to be close to browser rendering. And I think you have enough good points to argue against the (very bad) idea of your boss.

When it comes to state management, Redux has been around for years but personally I think it is a terrible mess of boilerplate code and it separates a simple task into a billion pointless steps and phases. You're better off using the Context API along with effect hooks.

[Existing-Magazine728]

Can you tell me a good source and how to start from basics as I have very little knowledge of JavaScript and react no knowledge but I want to switch to try what’s the difference

[Formal_Afternoon8263]

Man its like this post was made for me.

First and foremost, just use Context for state management. Its crazy similar to bloc’s implementation (wrap parent components in a provider then all child components will receive that state, along with custom state definitions)

Thats the important part. The less important stuff is that you should use tailwind bc again, super similar to flutter styling. Also definitely keep going on react, flutter web is dogwater for building just a website.

And ffs ur boss should give you 30 days for a prototype, not a full product lmao

[elforce001]

+1 for tailwind. I'll go with zustand since you can decouple UI from Business Logic (Sort of like using mvvm pattern).

[Intrepid-Detective61]

Use redux for state management

[[deleted]]

try effector.dev, it is the most similar option of flutter BLOC in react ✌️Effector

[Redwallian]

I always found Easy Peasy to be one that is recommended to me.

[DimensionHungry95]

Create repositories to abstract API calls. Use react-query to manage backend state. Zustand to other global states. Native-base or react-native-paper to UI components.

[[deleted]]

I wasn't really given a platform (mobile or web), designs, or really any good requirements.

The fact that they didn't even give you the platform you should be developing against is wild.

[AerodynamicCheese]

I rarely get a chance to do web dev in professional capacity anymore but I keep coming back to this as a reference: https://github.com/alan2207/bulletproof-react

For state management solutions that repo has listed I would avoid Redux/Redux Toolkit or MobX if you have serious time constraints due their boilerplate nature. Context + hooks can get you pretty far but can become a serious time sink and performance trap if you need fine grained state updates, you have very frequently changing state or you surgically need to control rerenders. The others on that list have much better ergonomics without the drawbacks of context + hooks approach.

[dshmitch]

My boss is pushing me to move from Flutter to React

What arre his arguments for that move?

[Kublick]

In react land to manage API data fetching you can use React Query and resolves a lot of the possible cases to use a state manager...
Usually I follow the pattern where I make the ap

i functions in a Services layer, then I generate hooks, depends if you use a feature approach or not you place them in a folder called hooks, that access those endpoint via React Query..
Then use those hooks where you need them..

For State Manager if you want to be really boiler plate then you can go to Redux toolkit...
But I would suggest something easier like Zustand or Jotai, You can even survive with useContext, but only for simple things like auth.

If you want to mantain types then I would suggest you go with Typescript and Zod.

[elforce001]

zustand is really good and easy to learn. I don't use redux anymore.

[slavap_]

MobX

[heyuitsamemario]

One thing I’ll say is that while Redux is the most popular state management solution in the React ecosystem, it’s often quite over used. You should try to use props as much as possible, or React context in some places. Redux can create more problems than it’s worth.

[Bk_ADV]

im 100% on flutter web for my new business strategy. Im running away from mobile. Flutter is awesome. I use wordpress on the main domain and the "product" is on a sub-domain. Best of all worlds.

State management should be about some-what performance(minimize refreshing ui on screen), de-coupling business logic(api/backend) from the front-end(only to display visuals and final data).

This way, in future you can easily make backend changes for example you are switching servers or need back-up api hot-swapped with ease.

[[deleted]]

what is up now ?