Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Learn how to go headless with Jahia DX by Serge Huber

150 views

Published on

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

Published in: Business
  • Be the first to comment

  • Be the first to like this

Learn how to go headless with Jahia DX by Serge Huber

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 23. © 2002-2018 Jahia© 2002-2018 Jahia Q & A
  24. 24. © 2002-2018 Jahia© 2002-2018 Jahia Up next ! Join me for my live React App coding session after the break !
  25. 25. © 2002-2018 Jahia

×