Fun and Games with the Full-Stack Jamstack (KCDC 2022).pdf

Mike Cavaliere
mikecavaliere.com / @mcavaliere
Fun and

games
with the full-stack

Jamstack

👋🏼 Hi, I'm Mike.
Full-Stack web/mobile
❤️
JS, React
Writes words
Gives talks
@mcavaliere
mcavaliere
mikecavaliere.com
🧑🏼‍💻

➡ Engineering requires lots of learning.
➡ Fun helps us learn.
💡 Therefore: have fun while learning and practicing.
work on fun things.
TL;DR:

🎉 Fun 🎉 🔺 Mood
🔺 Attention
🔺 Memory
FUN helps you learn
Source: science
Learn better,
faster,
& longer

this talk
Source: science
How I built a simple game in a day
Real-world skills practiced in v1
How this led to v2
Real-world learnings from v2

Fun and Games with the Full-Stack Jamstack
Mike Cavaliere 🔗 mikecavaliere.com 🔗 @mcavaliere
In case you haven't heard of it...
what is was the ?
JavaScript APIs Markup
+ + = "JAM"
Term coined by

what is was the ?
Build things in JS
Compile to HTML
Fetch data w/APIs

what is the ?
🚀 FAST
🔎 SEO
🔐 Secure
📈 Scalable
💰 Saves $$$
💻 **Developer Experience (DX)**
Benefits:
🔗 Jamstack.org

what is the Jamstack now?
Build things in anything
Compile to HTML
Fetch data w/APIs
Spoiler: it's the same thing.
🔗 Netlify blog: The Jamstack definition evolved

Jamstack frameworks
https://jamstack.org/generators
& many more

Enter the
Full-Stack Jamstack
Frameworks that give you full control over the server-side.
Coined by fsjam.org

Part #1: Backstory
How this project got started.

Backstory
Have 8 hours investment time weekly
Demo on Friday
Wanted fun and interactive
Me: 💡 "I'm gonna build a game!"
(🙌🏼 TY, Echobind)

What's the simplest "game" I can build in < 1 day?

What's the simplest "game" I can build in < 1 day?
Everybody

logs in
Click things
Update list of things
on screen.

Highest #clicks on
top.

v1 Goals
Ship in <8 hours
(use investment time)
Fun & interactive
Don't spend money
Use websockets (maybe)

Building the MVP
"Minimum Viable Product."
aka, the simplest version I can ship.

The tools I started the stack
with, which are (mostly) part of
my own standard boilerplate.
🧰 Toolbox 🛠
JS Framework
Database
Data fetching
UI/layout/design
Authentication

building v1
Planning
Gen. scaffold / add

dependencies
GitHub Auth +
DB schema
Feature: emoji

picker
Feature: emoji

list
Tweak details Deploy

v1 "Architecture"
Boilerplate NextAuth
GitHub login/signup
Single-page app

building v1
Building the database

building v1
GitHub auth
Create GitHub OAuth app / API keys
Add next-auth + prisma adapter
Done - boilerplate screens

<EmojiPicker /> <Leaderboard /> <UserList />
building v1

missive/emoji-mart
click
POST /api/emoji/create
INSERT emoji into DB
Record a single vote

GET /api/emoji/list
every 200ms
query emoji, JOIN on votes
aggregate & sort by vote count
<span style={{ fontSize: 15 + e._count.votes * 5 }}>
{e.native}
</span>

GET /api/users/list
every 200ms

V1 (MVP) Takeaways
Lessons & practiced skills.

UI
Page layout / styling
Data fetching
tech skills practiced
Frontend Backend
Data modeling
Database CRUD
API development
General
Type modeling (TypeScript)
Authentication
Product development (!)

Library proficiency
Shipping fast
"Good enough" iteration
other SkillS Improved

How to ship fast
Learning time accumulates
Being selective increases focus
Limit new learning

Start with tools you already know.
Don't reinvent the ☸️

Search before building.
Aim for "good enough."

Add TODOs for later.

v1 areas for

improvement
UX: Emoji get tooooo big
UX: Updates slowly
UX: No animation
UX: How do we "win"?
Tech: Code is a mess; can't add

features easily

Let's 🤪 play!
https://emoji-battle.vercel.app
(and maybe break the app)

Websockets / optimistic rendering
15-second rounds w/countdown
End-of-round stats
building v2
Rearchitected
Design additions, animations

building v2
🙏Shout out to
Adding Websockets
🚀 Real-time!

Note: there are different

ways to achieve this.
building v2
Rounds architecture

building v2
How countdown works
currentStep == 13

building v2
React rearchitecting
Take state out of components
Move into React contexts
<RoundProvider>
<EmojisProvider>
Drop SWR, add react-query
Add useEffectReducer()
Move websockets, effects to custom hooks
Separate side effects
👍🏼Decouple all the things.👍🏼
Unnecessary details:

V2 Takeaways
Lessons & practiced skills.

Code reuse patterns
State management
Refactoring patterns
learnings
Optimistic rendering
Layout animations
Declarative/imperative

animations
React architectural patterns
Nested contexts
Side effect management
React
UI Dev
Software architecture
Also
Microservices
Websockets / realtime

events

💥 Sound effects
💻 Game mechanics
🗡 Weapons (take away votes)
📱 Mobile friendliness
⏱ Longer rounds
🤪 Random animations
? Who knows.
Suggestions welcome!
What's next?
Open for contributions
mcavaliere/emoji-battle
mcavaliere/emoji-battle-api

➡ Engineering requires lots of learning.
➡ Fun helps us learn.
💡 Therefore: have fun while learning and practicing.
work on fun things.
Recap:

mcavaliere/emoji-battle
thank you for watching!
mikecavaliere.com
@mcavaliere
🧑🏼‍💻
Feedback

appreciated
🙏

Fun and Games with the Full-Stack Jamstack (KCDC 2022).pdf

Recommended

Recommended

More Related Content

Similar to Fun and Games with the Full-Stack Jamstack (KCDC 2022).pdf

Similar to Fun and Games with the Full-Stack Jamstack (KCDC 2022).pdf (20)

Recently uploaded

Recently uploaded (20)

Fun and Games with the Full-Stack Jamstack (KCDC 2022).pdf