How to Build Your Own Framework Implementation for Sitecore JSS?
Official Sitecore JSS repository has an implementation for the three most popular frontend frameworks: Vue, Angular, React(and Next.Js implementation, which is based on React). It will cover 95% of your needs. But there are much bigger variety of frameworks: Astro, Ember, Preact, Svelte, SolidJS, AlpineJS, Lit, and different WebAssembly implementations. Does it mean that you can’t use them? Let’s figure it out!
- Internationalization (i18n). Translations that you will get from Sitecore, you will need to properly use by yourself. And usage could be different from one framework to another.
- Components factory and components factory generation. Sitecore Layout Service returns you the composition of components defined on Sitecore side. In order to map them into components in your implementation you need code that goes through your files and creates a factory.
- Placeholder. Sitecore JSS takes responsibility for page composition. And the key element to achieve it is a placeholder. It can take presentation definition and render it using a components factory.
- Fields implementation. You will need Date, EditFrame, File, Image, Link, Text, and RichText.
- Configuration generation. It is an optional part. You always may use environment variables or constants directly. But if you want your code to be nice and maintainable, you will need to implement config generation that may take values from: package.json, scjssconfig.json, and environment variables.
- Editing API. When the application works in normal mode, you get the URL from the request and send requests to Sitecore API to get the required info: layout details and dictionary. When your application works in edit mode, Sitecore expects you to have an endpoint that accepts POST requests with layout details and a dictionary in the request body. If simplified, you need to implement the ability to take data for pages from different sources depending on working mode.
- Sitemap service. You will need it for two things: sitemap generation and getting all paths if you want to generate a static site.
- Sitecore Forms implementation. If you want to use forms fully managed by marketers without any attention from developers then you will need an implementation for form components, implementation for each field, and fields factory. Fields factory allows you to map each field that you get from Sitecore API to a component in your code. As forms differ a lot from project to project, you still will rewrite(even if it is present in Sitecore JSS) fields factory and fields for your project.
Sounds a lot and complex? Yes, when you do it the first time. But when you do it once, it is not scary to repeat it for other frameworks. The minimum list will be simpler:
- Components factory
- Editing API