sitecore jss – My Sitecore Blog

November 12, 2019 Tony Mamedbekov sitecore sxa, SitecoreJSS

What is the difference between Sitecore SXA and Sitecore JSS

There has been many questions during the Sitecore Symposium and it seem that people are confused and do not know the difference Sitecore SXA and Sitecore JSS.

So I will try to explain the difference between the two and when would you use either one of those.

First let’s try to define the two:

Sitecore SXA

The Sitecore^® Experience Accelerator provides reusable, templated UX layouts and components to help you get up and running quickly.

Sitecore JSS

Sitecore JavaScript Services (JSS) is a complete SDK for JavaScript developers that enables you to build full-fledged solutions using Sitecore and modern JavaScript UI libraries and frameworks.

So Sitecore JSS is an SDK and Sitecore SXA is set of prebuilt components, templates and layouts.

Sitecore SXA will help you easily change page components using drag-and-drop functionality. Reuse pre-built components, templates, and layouts. Help your content teams create, edit, and deploy web content across channels in less time using fewer resources with the intuitive tools included.

Sitecore JSS will give you freedom to build headless sitecore applications, and continue using the Experience Editor and will let you use all of the Marketing Tools that Sitecore Experience Platform has to offer.

How each one of those is render?

Sitecore JSS works with using JavaScript (Node.js)

Sitecore SXA is working with MVC Renderings

So when you should utilize either one of those?

Since I am a big fan of Sitecore JSS I will recommend you to start with Sitecore JSS, and here is why:

Sitecore JSS is a completed SDK for JavaScript Developers
You can start your development without having Sitecore installed, which means your developers will not tell you that they are busy by installing Sitecore instance, they will start working on the application, which is referred to as Code-first Workflow
You would like to run your front end app on Linux, to save some cost
You want to decouple, and you want your Marketing Team to keep Sitecore Marketing Tools such as, A/B Testing, Analytics, Personalization etc.
You are looking for create a headless application
- You want to build a PWA
- You want to build an app for wearable device, IOT device, Kiosk and you want to manage it all from one place, and personalize all your Omni Channels.
- You can choose between React, Angular, VUE, React Native and Svelte (not officially supported by Sitecore)

If you believe that none of this is any of the interest to you, then here is why you should use SXA:

Sitecore SXA is a component that needs to be installed on top of Sitecore
Toolbox – You have prebuilt components and layouts that you can reuse

So by now I hope you understand the different between the two, they are not competing against each other, because they are completely different ways of constructing websites.

One of them allows you to use Toolbox with prebuilt components, the other ones allows you to build a front end application that runs on NodeJS.

photo used: https://unsplash.com/@bdchu614

October 28, 2019October 28, 2019 Tony Mamedbekov Headless, SitecoreJSS

Headless Sitecore Commerce with Sitecore JSS – Part 2

In Part one https://mysitecore.blog/2019/09/27/wooli-headless-commerce-with-sitecore-jss-part-1/ we have covered how to install the Headless Sitecore Commerce Accelerator/StarterKit.

In part 2 I would like to cover how does Sitecore Commerce work with Sitecore JSS.

First let’s cover the communication from Storefront to the Sitecore with the help of the layout service we are able to display all the content as well as the placeholders.

So static data is coming from the layout service and as you can see on the screenshot above we are able expand our Inspector and see the details.

Next lets go ahead and explore the items that are in the store, when we visit the site the request is being made to the retrieve /shop/Phones

sitecore/api/layout/render/jss?item=%2Fshop%2FPhones&sc_lang=en&sc_apikey={API_Key}

And as you can see on the screenshot above you can see the route and placeholder information, as well as component names “Product List” and “Product Filters”

Also as you can see on the screenshot below Analytics cookie is present and interaction is being tracked “SC_ANALYTICS_GLOBAL_COOKIE”, so you can personalize your visitor’s experience.

Also there is another call that is being made /apix/client/commerce/cart/get/ to check if there is anything in the cart, so this is the custom implementation. This is the communication between Storefront and Sitecore Commerce.

Next let’s go ahead and the item to the cart and process the order and see if it appears in the Sitecore Commerce.

Here is the custom implementation of the add functionality, so you can explore the rest of the CartController in the Github Repo

https://github.com/epam/sitecore-headless-commerce-accelerator/blob/master/src/Feature/Checkout/code/Controllers/CartController.cs

Once we add the item to the Cart, lets visit the cart and see what calls are being made now:

So we will have Layout Service “jss?item=cart”, that will display our components, and a custom api call “apix/client/commerce/cart/get” that will get what is in the cart.

Next we will checkout, enter the address and credit information and see if the order appears in Commerce.

Order has been submitted now. BTW Credit Card processing is handled by BrainTree

So we log in into the Business Tools > Orders

And search for our order “3TLMTCVUCP4DW0S5BOO6GHREX”

We can see that the journey from Storefront has made it all the way to the Sitecore Commerce.

If you have any questions please do not hesitate to reach out to me on twitter and or at the #sitecoreSYM in Orlando.

You can book a 30 minute session with me and Kelly at the Symposium 2019 in Orlando Nov 4th – 8th.

April 8, 2019April 8, 2019 Tony Mamedbekov General

#SUGCON LONDON 2019 RECAP

