Review of Craft CMS v3.3 release and how it helps Headless web applications. Will show a small tutorial courtesy of NYStudio107 of a VueJS, Craft and GraphQL application.
6. “WITH A HEADLESS APPROACH THERE IS NO FRONTEND OUT OF THE BOX”
WHAT IS HEADLESS?
• Decoupling.
• Static site (JAM stack.)
• Benefits:
• Performance,
• Security,
• Scalability,
• Portability.
8. “CRAFT CMS, TODAY, IS YOUR BEST OPTION FOR A HEADLESS CMS.”
HOW CAN CRAFT HELP?
• GraphQL Built In (Craft 3.3.)
• Element API (JSON if you need it.)
• Live Preview, Headless!
• Streamlined Admin:
• Removes routes and urls*,
• Allows singles without urls,
• Queries are optimized.
+
10. POPULAR USES FOR HEADLESS WEB APPS.
• SPA/PWA (Vue, React, Angular.)
• Static Site Generators:
• Gatsby, Gridsome.
• Host on CHEAP servers.
• Data available for Social Feeds.
• Large Data Pipeline:
• Content Warehouses,
• Search Engine Data Stores,
• iOS & Android Data Stores.
13. ”
“
— Andrew Welch, NYStudio107
WITH VUEJS, THE DOM IS A
SIDE-EFFECT OF YOUR DATA,
NOT THE OTHER WAY AROUND.
COURTESY: HTTPS://NYSTUDIO107.COM/BLOG/USING-VUEJS-GRAPHQL-TO-MAKE-PRACTICAL-MAGIC
14. AUTO-COMPLETE SEARCH
• VueJS Instance
• searchApi (the Axios instance
we will use to send & receive
GraphQL via http.)
• searchQuery (the search string
the user is looking for.)
• searchResults (object of
results if any of the search.)
COURTESY: HTTPS://NYSTUDIO107.COM/BLOG/USING-VUEJS-GRAPHQL-TO-MAKE-PRACTICAL-MAGIC
15. AUTO-COMPLETE SEARCH
• configureApi() function:
• Returns a config object that we
can pass to axios.create() for
our http requests so they all
have the same basic settings.
• Settings to pass in:
• apiUrl = default url CraftQL
listens to for GraphQL
requests.
• apiToken = Bearer tokens to
allow read/write to Craft CMS
(more..)
COURTESY: HTTPS://NYSTUDIO107.COM/BLOG/USING-VUEJS-GRAPHQL-TO-MAKE-PRACTICAL-MAGIC
16. AUTO-COMPLETE SEARCH
• Bearer Tokens
• Set these in Craft CMS.
• Define their permissions.
• NOT unique to Craft,
needed for ANY GraphQL
usage.
COURTESY: HTTPS://NYSTUDIO107.COM/BLOG/USING-VUEJS-GRAPHQL-TO-MAKE-PRACTICAL-MAGIC
17. AUTO-COMPLETE SEARCH
• HTML Markup
• {% verbatim %} tag?
• Both Twig and Vue use Mustache.
• Input bound to search query via
v-model attribute for VueJS.
• Input also bound via v-on:keyup
attribute, allowing query while
user types in input.
• List items with v-for attributes
for results parsing.
• {{ $data }} for easy debugging.
COURTESY: HTTPS://NYSTUDIO107.COM/BLOG/USING-VUEJS-GRAPHQL-TO-MAKE-PRACTICAL-MAGIC
18. AUTO-COMPLETE SEARCH
• GraphQL for Auto-complete
Search:
• performSearch() function.
• Checks emptiness.
• Set variables for GraphQL query:
• sections = Sections to search
in Craft CMS.
• needle = search string.
(prefixed with searchPrefix.)
• limit = the number of results
we want to return.
COURTESY: HTTPS://NYSTUDIO107.COM/BLOG/USING-VUEJS-GRAPHQL-TO-MAKE-PRACTICAL-MAGIC
19. AUTO-COMPLETE SEARCH
• Search constants
• searchSections = We only
want to search the Blog
Craft entries section.
• searchPrefix = We want to
narrow our search to the
Title field in those entries.
• searchQuery variable:
• Called via executeQuery()
• Defines query, and names/
types of incoming variables.
COURTESY: HTTPS://NYSTUDIO107.COM/BLOG/USING-VUEJS-GRAPHQL-TO-MAKE-PRACTICAL-MAGIC
20. AUTO-COMPLETE SEARCH
• searchQuery variable cont…
• GraphQL Schemas/Types
• Strict type system to ensure
purity and correctness of
data being passed into it.
• GraphQL will only return the
data you tell it to.
• Here we are returning Title
and URL from the queried
entries.
COURTESY: HTTPS://NYSTUDIO107.COM/BLOG/USING-VUEJS-GRAPHQL-TO-MAKE-PRACTICAL-MAGIC
21. AUTO-COMPLETE SEARCH
• Query callback:
• Runs when query is
successful.
• Set searchResults to subset
of the data returned.
• executeQuery() function:
• Using Axios, send a POST
request to our /api url with
our data.
• .post() returns a Promise
which we use to process
data or errors.
COURTESY: HTTPS://NYSTUDIO107.COM/BLOG/USING-VUEJS-GRAPHQL-TO-MAKE-PRACTICAL-MAGIC
26. SOME RECENT UPDATES
• GraphiQl IDE
• Included in CraftQL
integration.
• Allows you to play around
with queries and syntax with
live results.
• Incredibly handy for
debugging syntax/formatting
issues.
27. SOME RECENT UPDATES
• Craft Cloud
• PERFECT for Headless.
• Especially cost effective for
smaller clients and pet
projects.
• Should be rolling out Q2
2020 to the public, beta by
EOY 2019.
28. SOME RECENT UPDATES
• Plugin Support for GraphQL
• SEOMatic.
• Retour.
• More to come…
30. WRAP UP AND FREE LINKS
• Craft CMS 3.3 bundles GraphQL and adds some configurable options to tailor the
authoring experience for Headless application support.
• Headless development great for reactive applications where you want and/or need
immediate reactions to user actions.
• Headless development is beneficial to the client by adding security, performance
and data portability to the web application. Clients backend data is decoupled from
frontend frameworks and can be made available to new frameworks, or other data
consumption destinations.
• Craft Cloud coming soon to support cloud-based “serverless” Craft installs.
32. THANK YOU
CHARLOTTE CRAFT CMS MEETUP
“TESTING WITH CRAFT 3 TESTING FRAMEWORK”
NEXT MEETUP: WEDNESDAY NOVEMBER 13:
(ALSO UPDATING OUR LOGO BY NEXT MEETUP!)
SLIDESHARE.NET/JUSTINHOLT20/GOING-HEADLESS-WITH-CRAFT-CMS-33
