The move from SiteGenesis and SFRA to the Composable Storefront as a developer

As a Salesforce B2C Commerce Cloud developer (starter or experienced), expanding your skill set and exploring new technologies is part of the job – it all moves quickly.¬†One option that has become available in Salesforce B2C Commerce Cloud is React.JS, a JavaScript library for building user interfaces (maybe a Headless Storefront? ūüôā).¬†

In this article, we will discuss the history of React.JS and the Salesforce PWA Kit, the transferable skills from SiteGenesis/SFRA to React.JS, and resources for getting started with learning this technology.

A history lesson

React.JS was first released in 2013 by Facebook and has since become one of the most popular front-end development tools in the industry. The library is based on the concept of reusable components, which allows developers to build complex user interfaces by breaking them down into smaller, manageable pieces. This approach promotes code reusability and makes it easier to reason about the structure of a user interface.

React.JS quickly gained traction in the development community and has been adopted by many companies. Its popularity can be attributed to its ability to handle complex use cases, high performance, and ease of use.

Salesforce (well … the Mobify team ) saw the potential in React.JS and decided to create the Salesforce Composable Storefront. The Salesforce Composable Storefront, or PWA Kit, is an open-source toolkit that can be used to create PWAs using React.JS and SFCC APIs. This toolkit empowers developers to use the power of React.JS to create fast, responsive and engaging customer experiences for the Salesforce Commerce Cloud platform.¬†

Transferrable Skills

A visual representation of playing with your developer knowledge, and using it to your advantage. The image shows you using your hands with a controller to use your brain.

Development (Duh...)

As a SiteGenesis/SFRA developer, you are already familiar with native JavaScript and have a distinct advantage when learning React. JavaScript is the foundation of React.JS, and a solid understanding of the language will make it easier for you to understand and work with the library.

One of the significant advantages of knowing native JavaScript is understanding how the underlying code works. This can be extremely useful when debugging and troubleshooting issues when working with React. Knowing JavaScript will give you more flexibility and control over your code, allowing you to optimise it for performance and scalability. (But React has its quirks and behaviours that you must also dig into!)

Knowing native JavaScript can also give you a better understanding of the web development ecosystem. This knowledge will help you make informed decisions about your tools and technologies and how they interact.

Taking the JavaScript Developer I certification is not such a bad idea, right?

Commerce

As a Salesforce B2C Commerce Cloud developer, you likely deeply understand how Commerce works. This knowledge can be transferable even when changing development languages (and platforms architectures).

When building Commerce applications, certain fundamental concepts remain consistent regardless of the technology stack used. Understanding the flow of products, inventory management, customer data, and order fulfilment are all key concepts that apply regardless of the development language or framework used.

Your understanding of business processes and the customer journey is valuable in designing and building user interfaces that provide a seamless experience for customers. Also, your knowledge of best practices and industry standards can be helpful.

For example, understanding the importance of accessibility, SEO, and performance optimisation can help you to make informed decisions when building different channels.

Commerce Cloud

A person walking towards an office building with a Salesforce like logo and "Commerce Cloud" written above the entrance.

A deep understanding of how Commerce Cloud functions in online and offline environments is vital. Furthermore, proficiency in utilising the platform is equally essential to succeed.

Here are some articles that might come in handy:

Where to get started

Books with documentation scattered on multiple piles, falling over.

If you’re a regular reader of my articles, you probably know by now that I’m not a fan of reinventing the wheel or regurgitating something already done. I like to keep things fresh, like a smoothie made with the season’s best fruits.

So, kudos to the Salesforce team for providing some tremendous getting-started documentation:

react-js

Table of Contents

Facebook
Twitter
LinkedIn