Take Your Sitecore Project To The Next Level With Node · #SitecoreSYM 7 “Yeoman is a generic scaffolding system... Yeoman by itself doesn’t make any decisions. Every decision

#SitecoreSYM#SitecoreSYM© 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

1

Take Your Sitecore Project

To The Next Level

With Node.js

Presented by Anastasiya Flynn,

Sitecore Architect at

@AnastasiyaFlynn

#SitecoreSYM

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.

2

Setup Development Testing

@AnastasiyaFlynn © 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

#SitecoreSYM 3

Demo – Creating a Node Module

@AnastasiyaFlynn© 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

#SitecoreSYM

Setup

Automate the setup of a complex

Sitecore project with Yeoman

© 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners. 4@AnastasiyaFlynn


#SitecoreSYM 5

New Solution Checklist

© 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

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

Resharperinspection

rules

Stylecopconfiguration

EditorConfigfile

@AnastasiyaFlynn

TypeScript Library

Headless build

Bundling/ minification

Transpilationto ES5

Unit Tests/ Runner

Linting

Front-End Assets

Sass Compilation


Linting

DevOps

Gulpfile

Node dependencies

#SitecoreSYM 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

@AnastasiyaFlynn

#SitecoreSYM 7

http://yeoman.io/

“Yeoman is a generic scaffolding system... Yeoman by itself doesn’t make any

decisions. Every decision is made by generators.”

Automate Project Setup With Yeoman

App

Sub Module

Sub Module


#SitecoreSYM 8

Yeoman Generator – Setting Up


#SitecoreSYM 9

Yeoman – Setting Up

app

add-bootstrap

add-typescript


/package.json

#SitecoreSYM 10

Yeoman – Template Variables

Solution name

Solution namespace

MVC area name

Local Sitecore URL

Sitecore version

.NET framework


#SitecoreSYM 11

Initializing

Prompting

Configuring

Default

Writing

Conflicts

Install

End

Yeoman – Generator Lifecycle


@AnastasiyaFlynn

/generators/app/index.js

#SitecoreSYM 12© 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

@AnastasiyaFlynn

/generators/app/index.js Initializing

• Log Message

• Initialize settings object

Prompting

• Prompt user for project-specific settings

Configuring

• Save all the settings that have been provided to config file

Writing

• Write settings to config file on disk

• Copy templates to destination, transforming content using project-specific settings

Install

• Install node modules in destination

End

• Log Message

#SitecoreSYM


13© 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

@AnastasiyaFlynn

/generators/lib/prompter.js

#SitecoreSYM



@AnastasiyaFlynn

/generators/lib/prompter.js


@AnastasiyaFlynn

/generators/app/index.js Initializing

• Log Message


Prompting


Configuring


Writing



Install


End

• Log Message

#SitecoreSYM



@AnastasiyaFlynn

/generators/lib/writer.js

#SitecoreSYM



@AnastasiyaFlynn

/generators/lib/writer.js


@AnastasiyaFlynn

Initializing

• Log Message


Prompting


Configuring


Writing



Install


End

• Log Message


#SitecoreSYM 19

Yeoman – Exposing Generator For Testing


@AnastasiyaFlynn

#SitecoreSYM 20

Yeoman – Running Main Generator


@AnastasiyaFlynn


@AnastasiyaFlynn

Initializing

• Log Message

• Read previously defined settings

Writing

• Update Node module dependency declarations


Install

• Install new Node module dependencies

/generators/add-bootstrap/index.js

#SitecoreSYM 22

Yeoman – Running Sub-Generator


@AnastasiyaFlynn

#SitecoreSYM 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

Resharperinspection

rules

Stylecopconfiguration

EditorConfigfile

@AnastasiyaFlynn

TypeScript Library

Headless build


Transpilationto ES5

Unit Tests/ Runner

Linting

Front-End Assets

Sass Compilation


Linting

DevOps

Gulpfile

Node dependencies

#SitecoreSYM

DevelopmentUse Webpack to

