Non-core block support in mobile apps

[luisherranz]

I'd like to know more about the plans for supporting non-core blocks in mobile apps.

• Is there a plan to allow non-core blocks to provide native versions of their blocks?

I'm also interested in knowing more about why mobile apps are not using the web-based version:

• Is it because of performance or is it because of UX?
• If so, are there plans to stop implementing the native versions and use the web-based implementation if/when the performance and UX are good enough?

[mchowning]

👋 @luisherranz ! Thanks for asking! Let me share some of my thoughts...

Is there a plan to allow non-core blocks to provide native versions of their blocks?

There's not really a plan, more of a goal/hope. We want to support third-party blocks, but we haven't found a clear path to do that yet. Admittedly, we also haven't invested a lot of time investigating this yet either because our main focus to this point was to add support for the most-used core blocks. It is a very tricky problem given the amount of HTML and CSS that React Native does not support.

One possibility that has been discussed is the idea of developing a set of low-level "core" React components that work on both web and mobile. Then any block that is built only using those "core" components would "just work" in the mobile apps.

Another interesting idea (courtesy of @hypest ) is to explore the possibility of essentially displaying each third-party block inside a small webview within the apps. We already do something similar to this with the unsupported block editor in the mobile apps, which allows users to open an "unsupported" block in a fullscreen webview for editing. I'm definitely concerned about performance and UX for this approach, but it is an interesting idea. Of course, this ties into your next question...

I'm also interested in knowing more about why mobile apps are not using the web-based version:

• Is it because of performance or is it because of UX?

UX is definitely an issue. The current mobile-web experience feels rough to me, but we're actually going to start devoting some of our mobile development resources to improving the mobile web experience in the near future (cc: @enejb ).

Even with a great mobile-web UX, mobile-web is still not as fluid and natural as a native mobile experience on Android and iOS imo, and many users prefer the native experience for that reason. I do think the gap between native and mobile web is continuing to narrow though, so I don't personally see this as a blocker necessarily, but it is a big consideration.

Providing mobile users with robust offline support is also a big concern I would have with moving to a web-based implementation. That feels like a tricky, but probably a solvable problem.

• If so, are there plans to stop implementing the native versions and use the web-based implementation if/when the performance and UX are good enough?

No plans at this time. We should definitely keep re-assessing the mobile-web vs native mobile experience though. I will be very happy if someday the mobile web experience got so good that it becomes hard to justify a separate native mobile implementation for blocks. 🙂

[luisherranz]

Thanks for the answer, Matt 🙂

One possibility that has been discussed is the idea of developing a set of low-level "core" React components that work on both web and mobile. Then any block that is built only using those "core" components would "just work" in the mobile apps.

You mean something similar to React Native Web, right?

It's an interesting approach. I haven't used RNW myself but I know that @c4rl0sbr4v0 tried to use it in his previous job without much luck. If I remember correctly, it worked great at first with simple stuff, but when they needed to do more complex things RNW didn't scale well. It was a few years ago, so maybe things have evolved and also blocks have a narrower scope than a full app. So I'm not saying it is a bad idea 🙂

There is another approach now, which is to use an AST compiler. This field is still quite new, but there are some people trying promising things, like https://mitosis.builder.io/?outputTab=reactNative.

we're actually going to start devoting some of our mobile development resources to improving the mobile web experience in the near future

That sounds awesome. Also, it'd be interesting to see if the gap between web and native is getting smaller from time to time, and nobody has better experience than you.

Because you mean improving the UX of the web-based block editor, is that correct?

Another interesting idea (courtesy of @hypest ) is to explore the possibility of essentially displaying each third-party block inside a small webview within the apps

I don't have experience embedding webviews in native apps, but how far can this approach go in terms of UX?

For example, would it be possible to have a native app that is using React Native for everything but instead of rendering the native version of the edit.js, it would render the web version using a webview? I mean, could that be achieved in a way that is 100% transparent for the user? If so, maybe that could be the simplest way forward.

I will be very happy if someday the mobile web experience got so good that it becomes hard to justify a separate native mobile implementation for blocks. 🙂

Me too! One day 😄