Take Your Sitecore Project To The Next LevelWith Node.js

Slide 1

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

Presented by Anastasiya Flynn at Sitecore Symposium 2018 in Orlando FL

Slide 2

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

Slide 3

Slide 4

Setup

Automate the setup of a complex Sitecore project with Yeoman

Slide 5

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

Slide 6

New Solution Checklist

Create C# projects
Find correct Sitecore NuGets
Add TDS projects
Set up build profiles
Set up package generation
How do we build Sass and JS again?
Let’s just build it
YSOD
Coffee
Is my target framework right?
Repeat for other Helix layers

Slide 7

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/

Slide 8

Slide 9

Yeoman – Setting Up

Slide 10

Yeoman – Template Variables

Slide 11

Yeoman – Generator Lifecycle

/generators/app/index.js

Initializing
Prompting
Configuring
Default
Writing
Conflicts
Install
End

Slide 12

initializing step

Slide 13

prompting step

/generators/lib/prompter.js

Slide 14

prompting step

/generators/lib/prompter.js

Slide 15

configuring step

Slide 16

writing step

/generators/lib/writer.js

Slide 17

writing step

/generators/lib/writer.js

Slide 18

install step and end step

Slide 19

Yeoman – Exposing Generator For Testing

Slide 20

Yeoman – Running Main Generator

Slide 21

Sub-generator

/generators/add-bootstrap/index.js

Slide 22

Yeoman – Running Sub-Generator

Slide 23

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

Slide 24

Development

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

Slide 25

TypeScript Helix

Slide 26

What is Webpack?

Slide 27

Webpack - Configuration

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

Slide 28

TypeScript Helix

Slide 29

Slide 30

TypeScript Helix

Slide 31

Webpack Dev Server - Configuration

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

yarn add webpack-dev-server —dev

Slide 32

Slide 33

Dev Server – Ajax?

Slide 34

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

Slide 35

Mocking a server call during local testing

/src/project/pages/index.html

Slide 36

Replacing mocked call with a real server call

Slide 37

Headless CMS – Sample Component

Slide 38

Testing

Unit test JavaScript with Jasmine and Karma

Slide 39

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

Slide 40

Jasmine - Setup

https://jasmine.github.io

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

Slide 41

Jasmine - Implementation

Slide 42

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

Slide 43

Unit Testing UI Components – Sample Component

Slide 44

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

Slide 45

Unit Testing UI Components – Sample Component

Slide 46

Slide 47

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

Slide 48

/karma.conf.js

Slide 49

/webpack.config.karma.js

Slide 50

Jasmine/Karma – Demo

Slide 51

Get the code

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