3 reasons why... :O!

General
1

Welcome to your tape…

Hi guys, I truly believe in native fuse integration so I just want to share the reasons why my team has to go fully native for the last project (:

Reason 1
Workflow feels broken
  1. Test view using Fuse Studio in a common UX
<App>
   <FilesView />
</App>
  1. When is ready, compile but first change the UX :S
<App>
   <ExportedViews>
       <FilesView ux:Template="FilesView" />
   </ExportedViews>
</App>
  1. So is compiled!! yay!.. BUT now copy the aar file to native project, clean and rebuild. (This is automated using a shell script).

As you can see it’s a pain to make a simple change, the good thing is that the workflow could improve a lot just by using common UX to export the Fuse.View

 

Reason 2
Buggy NativeViewHost

As far as I know Fuse.Views wraps the content in a NativeViewHost to get a native feeling, that’s great!

And here is when I say “but” … but NativeViewHost isn’t production ready. For example in Android doesn’t show images and the Element Alignment works differently. I’m working with Fuse 1.5(build 15046) idk if this is fixed in fuselibs-master. Later I’ll post a minimal reproduction.

 

Reason 3
Invoke a JS function from native

Actually Fuse.Views has 3 methods to Interop between native and fuse, setDataJSON, setDataString and setCallback. How can I trigger a JS function from native?

Cheers! And thanks for a great tool.

 

TL;DR Broken workflow, buggy NativeViewHost and missing interop method between JS and native.

EDIT: Not fully markdown emoji support :slightly_frowning_face:

2

Thanks for the detailed feedback!

We definitely agree that the workflow with Fuse Views would benefit from some improvements - especially around how it’s integrated into the native app. However, let’s dive into your points for some more detail. :slight_smile:

1.

You actually don’t need to change your UX between the design/testing and export phases.
Consider this:

	<DockPanel>
		<!-- I use this to flag my exports -->
		<ExportedViews>
			<FilesView ux:Template="fw"/>
		</ExportedViews>

		<!-- And here I test my stuff at dev / design-time -->
		<FilesView />
	</DockPanel>

<ExportedViews> and any templates it contains will be ignored during normal preview and build.

Of course, the manual copying of files and so on is still not ideal (we’d like to automate it at some point and perhaps even give you real-time preview after the component has been integrated into your app) but as you mentioned it can to some extent be scripted for now.

2.

  • In general Images should work on Android. However, there are some combinations of stretch modes and layout that might bug. It’d be good to see some UX markup for the cases that don’t work for you.
  • We use the same layout engine inside NativeViewHost as everywhere else so Element alignment should be the same. If you can provide some example of where it isn’t then that’d be great!

But yes, as you’ve noticed there are definitely areas where the NativeViewHost experience isn’t good enough. We’re working to improve that so any hints and bug reports are helpful.

If it works for your use case then you can of course also build your custom components using <GraphicsView>. In that case you’ll get the normal Fuse cross-platform UI even when exporting Fuse Views. :slight_smile: (There might be some performance penalties when using this on Android though, but it’s definitely worth testing out).

3.

Yes, Fuse Views are explicitly designed so that the components you build can receive data from and call back to native code.

Can you provide some more info on the use case you want to solve by calling “into” the Fuse components JS? Hopefully we can work out some other way of handling it. :slight_smile:

3

Thanks Remi for your kind answer.

  1. That workaround it’s super useful, thanks!

  2. The problem with android images happens when I used them inside any trigger. Doesn’t show the image.

        <WhileTrue Value="true">
        <Image File="Assets/empty_state.png" Opacity="0.7"/>
    </WhileTrue>

About the alignment issue, I’m seeing that it’s actually a custom font problem, here is a minimal reproduction.

<App>
        <NativeViewHost>
            <Circle Fill="#EF4836" Width="40" Height="40" Alignment="Center">
                <!--Image File="../Assets/icon_delete.png" Width="14" Color="#fff" Alignment="Center" /--> 
                <Text Value="X" Alignment="TopCenter" TextColor="#fff" FontSize="20" Font="Comfortaa" />
            </Circle>
        </NativeViewHost>
</App>


 
 

3, The problem I try to solve it’s to push an element to an Observable List from native.
This can be accomplished using the current native methods but it feels a little bit wrong dealing with the same data in both native and Fuse.

Cheers :slight_smile:

4

Hi!

Thank you for your feedback, its very helpful.

The <Image /> inside a trigger issue sounds like a bug. I will look into that.

I dont think there are any easy ways to fix the text alignment issue, as you said yourself its due to the font. And when using <Text /> inside a <NativeViewHost /> you get android’s native text view which does the measuring of the string. Maybe an alternative is creating this with shapes or make png assets.