Take Your Sitecore Project To The Next Level With Node.js

Presented by Anastasiya Flynn at Sitecore Symposium 2018 in Orlando FL

Agenda

This presentation will cover common tasks that Sitecore architects and developers encounter in projects, and I will show you how to leverage server-side JavaScript to solve these tasks.

  • Setup
  • Development
  • Testing

Setup

Automate the setup of a complex Sitecore project with Yeoman

New Solution Checklist

C# Projects

  • Helix structure
  • Sitecore NuGet references
  • Build profiles
  • Unit tests

TDS Projects

  • Helix structure
  • Validation rules
  • Package generation
  • Glass models generation
  • Assembly inclusion

Code Style

  • Resharper inspection rules
  • Stylecop configuration
  • EditorConfig file

TypeScript Library

  • Headless build
  • Bundling / minification
  • Transpilation to ES5
  • Unit Tests / Runner
  • Linting

Front-End Assets

  • Sass Compilation
  • Bundling / minification
  • Linting

DevOps

  • Gulpfile
  • Node dependencies

New Solution Checklist

  1. Create C# projects
  2. Find correct Sitecore NuGets
  3. Add TDS projects
  4. Set up build profiles
  5. Set up package generation
  6. How do we build Sass and JS again?
  7. Let’s just build it
  8. YSOD
  9. Coffee
  10. Is my target framework right?
  11. Repeat for other Helix layers

Automate Project Setup With Yeoman

“Yeoman is a generic scaffolding system… Yeoman by itself doesn’t make any decisions. Every decision is made by generators.” - http://yeoman.io/

Yeoman – Setting Up

Yeoman – Template Variables

Yeoman – Generator Lifecycle

/generators/app/index.js

  • Initializing
  • Prompting
  • Configuring
  • Default
  • Writing
  • Conflicts
  • Install
  • End

initializing step

prompting step

/generators/lib/prompter.js

prompting step

/generators/lib/prompter.js

configuring step

writing step

/generators/lib/writer.js

writing step

/generators/lib/writer.js

install step and end step

Yeoman – Exposing Generator For Testing

Yeoman – Running Main Generator

Sub-generator

/generators/add-bootstrap/index.js

Yeoman – Running Sub-Generator

New Solution Checklist – Conquered!

C# Projects

  • Helix structure
  • Sitecore NuGet references
  • Build profiles
  • Unit tests

TDS Projects

  • Helix structure
  • Validation rules
  • Package generation
  • Glass models generation
  • Assembly inclusion

Code Style

  • Resharper inspection rules
  • Stylecop configuration
  • EditorConfig file

TypeScript Library

  • Headless build
  • Bundling / minification
  • Transpilation to ES5
  • Unit Tests / Runner
  • Linting

Front-End Assets

  • Sass Compilation
  • Bundling / minification
  • Linting

DevOps

  • Gulpfile
  • Node dependencies

Development

Use Webpack to • Helix-ify the JavaScript layer • Build against a headless CMS • Perform on-the-fly compilation

TypeScript Helix

What is Webpack?

Webpack - Configuration

yarn add webpack —dev yarn add webpack-cli —dev

TypeScript Helix

TypeScript Helix

Webpack Dev Server - Configuration

https://webpack.js.org/configuration/dev-server/

yarn add webpack-dev-server —dev

Dev Server – Ajax?

TypeScript Helix – Best practice patterns

Server interaction • Encapsulate all Ajax functionality in an injectable helper • Never hardcode server endpoints

UI component classes • Accept server interaction helpers as parameters in constructors • Don’t talk to the server directly #SitecoreSYM

Mocking a server call during local testing

/src/project/pages/index.html

Replacing mocked call with a real server call

Headless CMS – Sample Component

Testing

Unit test JavaScript with Jasmine and Karma

Why Unit Test JavaScript?

Unit tests are valuable because they: • Document the code • Shows how code is expected to work • Shows how code is expected to be used • Enforce good class design • Classes have to be broken up into granular functions (units) • Classes have to use dependency injection • Enforce good Sitecore component design • UI component classes must be autonomous and self-contained

Jasmine - Setup

https://jasmine.github.io

yarn add jasmine —dev yarn add jasmine-core —dev yarn add @types/jasmine —dev

Jasmine - Implementation

TypeScript Helix – Best practice patterns (continued)

Server interaction • Encapsulate all Ajax functionality in an injectable helper • Never hardcode server endpoints

UI component classes • Accept server interaction helpers as parameters in constructors • Don’t talk to the server directly • Accept interface injection, not concrete classes

Unit Testing UI Components – Sample Component

TypeScript Helix – Best practice patterns (continued)

Server interaction • Encapsulate all Ajax functionality in an injectable helper • Never hardcode server endpoints

UI component classes • Accept server interaction helpers as parameters in constructors • Don’t talk to the server directly • Accept interface injection, not concrete classes • Accept a DOM element in the constructor • Scope all actions to it’s DOM element

Unit Testing UI Components – Sample Component

Karma - Setup

http://karma-runner.github.io

yarn add karma —dev yarn add karma-jasmine — dev yarn add karma-chrome-launcher —dev yarn add karma-coverage-istanbul-reporter —dev yarn add karma-spec-reporter —dev yarn add karma-webpack —dev

/karma.conf.js

/webpack.config.karma.js

Jasmine/Karma – Demo

Get the code

https://github.com/anastasiya29/yeoman-sitecore-generator