If you’ve done any Salesforce Commerce Cloud development in the past then you undoubtedly know of Site Genesis JavaScript Controllers (SGJC) and Pipelines. Pipelines (and later SGJC) were the building blocks of developing for Commerce Cloud and were basically in charge of the flow of actions a route does. Each route consisted of a controller name and action, so for example, if you hit up www.my-store-site.com/Home-Show you were basically hitting the Home controller (Home.js) and within it — the action Show:
The default show function from the Home controller
If you wanted to extend the action or add new functionality to it — you had to edit the controller itself (usually in the base cartridge). This, as you can probably guess, would cause issues if SFCC updated the controller in a later version — and your changes no longer work.
Another issue you might have had is with using Eclipse. What if you wanted to use your own IDE in an environment you are already familiar? You might be able to find some third party solutions for that — but nothing official from Salesforce themselves.
About a year ago Salesforce introduced Storefront Reference Architecture (SFRA) and made things much — MUCH — easier for us developers. If you are coming from a Node JS background — you are in luck! SFRA uses a modern JavaScript approach very similar to Node’s ExpressJS and other similar frameworks. Using this approach we no longer need to edit controllers we wish to add functionality to. In fact, we can now completely override them if we so choose. We do not have to use Eclipse anymore (unless you want to) and we are free to use any IDE we want. All the interaction with SFCC services (uploading a cartridge, etc.) is done using NPM and NodeJS.
SFRA is cartridge-based, meaning — everything is essentially a cartridge.
A typical cartridge stack
SFRA uses controllers and viewmodels in order to render a view. The controllers handle data from the user (say a search query) then creates a viewmodel which requests the data from SFCC in the form of pure JSON and passes that info forward to render the page/template.
yap, I’m not a designer by any means
This pattern is very similar to the Model-View-Controller pattern and you can read up some more about on Wikipedia.
If you are coming from SGJC, you should be aware that OnRequest and OnSession event handlers that were supported in SGJC are not (directly) used in SFRA. We will go into more details about this change in a future post, but in short, SFRA will only support onSession and onRequest as a hook, which means it won't have access to the request and response objects.
Now that you have a general idea of what SFRA is, check out the remaining 10 days:
As always, looking forward to your comments either here or on Twitter 😎