The web is changing
Selling point: Website <=> CDN (only)
Sites deployed as Static Assets on CDN Servers.
Web Development nowadays has shifted.
Monolythic solutions are dying.
- Developing Wordpress or Drupal websites with both server and client codes package all together
Modern tools, technologies and languages such as Javascript, Babel, Webpack, ESLint.
- enable a whole new classes of applications that can be run blazing fast on the browser
- ease the development effort and help developers focus on delivering what matters to the business
- write modern javascript applications that can run on most browsers
The future is headless CMS and data that flows from multiple special purpose sources.
Companies are switching strategies for headless CMS:
- Wordpress headless CMS allows developers to use Wordpress as a platform to create data and use an API to interact with these data from client side.
- Drupal headless CMS, the same
- Magento
There are companies whose products are solely providing headless solutions such as Contentful.
Special purpose sources are used to develop websites:
- Contentful for content data of the whole website
- Shopify for commercial product listings
- Stripe for purchases
- Simple websites can also use Markdown files as data source
- Data located in an API that exist.
Client applications can focus on building custom UI Elements.
But, there are problems:
- Complex business logic to manage multiple data sources
- Tighly coupled UI for specific backends
- Hard to manage state management solution
How does Gatsby solve this problem:
- Centralize data access with GraphQL
- Deliver static assets to be published on any CDN: Netlify, Github.
Centralize: + Better explorability + Single source of truth + More scalable & team-friendly + Consistent, shareable dev workflow
Static assets + Blazing fast performance + Simpler deployment flow + Reduced DevOps overhead
How this works in Gatsby
- Node APIs to load any data source into GraphQL
- 'Early bind' data at build time
- Generate static assets
- Automate performance tuning
- Deploy to a CDN
- Rehydrate into a React app
Static Assets !== Static Apps
Gatsby Sites are Dynamic Sites
(Pull in the image of How Gatsby works: https://www.gatsbyjs.org/)
You should use GraphQL for everything and serve entire apps as static assets
Development today is different
Monolythic CMS is dying
Headless CMS: Wordpress, Magento moving to this solution
Whole new era of headless Content Management System such as: Contentful or Netlify CMS, Headless Wordpress, etc...
- https://github.com/postlight/headless-wp-starter
Postlight's Headless WordPress + React Starter Kit is an automated toolset that will spin up three things:
A WordPress backend that serves its data via the WP REST API and GraphQL.
A sample React frontend powered by the WP GraphQL API, which supports posts, pages, categories, menus, search, and user sign-in.
Another sample server-side rendered React frontend using Next.js powered by the WP REST API.
Shopify for serving shop items Stripe: commercial products Contentful: content cms Algolia: search
The future is Content Mesh
This is amazing:
- Manage data using purpose-built tools
- Load data from anywhere using APIs
- Build custom UIs that combine multiple data sources
This is terrible:
- Atrocious performance pitfalls
- Complex business logic to combine data sources
- UIs can be coupled with tightly coupled backends
- State management leads to nightmarish complexity
Async is hard
HOW TO TAME THE CONTENT MESH
- Centralize data access with GraphQL
- Serve only optimized static assets
Centralize: + Better explorability + Single source of truth + More scalable & team-friendly + Consistent, shareable dev workflow
Go static for everything + Blazing fast performance + Simpler deployment flow + Reduced DevOps overhead
How this works in Gatsby
- Node APIs to load any data source into GraphQL
- 'Early bind' data at build time
- Generate static assets
- Automate performance tuning
- Deploy to a CDN
- Rehydrate into a React app
Make the right thing the easy thing
Static Assets !== Static Apps
Gatsby Sites are Dynamic Sites
(Pull in the image of How Gatsby works: https://www.gatsbyjs.org/)
Explain the site components
Build schema and generate pages
GraphQL terms and concepts
- query
- mutation
- subscription
Core Concepts:
- Mental Model
- Type System
https://www.youtube.com/watch?v=WQLzZf34FJ8
GraphQL js server implementation https://github.com/graphql/graphql-js
GraphQL spec: https://github.com/graphql/graphql-spec
deploy to Netlify,
Use Gatsby and GraphQL to create engaging, modern web applications
Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps
Gatsby can pull data from any data sources: markdown, contentful, wordpress, APIs, Databases, JSON, CSV.
In this talk I will demonstrate using Gatsby contenful data source to fetch contents from Contentful and use GraphQL to extract only the necessary data to show on the browser.
Besides that, I will also demonstrate using React in Gatsby to fetch data dynamically from an API endpoint that exposes GraphQL and a traditional REST endpoint.
Static Site Generators https://www.staticgen.com/
Gatsby React-based static site generators for building content-driven website
(Gatsby graph)
CI/CD
Headless CMS : https://headlesscms.org/
API Based Content Management System (graph)
Netlify CMS Content from markdown on Github repo with an admin interface for editing content
Strapi Headless API creation
Kyle Mathews talk Gatsby.js: https://www.youtube.com/watch?v=Gtd-Ht-D0sg
Reasons to use:
- Fast
- React-based pages
webpagetest.org best tool for improving performance of websites.
"You give Gatsby React.js components and Gatsby compiles an optimized site."
Some of Gatsby's automated optimizations
- Inlined critical CSS
- for critical resources
- Per-route code/data splitting
- Prefetch soon-to-be-needed resources
"You don't have to think about performance, it just works"
"Gatsby is an early example of a web site compiler"
"Gatsby makes it simple to build fast, extensible websites"
https://reactjs.org/ website itself is built with Gatsby https://github.com/reactjs/reactjs.org/