9

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

2
  • I'm have worked on two sitecore projects that have a react frontend. One of the problems JSS is solving is experience editor support. React renders the html using JS and as such you cant easily do the normal @Edtiable() stuff to make the experience editor work. JSS decouples the CMS from the code/application so sitecore can run as a headless CMS with full experience editor support. My question would be is it mature enough to start building with now
    – JKerny
    Feb 21, 2018 at 6:41
  • for those as confused as me - FED = "FrontvEnd Dev", BED = "Back End Dev"
    – JGilmartin
    Feb 23, 2018 at 17:46

2 Answers 2

14

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.

4
  • 4
    Some really useful info here guys. I wrote a blog post on getting started with JSS last week so you might find that useful to get it up and running quickly locally: flux-digital.com/blog/getting-started-sitecore-jss Feb 21, 2018 at 12:37
  • So now FED needs to know Sitecore as well?
    – Nil Pun
    Feb 23, 2018 at 20:46
  • @NilPun JSS was build for allowing front end developers been fully decoupled from Sitecore. And the main idea is a frontend developer may not know the Sitecore. But in practice, FED need to understand a data structure in Sitecore: what is template and how it is stored, what is rendering, what is Placeholder Settings and so on. Feb 23, 2018 at 20:55
  • @NilPun Let me know if you have more questions. Feb 23, 2018 at 21:17
5

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.