Native mobile apps, as easy as creating a website.

Intro

Hyperview is a new hypermedia format and React Native client for developing server-driven mobile apps.

• Serve your app as XML: On the web, pages are rendered in a browser by fetching HTML content from a server. With Hyperview, screens are rendered in your mobile app by fetching Hyperview XML (HXML) content from a server. HXML's design reflects the UI and interaction patterns of today's mobile interfaces.
• Work with any backend web technology: Use battle-tested web technologies like Django, Rails, or Node. Any HTTP server can host a Hyperview app. You can even deploy your app as a collection of static XML files if you want!
• Update your apps instantly by deploying your backend: Say goodbye to slow release cycles and long app store review times. With Hyperview, your backend controls your app's layout, content, and available actions. This means you can update any aspect of your app with a server-side change. True CI/CD is finally attainable for mobile development.
• Forget about API versioning and backwards compatibility: Unlike traditional native apps, every user always runs the most recent version of your code. With no version fragmentation, you can be more productive by eliminating the need to support and maintain older app versions.

See the Hyperview website for more information about Hyperview and Hyperview XML.

Hyperview XML

• Try the Hyperview demo app here
• See examples of how to create rich, interactive apps with Hyperview XML here
• See the full references for Hyperview XML here

Hyperview React Native Client

This repo contains a React Native implementation of the Hyperview Client. It can either be integrated into an existing React Native app, or used to create a self-contained RN app.

Requirements

The Hyperview client only has the following required dependencies:

• @instawork/xmldom = 0.0.3
• lodash = 4.17.21
• tiny-emitter = 2.1.0
• url-parse = 1.5.10

More importantly, the client is designed to be incorporated into an existing React Native project, and thus has the following peer dependencies:

• @react-native-community/datetimepicker >= 8.2.0
• @react-native-picker/picker >= 2.9.0
• @react-navigation/bottom-tabs >= 6.5.7
• @react-navigation/native >= 6.1.6
• @react-navigation/stack >= 6.3.16
• @types/react >= 18.3.12
• react >= 18.3.1
• react-native >= 0.76.7
• react-native-gesture-handler >= 2.20.2
• react-native-safe-area-context >= 4.12.0
• react-native-webview >= 13.12.5

Hyperview Demo App

This repo contains an example XML server that serves Hyperview XML to showcase the available features. It also contains a demo Expo project that can connect to the example XML server, or any other Hyperview endpoint.

1. Install dependencies

Enable corepack once (it provides the Yarn version pinned in package.json):

corepack enable

Then, from the demo/ directory:

yarn

Note: you only need to run this step once.

2. Run the demo server

From the demo/ directory:

yarn server

This will start an HTTP server listening on port 8085.

3. Run the app

This step depends on whether you want to run the demo app in the iOS simulator, on an Android Virtual Device, or on a physical mobile device.

Running on the iOS simulator

From the demo/ directory:

yarn ios

This will compile and install the demo app in the iOS simulator (first run takes a few minutes). It will then start the Expo development server to load the demo app.

Running on the Android emulator

From the demo/ directory:

adb reverse tcp:8085 tcp:8085
yarn android

This will compile and install the demo app in the emulator (first run takes a few minutes). It will then start the Expo development server to load the demo app.

Running on a physical device

The demo uses a local Expo development build, not Expo Go. Plug in the device (Developer Mode on iOS, USB debugging on Android). Make sure your mobile device and development machine are connected to the same Wi-Fi network.

From the demo/ directory:

BASE_URL="http://X.X.X.X:8085" yarn ios --device

or

BASE_URL="http://X.X.X.X:8085" yarn android --device

[!NOTE] Replace X.X.X.X with the IP of your machine. This is needed in order for your physical device to be able to request the example XML files from your development machine.

This compiles Hyperview onto the device (first run takes a few minutes) and starts Metro. Metro displays a QR code in the terminal.

• On your iOS device, open the Camera app and point it at the QR code in the terminal. The Camera app should show an "Open in Hyperview" notification. Tap this notification.
• On your Android device, open Hyperview and type http://X.X.X.X:8081 in the development launcher. Google Camera will not open the QR code.

Developing Hyperview Core Features

As you're developing new features in the Hyperview library, you can use the demo app along with this special command to help you quickly test your changes:

From the demo/ directory (in a separate terminal):

yarn sync

This command will copy all the files from the hyperview/src directory, into the demo/node_modules/hyperview/src directory, and watch for any more changes.

You can also pass as an additional argument the root path of your own react-native app where you've installed hyperview to perform the same sync/watch operation. e.g.

yarn sync ../projects/my-cool-app

Tip

You may stop this with Ctrl + C

Troubleshooting

If Metro opens Expo Go instead of the Hyperview demo, uninstall Expo Go from the simulator or device and run yarn ios or yarn android again.

Physical iOS device builds require Automatic Signing with a Personal Team in Xcode. A paid Apple Developer account is not required.