Moving to a headless solution based on sitecore 9 and javascript services

| Sitecore User Group Montreal, Mohamed Krimi
I
1
Moving to headless
solution with
Sitecore 9 and JSS
Mohamed Krimi,
Technology Director, Sitecore MVP

Technology Director, Sitecore MVP
I
2
About
Mohamed Krimi
https://creativeway.cloud
@medkrimi
➔ C# .Net Web developer 12+ years
➔ Solution Architect, Technical
Manager 7+ years
➔ I have been working for 12+
designing, implementing and
deploying enterprise scale CMS
and E-commerce Solutions
➔ First Sitecore contact 6.2
➔ Sitecore User Group Montreal
Organizer

| Sitecore User Group Montreal, Mohamed Krimi 3
WE
EMPOWER
COMPANIES
TO REACH
THEIR
DIGITAL
POTENTIAL
CMSs : Then and now1
Why Headless CMS?
Architecture and Benefits2
Sitecore Headless using
JavaScript Services3
Agenda
JSS in action with VueJS4

THEN vs NOW
Simple Static
Web Pages
Static &
Dynamic
Websites
1999
2003
CMS &
E-commerce
Advanced
Enterprise
CMS HEADLESS
Digital
Experience
Platform
2005
2015
2010
2017
FUTURE
ROI
Time
Internet of
things IoT
Mobility
Content authors
IT / Support administrators
Marketers / Digital Strategists
SEO
Social
Analytics
Data Analysts (SEO, Social, UX)
Cloud
Bots and
assistants
AR/VR

I
5
Why
Headless CMS?
Architecture and
benefits

Why
Headless CMS?
● Content Marketing is at the top of the trends in 2018: Content-first
approach is the way to build a relevant and efficient CX
● Supports Multiple Digital Channels (Desktop, Mobile, Smart Watches,
Smart TVs, IoT, Assistants, and Bots)
● Gives Front-end developers freedom to innovate using modern and
interactive development framework
● Agile Teams need more flexibility with rapid product engineering
6

Traditional, Non-headless CMS
7
● Large application code base
● Webpage HTML centric
● The Front-end part is tied to the
content and CMS constraints
● No separation between content
and presentation
● High costs for server hosting
requirements Traditional, coupled non-headless Architecture

Decoupled Architecture
8
● More flexibility than the
coupled CMS
● Same Code base
● The front-end part is physically
separated from the content
database
● Security
Decoupled Architecture

Headless Architecture
9
“A headless CMS is a content
management system that lets you
store, edit, and manage content—but
doesn’t actually render the content
on your audience’s screen.”
What you need to know about headless CMSs, Sitecore
Headless Architecture

Headless benefits
10

Headless benefits
11
● Content Objects via API

Headless benefits
12
● Non-html devices

Headless benefits
13
● Modern app development

Headless benefits
14
● True interactive experience

Headless benefits
15
● Cross-team dependency

Headless benefits
16
● Cost effective hosting options

Headless benefits
17
● Cost effective hosting options

I
18
Sitecore
Headless
Approach with
Javascript Services

Sitecore is “Headless-ready” by design
● Separate the content repository from the rendering
and presentation layer.
● Decoupled Content Management and Content
Delivery
● Sitecore Services client API
● then RESTful API (back to 7.5)
19

| Sitecore User Group Montreal, Mohamed KrimiYour Company Name 20
HOWEVER…
HOW TO BRING BUSINESS VALUE THROUGH
RELEVANT MULTI-CHANNEL DIGITAL
EXPERIENCE?

For “truly-Headless” Sitecore Solution
JSS brings back the power of
● Tracking
● Analytics
● Experience Editor
● Personalization
● Optimization and A/B testing
21

JSS Library (SDK)
Sitecore Layout
Services
Javascript View
Engine (SSR)
Application
Import Service
Behind the scene
App Settings
Dictionary
Service
StyleGuide
(Vue, React, Angular)StyleGuide
(Vue, React, Angular)StyleGuide
(Vue, React, Angular)
Decoupled
Front-end
Application

How can it help?
● 2 development Workflows:
○ Code-first
○ then Sitecore-first
● 4 Application modes:
○ Disconnected
○ Connected
○ Integrated
○ API-only mode
23
Efficient Front-end
JSS
Sitecore Features

How can it help?
● 3 Client Frameworks
○ Angular
○ React
○ VueJS
● 2+ Cloud Deployment options
○ Azure WDP (@Sitecorey’s blog)
○ Azure FTP (JSS Official doc)
○ Netlify (@alexshyba)
24

And what about Helix principles?
● Dependencies? Handled by default using NPM
● Layers? Not in the StyleGuide, you need customise
the Import Services to support Layers (@jflh)
● Modules? JavaScript Modern Application
development is component based
● Domains? Create your own to support business user
25

I
26
Let’s do it with
Sitecore 9,
JSS and VueJS

Before moving forward, ask the right question
● JSS does not fit all use cases
● JSS reduces time to market with
rapid content-first prototyping
● Keep the content-first approach,
however do not ignore Information
Architecture and Helix principles in
disconnected mode

● Next release Sitecore 9.1*
● JSS will be open source; not free to
use*
● Think twice about you business user
and try to map native CMS features
(Forms, Workflow, Multi-tenant,
Multi-culture) that bring value to your
customer.

WE
EMPOWER
COMPANIES
TO REACH
THEIR
DIGITAL
POTENTIAL
Thank you :)

Moving to a headless solution based on sitecore 9 and javascript services

More Related Content

Similar to Moving to a headless solution based on sitecore 9 and javascript services

Recently uploaded

Moving to a headless solution based on sitecore 9 and javascript services