WaveMaker Prefabs – A Primer

What are Prefabs?
In WaveMaker Studio, you would have noticed this unassuming group of components that are stashed in the Design-Toolbox accordion and contains components like Youtube, Google-Maps and Fb post under it.(Fig-1).  These group of widgets are called Prefabs.

But what are they?  What’s their purpose of existence? These are exactly the kind of questions that we will try to answer in this post.

At a very basic level,  Prefab is nothing but an application.  Like an application, you can develop, test, and deploy these Prefabs independently.  Users can stack up a group of Prefabs and build a new app.  Prefabs typically represent a small independent logical business need of the enterprise app (a micro app).  For example, an Event Management Prefab.

How are Prefabs structured?
Structurally a Prefab is like any other WaveMaker app containing a UI layer for presentation, a backend layer representing the business logic, and a REST API layer between them for communication.  (see Fig-2)

For example, the Fb post-Prefab, provided by default in WaveMaker Studio,  has a UI layer, wherein it accepts inputs from the user to post a message into the user’s Facebook wall, passes on these user inputs through REST APIs to the backend business logic, which communicates with the Facebook server to post the message.

Prefabs fosters the concept of reuse

I have already explained how Prefabs are just micro-applications that can represent an independent business logic like Event-Management.  But in explaining that one important point would have got lost, if not for this section on reuse.  This Event-Management Prefab once created can be re-used across any apps within an enterprise.  This concept of REUSE is a very powerful one and is often not given its due share of importance in an application building process.

Prefabs abstract API consumption complexity
Prefabs are essential tools in abstracting the complexity associated with API consumption and saving a lot of time.  Business developers in an enterprise usually find it difficult to understand the intricacies of the APIs because of the technical nature of its existence.  In the example above, instead of using a Fb post Prefab, if the user had to directly work with the Facebook APIs, then that immediately increases the complexity associated with the task manifold.  API complexities range from understanding technologies like OAUTH for authentication to understanding the semantics associated with APIs themselves.  But what if these complexities are abstracted and presented as simple intuitive UI components? …that is exactly what a Prefab does.  Of course, there is a one-time effort in creating the Prefab itself, but WaveMaker envisions an app and Prefab marketplace where these common utility Prefabs can be just got out of the box and integrated into the app.

Prefabs to assemble your apps
Composable Enterprise, a concept where the applications are built based on the composition of decoupled services to achieve higher levels of agility, is a concept that is gaining prominence.  You can learn more about the composable enterprise model in this blog written by Jonathan Murray, EVP and Chief Technology Officer of Warner Music Group.  WaveMaker uses a Prefab to ease the process of building composable apps.

In WaveMaker, Prefabs are used like any other UI widget.  All that user has to do is drag and drop these Prefabs onto the canvas.  Prefabs use their REST API layer to communicate with the parent app (see Fig-3).  Applications can be built as stackable layers of Prefabs.

And finally, when an application gets deployed, WaveMaker resolves all the Prefab dependencies of the app and deploys the app as one single component into a Docker container as shown in Fig-4.

All the REST APIs in the Prefab can also be published for sharing and consumption by other apps.  This is similar to the design and sharing of APIs in an app and is done using API Designer.  If you are interested you can read my earlier blog post that talks about the capabilities of the API designer in detail.

Prefabs to integrate 3rd party widgets
Prefabs are powerful tools for extending the capabilities of the WaveMaker Studio.  Whenever the developer feels that a particular widget, available externally,  is not available natively in the WaveMaker Studio library, he or she can immediately integrate that external 3rd party widget into the WaveMaker Studio library using Prefabs.  Prefabs in a way extend the capabilities of the studio through this approach.  In one of my earlier blogs, I had explained in detail how you can integrate an external 3rd party Jquery widget.

Prefabs as Microservices [#]
Microservices (MSA) is a new (yet another!) software development architecture, which is gaining prominence.  In this approach, a bigger app is built as a composition of small decoupled services, called Microservices, which typically represents an independent business need.  These micro-apps are connected together by APIs (primarily HTTP/REST APIs) to build a bigger app.  These Microservices also have technical characteristics that include independent testability, deployability, and upgradeability. For a more detailed explanation of MSA, you can check out Martin Fowler’s article on Microservices here.

By now you would have noticed that Prefabs perfectly fit into the definition of a Microservice as defined above, word for word. As WaveMaker takes its next step into the future to enable Microservice-based apps, Prefabs will play a significant role to ease the process of creating and deploying MSA-based apps.

Check out the sample reference architecture (Fig-5) of an MSA app created using WaveMaker and Prefabs deployed into separate Docker containers in WaveMaker Cloud platform.

Prefabs ecosystem [#]
Prefab is a great utility for achieving modularity, reusability, and abstracting complexity in WaveMaker,  but it’s not free lunch either.  There is a one-time effort that is involved in creating a Prefab before the user and the enterprise can reap its benefits.  But to even reduce this one-time creation step, a simple effective utility, which has revolutionized the way in which people consume services in this digital world, can be used.  This utility is called a MarketPlace or an AppStore.  Once an ecosystem of the commonly used Prefabs and apps is established, the consumption of these Prefabs will be as easy as discovering the Prefabs in the AppStore and integrating it into your app.

Check out the below image that captures the overall prefabs usage succinctly.

Prefabs can be quite a powerful tool if used strategically and can make the concept of composable enterprise come true very easily.  Excited to try Prefabs? Create your WaveMaker app now!

[#] – Planned for future releases