[HN Gopher] Solito - React Native and Next.js unified
___________________________________________________________________
Solito - React Native and Next.js unified
Author : reimertz
Score : 67 points
Date : 2022-03-14 20:51 UTC (2 hours ago)
(HTM) web link (solito.dev)
(TXT) w3m dump (solito.dev)
| reimertz wrote:
| For anyone interested, here is the keynote introducing Solito
| from Next.js Conf 2021 by it's creator Fernando Rojo.
|
| https://www.youtube.com/watch?v=0lnbdRweJtA
| chrisabrams wrote:
| I didn't know React Native + Next.js was a thing? What is the
| goal of doing that? I don't know what problem Solito is solving,
| some helpful context would be nice for those of us who are
| foreign to the problem.
| theturtletalks wrote:
| It's mainly cross platform components (Fernando refers to them
| as screens) that can be used on the web, iOS, and Android. In
| Next.js, you can import these components as pages. On iOS, file
| based routing does not exist. Solito fills in the cracks. His
| video at Next.js Conf was really informative:
| https://www.youtube.com/watch?v=0lnbdRweJtA.
| _scottpaulin wrote:
| This looks super cool.
|
| Rookie question from a Web dev here - what functionality does
| react native provide that isn't available on Web?
| kall wrote:
| The benefit is that you can make an app with platform-native
| views and navigation. If you don't care about this native
| "feel" than it doesn't matter and capacitor may be a better
| choice if you just need access to some hardware or push
| notifications.
|
| I have personally drunken the kool-aid to the extend that I'd
| rather develop a pure web project with react-native-web because
| I like the choices/constraints it introduces but I don't think
| that's the case for most people.
| danielrhodes wrote:
| React using React Native is almost identical, with a few key
| differences:
|
| 1) No HTML elements. React Native provides some low level
| elements for views, text, etc. The rest depends on the
| platforms and packages you have installed. 2) You can't use
| CSS, so you use something that is similar to CSS (including
| flex box), but isn't cascading. 3) Since ultimately React
| Native results in native views being rendered, you can also use
| some of the native view debugging that exists. 4) Changes made
| in React are batched up and sent to the native side of things,
| which results in some performance characteristics you don't see
| on the web or native mobile. There is also a difference between
| iOS and Android performance. You feel this a lot more on mobile
| than on the web.
| [deleted]
| moojd wrote:
| I would guess that the point is to share more code between web
| and mobile.
| yesimahuman wrote:
| This looks cool, nice work! As an alternative, if you'd like to
| have a single web-based codebase for iOS/android/pwa/etc using
| Next.js then you might like this approach using Capacitor:
| https://github.com/mlynch/nextjs-tailwind-ionic-capacitor-st...
|
| The benefit over using RN for this is being able to use libraries
| like Tailwind on all platforms and having a true single codebase.
| hokumguru wrote:
| Applause to Fernando for this. His work on react native open
| source has been incredible. Definitely check out his other
| projects Dripsy and Moti as well!
| Graffur wrote:
| "Solito is the missing piece for using React Native with Next.js
| to build powerful cross-platform apps."
|
| What was missing though?
| kall wrote:
| A solid strategy for bridging pages/urls of next.js with the
| screen/navigation patterns on mobile.
| crooked-v wrote:
| I suspect I'll end up using this ASAP just for the useParam hook,
| as it's a pattern I like quite a lot (page state as query params)
| and is a big ol' pain to maintain and deal with edge cases.
| kall wrote:
| It's great that this is as much a library as it is documentation
| on good patterns for this.
|
| I don't use react-navigation, so I won't be able to use the
| library. I actually arrived at a very similar setup of a Link
| component that is a different implementation per platform. I
| think it will become even more similar after learning from this
| code and documentation.
| merrvk wrote:
| This will help open a lot of doors for us. Very interesting
| project.
| hunterb123 wrote:
| Wouldn't Remix be a better fit? It's easier to run in more
| client-orientated environments.
|
| Currently, I like to have the API and web pages (signup,
| marketing, policies, etc.) made with Remix.
|
| Then, the cross-platform app (native & web) can be made with
| React Native / React Native Web using React Navigation as the
| router.
|
| I can certainly see being able to combine those two into one as a
| plus, but React Router / Next Router and React Navigation
| conflict. React Navigation is needed for a nice app experience.
| kall wrote:
| Doesn't remix very much want to handle the routing? Homestead
| you mashing that with react-navigation?
| hunterb123 wrote:
| As does Next.js, does it not? Solito uses next/router. I
| updated my comment to reflect this dilemma.
|
| This is why I currently separate web pages & API from the
| cross-platform native/web app.
|
| Adapting Remix to React Navigation would be the solution if
| possible.
| kall wrote:
| Sure and that's what this library bridges. I see the appeal
| in remix for building interactive apps the "remix way" with
| forms, relying on web/http conventions etc. I also like
| that it brings nested routing back to metaframeworks. None
| of that will translate well to native. As an api+website
| framework it doesn't look more appealing then next.js to
| me, which is a little more unopinionated and thus easier to
| adapt to cross-platform.
___________________________________________________________________
(page generated 2022-03-14 23:00 UTC)