Sitecore Symposium 2018: Helix and JSS

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

This session was lead by Jean-Francois L’Heureux from Coveo.  He showed how to apply the helix guidelines for Sitecore development to a JSS solution.

Helix

• Helix is a set of guidelines to help maintain clean architcture in MVC projects
  • It was not designed from javascript
• Project dependencies
  • Layers
    • Project – Layouts.  Styling.  Presentation.
    • Feature – Front-end code. Feature Modules.
    • Foundation – Indexing.  Analytics.
  • Dependencies should flow from top to bottom only!
    • Project can depend on project, feature and foundation
    • Feature can depend on feature and foundation
    • Foundation can ONLY depend on other things in the foundation layer
• Common Closure Principle
  • Everything that changes together should be packaged together

JSS

• Supported frameworks
  • Angular
  • React
  • Vue
• Sitecore publishes an app template for each of the supported frameworks
• Create a JSS app
  • PS:>jss create app-name app-template-name
    • app-template-name is the name of the framework you want to use
  • Builds the core folder structure and files for your app
• Run a JSS app
  • PS:>jss start
  • Compiles the app and runs it in a stand alone server

JSS App Structure

• /src
  • index.js – the entry point for your app
  • routehandler.js
  • layout.js
• /src/components
  • One folder for each component

JSS Helix App Structure

• /src/project
• /src/feature
  • Create a folder for each feature component
• /src/foundation

Things to remember

• When you move files around in the solution (especially default files added with the create command), make sure the component factory is importing the components correctly.
• eslint can help ensure you don’t break the dependency chain
  • By default, the create command will use the eslint package
  • Install your own local eslint package to allow override settings
    • npm install eslint
    • Change config files to use the local eslint (see sample app template)
    • Define error zones to enforce dependency chain in .eslintrc.json

 
Check out the rest of my notes from Sitecore Symposium 2018!