Civic Hack on
the JAMstack
@bdougieYO
learning from
what works
@bdougieYO
Grand Master Flash
& The Furious Five
@bdougieYO@bdougieYO
@bdougieYO@bdougieYO
Simplicity
Cost
Speed
@bdougieYO@bdougieYO
@bdougieYO@bdougieYO
@bdougieYO@bdougieYO
The JAM Structure
Browser
Client
Build Tool
microservices
@bdougieYO@bdougieYO
@bdougieYO
@bdougieYO
Monolithic
Architecture
@bdougieYO
@bdougieYOsandwich.netlify.com
@bdougieYO
The JAM Architecture
APIClient
@bdougieYO
@bdougieYOsandwich.netlify.com
@bdougieYO
The JAM Architecture
APIClient
@bdougieYO
@bdougieYOsandwich.netlify.com
@bdougieYO
Spread the JAM
@bdougieYO
Sample from what is
good
@bdougieYO@bdougieYO
@bdougieYO@bdougieYO
@bdougieYO@bdougieYO
API Client
@bdougieYO@bdougieYO@bdougieYO
@bdougieYO@bdougieYO@bdougieYO
@bdougieYO@bdougieYO
Markdown powered client
@bdougieYO@bdougieYO@bdougieYO
History
@bdougieYO@bdougieYO
about contact
The Static Website
index.html
@bdougieYO@bdougieYO
@bdougieYO@bdougieYO
@bdougieYO@bdougieYO
Not
JAM
stack
@bdougieYO@bdougieYO
The Website Architecture
Client
Web Server
App Server
Database
@bdougieYO@bdougieYO
The Website
Client
Web Server
App Server
Database
Monolithic
Application
@bdougieYO@bdougieYO
@bdougieYO@bdougieYO
Wordpress
@bdougieYO@bdougieYO
The Website w/plugins
Client
Web Server
App Server
Database
Monolithic
Application
@bdougieYO@bdougieYO
plugins
plugins
plugins
plugins
@bdougieYO
Who is handling?
speed, cost, security
@bdougieYO
@bdougieYO
Wordpress
@bdougieYO
sandwich.netlify.com @bdougieYO
@bdougieYO
@bdougieYO@bdougieYO
The durag error for rap
sandwich.netlify.com @bdougieYO
bundled.netlify.com @bdougieYO
@bdougieYO@bdougieYO
Through the fire
sandwich.netlify.com @bdougieYO
bundled.netlify.com @bdougieYO
@bdougieYO@bdougieYO
Through the wire
@bdougieYOsandwich.netlify.com
@bdougieYO
The JAM Architecture
APIClient
@bdougieYO
Today
(sort-of)
@bdougieYO@bdougieYO
index.html about contact
Statically Bundled Output
@bdougieYO@bdougieYO
Static Site Generators
@bdougieYO@bdougieYO
@bdougieYO
index.html about contact
Markdown Files
@bdougieYO
@bdougieYO@bdougieYO
Continuos Integration
@bdougieYO@bdougieYO
The JAM Architecture
Client
Git
@bdougieYO
CI
@bdougieYO
Continuous Integration (CI)
CDN
Continuous Delivery
Git
@bdougieYO@bdougieYO
Continuous Delivery
Browser
Client
Build Tool
microservices
@bdougieYO@bdougieYO
The Modern Website
CDN
Continuous Delivery
Git
@bdougieYO@bdougieYO
Simplicity
New fresh look on the CMS
bundled.netlify.com @bdougieYO
@bdougieYO@bdougieYO
@bdougieYO
netlifycms.org
@bdougieYO
@bdougieYO
My Middleman Blog
@bdougieYO
Netlify CMS
@bdougieYO
Netlify Hugo Marketing/Docs Site
@bdougieYO
@bdougieYO
netlify/netlify-cms
@bdougieYO
@bdougieYO@bdougieYO
Started door
@bdougieYO
JAM Restaurant App
@bdougieYO
@bdougieYO
Flexible Menu Updating
@bdougieYO
@bdougieYO
Flexible Menu Updating
@bdougieYO
@bdougieYO
Flexible Image Gallery
@bdougieYO
@bdougieYO
Flexible Image Gallery
@bdougieYO
@bdougieYO@bdougieYO
@bdougieYO
Reservations
@bdougieYO
@bdougieYO
Serverless Reservations
@bdougieYO
@bdougieYO
Serverless Reservations
@bdougieYO
@bdougieYO
Serverless Reservations
@bdougieYO
More Simplicity
@bdougieYO
http://www.benmvp.com/bart-salmon/
@bdougieYO
@bdougieYO
http://www.benmvp.com/bart-salmon/
@bdougieYO
APIClient
@bdougieYO
https://www.opensmc.tech/
@bdougieYO
@bdougieYO
https://www.opensmc.tech/
@bdougieYO
BackendClient
Cost
@bdougieYO
It’s cost less
@bdougieYO
@bdougieYO
It’s really does
@bdougieYO
@bdougieYO
it’s rude to talk
about money
@bdougieYO
@bdougieYO
Outsource
Complexity
@bdougieYO
@bdougieYO
Outsource
Complexity
Without the Cost
@bdougieYO
@bdougieYO
Auth w/Auth0
@bdougieYO
@bdougieYO
Auth w/Auth0
@bdougieYO
@bdougieYO
Commerce w/Snipcart
@bdougieYO
@bdougieYO@bdougieYO
@bdougieYO@bdougieYO
@bdougieYO@bdougieYO
do more with actual
plugins
Speed
performance.sucuri.net
@bdougieYO@bdougieYO
*green is good, red is bad
@bdougieYO@bdougieYO
@bdougieYO@bdougieYO
@bdougieYO
CDN
@bdougieYO
@bdougieYO
before after
@bdougieYO
Speed, Cost,
Simplicity, but what
about?
Server-side
Rendering
Serverless-side
Rendering
iot
email
rest apis
schedulers
notifications
form handling
user database
continuous automation
@bdougieYOhttps://github.com/serverless/examples @bdougieYO
SEO
@bdougieYOsandwich.netlify.com
@bdougieYO
The JAM Architecture
APIClient
@bdougieYO
SEO?
Static sites don’t
need servers
@bdougieYO
It’s Static HTML
@bdougieYO
@bdougieYO
or bundles to static
at build time (React)
@bdougieYO
Templates
@bdougieYO@bdougieYO
@bdougieYO
templates.netlify.com
@bdougieYO
@bdougieYO
https://www.netlify.com/blog/2017/10/05/coding-modern-
websites-with-the-jamstack-part-1/
@bdougieYO
http://bit.ly/tastyEggRolls
@bdougieYO
1. Clone from templates.netlify.com
2. Connect the CMS
3. Add a menu item
4. Change the name of the restaurant
@bdougieYO
Some other things
@bdougieYO
Site of the week
@bdougieYO
@bdougieYO
Algolia Search
@bdougieYO
@bdougieYO
SparkPost Emails
@bdougieYO
@bdougieYO@bdougieYO
@bdougieYO

Civic hacking on the JAMstack