• Helix-ify the JavaScript layer

• Build against a headless CMS

• Perform on-the-fly compilation


24@AnastasiyaFlynn


#SitecoreSYM 25

Project (C#)

Feature (C#)

Foundation (C#)

TypeScript Helix


@AnastasiyaFlynn

Project Feature Foundation

JavaScript/TypeScript Library

#SitecoreSYM 26

What is Webpack?


https://webpack.js.org/

#SitecoreSYM 27

Webpack - Configuration


> yarn add webpack --dev

> yarn add webpack-cli --dev

/package.json/webpack.config.json

#SitecoreSYM 28

Project

Feature

Foundation

TypeScript Helix

Component Factory

Event Manager

Global Context

Shared Utilities

Gallery CarouselAdd To

CartCustomer Reviews

Related Products

Group - Common Group - Product


@AnastasiyaFlynn

#SitecoreSYM 29

Webpack – Demo ‘npm run build’


@AnastasiyaFlynn

#SitecoreSYM 30

Project

Feature

Foundation

TypeScript Helix

Component Factory

Event Manager

Global Context

Shared Utilities

/html /json /css /images

Gallery CarouselAdd To

CartCustomer Reviews

Related Products

Group - Common Group - Product


@AnastasiyaFlynn

#SitecoreSYM 31

Webpack Dev Server - Configuration


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

> yarn add webpack-dev-server --dev

/package.json/webpack.config.json

#SitecoreSYM 32

Webpack – Demo ‘npm run dev’


@AnastasiyaFlynn

#SitecoreSYM 33

Dev Server – Ajax?


#SitecoreSYM 34

• Encapsulate all Ajax functionality in an injectable helper

• Never hardcode server endpoints

Server interaction

• Accept server interaction helpers as parameters in constructors

• Don’t talk to the server directly

UI component classes

TypeScript Helix – Best practice patterns


@AnastasiyaFlynn


@AnastasiyaFlynn

/src/project/pages/index.html


@AnastasiyaFlynn

#SitecoreSYM 37

Headless CMS – Sample Component


#SitecoreSYM

Testing

Unit test JavaScript with

Jasmine and Karma


38@AnastasiyaFlynn


#SitecoreSYM 39

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

Why Unit Test JavaScript?


#SitecoreSYM 40

https://jasmine.github.io

> yarn add jasmine --dev

> yarn add jasmine-core --dev

> yarn add @types/jasmine --dev

Jasmine - Setup


#SitecoreSYM 41

Jasmine - Implementation


#SitecoreSYM 42



Server interaction



• Accept interface injection, not concrete classes


TypeScript Helix – Best practice patterns (continued)


@AnastasiyaFlynn

#SitecoreSYM 43

Unit Testing UI Components – Sample Component


#SitecoreSYM 44



Server interaction



• Accept interface injection, not concrete classes

• Accept a DOM element in the constructor

• Scope all actions to it’s DOM element


TypeScript Helix – Best practice patterns (continued)


@AnastasiyaFlynn

#SitecoreSYM 45

Unit Testing UI Components – Sample Component



@AnastasiyaFlynn

#SitecoreSYM 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


@AnastasiyaFlynn

/package.json


@AnastasiyaFlynn

/karma.conf.js


@AnastasiyaFlynn

/webpack.config.karma.js

#SitecoreSYM 50

Jasmine/Karma – Demo


@AnastasiyaFlynn

#SitecoreSYM#SitecoreSYM © 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

51@AnastasiyaFlynn

Get the code

https://bitbucket.org/anastasiya29

/yeoman-sitecore-generator

#SitecoreSYM

FOR DISCUSSION PURPOSES ONLY. Sitecore Confidential and Proprietary. © 2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

© 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners. 52

Let’s continue the conversation on

Twitter @AnastasiyaFlynn

Documents

Take Your Sitecore Project To The Next Level With Node · #SitecoreSYM 7 “Yeoman is a generic scaffolding system... Yeoman by itself doesn’t make any decisions. Every decision