5 ms·

I've been searching a stack which could allow for a single codebase to be rendered in Android, iOS, and the web, and React Native + React Native Web might be th

by karimf 5y ago

I've been searching a stack which could allow for a single codebase to be rendered in Android, iOS, and the web, and React Native + React Native Web might be the top choice for that. Other competitor includes Flutter, which used to only render canvas on the web, but right now it seems they have an option to render as HTML as well. I bet the need for cross-platform stack might continue to rise in the future. It's just impossible for small team/solo founder to target 3 different platforms, while handling three different codebases.

Cloudef 5y ago
I've recently been playing with flutter and I like it more than react-native. React-native feels kind of a hack job, and the resulting program isn't really that well optimized (both performance and size wise). Flutter seems like more thought out solution where react-native was afterthought for react. Both are very productive environments however.
- jadbox 5y ago
  I'd like to say imho that Fluttter seams to have the reverse issue from react-native in that it isn't tuned for website rendering. Since Flutter has to redraw it's canvas for animations and user interactions, it can be slow for websites where the browser window is fairly large.
- hunterb123 5y ago
  I've had the opposite experience. The only thing Flutter has going for it is the batteries included aspect, which can be a bad thing as well. I prefer the flexibility of the React stack, being able to match different libraries vs a framework. E.g. maybe you want a more native router, use Wix's native navigation, otherwise use react navigation. Maybe you love reactive programming, use observables, otherwise maybe generators for side effects. The apps Flutter produces don't feel right, RN does have a more native feel since it uses native primitives. Kinda like wxWidgets vs QT. I'd rather use native controls than trying to mimic the look and feel of native (and keep up w/ changes). This is especially noticeable on iOS and even more so on web. React Native was definitely not an after thought, it's simply another bridge. I've had great experience with all the bridges. RN for Windows / Mac (both the MS fork and Catalyst), and RN for Web. I've made and work with a production React Native Web / React Native website and apps. It's been very pleasant to maintain apps and a website (desktop & mobile site) with one codebase.
  - EvilEy3 5y ago
    > I prefer the flexibility of the React stack, being able to match different libraries vs a framework. No, just no.
- kevincox 5y ago
  The problem with Flutter is that the result is absolutely unusable on web due to rendering to canvas. They implement maybe 2% of the non-appearance features that browsers do for native elements. I haven't heard of the HTML renderer but if that is coming it could be a compete game changer for the viability of Flutter-web outside of games.
kypro 5y ago
Cross-platform frameworks work great for basic CRUD apps but when you start to do things more complicated it can be a headache. Sometimes hardware and features you want to leverage are specific to the platform.
- hunterb123 5y ago
  With React Native you can just use file.ios.js or file.windows.js etc if you want to do something different entirely for a platform. You can also check the platform with a function for minor adjustments. You can also handle these differences in a RN extension if they involve native code. You can model your codebase so the function stubs are the same, but the implementation differs based on platform. So you can use it the same way in the rest of your code. I run this setup in production and I share about 95% of code between platforms for a complex cloud storage app (file manager, uploading, etc.) Basically isolate what's different, and abstract it to a common interface.
  - throw_m239339 5y ago
    > With React Native you can just use file.ios.js or file.windows.js etc if you want to do something different entirely for a platform. You can also check the platform with a function for minor adjustments. You can also handle these differences in a RN extension if they involve native code. Well if you need a specific widget or library that react native doesn't support by default you have to write bindings, and unless your business logic is very basic it happens most of the time. You might be lucky somebody already did write some bindings for you. As someone that used Titanium in the past, React Native suffers from the exact same problems.
    - hunterb123 5y ago
      Not really as you'll have to do that work anyway if it doesn't exist. It's better to do a small extension than to duplicate all of your other shared code just to do that change. Most of the time there will already be a 3rd party extension, but it's really easy to make them. You will need some slight native experience, but you would need more for a full native app. With Titanium it wasn't easy to do these extensions, with RN you have direct access to the native platforms and code. You can go as native as you want in one or all platforms while sharing the code you want to.
AkshitGarg 5y ago
Flutter web has issues with accessibility. They do support screen readers once you enable accessibility by pressing a button, but its rather bad right now. Also scrolling is emulated and doesn't feel great.
deleted 5y ago
[deleted]
seph-reed 5y ago
I'm a solo developer, and I have a project that totally can do it. I've done the proof-of-concept in an afternoon, but am mostly focused on web stuff atm. Granted, it leverages NativeScript, but it's really not that hard once you have that.
- Tajnymag 5y ago
  Could you please share the details? I don't know about a way to render the same template in the browser and nativescript.
  - seph-reed 5y ago
    In my case, you basically just take some code like this: const renderEl = flex("UserList", [ label("User", ["Alice"]), label("User", ["Bob"]), ]); In NativeScript, you would have these functions create those types of UI elements. For web, they'd probably produce divs and spans. Ofc, there will be certain elements that are native only, or require really special stuff to create.
