Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Getting Started With Fuse

DZone's Guide to

Getting Started With Fuse

Take a look at the features of the Fuse cross-platform framework and see how to get started with Windows or macOS in this quick tutorial.

· Mobile Zone ·
Free Resource

There are a plethora of tools when it comes to developing a cross-platform app from PhoneGap, Cordova to hybrid frameworks and Google’s Flutter. Moreover, this can knock you out if you are beginning to create the mobile apps. It makes it vital to have your kitty of options for cross-platform app development.

Fuse is a yet another platform to develop cross-platform mobile apps with JavaScript and UX Markup. It shares the category with React Native and NativeScript with a unique selling point as the provision of tools to help developers collaborate with designers or vice-versa in real time.

How Does It Work?

Fuse uses UX Markup, an XML-based language providing building blocks for UI. It allows you to specify how the components would behave while users interact with them, hence named "UX."
Fuse converts the UX Markup into native C++ code through Uno compiler. Then, the native platform tools like Android Studio and Xcode take the C++ code to compile the native app.

Let’s have a look at how to develop a mobile app with Fuse framework:

The Prerequisites

To get working started with Fuse, you need to download and install the correct installer for Windows or macOS. Also, there are Fuse plugins available for the text editors. Install one of them for your text editor. The Fuse plugins have goto definition, code completion, and app log view to make app development more convenient.

A basic understanding of HTML, CSS, and JavaScript is helpful though not necessary.

Features That Differentiate Fuse From Other Cross-Platform Frameworks

  • Multiple device previews: This helps developers and designers preview an app on various devices with different form factors. The only prerequisite is the development machine and devices must use the same wireless network.

  • Desktop preview: This allows you to preview the apps not only on the desktop but also on multiple viewports.

  • Preview App: Enables you to quickly preview your app through a client app for Android and iOS. You need to scan the QR code to open the app on as many devices as you want. The changes to the source code are reflected automatically on each of these devices.

Image title

The only downside of preview app is the custom Uno code, or third-party packages won't work as they do in the custom preview (the default app previewing way on any device). Also, it is recommended to use custom preview for geolocation, push and local notifications.

Performance

The performance of Fuse matches the pace with native as its UX Markup is compiled to the native UI. Also, the transitions, animations, and effects are defined in the markup itself to organize instructions like what to do when beforehand, like after pressing a button.

Fuse uses OpenGL ES for hardware-accelerated graphics performance. This aids in using different animations and effects at the same time without even affecting the UI performance and make Fuse an aptly suitable platform for mobile game development.

Code

The UX Markup of Fuse allows you to describe the component’s animations as soon as the user interacts with it. Let’s take an example of creating a button which can increase three times than its original size while being pressed. Fuse will take care of the transition length if not specified:

<Rectangle Width="150" Height="50" Fill="#bada55" Margin="10" CornerRadius="4">
  <WhilePressed>
      <Scale Factor="3" />
  </WhilePressed>
</Rectangle>

Moreover, the default text is supplied this way for a text field:

constructor(props) {
  super(props);
  this.state = { 
    text: 'Default Text'
  };
}

Fuse separates business logic from UI in a way, which is favorable to both developer and designer regarding collaboration. UX Markup is simple for designers to understand and enables them to work on it while developers handle the business logic.

Extendability

Fuse allows developers to use the same language that they use for all the other core classes and offers an excellent way to extend the native functionality. However, this requires you to have a basic understanding of using the native APIs in iOS and Android. You can also use a foreign code to implement the native functionality with Fuse's Uno. Currently, Uno only supports Java for Android and Objective-C for iOS. The resulting class is then exposed to call it from JavaScript.

Fuse enables you to extend native UI components for all the platforms being targeted by you. For instance, if you want to have a corresponding UI component for native tooltip control for Android, you can seamlessly implement it on Fuse.

Is Fuse Worth It?

It entirely depends on your use case. Fuse is a production-ready platform for state-of-the-art performance and incredible abilities to swiftly convert your idea into a working prototype. Mobile apps developed with Fuse possess excellent performance caliber and make developers and designers collaboration easy.

The only disadvantage is its community. Fuse is committed to open source but is still a small company and comes with professional paid plans, more geared for teams in the enterprise. If you are a mobile app development company, which develops apps on an on-going basis, then Fuse is a good option for you. However, lacks potential to attract independent developers who mostly use free plans.

Topics:
fuse ,cross platform development ,mobile ,mobile app development ,tutorial

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}