Product Development with Vue.js @bermonpainter | #Confoo

JAMstack Concepts The Headless CMS Accelerating Development with Vue.js A Bit About Docker + Deployment 1 2 3 4 Product Development with Vue.js

JAMstack Concepts The Headless CMS Accelerating Development with Vue.js A Bit About Docker + Deployment 1 2 3 4 Product Development with Vue.js

Evolution Browser Server

Evolution Browser Server Database

Evolution Browser CDN Server Database

Evolution Browser CDN Server API Services Database

Evolution Browser CDN Build Tool API Services GIT Headless CMS Database

The JAMstack JavaScript Anything dynamic is handles by JavaScript. Framework agnostic. APIs Data is accessed over reusable APIs via HTTPs. Markup Served as static HTML, typically generated from a build tool.

But why? Performance You’re typically serving pre-built, optimized markup to a CDN as static content 1 2 Security CMS, server, database and other vulnerabilities are less of an issue (i.e. static site) 3 Tool Agnostic Choose whatever front-end framework, build tool, or data source you prefer 4 5 GIT Workflow Simplified build to deploy approach. Easier to contribute. Fewer dependencies (mostly) Dev Experience Focus on the front-end and worry less about databases, dev ops, or back-end dev 6 Separation of Concerns The front-end, backend, data, and devops can be completely decoupled

JAMstack Concepts The Headless CMS Accelerating Development with Vue.js A Bit About Docker + Deployment 1 2 3 4 Product Development with Vue.js

Headless CMS The HeadlessCMS A content management system decoupled from the end-user experience. Browser API Services Front-End Database Admin Interface

headlesscms.org

strapi.io

Why Strapi? It handles the bulk of the things I don’t enjoy doing manually Built-in API /w Docs You can generate an API from the admin interface or in your code editor 1 2 GraphQL or Restful Chose which API interface you prefer to integrate your front-end with 3 Built-in Auth Comes with decent auth and permission options to secure endpoints in the API 4 5 Built-in SMTP Set’s up an SMTP server by default Databases Choose a relational or on-relational database & Strapi will set it up for you 6 File uploads Handles file storage on the server or through 3rd parties (AWS, Cloudflare, etc).

No content

No content

Setting up relational data Companies

Setting up relational data People

Setting up relational data Videos

Setting up relational data Generated APIs

Setting up relational data Generated APIs

localhost:1340/videos

JAMstack Concepts The Headless CMS Accelerating Development with Vue.js A Bit About Docker + Deployment 1 2 3 4 Product Development with Vue.js

gridsome.org

Why Gridsome? It handles the bulk of the things I don’t enjoy doing manually (basically the Vue version of gatsbyjs.org Static Site Generator Provides a logical application structure with loosely held opinions on config vs customization 1 2 Fast Built in performance features like automatic code splitting, prefetching, & image optimization 3 Progressive Web App Automatically generates a single page web app with all of the built in optimization features 4 5 Easy Data Consumption Use any data source, from APIs to local JSON files. SEO Friendly by Default Loads as static HTML first with built in hydration for the SPA pieces 6 File driven Everything is based on client-side JavaScript, reusable APIs, and prebuilt Markup

The Workflow Browser Gridsome Layouts Templates Components Production Build Data Sources Local Files APIs CMSs GraphQL Data Layer

No content

Setup Setup Files gridsome.config.js gridsome.server.js Source Files /assets (optional) – /fonts – /images – /js – /scss Output /dist /components /data (optional) /layouts /templates

TEMPLATE 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.

TEMPLATE query {} import SiteSEO from '~/components/SiteSEO' export default { mixins: [SiteSEO], } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.

COMPONENT 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.

COMPONENT export default { name: 'Modal', methods: { close() { this.$emit('close'); }, }, }; 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.

COMPONENT .modal-fade-enter, .modal-fade-leave-active { opacity: 0; } .modal { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.

PAGE 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.

PAGE import videos from '@/data/videos.json' import Modal from '@/components/Modal.vue' import VideoPlayer from '@/components/Video.vue' export default { data() { return { videos, isModalVisible: false, } }, metaInfo: { title: 'A Powerful Merger' }, components: { Modal, VideoPlayer }, 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.

PAGE methods: { showModal() { this.isModalVisible = true; }, closeModal() { this.isModalVisible = false; } } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.

gridsome.server.js const axios = require('axios') module.exports = function (api) { api.loadSource(async ({ addCollection }) => { const { data } = await axios.get(‘https://localhost:1340/videos') const posts = addCollection('Videos') for (const video of data) { videos({ id: video.id, title: video.title, description: video.description, innovatorName: video.innovator.name, innovatorCompany: video.innovator.company }) } }) } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.

JAMstack Concepts The Headless CMS Accelerating Development with Vue.js A Bit About Docker + Deployment 1 2 3 4 Product Development with Vue.js

Why Docker? Ship Faster Makes it easier to deploy isolated environments with minimal setup 1 2 Standardized The container already has server info, dependencies, and the app set up 3 Portable Makes it easy to share instances with other devs and move to different environments Automates the deployment of applications as portable, self-sufficient containers that can run on the cloud, on your own servers, and on localhost

github.com/strapi/strapi-docker

Where to Deploy? Gridsome (front-end) Netlify (easiest) Github Pages Gitlab Pages Amazon S3 Your Server Strapi /w Docker (data) Azure Amazon AWS Digital Ocean Heroku (easiest)

Fin. Open Office Hours Friday mornings: 7:00am — 9:00am EST officehours.io/people/bermonpainter Twitter/LinkedIn @bermonpainter