SlideShare a Scribd company logo

Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and whatever else via Apollo/GraphQL

•
•
A
Adam Khan

With the explosion of open source JavaScript, it's time to migrate from building web-based systems on a monolithic CMS to a decoupled, componentized, reactive open source technology stack. [Presented at the Brighton Web Development Meetup, October 2018, Brighton, UK]

Related slideshows

Progressive web apps with QCObjects (AngularJS Chile Community Talk)
Progressive web apps with QCObjects (AngularJS Chile Community Talk)Progressive web apps with QCObjects (AngularJS Chile Community Talk)
Progressive web apps with QCObjects (AngularJS Chile Community Talk)
 
Play Framework on Google App Engine - Productivity Stack
Play Framework on Google App Engine - Productivity StackPlay Framework on Google App Engine - Productivity Stack
Play Framework on Google App Engine - Productivity Stack
 
Graph ql subscriptions through the looking glass
Graph ql subscriptions through the looking glassGraph ql subscriptions through the looking glass
Graph ql subscriptions through the looking glass
 
1 of 25
Download to read offline
Between a SPA 
 & a JAMstack Building web sites with 
 Nuxt/Vue, Strapi and whatever else 
 via Apollo/GraphQL
Troubles with My 
 Content Management System Once upon a time...
 a new CMS (ExpressionEngine) offered custom fields and relationships. ...But then came performance issues
 with nested relationships and embedded templates.
Techniques for dealing with monolithic CMS troubles Minimize embeds Query database directly Add caching layer Use PJAX / Barba.js
Meanwhile, this happened Open Source JavaScript explosion NPM a huge repository; should leverage Node enables same language all the way down; hunch this is immensely powerful My limited mental capacity; work not in a product but in a standard
New ways tried
 but not taken Pylons Meteor CraftCMS React
What I wanted Reactivity Live page updates for users without refreshing No unnecessary reloading of same stuff when user navigates internally Instant page updates while developing so less distraction, faster development, fewer errors
What I wanted Componentization A different cross-cut of separation of concerns BEM not just for CSS
What I wanted Focus not on a product 
 but on a standard More power by leveraging widest catalog of others’ open- source projects Wider community More future-proofing as less product lock-in Likely better performance as fewer layers Increased modularity as various parts may be swapped out over time given new developments More marketable skills
Nuxt (Vue) for the presentation Why Vue? JavaScript framework with reactivity and componentization! Unlike React, respects HTML, CSS & JS Unlike React, felt relatively easy to learn
 (incrementally adoptable, clear docs) Intuitive and elegant (eg ":", "@" prefixes) Burgeoning standard
 (developers’ favourite, overtaken React in Github stars),
 Editor tools Great leadership & community
WhyVue? Great leadership 
 & community Adept leadership by founder EvanYou (Vue CLI) Sharp, organized, high-morale community leaders (DevTools) Cottage industry of tutorial sites (Vue Mastery) https://news.vuejs.org 
 including podcast Vue.js London Meetup
Nuxt (Vue) for the presentation Why Nuxt? Single-file components out the box! Easy to install Automatic code-splitting to optimize performance Enables both SSR and static output (for full JAMstack) Embraced byVue community
Nuxt (Vue) for the presentation Basic Vue usage https://vuejs.org/v2/guide/ {{ }} v-bind / : v-if v-for v-on / @ v-model
Single-file Components More efficient for the designer as more material is reused Easier and more pleasant for the user to understand interface as it’s more consistent and chunky Easier for the developer to locate JS and CSS code and to conceptualize what it’s doing Easier for teams to work simultaneously on various parts Vue docs on the topic:
 https://vuejs.org/v2/guide/single-file-components.html
Nuxt (Vue) for the presentation Basic Nuxt implementation Recommended byVue:
 https://vuejs.org/v2/guide/ssr.html#Nuxt-js Pages Components nuxt.config.js
Strapi for the content A Quick Look at Strapi https://strapi.io/ Free, open source, self-hosted https://strapi.io/marketplace/graphql 
 based on Apollo
