From hero to zero and back to hero - SUG Chennai - 29.04.2021

From Hero to Zero and back to Hero by Peter Prochazka (tothecore.sk / @chorpo) Log out | Peter Prochazka
Peter Prochazka
tothecore.sk / @chorpo
From Hero to Zero
and back to Hero

https://tothecore.sk/
https://twitter.com/chorpo
http://goodreads.com/chorpo
https://linkedin.com/in/chorpo
Peter Procházka
Quick Intro

The Project
(Initial description)

The Project
• Brown field project
• Existing Sitecore sites – on Prem:
1. Public facing website
• Sitecore 8.0 with MVC
• Built 5 years ago
• Little bit of Angular
2. Microsite – Only for members – Platform 1.0
• Sitecore 8.0 with MVC
• Vue.js
• Build last year
• Our project – Platform 1.1 -> Azure
• Build a new public facing website on top of Platform 1.0 on top of Sitecore
9.3

Sprint 0

Clash of the Titans

Sitecore 10 Sitecore 9.3
Sitecore version

Sprints 1 & 2

Sprints 1 & 2
• Setting DevOps pipelines
• Creating one click deployments
• Following “Build once, deploy anywhere”
• Creating API
• to wrap third-party APIs
• hide implementation details
• increasing security
• Creating components, layouts, …

Sprint 3

Sprint 4

The Design System

Atomic Design
Atomic Design

Atomic Design

Atomic Design
• Book

HTML5 and CSS3

HTML5

CSS3
• Frameworks
• Vanilla CSS
• CSS Frameworks / UI Kits:
• Bootstrap
• Foundation
• Bulma
• Utility-first
• Tailwind
• Windi

CSS3

JavaScript

JavaScript - Date

JavaScript - hoisting

JavaScript - npm

JavaScript – Basic knowledge
• Data types, variables, loops, functions
• Global/local scope
• Array methods like forEach(), map() and reduce(); pop(), push(), slice()
• Promises & async programming
• Fetch API and how to make HTTP requests

ECMAScript

ECMAScript
• JavaScript -> ECMAScript
• ECMAScript:
• JavaScript
• ActionScript
• JScript

ECMAScript
• ES1 – June 1997
• ES5 – December 2009
• ES5.1 – June 2011
• ES6 = ES2015 – June 2015
• ES2016
• ES2017
• ES2018

ES6 – Let and const
• var

ES6 - Let and const
• var
• var ->
• let
• const

ES6 - Arrow functions
• const myFunction = function() { //.. }}
• const myFunction = () => { //..}
• const myFunction = () => doSomething()
• const myFunction = (param1, param2) => doSomething(param1,
param2)
• const myFunction = param => doSomething(param)

ES6 - Arrow functions – Implicit return
• const myFunction = () => ‘Hello World’
• const myFunction = () => ({ value: ‘Hello World’ })

ES6 - Classes
• JavaScript => Prototypical inheritance
• ES6 Classes
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}

ES6 - Classes
• ES6 Class inheritance

React

React
• Key principles:
• Declarative
• Component-based
• Learn Once, Write Anywhere

React
• Virtual DOM
• DOM vs. Virtual DOM

React
• JSX

React
• React Official Documentation:
• https://reactjs.org/docs/hello-world.html

React
• Books

React
• Trainings
https://www.udacity.com/course/react-nanodegree--nd019

Sitecore JSS

Sitecore JSS
• Sitecore JavaScript SDK (JSS) is a set of npm packages that enable
implementing Sitecore apps using modern JavaScript frameworks:
• Core packages that abstract away the "Sitecore stuff" like talking to
different Sitecore APIs,
• Framework-specific packages with components that render data managed
by the core packages, and
• Simple starter apps for every supported framework.

Browser requests
URL
CMS founds
content, renders it
and serves HTML
Browser / client
displays rendered
HTML
Sitecore JSS – BE vs. FE - BE
SXA
Sitecore
ASP.NET

SXA
Sitecore JSS
React
Vanilla
JavaScript
Browser requests
content from CMS
API (Headless
Layout Service)
CMS finds content
and serves JSON
through API
Browser / client
creates markup
Layout
Services
Sitecore
ASP.NET
Sitecore JSS – BE vs. FE - FE

JSS - Programming Styles
Code-First Sitecore-First

JSS - Modes
Integrated Connected
Disconnected

Sitecore JSS – BE vs. FE - Tooling
• Visual Studio vs. Visual Studio Code
• VS Code is not mandatory ☺
• You can use anything – Notepad, Notepad++, Atom, … ;-)
• ESLint
• Prettier

Sitecore JSS – Creating project
• Four commands you need to use when creating new project:
• npm install -g @sitecore-jss/sitecore-jss-cli
• jss create my-first-jss-app react
• cd my-first-jss-app
• jss start
• When working with not the latest Sitecore/JSS, you need to use
this command instead:
• jss create my-first-jss-app react -b release/13.0.0
• More details on my blog:
• https://tothecore.sk/2021/03/24/creating-version-specific-sitecore-jss-
projects/

Sitecore JSS – Development
• Two commands you need to use during development:
• jss deploy app --includeContent --includeDictionary
• jss deploy items --language=de-DE --includeContent --includeDictionary

Sitecore JSS – No environment specific configuration
• No OOTB support
• Sitecore Rule Based Configuration
• https://doc.sitecore.com/developers/93/platform-administration-and-
architecture/en/rule-based-configuration.html
• API – GetSettings
• More details:
• https://tothecore.sk/2021/04/26/how-to-have-environment-specific-configuration-
with-sitecore-jss/

• RTFM
• https://tothecore.sk/2020/08/28/sitecore-jss-learning-resources-getting-
started-with-jss
• Practice, Practice, Practice, …
Sitecore JSS – Learning resources

Sitecore JSS – Yaml

The Project
(final description)

The Project
• Green field project instead of Brown field
• Our project – Platform 1.1
• Using Sitecore JSS
• With React
• On Sitecore 9.3
• Following Atomic Design
• Possible next steps:
• Upgrade to Sitecore 10.1
• Using Next.js
• Using Storybook

“The more languages you know, the more of a person you are”.
My grandfather
“The more languages you know, the more of a developer you are”.
Me

SITECORE JSS LEARNING RESOURCES / GETTING STARTED WITH JSS
https://tothecore.sk/2020/08/28/sitecore-jss-learning-resources-
getting-started-with-jss
https://doc.sitecore.net/
https://sitecorechat.slack.com/
https://sitecore.stackexchange.com/

Questions?
https://tothecore.sk/
https://twitter.com/chorpo
http://goodreads.com/chorpo
https://linkedin.com/in/chorpo
Peter Procházka

Thank you
and
may the force
be with you

From hero to zero and back to hero - SUG Chennai - 29.04.2021

Recommended

Recommended

More Related Content

More from Peter Procházka

More from Peter Procházka (11)

Recently uploaded

Recently uploaded (20)

From hero to zero and back to hero - SUG Chennai - 29.04.2021