How does Sitecore JSS impact backend Sitecore development process

Question

Context:

Currently we use Angular JS but our front end team wants to use reactJS as strategic platform. Until Sitecore JSS came out; I had been telling them that Sitecore doesn't support it.

I read this https://jss.sitecore.net/#/sitecore-net-dev?id=for-sitecore-net-developers but still unsure, how Sitecore JSS SDK will impact on how Sitecore backend develops components.

Below is how we develop Sitecore and front end components.

1. FED creates the mark up on their prototype solution with related Angular JS,SASS,CSS and HTML etc.
2. BED creates MVC controller, actions, glass mapper API and razor views.
3. Once FED completes, we have gulp task which copies the CSS/JS/Images etc from front end prototype to sitecore MVC solution.
4. BED then copies the mark up from prototype solution to razor view and injects the C# objects etc. And makes experience editor compatible.
5. BED also creates sitecore templates, layouts, Controller Renderings and items.
6. Front end components gets/posts data using Ajax.

I'm not a front end developer and have very limited knowledge on ReactJS. Reading at JSS documentation, sounds like we need to do LOTS more then above but not sure exactly what. I don't see any benefit of using JSS. Also looks like BED now needs to know ReactJS?

Appreciate if someone can clarify steps required for both Front End and Backend perspective.

Abbreviations:

FED = Front-end Developer BED = Back-end Developer

Answer 1

JSS provides a bit different process than you currently work with Angular JS. JSS is a playground of Frontend developer (FED) and rendering of components is always preformed by NodeJS engine. I mean that you no longer need to copy markup from prototype solution to razor view and inject the C# objects, etc.

In general, there are two approaches working with JSS: Code First and Sitecore First.

In case of using the Code First approach, FED defines Sitecore structures in the "prototype project" via in-code component definitions and route data. Sitecore IA (templates, renderings, etc.) is generated via the import process. In other words,

• FED creates components (Rendering items would be created based on them during deployment to the Sitecore process);
• FED defines contracts (js object with preperties that is used as source for comeponents; Datasource template items would be created in Sitecore based on them).
• FED creates routes for defined "Pages", which would be created in Sitecore (content items with presentation).

In case of using the Sitecore First approach, Sitecore IA (templates, renderings (empty), etc) are created by the Sitecore developer. FED creates components and mocks route data based on spec/contract provided by BED.

But anyway, creating the components (renderings) and rendering on the page is entirely FED responsibility.

BED works only with Sitecore IA (if Sitecore First is used), extends the context data (https://jss.sitecore.net/#/cookbook/recipes/layoutservice-extending-context), manages the rendering serialization precess (https://jss.sitecore.net/#/cookbook/recipes/layoutservice-rendering-contents) and so on.

And to answer your last question, BED does not need to know the ReactJS.

JSS looks like a magic, but there is nothing really difficult. I recommend you to set up JSS locally and see how it works.

Answer 2

There's a basic sample angular sample you can take a look at if you wanted to maintain using Angular.

If you choose the code first approach I recommend showing the front-end team a few things in Sitecore e.g. placeholders settings and the use of the experience editor to help them understand the data structure they will need to work with.

The example taken from the JSS documentation:-

{
  name: 'home',
  displayName: 'Home',
  placeholders: {
    main: [
      {
        componentName: 'Welcome',
        fields: {
          title: {
            value: 'Sitecore Experience Platform + JSS',
          },
          text: {
            value: '<p>...</p>',
          },
          logoImage: {
            value: {
              src: '/assets/img/sc_logo.png',
              alt: 'Logo'
            },
          },
        }
      }
    ]
  }
}

Hope this adds to the above answer.