--- title: Moving from SiteGenesis and SFRA to Composable Storefront canonical_url: >- https://rhino-inquisitor.com/the-move-from-sitegenesis-and-sfra-to-the-composable-storefront-as-a-developer/ markdown_url: >- https://rhino-inquisitor.com/the-move-from-sitegenesis-and-sfra-to-the-composable-storefront-as-a-developer/index.md content_type: article site_name: Rhino Inquisitor date: '2023-12-25T13:46:42Z' lastmod: '2023-12-25T13:46:42Z' description: >- 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 author: Thomas Theunen categories: - Salesforce Commerce Cloud - Technical tags: - composable storefront - react - sfcc - technical --- ## Key Takeaways - Frames the move from SiteGenesis or SFRA to the composable storefront as a skills expansion rather than a full reset for SFCC developers - Highlights which existing JavaScript, commerce, and Commerce Cloud knowledge transfers well into React and PWA Kit work - Curates practical starting points for developers who want to begin learning the composable storefront stack 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](/sitegenesis-vs-sfra-vs-pwa/) 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](https://blog.risingstack.com/the-history-of-react-js-on-a-timeline/) 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](https://www.digitalcommerce360.com/2020/09/09/salesforce-agrees-to-buy-headless-commerce-tech-firm-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](/sitegenesis-vs-sfra-vs-pwa/). ## Transferrable Skills ![Illustration of a game controller and brain symbolizing transferable developer knowledge.](/the-move-from-sitegenesis-and-sfra-to-the-composable-storefront-as-a-developer/use-your-knowledge-98ac47c97d_hu_e9fc0b20cc811a36.webp) Skills built on SiteGenesis and SFRA — catalog, pricing, promotions, OCAPI — remain fully relevant in the Composable Storefront. ### 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](https://react.dev/reference/react/memo#skipping-re-rendering-when-props-are-unchanged) 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](/should-i-get-javascript-developer-i-certified/) 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.](/the-move-from-sitegenesis-and-sfra-to-the-composable-storefront-as-a-developer/commerce-cloud-as-a-building-16b551ef15_hu_b3349ae6afc26457.webp) B2C Commerce Cloud is still the back-end engine: the Composable Storefront changes the front door, not the foundation. A deep [understanding](/the-b2c-commerce-architect-certification/) 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: - [SFCC Architecture Explained](https://www.salesforceben.com/salesforce-b2c-commerce-cloud-architecture-explained/) - [The SFCC Environment](/the-salesforce-b2c-commerce-cloud-environment/) - [How to use OCAPI/SCAPI Hooks](/how-to-use-ocapi-scapi-hooks/) - [What is the OCAPI Session Bridge](/what-is-the-ocapi-session-bridge/) - [How to set up SLAS](/how-to-set-up-slas-for-the-composable-storefront/) ## Where to get started ![Books with documentation scattered on multiple piles, falling over.](/the-move-from-sitegenesis-and-sfra-to-the-composable-storefront-as-a-developer/documents-on-multiple-locations-5bb9c96f2b_hu_5bc0c01f94ded8b6.webp) Getting started with PWA Kit requires navigating docs spread across Salesforce Help, developer.salesforce.com, and GitHub. 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: - [Skills for Success](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/skills-for-success.html) - [Getting Started](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/getting-started.html) - [Community!!!!](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/community.html)