Should You Use Sitecore SXA or JSS
•Télécharger en tant que PPTX, PDF•
0 j'aime•99 vues
Slides from my Webinar conducted for Sitecore SUG Jaipur about Frameworks, libraries and SDKs. Webinar was conducted on 9th August 2022
Recommandé
Recommandé
Contenu connexe
Similaire à Should You Use Sitecore SXA or JSS
Similaire à Should You Use Sitecore SXA or JSS (20)
Plus de Peter Procházka
Plus de Peter Procházka (15)
Dernier
Dernier (20)
Should You Use Sitecore SXA or JSS
- 1. Are Frameworks Evil? Should you care about SXA or JSS? Peter Procházka SUG Jaipur 9th August 2022
- 2. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Libraries, SDKs, Frameworks, … • What are SXA & JSS? • Should you use them? Agenda
- 3. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ Quick Introduction https://tothecore.sk/ https://twitter.com/chorpo http://goodreads.com/chorpo https://linkedin.com/in/chorpo Peter Procházka
- 4. Libraries, SDKs, Frameworks,… What are those? Never heard about them
- 5. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Library • Functions, set of functions • Called when needed Libraries, SDKs, Frameworks,…
- 6. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • SDKs • Wider scope than libraries • Collection of libraries Libraries, SDKs, Frameworks,…
- 7. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Framework • Inverse of libraries and SDKs • Collection of libraries, APIs, … • Giving you foundation on top Libraries, SDKs, Frameworks,…
- 8. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Library vs. SDK vs. Framework Libraries, SDKs, Frameworks,… Application Code Framework Library Library Library SDKs/Libraries
- 9. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Library vs. SDK vs. Framework Libraries, SDKs, Frameworks,… Library / SDK Framework Provides reusable function for our code Provides ready to use tools, standards, templates, and policies for fast application development Our code controls when and where to call a library The framework controls calling of libraries for our code Library can be added to augment the features of an existing application To leverage the benefit of a framework, a fresh application can be developed following the framework’s guideline Facilitates program binding Easy to create and deploy an application Helps us to reuse a software function Helps us to develop a software application quickly Intent of a library is to provide reusable software functionality Intent of a framework is to reduce the complexity of the software development
- 10. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Libraries - benefits • Reusable functions • Eliminates “reinventing the wheel” • Reduces development cost Libraries, SDKs, Frameworks,…
- 11. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Libraries - drawbacks • Too many to choose from • “Vendor lock-in” problem • Libraries abandoned • Lack of support Libraries, SDKs, Frameworks,…
- 12. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Libraries Libraries, SDKs, Frameworks,…
- 13. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Frameworks - benefits • Less code • Extensibility • Reduces development cost Libraries, SDKs, Frameworks,…
- 14. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Frameworks - drawbacks • Preventing from gaining in-depth understanding of language / tech Libraries, SDKs, Frameworks,…
- 15. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Frameworks - drawbacks • Preventing from gaining in-depth understanding of language / tech • Learning curve Libraries, SDKs, Frameworks,…
- 16. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Frameworks - drawbacks • Preventing from gaining in-depth understanding of language / tech • Learning curve • Tweaking framework is hard Libraries, SDKs, Frameworks,…
- 17. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Frameworks - drawbacks • Preventing from gaining in-depth understanding of language / tech • Learning curve • Tweaking framework is hard • Choosing the right one Libraries, SDKs, Frameworks,…
- 18. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Frameworks Libraries, SDKs, Frameworks,…
- 19. Sitecore SXA and JSS
- 20. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Sitecore SXA • Sitecore Experience Accelerator • Great example of Framework • Follows Helix principles Sitecore SXA and JSS SXA Sitecore ASP.NET
- 21. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Sitecore SXA • Tenants and sites Sitecore SXA and JSS
- 22. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Sitecore SXA • Modules Sitecore SXA and JSS
- 23. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Sitecore SXA • Page and partial designs, rendering variants Sitecore SXA and JSS
- 24. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Sitecore SXA • Toolbox Sitecore SXA and JSS
- 25. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Sitecore SXA • Snippet Sitecore SXA and JSS
- 26. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Sitecore JSS • Sitecore JavaScript Services • Great example of SDK Sitecore SXA and JSS Sitecore JSS React Vanilla JavaScript
- 27. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Sitecore JSS • Sitecore JavaScript Services • Great example of SDK Sitecore SXA and JSS Sitecore JSS Sitecore Headless Service Sitecore
- 28. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Sitecore JSS • Sitecore JavaScript Services • Great example of SDK Sitecore SXA and JSS
- 29. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Sitecore JSS • Supported front-end libraries / frameworks Sitecore SXA and JSS
- 30. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ Sitecore SXA and JSS https://2021.stateofjs.com/en-US/libraries/front-end-frameworks/#front_end_frameworks_experience_ranking
- 31. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ Sitecore SXA and JSS https://2021.stateofjs.com/en-US/libraries/front-end-frameworks/#front_end_frameworks_experience_ranking
- 32. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Sitecore JSS • Enhancements: • JSS CLI • Sitecore Headless Service • Abstractions for front-end developers that allow working with Sitecore declaratively • Utility functions and front-end components Sitecore SXA and JSS
- 33. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Sitecore JSS • Topologies: • Headless • Integrated Sitecore SXA and JSS
- 34. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Sitecore JSS • Topologies: • Headless • Integrated Sitecore SXA and JSS
- 35. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Sitecore JSS • Topologies: • Headless • Integrated Sitecore SXA and JSS
- 36. SXA / JSS Benefits / Drawbacks
- 37. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Sitecore SXA and JSS - Benefits • No need to build your own “Sitecore Company framework” • Simplifies Many Tasks and Challenges • Focused Application Development • Standardized Coding practices • Community SXA and JSS – Benefits
- 38. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Sitecore SXA and JSS - Drawbacks • Learning curve • Learning SDK/Framework and not Sitecore • Unnecessary Extras SXA and JSS – Drawbacks
- 39. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Decision when to use SXA • Team knows Sitecore MVC development • Team seeks something on top of regular Sitecore MVC development • In this case – evaluate Headless Services with ASP.NET Core • Time to market • BE > FE SXA and JSS
- 40. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • Decision when to use JSS • Team knows Sitecore and has knowledgeable front-end team • You want to do headless development • You are building SPA pages SXA and JSS
- 41. • Please insert a background image that suits your presentation, or leave it empty. © 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/ • XMCloud • New kid in the Sitecore town • Completely new framework • Looking forward for it… SXA and JSS
- 42. ” – Should we use Sitecore SXA or JSS? Definitely. Go for it… Peter Procházka
- 43. I am a proud community member! Please contact me on the following handles: sitecorechat.slack.com twitter sitecore.stackexchange.com @Peter Prochazka @chorpo peter-procházka
Notes de l'éditeur
- Hi everyone and welcome to my session about frameworks, libraries, SDKs. Of course, as this is Sitecore User Group, we will also talk about our beloved Sitecore SXA and JSS modules and how they belong to this topic. Let’s look at what I have prepared for you today…
- I will start with brief definition of phrases that I will use throughout this session. I will then continue with Sitecore SXA and JSS and their definition and at the end we will talk about their benefits and / or drawbacks. But first things first, let me quickly introduce myself for those who don’t know me…
- My name is Peter Prochazka and I work for Accenture for more than 11 years now. I have more than 8 years of experience with development using Sitecore platform. I have done implementations using Sitecore ASP.NET MVC, Sitecore SXA, JSS and also Sitecore Commerce. I have 15 years of experience with ASP.NET WebForms / MVC, also ASP classic and previously PHP but for last couple of years I have shifted my toolset and languages that I am using to write more JavaScript and React code as I was architecting and leading Sitecore JSS projects. I am spending my spare time with my family, running, blogging or helping Sitecore Community.
- This presentation is about libraries, SDKs and frameworks. Whether you should use them. Whether they are more useful than halting you back… As we are using Sitecore, we will mainly talk about SXA and JSS and whether you should use them or not or in our terms when and by which conditions are helping and opposite when they are not. Developers use terms like “library” and “framework” interchangeably. So let’s first understand what these phrases mean and what are their differences ….
- Simply put, a library is a packaged, reusable chunk of code that performs a certain function or set of closely related functions. You can insert a library into your application and call it when you need to implement that function without having to write the code from scratch. Suppose that instead of an application, you are building a house. One of the things you will need for that house is a stove, but it will not be very practical for you to build it from scratch when you could just buy one off the shelf. A library is to an application what the stove is to that house. Img source - https://blogs.ubc.ca/socialmediaandlibrarianship/2016/02/09/use-of-memes-in-libraries/
- SDKs have a wider scope than libraries do. In fact, all SDKs will contain one or more libraries. An SDK is a collection of libraries, APIs, documentation, utilities, and/or sample code that help you implement certain features without having to do the work from scratch. SDKs vary in scope and function from implementing a feature or set of features, like an analytics SDK for instance, to building whole applications for a specific platform, as is the case with the Sitecore JSS for example. Going back to our house analogy, if a library is a stove, then an SDK is a whole kitchen. While you can go and buy all your kitchen appliances, cabinets, and counters separately, it will be a lot easier to buy a full kitchen set, complete with built-in appliances and instructions on how to assemble it. SDKs can be limited in scope such as in the case with one room, but they can also have a bigger scope of a collection of rooms or even the whole house.
- Frameworks are in many ways the inverse of libraries and SDKs. They too are a collection of libraries, APIs, utilities, and documentation to solve common programming requirements, so you don’t have to do the work yourself. However, they do that by giving you a foundation on top of which you can build your app rather than giving you the building blocks. While you insert a library into your application and call it from your code to perform certain functions, frameworks require you to insert your code into them and they call your code at the right moment. In our house analogy, a framework will be exactly that, the house’s framework. It is the collection of beams and posts upon which you build your rooms, complete with electrical wiring and plumbing. Having this ready-made structure upon which you can build your house will save you a huge amount of time and effort.
- Main difference between frameworks and using SDKs/libraries directly is inversion of control. The above diagram shows that when an application code uses a library, the developer writing the code is in charge of the application flow. This means the developer decides when to call the library. However, when we use a framework, the framework decides when to call the library. This shift in control of calling the library from the application code to the framework is an inversion of control.
- So to summarize: A framework enables a coding environment that contains low-level libraries to address conventional coding issues. The objective of a framework is to deliver faster development of an application. This includes everything we need to build large-scale applications, such as templates based on best practices. Let’s consider the inner workings of a framework. If we’re using a graphical user interface (GUI) framework, it calls the code through event handlers. If we’re using a web framework, it calls the code through a request-response model. For a web application, JavaScript frameworks provide a skeleton with the tools for fast development. Internally, such a framework contains a large collection of libraries that provides the developer with inbuilt functionalities, which helps to develop an application without extensive coding knowledge.
- So what are some key benefits of libraries: Provides reusable functions that can be referred to within the code without defining them explicitly Eliminates the need for writing code for complex functions Prevents us from having to write code to solve the same problem over and over again Provides us with the opportunity to pick libraries that we want Reduces application development cost Encourages programmers to focus on configurable and reusable library development Provides pre-tested code for multiple environments and use cases
- And here are also some drawbacks or limitations when using libraries in our solutions: There are too many libraries that do the “same” Using a library means that our code is tied to that library. To change libraries, our code might have to undergo changes to use the new library. Sometimes developer(s) who maintain the library abandon project because of lack of time so no support, no bug fixes or Using a library in an unsupported environment needs a wrapper, resulting in a performance impact on the application. Lack of support by the developer of a library may result in incompatibility issues with the new version of the application. Using several libraries might impact the performance of an application adversely because of dependency conflicts. Sometimes libraries are vulnerable to malicious attacks. New features coming in future
- React – A JavaScript library for building user interfaces jQuery is a JavaScript library. Only library at the beginning but nobody is using it nowadays D3 - JavaScript library for producing dynamic, interactive data visualizations in web browsers Underscore is a JavaScript utility library that provides various functions for typical programming tasks Lodash is also a JS utility library that makes it easier to work with numbers, arrays, strings, objects, etc. Date-fns is JS library that provides toolset for manipulating JavaScript dates And the list goes on…
- There are several benefits of using a framework in general, such as improved coding, following best practices (Sitecore Helix for example), easy code re-usability, and accelerated development. Mind the accelerated wording here Like Sitecore Experience Accelerator… So what are some key advantages of using Framework: A change in one part of the application doesn’t affect the entire application. Enables faster methods for web development with less code a user can extend the framework – usually by selective overriding; or programmers can add specialized user code to provide specific functionality. Supports cross-platform application development Provides a superior user experience by creating rich and dynamic content
- And here are also some drawbacks or limitations when using frameworks in our solutions: The ready-to-use features of a framework prevent programmers from gaining an in-depth understanding of the programming language. Learning curve at the beginning. Options to tweak functionalities are usually limited. Sometimes application development is complex using a framework. We need to choose the right framework for the scale of the application, or else performance and user experience may be adversely impacted. Clear separation of business logic from the presentation layer in MVC is sometimes difficult. We have to be up-to-date with new/deprecated features in every version. img source - https://www.freecodecamp.org/news/the-cure-to-js-fatigue/
- And here are also some drawbacks or limitations when using framworks in our solutions: The ready-to-use features of a framework prevent programmers from gaining an in-depth understanding of the programming language. Learning curve at the beginning. Options to tweak functionalities are usually limited. Sometimes application development is complex using a framework. We need to choose the right framework for the scale of the application, or else performance and user experience may be adversely impacted. Clear separation of business logic from the presentation layer in MVC is sometimes difficult. We have to be up-to-date with new/deprecated features in every version. img source - https://www.freecodecamp.org/news/the-cure-to-js-fatigue/
- And here are also some drawbacks or limitations when using frameworks in our solutions: The ready-to-use features of a framework prevent programmers from gaining an in-depth understanding of the programming language. Learning curve at the beginning. Options to tweak functionalities are usually limited. Sometimes application development is complex using a framework. We need to choose the right framework for the scale of the application, or else performance and user experience may be adversely impacted. Clear separation of business logic from the presentation layer in MVC is sometimes difficult. We have to be up-to-date with new/deprecated features in every version. img source - https://www.freecodecamp.org/news/the-cure-to-js-fatigue/
- And here are also some drawbacks or limitations when using framworks in our solutions: The ready-to-use features of a framework prevent programmers from gaining an in-depth understanding of the programming language. Learning curve at the beginning. Options to tweak functionalities are usually limited. Sometimes application development is complex using a framework. We need to choose the right framework for the scale of the application, or else performance and user experience may be adversely impacted. Clear separation of business logic from the presentation layer in MVC is sometimes difficult. We have to be up-to-date with new/deprecated features in every version. img source - https://www.freecodecamp.org/news/the-cure-to-js-fatigue/
- .NET - is a free and open-source, managed computer software framework for Windows, Linux, and macOS operating systems. It is a cross-platform successor to .NET Framework. Next.js is an open-source web development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites. Angular - is a TypeScript-based free and open-source web application framework Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. Ember.js is an open-source JavaScript web framework, utilizing a component-service pattern. It allows developers to create scalable single-page web applications by incorporating common idioms, best practices, and patterns from other single-page-app ecosystem patterns into the framework. Vue.js - is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. The Spring Framework is an application framework and inversion of control container for the Java platform. There is also Sprint.net which was some sort of port of this framework to .Net but it’s abandoned already And the list goes on…
- Okay so we know what are libraries, SDKs or frameworks used for. But in Sitecore world we hear a lot about SXA and JSS. What are they - libraries, SDKs or Frameworks?
- Sitecore SXA or Sitecore Experience Accelerator is great framework for development using Sitecore MVC approach that helps you speed up development process, content creation and overall experience of Content Editor with Sitecore platform. As the definition of Framework said, SXA is bringing foundation on top of language which is using in this case, it is built on top of Sitecore. It’s also a great example of how to implement Helix principles in “real projects”. So what kind of benefits this framework brings? …
- The SXA content architecture includes tenants and sites. SXA supports multitenancy, which means that you can run multiple sites on a single instance of Sitecore. Each tenant can include multiple related sites, for example, to support multiple brands for a single company or multiple languages or locations for a single brand. Organizations can support multiple languages through one-to-one translated versions (native Sitecore language support) or use a model with a separate site for each supported language.
- When you create a new SXA tenant or site, the wizard lets you select the modules that you want to include. When you have an existing tenant or site and want to add modules later, you can add modules to a specific tenant or site or use the SXA bulk module installer to install modules for multiple tenants/sites. When doing SXA development, you are effectively creating your own modules, which contain your components and you are preparing scaffolding scripts which are run when module is added to a Site or Tenant.
- A page design in SXA is a selection of partial designs and renderings that help you structure your pages. You can also set up a page structure for specific pages, such as a landing page, events page, product page or press release page. You can use the partial designs to create the design elements of your pages quickly for a consistent style and look & feel. For example, you can create parts of your page once, such as headers and footers, and then reuse them everywhere on your site. You can construct your pages by drag and dropping components directly where you need them. These components are called renderings and they are listed in the Toolbox in the Experience Editor. Rendering variants can make rendering appear differently or they can make it show different content. For example, the list rendering can have different variants for: product list, detailed lists or thumbnails list. As you can see on current slide, Promo rendering can have 2 rendering variants - Promo with Image or just simple Text Promo. For Promo with Image, Image would be in Background and text would be overlaying it. In latter case for Text Promo, image field wouldn’t be shown at all, and title would be emphasized.
- There are various components that come out of the box when you install Sitecore SXA. Toolbox is my favourite one as it enhances Experience Editor significantly with really nice widget on right side of the screen with list components that you can just drag and drop to your Page. There are various categories, you can even switch toolbox to better support tablets so you can edit the page easily also there.
- Snippet was one of my favourite component from SXA. The Snippet rendering lets you create a reusable group of renderings. It is a composite rendering that consists of several renderings that can be designed separately in the Experience Editor. In the same way as with partial designs, you can group different kinds of renderings and reuse this group in different locations. The difference between a snippet and a partial design is that snippets are extensible, you can change the styling, and you can use them as often on the page as you want.
- The Sitecore JavaScript Rendering SDKs (JSS) represent a set of JavaScript packages and sample applications that add first-class support for JavaScript frameworks and enable the development of modern applications that consume Sitecore data. Headless Services support the functionality of Sitecore rendering SDKs as described in the following diagram
- Here we are on thin line whether this is still SDK or a Framework as to make this run, you need to have Sitecore Headless Services module installed but . This module enables developers to decouple the data application from the rendering application. The Sitecore Headless Services formerly (Sitecore JavaScript Services) module provides a suite of REST and GraphQL API endpoints that return JSON-formatted Sitecore data. The module was created to support the JavaScript Rendering SDK and the ASP.NET Rendering SDK, but developers can choose to work with other technologies capable of consuming JSON-formatted data.
- Headless Services support the functionality of Sitecore rendering SDKs as described in the following diagram
- Sitecore JSS supports React, Next.js, Angular and Vue.js. It also supports React Native experimentally. Frameworks like Next.js reduce development overhead and standardize development patterns.
- Sitecore JSS supports React, Next.js, Angular and Vue.js. It also supports React Native experimentally. Frameworks like Next.js reduce development overhead and standardize development patterns.
- Sitecore JSS supports React, Next.js, Angular and Vue.js. It also supports React Native experimentally. Frameworks like Next.js reduce development overhead and standardize development patterns.
- JSS CLI - a Node-based command-line tool to help you create and maintain applications. A core JavaScript package for leveraging Sitecore Headless Services and Sitecore Experience Edge endpoints using REST or GraphQL. Abstractions for front-end developers that allow working with Sitecore declaratively. Utility functions and front-end components that abstract the complexities of fetching dynamic Sitecore data.
- JSS sites can be deployed in several different topologies. As a headless technology, if you are unsure of which to pick, lean towards a headless deployment to realize the maximum advantage of JSS.
- When running in headless mode, the Sitecore Content Delivery (CD) servers do not directly serve the public website. Instead, a cluster of inexpensive Node.js servers hosts the public-facing website. These Node servers run the node-headless-ssr-proxy. This server-side rendering (SSR) proxy makes requests to APIs running on the Sitecore CD servers and then renders the JSS application to HTML before returning it to the client. These SSR proxies can be hosted anywhere Node.js can run.
- In an integrated topology, the Sitecore CD servers perform the server-side rendering of the JSS app using their own integrated (same server, out of process pool) Node.js services. This mode is less flexible in terms of scalability than a headless deployment, especially with regard to CDN integrations and the capability to scale API servers separately from SSR instances. In this mode, API hosting and rendering are performed on the same server.
- Lots of companies were building their own frameworks and libraries in the past for Sitecore development. Maintenance / upgradability of these projects For complex, high-traffic, or exceptionally rich systems and applications, a framework could be considered all but essential. Laying out strong architectural foundations creates a well thought out application that is easy to build on and maintain without losing application performance or control of its structure. For teams of engineers, a framework lays out a system’s design language in a way that everyone is instantly familiar with and can communicate and work on with ease. For smaller systems, the right framework makes great strides in the number of lines of code engineers are required to write, test, and maintain by hand. A high-quality framework that comes with a lot of functionality and systems pre-build can save weeks of development time and cut down writing thousands of lines of code. React.js, for example, is a framework with everything you need pre-packed and ready to deploy. Taking care of the groundwork, a framework should free application developers to focus their time and attention on higher-level problems instead. A framework effectively bootstraps the process of application development. Developers are able to accelerate even the most highly customized web applications from initial idea to working prototype in relatively short order by using the right framework. Templates, for example, are an ideal tool for reducing the time on task to write boilerplate code. Providing an accelerated start to the early stages of a project, they allow application developers to shift their time towards implementing creative solutions to more pressing problems. By bootstrapping basic functionality, structure, and architecture—frameworks keep the final application in good shape for future development. This one relates to first point regarding creating your own Sitecore development framework. One of the largest advantages an effectively chosen framework can bring is its ability to create a well-defined structure to follow throughout the lifetime of a project. Today, communication both amongst and between teams is one of the most pressing challenges teams of software developers tackle at scale. Onboarding new developers and handing off project work is made much simpler when the structure of a project can be explained simply by the framework it’s written in. The advantages of standardization pay rich dividends in design, development, debugging, and deployment. Sitecore has awesome community that can help you extending and finding solutions for both modules. On top of documentation there are lot of blog posts to get you up to speed, You can ask questions on Slack or Stack Exchange
- Learning curve can affect productivity and costs at the beginning as embracing one of the modules can take some time. You know Sitecore MVC or React development but learning SXA and JSS practices will take some time as it’s a bit different approach. Instead of directly adding components in SXA, you need to add them to modules and modules need to be added to sites… A significant disadvantage for teams is that leaning heavily on a library / framework can obscure some of the learning necessary to gain a better understanding of the Sitecore itself. The problems and challenges you encounter in SXA or JSS for example, differ from the ones you encounter writing usual Sitecore MVC components or extending “usual” Sitecore installation without SXA or Headless Services installed on top. Developers familiar with one don’t necessarily know the other. Because the framework exists to do a lot of the heavy lifting, some of the deeper parts of the application can be left untouched by developers. Even working with the code daily, engineers may not know the ins and outs of a system when interacting with just the higher levels of the framework will do. The result of over-reliance on the framework is fewer chances for programmers to solve complex problems and gain a detailed grasp on the entire application. A framework, by necessity, will come with everything required to satisfy a wide range of projects and use cases. In practice, this means your framework will come with features, functionality, and code that won’t be used at all within your project. In fact, the bulk of the code included within a large framework may well be irrelevant. This is particularly true when building exceptionally simple web apps. The extra files and unnecessary code in your project can adversely impact the speed and performance of a framework and the sites it supports. A lightweight framework that implements minimal additional features can act as a middle-ground between framework less development strategies and heavyweight feature-rich frameworks.
- Specific requirements that are fulfilled by SXA -> Content Editors would like to customize rendered HTML -> Rendering Variants is perfect solution
- So if you ask me - Should we use Sitecore SXA or JSS? Definitely. Go for it… Both modules are great. They have some drawbacks and nuances but once you embrace them, they will be more serving you than holding you back