solarkraft 5y ago
Same here, with the same conclusion. React may not be my favorite web framework, but the native ecosystem blows everything else out of the water. Desktop support is approaching “okay” (judging by the almost kinda somewhat native feeling flagship app Facebook Messenger on macOS), which puts it many kilometers ahead of any alternative. The main alternatives for native feeling apps seem to be Xamarin Forms and Qt Quick, the former seems hard to do special things with and the latter has a pretty confusing and convoluted setup process. Neither has real web support.
- nyanpasu64 5y ago
  Judging from KDE's Kirigami apps and Subsurface on Android, I would not describe Qt Quick apps as native-performing or feeling.
  - heavyset_go 5y ago
    Last time I used Qt Quick, native looking widgets were outside of its scope. You're meant to define the styling you want for all of your widgets, and Qt will render them consistently across platforms.
    - solarkraft 5y ago
      Out of scope for Qt Quick, perfectly in scope for Qt Quick controls. It looks very native on all the platforms I’ve tried, likely due to their experience with Qt Widgets.
      - heavyset_go 5y ago
        Nice, thanks for pointing this out. Qt Quick Controls weren't around, or at least weren't available on the platforms I was developing against, like 9 years ago.
  - solarkraft 5y ago
    Because you’re judging one that don’t try. There are demos of Qt Quick apps emulating Android very closely.
jamesisaac 5y ago
You might find this recent blog post from the React Native team informative, about their long-term vision for multi-platform support: https://reactnative.dev/blog/2021/08/26/many-platform-vision https://reactnative.dev/blog/2021/08/26/many-platform-vision From personal experience, I've had great success targeting the 3 platforms you mention in a single RN codebase, with a very high degree of code re-use.
- deleted 5y ago
  [deleted]
nwienert 5y ago
Check out my SnackUI in my GitHub, I built it to improve in a lot of ways on the single codebase use case.
_gagt 5y ago
I created a tool for those wanting a cross-platform RN app: http://ult.dev/ http://ult.dev/ You can create a project by running: "npx ult ProjectName" You could use Expo, but I didn't want to be locked into the Expo environment, I wanted native extensions, and I wanted desktop platforms. For web it uses a lite forked CRA project tailored for React Native Web. For native it runs the proper commands and sets up all the platforms for you. Currently ReactXP is the default as it's more stable and feature complete, but RNW is supported. In the future RNW will be default as ReactXP is abandoned and RNW is the clear winner.
miguel-muniz 5y ago
I wonder if Apple would ever throw their hat in the ring, I don't think they appreciate Facebook and Google dominating the space when they try to push developers to use Swift

by karimf 5y ago

Cloudef 5y ago

I've recently been playing with flutter and I like it more than react-native. React-native feels kind of a hack job, and the resulting program isn't really that well optimized (both performance and size wise). Flutter seems like more thought out solution where react-native was afterthought for react. Both are very productive environments however.

jadbox 5y ago
I'd like to say imho that Fluttter seams to have the reverse issue from react-native in that it isn't tuned for website rendering. Since Flutter has to redraw it's canvas for animations and user interactions, it can be slow for websites where the browser window is fairly large.
hunterb123 5y ago
I've had the opposite experience. The only thing Flutter has going for it is the batteries included aspect, which can be a bad thing as well. I prefer the flexibility of the React stack, being able to match different libraries vs a framework. E.g. maybe you want a more native router, use Wix's native navigation, otherwise use react navigation. Maybe you love reactive programming, use observables, otherwise maybe generators for side effects. The apps Flutter produces don't feel right, RN does have a more native feel since it uses native primitives. Kinda like wxWidgets vs QT. I'd rather use native controls than trying to mimic the look and feel of native (and keep up w/ changes). This is especially noticeable on iOS and even more so on web. React Native was definitely not an after thought, it's simply another bridge. I've had great experience with all the bridges. RN for Windows / Mac (both the MS fork and Catalyst), and RN for Web. I've made and work with a production React Native Web / React Native website and apps. It's been very pleasant to maintain apps and a website (desktop & mobile site) with one codebase.
- EvilEy3 5y ago
  > I prefer the flexibility of the React stack, being able to match different libraries vs a framework. No, just no.
kevincox 5y ago
The problem with Flutter is that the result is absolutely unusable on web due to rendering to canvas. They implement maybe 2% of the non-appearance features that browsers do for native elements. I haven't heard of the HTML renderer but if that is coming it could be a compete game changer for the viability of Flutter-web outside of games.

kypro 5y ago

Cross-platform frameworks work great for basic CRUD apps but when you start to do things more complicated it can be a headache. Sometimes hardware and features you want to leverage are specific to the platform.

