Backendless JAMstack talk by Ahmad Awais.

![image](img/jamstack.png)

[![img](img/Ahmad-Awais.png)](https://twitter.com/mrahmadawais/)

.footCenter.bio[⚠️ Press f to go full-screen.]

---

class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #7F16F2, #1E1D40)

.column_t2.font10em.partImgLeft[

</a>
]
.column_t2[.vmiddle.pushfront[

#### 👋 I'm

# Ahmad Awais

---

👨‍💻 Principal Developer Advocate (JS/FOSS)

🌳 Node.js TLC Community Committee Member

🦊 Google Developers Expert in Web Technology

🎩 Open Sourcerer & WordPress Core Developer

🤯 Over 1,781,061 devs use my open source code

🌍 Over 631,123 sites use the products I have built

👷‍♂️ EE-CS Engineer turned Emojineer <small>Most definite #TrueStory</small>

---

.bio[Rants on Twitter [@MrAhmadAwais →](https://twitter.com/mrahmadawais/)]
.bio.smLnk[[FOSS GitHub](https://github.com/ahmadawais) | [AhmadAwais.com](https://AhmadAwais.com/) | [LinkedIn](https://www.linkedin.com/in/mrahmadawais/)]

]]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #875EFF, #28A1F2)

#### 🐦 Follow

# .noLnk[[@MrAhmadAwais](https://twitter.com/mrahmadawais/)]

---

✍️ Using it as a mini personal blog

🔥 .smLnk[[#OneDevMinute](https://Awais.dev/ODMTweets)] development tips!

🤣 Developer jokes/rants‚ you name it

💯 I Retweet/Like Good Content <small><i>- No Automation there</i></small>

---

.bio.smLnk[MOAR: [FOSS GitHub](https://github.com/ahmadawais) | [AhmadAwais.com](https://AhmadAwais.com/) | [LinkedIn](https://www.linkedin.com/in/mrahmadawais/)]

]]
.column_t2.font10em.partImgRight[

</a>
]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #373277, #4D43D1)

# 👨‍🏫 .noLnk[[VSCode.pro](https://VSCode.pro)]

---

After ten years of Sublime, in 2017 I completely switched over to this new open source code editor called Visual Studio Code. I couldn't be happier.

---

✅ JavaScript Based Open Source Editor

🎉 I was able to contribute to VSCode

💜 .smLnk[[Shades of purple ↣](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple)] my first code editor theme is used by over 1,555,060 developers in .smLnk[[VSCode](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple)], .smLnk[[iTerm2](https://github.com/ahmadawais/shades-of-purple-iterm2)], .smLnk[[Hyper](https://github.com/ahmadawais/shades-of-purple-hyper)], .smLnk[[Slack](https://github.com/ahmadawais/shades-of-purple-slack)], .smLnk[[Alfred](https://github.com/ahmadawais/shades-of-purple-alfred)], .smLnk[[Highlight.js](https://github.com/ahmadawais/Shades-of-Purple-HighlightJS)], & .smLnk[[more](https://github.com/ahmadawais/shades-of-purple-vscode#put-shades-of-purple-in-other-places)].

---

🌟 Sign up to [become a VSCode Power User →](https://VSCode.pro/)

👨‍💻 👩‍💻 13,526+ Developers already learning

---

]]
.column_t2.font10em.partImgRight[

</a>
]

---

---

class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #DCE35B, #48B749)

.column_t2.font10em.partImgLeft[

</a>
]
.column_t2[.vmiddle.pushfront[

# [CLOUDYCAM.dev](https://cloudycam.dev)

---

Cloudinary's Developer Activation

---

]]

---

class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #DCE35B, #48B749)

.column_t2.font10em.partImgLeft[

</a>
]
.column_t2[.vmiddle.pushfront[

# [CLOUDYCAM.dev](https://cloudycam.dev)

---

Cloudinary's Developer Activation

---

🤔 Internet of Things (IoT)

]]

---

class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #DCE35B, #48B749)

.column_t2.font10em.partImgLeft[

</a>
]
.column_t2[.vmiddle.pushfront[

# [CLOUDYCAM.dev](https://cloudycam.dev)

---

Cloudinary's Developer Activation

---

🤔 Internet of Things (IoT)

🗃️ Built with the JAMstack

]]

---

class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #DCE35B, #48B749)

.column_t2.font10em.partImgLeft[

</a>
]
.column_t2[.vmiddle.pushfront[

# [CLOUDYCAM.dev](https://cloudycam.dev)

---

Cloudinary's Developer Activation

---

🤔 Internet of Things (IoT)

🗃️ Built with the JAMstack

🤩 Progressive Web Application

]]

---

# Project Requirements

<hr>

📸 Take a picture

<hr>

🖼️ Upload to Cloudinary

<hr>

🗃️ Build a demo user page

<hr>

---

---

# Developer Experience

<hr>

🗃️ Build in less than 15 seconds

<hr>

🖼️ Multiple simultaneous demos at an event

<hr>

🤔 Multiple developer events with multiple demos

<hr>

---

---

class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #F2C54B, #E44E27)

.column_t2.font10em.partImgLeft[

]
.column_t2[.vmiddle.pushfront[

# DECISIONS

---

### 🤔 Frontend?!

]]

---

class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #F2C54B, #E44E27)

.column_t2.font10em.partImgLeft[

]
.column_t2[.vmiddle.pushfront[

# DECISIONS

---

### 🤔 Frontend?!

---

### 🤔 Backend?!

]]

---

class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #F2C54B, #E44E27)

.column_t2.font10em.partImgLeft[

]
.column_t2[.vmiddle.pushfront[

# DECISIONS

---

### 🤔 Frontend?!

---

### 🤔 Backend?!

---

### 🤔 Documentation?!

]]

---

# 😭  → 😫  → 😠  → 😐  → 🤔  → 🧐  → ❓

## FEELING OVERWHELMED?

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #B0B0B9, #24243E)

# [JAMstack](https://jamstack.org/)

---

A revolution in itself. Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

---

😎 **JavaScript**: Running entirely on the client

🤯 **APIs**: Reusable APIs, accessed over HTTPS

🤩 **Markup**: Templated markup e.g. Markdown

]]
.column_t2.font10em.partImgRight[

</a>
]

---

class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #F0DB4F, #F0DB4F)

.column_t2.font10em.partImgLeft[

]
.column_t2[.vmiddle.pushfront[

# JavaScript

---

Best* programming language at the moment.

---

✅ **JOBS**: High-paid jobs

🔥 **FUN**: Super fun to write (*sometimes)

⚡ **CUTTING EDGE**: Always improving; dev tools

]]

---

class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #E435AA, #703993)

.column_t2.font10em.partImgLeft[

]
.column_t2[.vmiddle.pushfront[

# APIs

---

Application programming interface

---

✅ **REST**: GET, POST

🔥 **GraphQL**: Query language for APIs

❓ **WHAT API**: Best [explanation for APIs →](https://www.youtube.com/watch?v=s7wmiS2mSXY)

]]

---

class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #DCE35B, #48B749)

.column_t2.font10em.partImgLeft[

]
.column_t2[.vmiddle.pushfront[

# Markup

---

Markups are converted into HTML via build tools.

---

🌟 [**Markdown**](https://guides.github.com/pdfs/markdown-cheatsheet-online.pdf): The best lightweight [markup](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)

🔥 [**MDX**](https://github.com/mdx-js/mdx): Markdown + JSX for JavaScript + React

🌐 **MOAAR**:  [Pug](https://pugjs.org/) | {{ [mustache](http://mustache.github.io/) }} | [Handlebars.js](https://handlebarsjs.com/)

]]

---

class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #F2C54B, #E44E27)

.column_t2.font10em.partImgLeft[

]
.column_t2[.vmiddle.pushfront[

# Frontend Options

---

✅ NEED: First class routing

✅ NEED: Server Side Rendering

ℹ️ GOOD TO HAVE: PWA Support

]]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #663399, #1E1D40)

# Gatsby.js

---

Blazing fast modern site generator for React.

---

💯 Impressive [documentation →](https://www.gatsbyjs.org/docs/)

🎯 Learn everything with this [Gatsby tutorial →](https://www.gatsbyjs.org/tutorial/)

🙌 React/GraphQL/Plugins/Community — has it all

---

🤔 Routing is a second tier citizen

]]
.column_t2.font10em.partImgRight[

</a>
]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #1E1D40, #2B84FF)

# Next.js

---

Blazing fast modern site generator for React.

---

💯 Impressive [documentation →](https://nextjs.org/docs)

🎯 Learn everything with this [tutorial →](https://nextjs.org/learn/basics/getting-started)

🙌 React/Examples/Community — has it all

---

✅ Routing; well thought out & done right

✅ SSR Server Side Rendering

± Progressive Web Apps

]]
.column_t2.font10em.partImgRight[

</a>
]

---

class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #F2C54B, #E44E27)

.column_t2.font10em.partImgLeft[

]
.column_t2[.vmiddle.pushfront[

# Backend Options

---

✅ NEED: Serverless setup

✅ NEED: Backendless backend

ℹ️ GOOD TO HAVE: Monorepo Support

]]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #6EC049, #333333)

# Node.js

---

An open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser.

---

⬇️ [Download & Install →](https://nodejs.org/)

🌍 Cross platform JavaScript

🖲 Built on Chrome's V8 JavaScript engine

🎯 Incredibly amazing eco-system for developers

]]
.column_t2.font10em.partImgRight[

</a>
]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #2B84FF, #000000)

# ZEIT Now

---

All-in-one solution for static & JAMstack deployment for performance-obsessed teams.

---

✅ No servers to manage, scale, orchestrate, etc…

🌍 Deploy React.js, Vue.js, Node.js, or even Go APIs

🖲 Monorepo with nearly zero configuration

🎯 GitHub to deploy upon every push

]]
.column_t2.font10em.partImgRight[

</a>
]

---

class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #F2C54B, #E44E27)

.column_t2.font10em.partImgLeft[

]
.column_t2[.vmiddle.pushfront[

# Documentation

---

✅ NEED: Markdown only

✅ NEED: UI + Customizability

ℹ️ GOOD TO HAVE: Search Support

]]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #3EAF7C, #414761)

# VuePress

---

Vue-powered Static Documentation Site Generator

---

👌 Pretty amazing [documentation](https://vuepress.vuejs.org/guide/)

🎯 Build for docs/content focused sites

📟 Markdown to rendered HTML Content

🔎 Content is searchable out of the box

😲 Configurable & customizable extensions

👉 .smLnk[[so much more →](https://vuepress.vuejs.org/guide/)]

]]
.column_t2.font10em.partImgRight[

</a>
]

---

# 🤔 → 🙃 → 🧐 → 🤞 → 🤫 → 😁 → 🤗

## JAMstack (Next.js & Cloudinary) + Monorepo (ZEIT Now) === 💯!

---

---

class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #292F33, #654500)

.column_t2.font10em.partImgLeft[

]
.column_t2[.vmiddle.pushfront[

# Questions?!

---

🎯 I'll share the slides [link on @MrAhmadAwais →](https://twitter.com/mrahmadawais/)

---

.bio.smLnk[[FOSS GitHub](https://github.com/ahmadawais) | [AhmadAwais.com](https://AhmadAwais.com/) | [LinkedIn](https://www.linkedin.com/in/mrahmadawais/)]

]]