More Related Content
Similar to Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and whatever else via Apollo/GraphQL (20)
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 [email protected] Happy to share my knowledge of this stack and aim to learn it better Thank you!