What is GraphQL? Query language (created by Facebook for internal use then open-sourced) to serve and retrieve content Supersedes API https://graphql.org/ by Facebook
 https://www.graphql.com/ by Apollo
Why use GraphQL? Client-, not server-focused Facilitates modularity / decoupled architecture, especially with schema stitching
 https://github.com/apollographql/graphql-tools More on schema stitching:
 https://blog.apollographql.com/graphql-schema- stitching-8af23354ac37
 https://blog.hasura.io/the-ultimate-guide-to-schema- stitching-in-graphql-f30178ac0072
Why Apollo? Current standard (and advanced) way to handle GraphQL SupportsVue, Nuxt Caching out the box https://www.apollographql.com/ why-graphql
Why not pure JAMstack My focus is on web-based systems than web sites Web-based systems have more bitty, frequently- updated content and smaller audiences Other types of site definitely better suited, eg, publications And Nuxt provides the option for serverless!
 https://nuxtjs.org/guide#static-generated-pre-rendering-
Let’s Take a Look
 at an
 Existing Project
Dive In(stall)? Gotta get comfortable with package management Install Homebrew Install Node (via Node web site or Homebrew) Install Strapi
 https://strapi.io/documentation/3.x.x/getting-started/ installation.html#requirements Install Strapi GraphQL Server Install Nuxt
 https://nuxtjs.org/guide/installation/ Install Apollo Client 
 https://github.com/nuxt-community/apollo-module Create a little site, starting from the back?
Gotchas Nuxt Only HTML can be output, not XML, so no easy way to produce an RSS feed A lot ends up in nuxt.config.js Strapi Software immature so some surprising missing functionality (eg, no spaces in field names) Company immature and has made some rash decisions (eg, premiere tier came and went quickly) Cpanel written in... React! (fine for React people)
Deployment Platform as a Service
 Netlify, Heroku, Firebase
 More expensive, ease of use Shared hosting
 Must allow Node, Mongodb
 Cheaper, limited power, some help Cloud Hosting
 Linode, Digital Ocean
 Cheaper, full power, you’re on your own
Some concluding reminders of why we’re here Componentatization Reactivity Using free and open source code Using widely-used standards Got vertical and horizontal superpowers thanks to Node and NPM
About Me adam@engaging.net Happy to share my knowledge of this stack and aim to learn it better Thank you!

