Serge Huber, Chief Technical Officer & Co-Founder of Jahia demonstrates the process and implications of going Headless with Web CMS expecially Jahia DX.

1. © 2002-2018 Jahia© 2002-2018 Jahia
Learn how to go
headless with Jahia
DX
Serge Huber, CTO &
Co-founder of Jahia
shuber@jahia.com

2. © 2002-2018
Jahia
© 2002-2018
Jahia
Introduction
20 years Web Dev
experience
Coder at heart
(since I’m 7)
Very interested in
User experiences
Co-founder & CTO
of Jahia
Apache Committer
(Jackrabbit, Unomi)
Co-chair OASIS
Context Server TC

3. © 2002-2018 Jahia© 2002-2018 Jahia
What is headless ?
● Jahia is a full-blown CMS that includes:
○ Content definitions
○ Content editing
○ Content API
○ HTML Page delivery (including caching)
● Headless CMS = CMS without the HTML page delivery.

4. © 2002-2018 Jahia© 2002-2018 Jahia
When do you need it ?
● When you don’t want to use a CMS’ default rendering system
● When you need to integrate a CMS’ content with another system
(CMS, delivery server)
● When you’re building a mobile or desktop app

5. © 2002-2018 Jahia© 2002-2018 Jahia
What can you do with it ?
● Single page applications
● Custom website with dynamic components
● Mobile applications (hybrid or native)
● Desktop apps (hybrid or native)

6. © 2002-2018 Jahia© 2002-2018 Jahia
GetAway App
● Example single-page
application built using:
○ ReactJS
○ NPM / NodeJS
○ Apollo GraphQL Client
● SPA Showcase on top of Jahia
DX
● Uses the new GraphQL API
● Doesn’t require DX to run
● Runs on any web server (even
static)

7. © 2002-2018 Jahia© 2002-2018 Jahia
GetAway App - Under the hood
Jahia DX Server
DX Security
Filter
GetAway DX
Module
GetAway ReactJS App
React Components
Apollo GraphQL
client
DX GraphQL API
JCR content
- Content definitions
- Set permissions for
GraphQL API
- GraphQL extensions
Google Places API
Wikipedia API

8. © 2002-2018 Jahia© 2002-2018 Jahia
Content Manager - Quick demo
● A headless backend UI !
● Create / manage content for headless
applications
● Built using React and DX GraphQL API !
● Integrates with Marketing Factory & site
settings
● Design is not finalized, please be nice !
SNEAK PREVIEW

9. © 2002-2018 Jahia© 2002-2018 Jahia
Content Manager - Under the
hood
Jahia DX Server
DX Security
Filter
DX GraphQL API
Jahia Content & Media Manager (in browser)
React Components
Apollo GraphQL
client
GWT
Components
GWT Backend
Redux Store

10. © 2002-2018 Jahia© 2002-2018 Jahia
Content Manager - Pluggable !
● Left menu is pluggable !
● DX modules can extend it
● Already used to integrate
Marketing Factory and (some)
site settings into the Content
Manager
● May be extended using pure
Javascript or Java !

11. © 2002-2018 Jahia© 2002-2018 Jahia
Why React ?
● Most used front-end development framework in the world !
● Based on reusable components
● Can integrate with many “state” libraries such as Redux or Apollo
GraphQL Client
● Highly compatible & fast
● Compose components to build more complex ones

12. © 2002-2018 Jahia© 2002-2018 Jahia
React Material
● React components
implementing Google’s
Material Design
● Easy to integrate
● Responsive components
● Includes layouts and form
components
● Supports theming

13. © 2002-2018 Jahia© 2002-2018 Jahia
GraphQL
● An modern alternative
to REST APIs
● Exposes object types
and fields (aka
relationships)
● Uses a defined (but
mutable) schema
● Get just the data you
need

14. © 2002-2018 Jahia© 2002-2018 Jahia
What is it ?
● A way to retrieve objects and related objects
connected through relationships (called
fields). E.g: get a person and its friends
● A schema that can be used to introspect
existing GraphQL APIs (as well as help self-
document)
● Complex schemas may be exposed through a
single URL endpoint
● An optimized way of retrieving data from
servers
● Can be used as a gateway to other APIs (REST,
GraphQL, …)

