Sitecore Symposium 2018: Helix and JSS | Perficient Digital

Sitecore Symposium 2018: Helix and JSS

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!

Subscribe to the Perficient Digital Weekly Digest

* indicates required

Leave a Reply