This was my first #SUGCON EU. Even though it was only few days, it was an excellent event. This year SUGCON Europe took place in London, capital of Great Britain. I travelled from Houston, Texas. 9 hour flight with United Airlines, arrived a day before the Conference, took few photos of the city.

London Bridge, SUGCONEU Sitecore — London Bridge

It all started with Registration and Sitecore Certifications Exam.

First day was opened by Mark Frost the CEO of Sitecore, with a #sitecoreSelfie

Happy to kick off #SUGCON with a #SitecoreSelfie #sitecore #sitecorecommunity #london 🇬🇧 pic.twitter.com/OQQw5G66Lm
— Mark Frost (@Mark_D_Frost) April 4, 2019

Opening Keynote was by Donovan Brown from Microsoft. He talked about DevOps. Showed how easy it is to use Azure Boards, as well as Azure Pipelines and Azure Repos and Azure Artifacts, to get started you can visit azure.com/devops

I just wanted to thank everyone that attended my talk yesterday at #SUGCON. I am so happy that @TakeItEasyAlan reached to me to speak. The response on Twitter was amazing! #BlackShirt #RubALittleDevOpsOnIt

⚡️ “SUGCON”https://t.co/1Xj5ar8oP1
— Donovan Brown (@DonovanBrown) April 5, 2019

There were many great Sessions at the #SUGCON, but the ones that caught my attention were the #JSS Sessions.

JSS Immersion Session by Sitecore Front End Evangelist Anastasiya Flynn was really interesting. She went into the details about creating an event search page and shared some interesting and popular React Libraries.

She showed how you can debug your Sitecore JSS application in VS Code

GraphQL – Lessons Learned

React Libraries that were shared on this presentation:

Git Repo: https://github.com/anastasiya29/jss-sandbox
Blog: https://www.codealamodeblog.com/jss-sandbox/
Twitter: https://twitter.com/AnastasiyaFlynn

Another Interesting Session was by Adam Lamarre. Fun with Sitecore JSS: Exploring GraphQL

He showed a lot of cool demos with GraphQL and Sitecore JSS.

Item Query
Multiple Queries
Activity Log
Chat Room

I was really inspired by Activity log and Chat Room

Github – https://github.com/erzr/SugconDemos/
Twitter – https://twitter.com/erzr
Blog – https://www.adamlamarre.com/

Another session on JSS and Sitecore Commerce was by Pramila Soni & Saurabh Sachdeva

Wow! #jampacked room at the #sitecore #JSS with #Sitecore Commerce session by @sonipramila and @saurabhsachdeva #sitecorejss #headless #commerce #SUGCON pic.twitter.com/WGDiV2pjB3
— Robbert Hock (@kayeeNL) April 4, 2019

Really cool session was by Jeff L’Heureux – 16 Tools for your Sitecore Tool Belt

He shared 17 tools for your Sitecore faster working experience. You can find all the links on his blog.

Also not to forget to mention SFF Tribute

Of course everyone was waiting for Adam and Kam to get on the stage and show was they had been working on and how they were improving the JSS.

What was announced in their session? Sneak peak of JSS 9.2

JSS and SXA – Manage JSS apps with SXA
JSS support for Sitecore Forms
JSS Rendering Host

Now you will be able to create a JSS Tenant and JSS Site.

JSS Integrates with SXA, but retains JSS architecture, if you have been working with JSS, and FE technologies, and you are familiar with SXA the below bulleted list would make sense to you.

SXA component library not supported
Traditional Experience Editor (no toolbox)
Theming/Creative Exchange not supported
SXA Layout features won’t work in Disconnected Mode
Yes all the awesome features of JSS!

JSS Rendering Host was introduced

Sitecore JSS Rendering Host, you will be able to hear about it much more during the Sitecore Symposium Orlando 2019

Congratulations to all the MVP Award Winners!

Great Sense of Humor from the organizers

Thank you to all the Organizers of the SUGCON Europe 2019 in London, it was a great event.

You can find all the presentations and videos from the conference at the following link

November 26, 2018 Tony Mamedbekov General

What is new in Sitecore JSS in Sitecore 9.1

With Sitecore 9.1 Sitecore JSS will no longer be in Technical Preview.

JSS is a complete SDK for JavaScript developers allowing to build full-fledged modern solutions using Sitecore and JavaScript and being completely disconnected development and deploy to any platform.

By Using JSS you get to keep Full Experience Platform capabilities such as:

Experience Editor
Personalization and Testing
Tracking and Analytics

JSS currently supports OOTB, Angular, React and Vue.JS, who knows what will be coming next, it seems to be that more front end developers are interested to learn JSS because it gives them freedom.

Sitecore JSS requires a different License. Partners will need to regenerate a license in SPN.

Development Updates:
– JSS 9 with React requires React 16.3 or later, because of new Context API in React.
– JSS 9 with Angular requires Angular 6.x , anybody on Angular 5 can continue on JSS 8 npm packages.
– Layout Service will no longer return ‘editable’ value for fields, unless Sitecore is actually in Experience Editor.
– Sitecore.Ship is replaced with manifest package deployment system. What does that mean, a shared secret known to the deployer and server is used to deploy signed package HMAC.
– Completely refactored React, Angular and Vue apps. There is no more Basic or Advanced App. The content of Sample App has been refactored to JSS Specific Style-guides.
– Sample Apps have been heavily documented for ease of learning.
– All Sample apps now support GraphQL.

A new scaffold has been added that will automatically scaffold a JSS component.