A presentation at Sitecore Symposium in in Orlando, FL, USA by Anastasiya Flynn
Presented by Anastasiya Flynn at Sitecore Symposium 2018 in Orlando FL
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.
Automate the setup of a complex Sitecore project with Yeoman
C# Projects
TDS Projects
Code Style
TypeScript Library
Front-End Assets
DevOps
“Yeoman is a generic scaffolding system… Yeoman by itself doesn’t make any decisions. Every decision is made by generators.” - http://yeoman.io/
/generators/app/index.js
/generators/lib/prompter.js
/generators/lib/prompter.js
/generators/lib/writer.js
/generators/lib/writer.js
/generators/add-bootstrap/index.js
C# Projects
TDS Projects
Code Style
TypeScript Library
Front-End Assets
DevOps
Use Webpack to • Helix-ify the JavaScript layer • Build against a headless CMS • Perform on-the-fly compilation
yarn add webpack —dev yarn add webpack-cli —dev
https://webpack.js.org/configuration/dev-server/
yarn add webpack-dev-server —dev
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
/src/project/pages/index.html
Unit test JavaScript with Jasmine and Karma
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
https://jasmine.github.io
yarn add jasmine —dev yarn add jasmine-core —dev yarn add @types/jasmine —dev
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
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
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
https://github.com/anastasiya29/yeoman-sitecore-generator
Many Sitecore developers still see JavaScript as just a client-side language that’s used to enhance the UI. This session proves that JavaScript belongs server-side as well, showing how to use popular Node.js-powered frameworks to automate server-side processes and make our lives as developers easier. The applications of server-side JavaScript covered in this session do not depend on Sitecore JavaScript Services, and can be used in traditional Sitecore MVC projects.
Session takeaways This presentation demonstrates practical applications of server-side JavaScript at 3 stages of a Sitecore project lifecycle.
Setup: How to automate the generation of new Sitecore solutions with yeoman Development: How to build a modular TypeScript library against a headless CMS with Webpack Testing: How to enforce Helix design principles with unit tests written in Jasmine and run with Karma
The following resources were mentioned during the presentation or are useful additional information.
Repository containing code demoed in this presentation
Here’s what was said about this presentation on social media.
for free. You
can too.