A few questions about hyperview

[roelve]

how well NFC functionality would work together with Hyperview (I have an app idea in mind, purely a personal project, that involves the scanning of NFC tags at certain moments to get data that gets sent to the server and I was wondering whether Hyperview might be a good technology to build something like this).

Our company app Instawork uses NFC functionality for scanning tags. So it can indeed work. However, it doesn't work out of the box, you'd need to create a custom behavior that wraps a library like this one: https://github.com/whitedogg13/react-native-nfc-manager. The contents of the NFC tag could be scanned into a input field that gets POSTed to the server. If you go down this road, we can help with the implementation and share some of our code around it.

Are push notifications supported in Hyperview? And if there is no built in option for this, can it somehow be enabled by using third party services that are compatible?

Push notifications are not directly built into Hyperview, but you can integrate any RN push notification library in your app to support it. It's even possible to link to direct screens in Hyperview by including the URL of the screen in the push notification data. That's how we implement things.

Ps: I asked about Wordpress before and you answered that you resorted to using webviews for displaying the data as WordPress saves its data as HTML in the database. I've been thinking though and here is a wacky idea (you can tell me if this is stupid): I just learned that WordPress can generate RSS feeds which return data in XML. Is there, theoretically speaking, any way to use that to sent data to a Hyperview app (so resorting to webviews is not necessary)?

That's interesting! But do you know if the RSS feed contains the entire contents of the posts? Or does it just contain the first paragraph? Since the HTML is stored in the database, I'm not sure how Wordpress would format it into the RSS feed; it might onlh include a snippet or HTML content. If that's the case, then you'd still need to use a web view to render the content.

[adamstep]

Hi Roel, happy to answer your questions.

1.

As I understand it Hyperview renders views inside a react native client application based on the XML data it receives from the server. Though what is, at least to me, fairly unclear is how it does that. With that I mean, are the views the application renders based on that data actually native UI elements? Or are they more similar to web elements?

The XML data is rendered to native UI elements, not as web elements. So, as an example, something like "pull to refresh" interaction does not need to be simulated, it is handled by the mobile platform (iOS or Android).

2.

Continuing from the first question: how does this approach differ from a webbrowser? You have a React native client which gets sent data that tells it how to render the UI. This concept appears to me very similar to a traditional webbrowser. So I wonder what the difference is and also, what the advantages are in using this approach over a traditional webbrowser. And that brings me to the next question.

You are correct, the Hyperview library in this repo is essentially a browser client for the Hyperview XML. It is analagous to a web browser being a client for HTML. However, HTML was designed for representing text documents, whereas Hyperview XML is designed to represent entire mobile apps. This gives Hyperview several advantages:

• We render to native UI elements on mobile platforms. That means much better support for things like lists/sectioned lists, content-safe areas, smooth scrolling, integration with native APIs, etc.

• HTML is essentially limited to 2 basic interactions: clicking links and submitting forms. To do more, you need to write JS or use a library like htmx. Hyperview XML has these capabilities built-in with behaviors.

• Web browser navigation is linear (go forward or back). This doesn't fit mobile apps with persistent navbars, screen stacks, overlay modals with their own screen stacks, etc. Hyperview XML understands mobile app navigations.

• The Hyperview client is easily extensible to support custom elements and behaviors for your app. This basically allows you to extend and create a custom "browser" for your app.

3.

What advantage does Hyperview have over PWA's? When you come from a web background (like myself) what would be the advantage of using Hyperview over something like a PWA? It's a bit easier to write as they are basically websites that run in a webview on the device (and are in a sense the natural succession to something like Cordova).

A PWA is a good solution for some types of apps. But in our experience, an app running in a web view is slower to load than a Hyperview app, and the UI doesn't feel "native" for the reasons I mentioned above. If performance and native feel are important, Hyperview has the advantage. If your app has many screens and complicated navigation stack, those advantages are multiplied. But the PWA will be a better choice if you want to use the same codebase for both a native app and web app, or if you want to re-use existing JS/HTML libraries.

4.

In what capacity can I mix web code with Hyperview? And by that I mean, can I run javascript libraries inside hyperview or does that only work inside the webview tag? or instance, can I choose to write Hyperview XML wherever I whish to have a native experience, and switch to a webview where I want to include something that the native UI doesn’t cover (for example: a custom navigation bar)? I’m mainly thinking about animation in this instance (libraries like greensock and the like).

You cannot run arbitrary JS on a Hyperview screen. One of our explicit design goals is to not add scripting into format (the app should be declarative via the XML). You can, however, create custom elements and behaviors that run your own JS code or re-use other libraries.

You can mix web code into a Hyperview screen via the <web-view> tag. You could also create an entire Hyperview screen which is just one giant <web-view>. This allows you to render parts of a screen with HTML/JS, or navigate from a native UI to a web UI. So in those places, you could use animations from greensock. But if you want to animate the native UI elements, you'd need to write a custom behavior that uses the React Native animation API.

5.

This may be a bit of an odd question but here it goes anyway: Since it is mentioned in the docs that Hyperview is supposed to work with any backend technology that is capable of handling HTTP requests, would it theoretically be possible to combine Hyperview with Wordpress? In the sense of having Wordpress build the XML files using PHP and serving that to the react native client? And if that would be possible, would you recommend it? why yes or why not? (or perhaps you are neutral about it).

