slides.md

theme	colorSchema	layout	image	fonts	css
apple-basic	light	intro-image	/cover.avif	sans serif mono Roboto Roboto Slab Fira Code	unocss

WTH is the Jamstack?

By André Varandas - @iamvarandas

---

layout: intro-image-right image: /wp-logo.png

LAMP Stack

Building a website with WordPress

Linux, Apache, MySQL, PHP

• Use it to build dynamic websites.
• Used by WordPress, Drupal, Joomla, etc.

---

layout: image-right image: /this-is-fine.jpg

Let's look into...

LAMP - (Linux, Apache, MySQL, PHP)

WordPress development flow

• Configure the stack
• Manage Wordpress, plugins and themes
• Developing and deploying

Maintaining the server

• Security patches
• Linux, PHP, MYSQL, Apache updates
• Backups, monitoring and logging

---

layout: image-right image: /wp-routing.svg

Let's look into...

LAMP Frontend Flow

https://andrevarandas.dev

Wordpress main() - entry point for every request.

public function main($query_args = '') {
    $this->init();
    $this->parse_request($query_args);
    $this->send_headers();
    $this->query_posts();
    $this->handle_404();
    $this->register_globals();

    do_action_ref_array('wp', array(&$this));
}

---

layout: intro-image-right image: /jam.png

WTH is Jamstack?

What is it?

• It's not a framework.
• It started as a marketing term.
• It's a way of building websites and apps.

---

Let's look into...

Must have

1. Markup generated from source files
2. CDN or static site hosting

Tools

1. Static site generators: 347
2. Headless CMS: 96
3. Countless amount of APIs.

Optional

1. Static site generator
2. Serverless functions or APIs
3. Headless CMS to manage content

---

layout: statement

Typical workflow

For developing a Jamstack site

1. Write content | Headless CMS, markdown, json files.
2. Write code for the frontend, microservices, use version control.
3. Build! Fetch content and convert to static files.
4. Deploy static files to a CDN/static site hosting.

---

layout: image-right image: /jamstack-flow.png

Let's look into...

Jamstack Frontend Flow

https://andrevarandas.dev

1. User requests a page
2. The CDN delivers the static files
3. The page is loaded and rendered
4. Client may request microservices

---

layout: intro-image-right image: /sutmm.jpeg

Advantages?

• Faster
• More secure
• Cheaper, easier to scale and maintain
• Developer-friendly

---

layout: statement

When to use it?

Use it when...

1. Marketing sites, blogs, eCommerce, documentation, etc.
2. When performance and SEO is a priority.

But not for...

1. Sites that need to be updated often or in real-time.
2. Sites that need to perform complex operations.

---

layout: statement

How to create a Jamstack site?

With Markdown, Next.js and Neflify

phplisbon.com

---

layout: intro-image-right image: /thank-you.jpg

Thank you!

You can reach me at

1. @iamvarandas
2. @andrevarandas