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]

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!