Yes, this is possible! In fact, I built a proof-of-concept Hyperview theme for Wordpress. Not production-ready, but I could render a list of posts, single posts, etc. There is a big limitation though. Wordpress stores each post in the database as HTML (rather than a structured format like Markdown). This means it's difficult to render the actual content as native Hyperview. I ended up using a <web-view> tag to display the actual post, and used Hyperview XML for the list, navigation, etc. Depending on the use case, this may be a pro or a con. I think the possibilities are more interesting in other CMSes that store the content in a more structured block-format. That would allow rendering the content as native UI.

Hope that helps, happy to answer any more questions you may have! -Adam

[cengit]

as my understanding, Hyperview is more like a bridge between xml and react-native, all xml will be converted to react-native controls (and events, of course).

and the advantages in my project are:

1. with server side render, I can do hot fix any time by deploying new version of my services (like an B/S project)
2. you can build up an cross-platform app without knowing much about react native, native coding

and I think Hyperview is more suitable for an APP for displaying things, but not for a complicated interactive projects

[adamstep]

and I think Hyperview is more suitable for an APP for displaying things, but not for a complicated interactive projects

Good point @cengit . If your app requires sophisticated gestures & interactions (like a drawing app or photo editor), Hyperview is not a good fit. If your app is mostly based around CRUD interactions, Hyperview can save a lot of time.

[adamstep]

Hi @roelve hopefully this answered your questions! Let me know if there's anything questions related to my responses, otherwise I'll close the issue as answered.

[roelve]

That's interesting! But do you know if the RSS feed contains the entire contents of the posts? Or does it just contain the first paragraph? Since the HTML is stored in the database, I'm not sure how Wordpress would format it into the RSS feed; it might onlh include a snippet or HTML content. If that's the case, then you'd still need to use a web view to render the content.

I don't know whether I'm versed enough in a technical sense to answer all of that (also because I've only just found out about it and as such I'm still playing around with it). As I understand it Wordpress has a number of standard templates that generate RSS feeds which can be accessed by a /feed behind the domain name (this is the standard feed from my website: https://studio-devign.be/feed which may give some idea). However, one can also create custom feed templates. The way this is done is by simply adding an add_feed() function to the functions.php and then creating a callback that imports the content. This callback can, as I understand it, basically be anything, even a simple "hello world" by using the PHP echo function as the workflow is basically exactly the same as how one would build a page template (as is shown here: https://www.wpbeginner.com/wp-tutorials/how-to-create-custom-rss-feeds-in-wordpress/ ). There are a few specific RSS functions in WordPress as well like this one: https://developer.wordpress.org/reference/functions/bloginfo_rss/ which apparently strips the content of any tags for use in the feeds (I believe the rest of those functions can be found here: https://codex.wordpress.org/Customizing_Feeds) . In any case, I think it's a very interesting area to explore.

Thanks again for adressing my questions. I suppose you can close this issue now (If I have any more questions in the future I'll make a new one if that is okay).

[adamstep]

There are a few specific RSS functions in WordPress as well like this one: https://developer.wordpress.org/reference/functions/bloginfo_rss/ which apparently strips the content of any tags for use in the feeds (I believe the rest of those functions can be found here: https://codex.wordpress.org/Customizing_Feeds) . In any case, I think it's a very interesting area to explore.

That's interesting. That might mean that the RSS feed could be used to serve a Hyperview app. However, if the content is stripped of all tags, I assume that means it loses formatting information, so it wouldn't be the most flexible output.

Another avenue to explore with Wordpress: if you use the Gutenberg editor, I believe it adds HTML comments to the saved post to represent the blocks. Perhaps these comments could be parsed to re-render the saved HTML as Hyperview XML.

[roelve]

There are a few specific RSS functions in WordPress as well like this one: https://developer.wordpress.org/reference/functions/bloginfo_rss/ which apparently strips the content of any tags for use in the feeds (I believe the rest of those functions can be found here: https://codex.wordpress.org/Customizing_Feeds) . In any case, I think it's a very interesting area to explore.

That's interesting. That might mean that the RSS feed could be used to serve a Hyperview app. However, if the content is stripped of all tags, I assume that means it loses formatting information, so it wouldn't be the most flexible output.

Another avenue to explore with Wordpress: if you use the Gutenberg editor, I believe it adds HTML comments to the saved post to represent the blocks. Perhaps these comments could be parsed to re-render the saved HTML as Hyperview XML.

It may be a interesting to look at gutenberg as well, though I generally use ACF blocks for my gutenberg solutions. I don't know whether that changes things on a technical level in this area (I do remember reading that ACF also saves data as HTML comments though). In addition, I was wondering something. Does Hyperview use the managed or the bare Expo workflow, or can either be used?

[adamstep]

Does Hyperview use the managed or the bare Expo workflow, or can either be used?

Expo is not a requirement for the Hyperview library. (In the Instawork app, for example, we don't use Hyperview and manage the dependencies ourselves.) We use Expo for the demo app in this repo just for ease of setup. I'm not actually sure about the managed and bare workflows in Expo, but I'm guessing either will work.