hunterb123 5y ago
With React Native you can just use file.ios.js or file.windows.js etc if you want to do something different entirely for a platform. You can also check the platform with a function for minor adjustments. You can also handle these differences in a RN extension if they involve native code. You can model your codebase so the function stubs are the same, but the implementation differs based on platform. So you can use it the same way in the rest of your code. I run this setup in production and I share about 95% of code between platforms for a complex cloud storage app (file manager, uploading, etc.) Basically isolate what's different, and abstract it to a common interface.
- throw_m239339 5y ago
  > With React Native you can just use file.ios.js or file.windows.js etc if you want to do something different entirely for a platform. You can also check the platform with a function for minor adjustments. You can also handle these differences in a RN extension if they involve native code. Well if you need a specific widget or library that react native doesn't support by default you have to write bindings, and unless your business logic is very basic it happens most of the time. You might be lucky somebody already did write some bindings for you. As someone that used Titanium in the past, React Native suffers from the exact same problems.
  - hunterb123 5y ago
    Not really as you'll have to do that work anyway if it doesn't exist. It's better to do a small extension than to duplicate all of your other shared code just to do that change. Most of the time there will already be a 3rd party extension, but it's really easy to make them. You will need some slight native experience, but you would need more for a full native app. With Titanium it wasn't easy to do these extensions, with RN you have direct access to the native platforms and code. You can go as native as you want in one or all platforms while sharing the code you want to.

AkshitGarg 5y ago

Flutter web has issues with accessibility. They do support screen readers once you enable accessibility by pressing a button, but its rather bad right now. Also scrolling is emulated and doesn't feel great.

deleted 5y ago

[deleted]

seph-reed 5y ago

I'm a solo developer, and I have a project that totally can do it. I've done the proof-of-concept in an afternoon, but am mostly focused on web stuff atm. Granted, it leverages NativeScript, but it's really not that hard once you have that.

Tajnymag 5y ago
Could you please share the details? I don't know about a way to render the same template in the browser and nativescript.
- seph-reed 5y ago
  In my case, you basically just take some code like this: const renderEl = flex("UserList", [ label("User", ["Alice"]), label("User", ["Bob"]), ]); In NativeScript, you would have these functions create those types of UI elements. For web, they'd probably produce divs and spans. Ofc, there will be certain elements that are native only, or require really special stuff to create.

solarkraft 5y ago

Same here, with the same conclusion. React may not be my favorite web framework, but the native ecosystem blows everything else out of the water. Desktop support is approaching “okay” (judging by the almost kinda somewhat native feeling flagship app Facebook Messenger on macOS), which puts it many kilometers ahead of any alternative. The main alternatives for native feeling apps seem to be Xamarin Forms and Qt Quick, the former seems hard to do special things with and the latter has a pretty confusing and convoluted setup process. Neither has real web support.

nyanpasu64 5y ago
Judging from KDE's Kirigami apps and Subsurface on Android, I would not describe Qt Quick apps as native-performing or feeling.
- heavyset_go 5y ago
  Last time I used Qt Quick, native looking widgets were outside of its scope. You're meant to define the styling you want for all of your widgets, and Qt will render them consistently across platforms.
  - solarkraft 5y ago
    Out of scope for Qt Quick, perfectly in scope for Qt Quick controls. It looks very native on all the platforms I’ve tried, likely due to their experience with Qt Widgets.
    - heavyset_go 5y ago
      Nice, thanks for pointing this out. Qt Quick Controls weren't around, or at least weren't available on the platforms I was developing against, like 9 years ago.
- solarkraft 5y ago
  Because you’re judging one that don’t try. There are demos of Qt Quick apps emulating Android very closely.

jamesisaac 5y ago

You might find this recent blog post from the React Native team informative, about their long-term vision for multi-platform support: https://reactnative.dev/blog/2021/08/26/many-platform-vision https://reactnative.dev/blog/2021/08/26/many-platform-vision From personal experience, I've had great success targeting the 3 platforms you mention in a single RN codebase, with a very high degree of code re-use.

deleted 5y ago
[deleted]

nwienert 5y ago

Check out my SnackUI in my GitHub, I built it to improve in a lot of ways on the single codebase use case.

_gagt 5y ago

I created a tool for those wanting a cross-platform RN app: http://ult.dev/ http://ult.dev/ You can create a project by running: "npx ult ProjectName" You could use Expo, but I didn't want to be locked into the Expo environment, I wanted native extensions, and I wanted desktop platforms. For web it uses a lite forked CRA project tailored for React Native Web. For native it runs the proper commands and sets up all the platforms for you. Currently ReactXP is the default as it's more stable and feature complete, but RNW is supported. In the future RNW will be default as ReactXP is abandoned and RNW is the clear winner.

miguel-muniz 5y ago

I wonder if Apple would ever throw their hat in the ring, I don't think they appreciate Facebook and Google dominating the space when they try to push developers to use Swift