Sitecore JSS Copilot - Design to code vs Legacy code conversion
- Sridharan Padmanabhan
- Dec 3, 2024
- 3 min read
Updated: Dec 13, 2024
The JSS Copilot project is an AI-powered tool for Sitecore developers, leveraging the power of Generative AI to streamline the process of creating Sitecore JSS components. It offers two primary functionalities:
Design-to-Code Conversion: Transform any design, screenshot, or wireframe into a fully functional Sitecore JSS component (Nextjs/TypeScript) in seconds.
Legacy Code Conversion: Convert traditional Sitecore MVC or SXA Scriban components into modern Sitecore JSS components (Nextjs).
Design to code -
Conversion of screenshot/wireframe to Next.JS code using the JSS Copilot tool.
Depending on the given screenshot, the JSS Copilot will generate the JavaScript (TypeScript), and Styling (CSS) files needed for the component.
When code generation is completed, you can use the inline “Preview” feature on the code generation screen to preview the component that was created using the screenshot provided.
You can choose between Tailwind, CSS or Styled components as your preferred styling.
The following sections contain details about the screenshot used, and the results generated from the JSS Copilot.
I have selected Tailwind as my styling, based on the screenshot provided in this example, JSS copilot generated the following files to design the component -
ContactForm.tsx - Sub-component with inner elements (Form fields and titles)
SitecoreContactFormComponent.tsx - Enclosing parent component with the details banner and the ClaimPortal.tsx sub-component.
Screenshot used:
Result derived from JSS copilot as-is -
2. Legacy code conversion –
Conversion of MVC razor view/SXA Scriban/Rendering contents resolver to Next.JS code using the JSS Copilot tool.
Select the code’s framework from the drop down and paste the code in the editor.
Depending on the given code, the JSS Copilot will generate the TypeScript file for the component.
Screenshot of the component derived from the Razor view code
Code output derived from JSS copilot as-is -
The code consists of
logic to propagate Sitecore data source fields as component props to the next.JS Component.
Code to utilize data source fields as props of the component on the resulting DOM
Result derived from Sitecore JSS (After copying styling from legacy solution):
In most cases, MVC razor code does not have clear design definitions. The design definitions are provided in a global CSS file, which is a part of the original MVC application.
This CSS file would need to be incorporated manually into the Next.js application to ensure that it replicates the expected output in terms of functionality and appearance.
In conclusion, this approach effectively resolves the issue of missing design definitions in the resulting Next.JS component.
Design to code vs Legacy Code conversion
Design to Code
Logic Accuracy | 50% |
Design Accuracy | 90% |
Comments | Since screenshots or wireframes are not prototypes, only presentation layer is generated by the tool. Business/functional logic and certain refinements to design elements would be required. |
Legacy Code Conversion
Logic Accuracy | 90% |
Design Accuracy | 50% |
Comments | Since the MVC razor code does not have clear design definitions, the resulting code does not contain clear design elements. Designs and certain refinements on business logic would need to be taken care of. |
Inferences:
Design to code would be the ideal approach for components that are primarily presentation oriented. For example, a banner with a simple title, background image, and description would be an ideal example of a presentation-only component.
This generates components, sub-components (if any) as well as designs (CSS) for the component as part of the conversion.
Legacy Code conversion would be the ideal approach for components that have functionalities associated with them. For example, a CTA that opens a pop-up or a cart-related feature.
This generates the JavaScript (next.JS) code for the component, including any inline styling that is available in the Razor code. Any external styling utilized by the component would need to be integrated separately.
Comments