Understanding Development Approaches: A Sitecore Outlook Designing, building, and implementing top-notch experiences not only requires a great deal of planning, strategy, and time – it also requires the right digital experience platform (DXP) and the right development approach for your business needs. Get the Guide

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!