More Related Content

Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and whatever else via Apollo/GraphQL

  • 1. Between a SPA 
 & a JAMstack Building web sites with 
 Nuxt/Vue, Strapi and whatever else 
 via Apollo/GraphQL
  • 2. Troubles with My 
 Content Management System Once upon a time...
 a new CMS (ExpressionEngine) offered custom fields and relationships. ...But then came performance issues
 with nested relationships and embedded templates.
  • 3. Techniques for dealing with monolithic CMS troubles Minimize embeds Query database directly Add caching layer Use PJAX / Barba.js
  • 4. Meanwhile, this happened Open Source JavaScript explosion NPM a huge repository; should leverage Node enables same language all the way down; hunch this is immensely powerful My limited mental capacity; work not in a product but in a standard
  • 5. New ways tried
 but not taken Pylons Meteor CraftCMS React
  • 6. What I wanted Reactivity Live page updates for users without refreshing No unnecessary reloading of same stuff when user navigates internally Instant page updates while developing so less distraction, faster development, fewer errors
  • 7. What I wanted Componentization A different cross-cut of separation of concerns BEM not just for CSS
  • 8. What I wanted Focus not on a product 
 but on a standard More power by leveraging widest catalog of others’ open- source projects Wider community More future-proofing as less product lock-in Likely better performance as fewer layers Increased modularity as various parts may be swapped out over time given new developments More marketable skills
  • 9. Nuxt (Vue) for the presentation Why Vue? JavaScript framework with reactivity and componentization! Unlike React, respects HTML, CSS & JS Unlike React, felt relatively easy to learn
 (incrementally adoptable, clear docs) Intuitive and elegant (eg ":", "@" prefixes) Burgeoning standard
 (developers’ favourite, overtaken React in Github stars),
 Editor tools Great leadership & community
  • 10. WhyVue? Great leadership 
 & community Adept leadership by founder EvanYou (Vue CLI) Sharp, organized, high-morale community leaders (DevTools) Cottage industry of tutorial sites (Vue Mastery) https://news.vuejs.org 
 including podcast Vue.js London Meetup
  • 11. Nuxt (Vue) for the presentation Why Nuxt? Single-file components out the box! Easy to install Automatic code-splitting to optimize performance Enables both SSR and static output (for full JAMstack) Embraced byVue community
  • 12. Nuxt (Vue) for the presentation Basic Vue usage https://vuejs.org/v2/guide/ {{ }} v-bind / : v-if v-for v-on / @ v-model
  • 13. Single-file Components More efficient for the designer as more material is reused Easier and more pleasant for the user to understand interface as it’s more consistent and chunky Easier for the developer to locate JS and CSS code and to conceptualize what it’s doing Easier for teams to work simultaneously on various parts Vue docs on the topic:
 https://vuejs.org/v2/guide/single-file-components.html
  • 14. Nuxt (Vue) for the presentation Basic Nuxt implementation Recommended byVue:
 https://vuejs.org/v2/guide/ssr.html#Nuxt-js Pages Components nuxt.config.js
  • 15. Strapi for the content A Quick Look at Strapi https://strapi.io/ Free, open source, self-hosted https://strapi.io/marketplace/graphql 
 based on Apollo
  • 16. What is GraphQL? Query language (created by Facebook for internal use then open-sourced) to serve and retrieve content Supersedes API https://graphql.org/ by Facebook
 https://www.graphql.com/ by Apollo
  • 17. Why use GraphQL? Client-, not server-focused Facilitates modularity / decoupled architecture, especially with schema stitching
 https://github.com/apollographql/graphql-tools More on schema stitching:
 https://blog.apollographql.com/graphql-schema- stitching-8af23354ac37
 https://blog.hasura.io/the-ultimate-guide-to-schema- stitching-in-graphql-f30178ac0072
  • 18. Why Apollo? Current standard (and advanced) way to handle GraphQL SupportsVue, Nuxt Caching out the box https://www.apollographql.com/ why-graphql
  • 19. Why not pure JAMstack My focus is on web-based systems than web sites Web-based systems have more bitty, frequently- updated content and smaller audiences Other types of site definitely better suited, eg, publications And Nuxt provides the option for serverless!
 https://nuxtjs.org/guide#static-generated-pre-rendering-
  • 20. Let’s Take a Look
 at an
 Existing Project
  • 21. Dive In(stall)? Gotta get comfortable with package management Install Homebrew Install Node (via Node web site or Homebrew) Install Strapi
 https://strapi.io/documentation/3.x.x/getting-started/ installation.html#requirements Install Strapi GraphQL Server Install Nuxt
 https://nuxtjs.org/guide/installation/ Install Apollo Client 
 https://github.com/nuxt-community/apollo-module Create a little site, starting from the back?
  • 22. Gotchas Nuxt Only HTML can be output, not XML, so no easy way to produce an RSS feed A lot ends up in nuxt.config.js Strapi Software immature so some surprising missing functionality (eg, no spaces in field names) Company immature and has made some rash decisions (eg, premiere tier came and went quickly) Cpanel written in... React! (fine for React people)
  • 23. Deployment Platform as a Service
 Netlify, Heroku, Firebase
 More expensive, ease of use Shared hosting
 Must allow Node, Mongodb
 Cheaper, limited power, some help Cloud Hosting
 Linode, Digital Ocean
 Cheaper, full power, you’re on your own
  • 24. Some concluding reminders of why we’re here Componentatization Reactivity Using free and open source code Using widely-used standards Got vertical and horizontal superpowers thanks to Node and NPM
  • 25. About Me adam@engaging.net Happy to share my knowledge of this stack and aim to learn it better Thank you!