A Comprehensive Guide to Guidewire Jutro : If you are transitioning from React

The Guidewire Jutro Digital Platform (JDP) is an advanced development platform seamlessly integrated with Guidewire’s Cloud Platform and P&C core applications to cater superior user experience (UX). Jutro is a storybook library of components built in React, but specifically tailored to meet the needs of the Digital applications.

Let’s delve deeper to see which unique feature sets the Jutro Digital Platform apart from any conventional open source library.

Building blocks of Jutro components

Create a new component directory in the <application>/src/customer folder. In this directory you may create the following files:

• ComponentName.metadata.json5
• ComponentName.jsx
• ComponentName.message.js
• ComponentName.module.scss

Configuration steps of a custom jutro component :

1.Example of a custom(footer) component :

Example code snippet for imports

Example code snippet to validate metadata

2.Component Level Override :

Override content, property of metadata or message in resolver section will be dynamically replaced at run time.

Example code snippet for override

3.Component level Resolvers :

The Jutro framework has a mechanism called resolvers to bind static content in UI metadata(JSON) to dynamic content (JavaScript) at run-time. This mechanism bridges the gap between the JSON metadata and the JavaScript code. Jutro provides resolvers for resolving the following: className, callbacks, value, defaultValue etc. All resolvers can be defined as a map or a function. A resolver map provides the simplest way to define design time to run-time mapping.

Example code snippet for resolvers

4.Rendering custom javaScript components using metadata :

Finally override, resolvers and metadata are passed as arguments to renderContentFromMetadata( ) method.

Example code snippet

UI Metadata schema breakdown :

The UI presentation metadata is based on a JSON schema that includes the following types of objects -container, element, field, action, and iterable. You can configure these types and combine them when you are creating your metadata-driven UI. In Digital applications, these objects make up the metadata used to render pages, and screens.

Jutro UI Metadata vs React Jsx :

It’s important to understand how to write custom metadata to transform the figma wireframe into code using Jutro. In the beginning it might be challenging to understand ui metadata file which is one of the building blocks of jutro platform. Let’s take a simple example and understand how it compares with React component. The below visual representation (UI) could be achieved using both react and Jutro.

React Jsx Code Snippet (LHS) VS Jutro metadata (RHS) for above visual representation.

As we saw in above example the line of code is significantly higher in Jutro snippet compared to React, it’s important to understand how it’s relatable with the React code snippet as Jutro is built on top of React.

React element in depth :

Let’s take one step back and start with above example again. Whenever a React component gets called (rendering), under the hood React calls React.createElement() method, which returns the following object :

React Jsx code (LHS) & React.createElement() Object (RHS)

To further understand this we have to serialize the React code. For our above example code snippet, serialized code looks like following;

React JSX (LHS) & Serialized Code (RHS)

The serialized React code generates similar tree structure as the Jutro metadata. following is a visual comparison between serialized React code(LHS) and Jutro metadata(RHS) to create the same visual (UI) representation.

Conclusion :

For Enterprise Engage Applications if you are transitioning from React, this might help to understand the metadata file better however it is not recommended to create metadata(ComponentName.metadata.json5) file for latest version of JDP(Jutro development platform).