Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
electron
Deploy your Capacitor apps to Linux, Mac, and Windows desktops, with the Electron platform! 🖥️ (by capacitor-community)
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
Dripsy is very declarative: it allows you to provide object and array values to add mobile-first responsive styles. Instead of manually using the Dimension API (on native), and adding media queries and nested styles throughout your code (on web). This API is very inspired by Chakra UI's array syntax for declaring responsiveness. (Which Magnus UI also is inspired by).
To do that, while also getting the cross-platform benefits of RNW, then Chakra UI would have to be rewritten from the bottom-up with those higher-level abstractions in mind. This is not likely to happen. The issue has not had much progress since Oct 2019, and was closed in Apr 2020.
Not yet responsive, but planned responsive under SSR with react-native-media-queries, which makes pure CSS media queries run on native (with device orientation), since Magnus UI generates pure CSS media queries when run on web. They consider it more performant than using Fresnel. But the jury is out..
Dripsy is very declarative: it allows you to provide object and array values to add mobile-first responsive styles. Instead of manually using the Dimension API (on native), and adding media queries and nested styles throughout your code (on web). This API is very inspired by Chakra UI's array syntax for declaring responsiveness. (Which Magnus UI also is inspired by).
Uses actual CSS breakpoints on web, to become responsive, even when using SSR. Uses Fresnel to achieve this. CSS breakpoints on web will rely on the mobile device's user agent for most cases. But since this can be inaccurate, it also uses pre-emptive server-side breakpoint generation. Basically, if the mobile user-agent cannot be accurately detected, Fresnel renders all media query breakpoints on the server (a bit of extra work for the server, since it might lead to rendering more components). So the client's browser will receive all breakpoints on first render and can immediately start rendering according to the correct ones. Instead of waiting for React to rehydrate before only then running the media queries with CSS-in-JS, which would have given latency and potentially unwanted visual side-effects. This becomes most acute when you are using SSR, and thus don't want to wait for rehydration on the client to start showing the responsively laid out content.
Capacitor supports iOS, Android and PWAs. There are also a community plugin that deploys Capacitor to Electron, opening up Capacitor apps to MacOS, Linux, Windows etc.
NB: Using Capacitor in practise means bundling your website inside the app, NOT loading it on demand (via a url). That is the recommended option from Capacitor’s creator Max Lynch, since if not: "Apple will likely reject your app since it is not “self-contained.". To make it self-contained, you can do a NextJS static export, for example. Sadly, for distribution, this means going through the App Store process, and asking clients to update their app for every code change (many will thus be out of date). Unless you use a service such as CodePush for Capacitor. Never mind the weirdness of using a code distribution tool for native apps, just to serve users with fresh HTML, CSS and JS...
Capacitor, as an alternative to RN, is the only solution I know of that will easily give you a single direct bridge between your webapp and the native platform (think 'Electron for mobile'). Read more on Capacitor at the end of this post.