June 18, 2021

A guide to WaveMaker low-code prefab

Customizable, composable, and reusable software components built on WaveMaker

In the construction world, prefabrication is a pre-built functional unit constructed at a factory which is then assembled along with other units at the construction site. In the software world, a reusable software component follows the same factory model. Build it, customize it, retrofit it, and then just place it like a Lego building block wherever it is applicable. In the WaveMaker world, we call these components ‘Prefabs’.

‘Prefabs’ are the building blocks that enable composable architecture through WaveMaker. These groups of components are composed in the Design Toolbox within the WaveMaker Studio. Enterprises can create their own prefab repository using more than 100 + widgets readily available in the studio. Prefabs can be combined together to create user journeys and meaningful experiences in the digital journey. These experiences can be reused and embedded into any application for any use case. The prefab repository, in turn, can act like an app store for all the developers in that organization.

Prefabs as building blocks

Within the WaveMaker studio, “Prefabs” are customizable, reusable, distributable, and independently testable components/widgets that help in accelerating digital app development. Similar to an application, prefabs have their own development cycle – a prefab is developed, tested, and deployed independently. Additionally, it can be retrofitted to suit varying business scenarios and can be repurposed for multiple use cases. In fusion teams, Prefabs can be created by developers and can be consumed by non-developers (business users and citizen developers) to exponentially accelerate development. WaveMaker users can just gather (drag and drop) the necessary prefabs from the enterprise repository and then compose an entirely new application with the centralized built-in modules.

Prefabs typically represent a small independent logical business need of the enterprise app (a micro app), for instance, an ‘Event Management Prefab’ or a ‘Location Indicator Prefab’.


The structure of prefabs

Structurally a prefab consists of three important elements.

  • A UI layer for presentation (client-side logic).
  • A backend layer representing the business logic.
  • A REST API layer between them for communication.

The UI layer in itself can be composed of multiple widgets available in the WaveMaker repository which are bound to the corresponding backend services repository. A prefab, just like any other widget exposes its properties, methods, and events which can be configured or invoked respectively. Once created, all the user needs to do is drag and drop it into the application. The developer can then customize it further if the use case demands. In some cases, prefabs can be used only as a UI component with no APIs involved.

Let’s take the FB post (FaceBook) prefab (provided as default) in WaveMaker studio as an example. This prefab has a UI layer that is used to accept inputs from the user. The inputs are posted as a message on the user’s FB wall. The message, in turn, is sent through REST APIs to the backend business logic which communicates with the Facebook server to post the message. Once created, the same prefab can then be reused across any application within an enterprise for the same use case.

Reducing API complexities -reduce, reuse, recycle

A prefab is also a powerful way to abstract the many layers of complexity associated with API consumption. Consider talking to OAuth authentication, comprehending signature, parameters, security, and understanding the syntax and semantics- a lot of which can be overwhelming for application builders, especially those from a non-development background.

A prefab makes the job easier by abstracting these complexities and providing a simple interface to the user. For instance, if not for the FB post prefab, one would have to directly connect to the Facebook API, increasing complexity and time for development. Instead, all the developer needs to do is drag and drop the FB post prefab and then bind the necessary data to it. With this ready-to-use prefab, the complexities of the API layer are abstracted and presented in the form of UI components that can be further consumed by exposed properties, methods, and events.

What’s more, an enterprise can create a custom prefabs repository with a standardized look and feel that can be reused across applications that are built in the WaveMaker ecosystem.

Customization is not restricted to internally available widgets. If one needs to use a third-party widget, all that the user needs to do is to import the widget’s necessary files into the platform and bind them to a UI element thus masking it in the form of a prefab. Developers can leverage extended features of external widgets, or build an entirely new UI element by integrating with 3rd party libraries. The ability to create prefabs and to take a component-based approach helps slash development times and promote reusability among remote teams.

Composable architecture through prefabs

Disaggregate and aggregate. That is the idea behind composable architecture. Disaggregate into simpler business components across your development platform and aggregate only the ones that you need to build your application. Breaking down the complexities of an application into its business components and then composing new applications with relevant components leads to delivering new functionalities faster for business users, customers, and all stakeholders.

It is all ‘Plug and Play’.

Prefabs in WaveMaker enable composable architecture by allowing users to drag and drop custom business components onto a larger application canvas and integrate them with their respective REST APIs. Applications can then be built as stackable layers of prefabs. In fact, a prefab can contain another prefab thereby creating a tier of layered apps. All the REST APIS in the prefab can also be published for sharing and consumption by other applications. During application deployment, WaveMaker resolves all prefab dependencies and deploys the app as one single component into a Docker container. As the application and its needs grow, development teams can cater to that growth by adding or reusing corresponding prefabs providing further scalability.

How to use prefabs

  • Prefabs can be implemented in the form of widget extensions by extending 3rd party JS libraries or UI widgets. For instance, the world map chart can be integrated into a covid portal showcase app using chart libraries.
  • Customize prefabs by integrating API-enabled components with any WaveMaker UI component to create a unified component. For example, a Text Box widget with DocuSign or a List widget with Google Maps.
  • Combine prefabs to create user journeys that can be embedded as experiences into any application.
  • Implement Prefabs as reusable backend services built by leveraging 3rd party Java libraries like in the case of JasperReports

Prefabs can be published solely for an application (application repository), in the general artifact repository of an enterprise, or for public consumption on the WaveMaker platform (requiring admin approval). Popular prefabs like YouTube, GoogleMaps, Docusign, and QRCode ship with WaveMaker. Additionally, OAuth services for Facebook, LinkedIn, Instagram are rendered through prefabs on the WaveMaker platform. A similar repository for WaveMaker Online is currently being developed.

A multitude of benefits follows the usage of prefabs. Reusability, encapsulation of functionality, scalability, speed of composition, building blocks of composable architecture, and consistent quality are some of the given advantages. WaveMaker customers, especially ISVs and core software builders use prefabs for easy customization and faster implementations.

In the banking & financial software world, prefabs can be domain-specific and an extremely crucial asset to deliver differentiated brand experiences to banking customers. Imagine just having to drag and drop an entire workflow or process in the form of a widget from a central repository of banking components. One that can be customized and rendered based on locale, style, and brand. WaveMaker customers use prefabs to create custom-made banking solutions for their clients. For instance, general workflows such as loan repayment, account management, transaction management, and user management are developed as prefabs in their enterprise repository which can then be retrofitted into custom banking solutions.

Prefabs enable composable architecture, faster go-to-market, and hyper customization. At WaveMaker, we understand the dynamics of the market in terms of the need for speed and differentiated brand experiences. Continuous enrichment of our prefabs repository is a consolidation of our efforts in enabling enterprises and core software builders across the globe.