PoC (current status: experimental*) to create a "web-native"[1] mobile-first SSR framework with Astro and the following integrations:
- React-Navigation for SPA/native-esque routing
- React-Native/React-Native-Web (only used to integrate React-Navigation)
- Konsta UI adaptive styling (i.e. ios/material) with Tailwind
- Capacitor for accessing native device functionality
Also acts as a decent starter template (IMHO) if you're looking for a modern monorepo setup geared towards shipping multiple sub-packages for an OS library. Uses pnpm workspaces, Nx, Vite, Rollup, etc.
*by experimental, I mean highly experimental 😀. Expect many broken deployments and massive refactoring commits as I figure this out.
pnpm i
in project root (runnpm i -g pnpm
first if you don't have pnpm installed)pnpm dev
to run the app
- Implement file-based routing (similar to Expo Router, Next.js, etc.)
- Rewrite mobile tabbar in Svelte to showcased framework interop/mixing-&-matching
- Fix hydration errors
- Lazy-load/code-split client-side routes
- PoC: persistent navigation state across page transitions using
window.sessionStorage
- Add authentication
- Add backend + service integrations
- Implement Redis for isomorphic client/server sessions
- Submit MVP to iOS/Google Play stores
- Improve dynamic routing system
- Extract modules into individual Astro plugin integrations
- Dockerize app, add examples for Node.js and other provider adapters
- Augment/replace Astro HTML streaming with Vite SSR-compatible RSC payload implementation (e.g. https://dev.to/one-beyond/react-server-components-without-any-frameworks-5a8p, https://github.com/cyco130/vite-rsc)
- Isomorphic client + RSC router: deeply integrate aforementioned RSC streaming with
react-navigation
- implement file-based routing + conventions (e.g. https://github.com/oedotme/generouted, https://github.com/hannoeru/vite-plugin-pages, Remix, Next, etc.)
- Investigate validity of Valtio as framework-agnostic shared-state solution
TODO
- Initial lifecycle: Browser URL request -> SSRd page -> Selective/partial client-side hydration
- Post-hydration navigation: Defer to client-side routing, except when bottom tab links are clicked.
TODO
TODO
Watch Evan You's talk at RenderATL here.
Astro recommends using nanostores to share state amongst components rendered by different frameworks (e.g. React, Svelte).
However, Valtio's proxy-based solution appears better suited due to its first-class React Suspense support (it will throw throw a Promise when accessed within a Suspense boundary and can also integrate with "vanilla" JS via module scope). (NEEDS INVESTIGATION)
- Tamagui for the huge effort in creating react-native-web-lite, a smaller web-first fork of react-native-web with first-class ESM support + easy Vite integration.
- Konsta for the genius idea of creating a tailwind-based alternative to Ionic's adaptive mobile UI.