15. © 2002-2018 Jahia© 2002-2018 Jahia
What is it not ?
● It is NOT a table data query language with clauses like SQL
● An URL scheme (like REST)
● An “architecture style” (like REST)
● Payload is not undefined (JSON response only)
SELECT * FROM tableName
WHERE columnName = ‘value’;

16. © 2002-2018 Jahia© 2002-2018 Jahia
GraphQL vs REST
● Multiple REST queries
vs single GraphQL
query
● Only needed fields in
GraphQL response
● GraphQL Query
validation before
execution
● Types can evolve over
time
● REST can be multiple
endpoints
● GraphQL has type
schema
Schema source: https://medium.com/chute-engineering/graphql-in-the-age-of-rest-apis-b10f2bf09bba

17. © 2002-2018 Jahia© 2002-2018 Jahia
Apollo GraphQL Client
● Powerful GraphQL client library available on lots of platforms
(including native mobile !)
● Includes advanced features such as browser-side caching and batching
● Production ready

18. © 2002-2018 Jahia© 2002-2018 Jahia
Authorization
By default all GraphQL calls are “filtered”, even for
content that is available to guest user
Authorizations must be configured to be able to access
content through the GraphQL API
React
Components
Apollo GraphQL
client
Jahia DX Server
DX Security
Filter
DX GraphQL API

19. © 2002-2018 Jahia© 2002-2018 Jahia
GraphiQL
Javascript Tool to:
- Browse GraphQL schema and
documentation
- Test GraphQL queries and
mutations
Features:
- Auto-completion
- Prettify
- Auto-save of queries and
mutations in browser local
storage

20. © 2002-2018 Jahia© 2002-2018 Jahia
GraphiQL - Demo queries
QUERY 1 - GET ROOT NODE
{
jcr {
nodeByPath(path: "/") {
path
properties(language: "en") {
name
value
}
}
}
}
QUERY 2 - GET ROOT USER
query getRootUser($language: String) {
jcr {
nodeByPath(path: "/users/root") {
path
properties(language: $language) {
name
value
}
}
}
}
QUERY VARIABLES
{
"language": "en"
}

21. © 2002-2018 Jahia© 2002-2018 Jahia
GraphiQL - Demo mutations
MUTATION
mutation modifyRootUser($propName: String!, $propValue: String) {
jcr {
mutateNode(pathOrId: "/users/root") {
mutateProperty(name: $propName) {
setValue(value: $propValue)
}
}
}
}
QUERY VARIABLES
{
"propName": "j:organization",
"propValue": "Jahia Solutions"
}

22. © 2002-2018 Jahia© 2002-2018 Jahia
Extending DX GraphQL API
Any module can extend the DX GraphQL API with its own types and fields !
You can even add fields to existing types (such as JCR nodes) !
public class DXGraphQLMFProvider implements
DXGraphQLExtensionsProvider {
@Override
public Collection<Class<?>> getExtensions() {
return
Arrays.<Class<?>>asList(JCRNodeExtensions.class);
}
}
@GraphQLTypeExtension(GqlJcrNode.class)
public class JCRNodeExtensions {
private GqlJcrNode node;
public JCRNodeExtensions(GqlJcrNode node) {
this.node = node;
}
@GraphQLField
public PersonalizedResult getMarketingFactory(@GraphQLName("profileId") @GraphQLDescription("Unomi profile id") final
String profileId,
@GraphQLName("sessionId") @GraphQLDescription("Unomi session id") final
String sessionId, DataFetchingEnvironment environment) {
final Optional<HttpServletRequest> request = ((GraphQLContext) environment.getContext()).getRequest();
if (request.isPresent()) {
return new PersonalizedResult(node, new MyHttpServletRequestWrapper(request.get(), profileId, sessionId));
}
return null;
}

23. © 2002-2018 Jahia© 2002-2018 Jahia
Q & A

24. © 2002-2018 Jahia© 2002-2018 Jahia
Up next !
Join me for my live
React App coding
session after the
break !

25. © 2002-2018 Jahia