Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

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

Download to read offline

Having fun is the best way to learn and improve your craft. Building engaging projects with the stack you choose is an exercise that builds your real-world development skills while enjoying what you’re creating.

In talk at KCDC in Kansas City, I walk through how I built a simple game (a single-page app) in a day with Next.js, Prisma, and Chakra-UI, and how the techniques used in rapidly developing the game with this stack translate into real-world full-stack development techniques.

Having fun is the best way to learn and improve your craft. Building engaging projects with the stack you choose is an exercise that builds your real-world development skills while enjoying what you’re creating.

In talk at KCDC in Kansas City, I walk through how I built a simple game (a single-page app) in a day with Next.js, Prisma, and Chakra-UI, and how the techniques used in rapidly developing the game with this stack translate into real-world full-stack development techniques.

Advertisement
Advertisement

More Related Content

Advertisement

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  1. 1. Mike Cavaliere mikecavaliere.com / @mcavaliere Fun and games with the full-stack Jamstack
  2. 2. πŸ‘πŸ» thank you, !!!
  3. 3. πŸ‘‹πŸΌ Hi, I'm Mike. Full-Stack web/mobile ❀️ JS, React Writes words Gives talks @mcavaliere mcavaliere mikecavaliere.com πŸ§‘πŸΌβ€πŸ’»
  4. 4. what is this talk about?
  5. 5. ➑ Engineering requires lots of learning. ➑ Fun helps us learn. πŸ’‘ Therefore: have fun while learning and practicing. work on fun things. TL;DR:
  6. 6. πŸŽ‰ Fun πŸŽ‰ πŸ”Ί Mood πŸ”Ί Attention πŸ”Ί Memory FUN helps you learn Source: science Learn better, faster, & longer
  7. 7. 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
  8. 8. 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
  9. 9. 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 ? Build things in JS Compile to HTML Fetch data w/APIs
  10. 10. In case you haven't heard of it... what is the ? πŸš€ FAST πŸ”Ž SEO πŸ” Secure πŸ“ˆ Scalable πŸ’° Saves $$$ πŸ’» **Developer Experience (DX)** Benefits: πŸ”— Jamstack.org
  11. 11. Fun and Games with the Full-Stack Jamstack Mike Cavaliere πŸ”— mikecavaliere.com πŸ”— @mcavaliere 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
  12. 12. Fun and Games with the Full-Stack Jamstack Mike Cavaliere πŸ”— mikecavaliere.com πŸ”— @mcavaliere Jamstack frameworks https://jamstack.org/generators & many more
  13. 13. Fun and Games with the Full-Stack Jamstack Mike Cavaliere πŸ”— mikecavaliere.com πŸ”— @mcavaliere Enter the Full-Stack Jamstack Frameworks that give you full control over the server-side. Coined by fsjam.org
  14. 14. Part #1: Backstory How this project got started.
  15. 15. Backstory Have 8 hours investment time weekly Demo on Friday Wanted fun and interactive Me: πŸ’‘ "I'm gonna build a game!" (πŸ™ŒπŸΌ TY, Echobind)
  16. 16. What's the simplest "game" I can build in < 1 day?
  17. 17. 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.
  18. 18. v1 Goals Ship in <8 hours (use investment time) Fun & interactive Don't spend money Use websockets (maybe)
  19. 19. Building the MVP "Minimum Viable Product." aka, the simplest version I can ship.
  20. 20. 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
  21. 21. v1.0! πŸŽ‰
  22. 22. Fun and Games with the Full-Stack Jamstack Mike Cavaliere πŸ”— mikecavaliere.com πŸ”— @mcavaliere building v1 Planning Gen. scaffold / add dependencies GitHub Auth + DB schema Feature: emoji picker Feature: emoji list Tweak details Deploy
  23. 23. v1 "Architecture" Boilerplate NextAuth GitHub login/signup Single-page app
  24. 24. building v1 Building the database
  25. 25. building v1 GitHub auth Create GitHub OAuth app / API keys Add next-auth + prisma adapter Done - boilerplate screens
  26. 26. <EmojiPicker /> <Leaderboard /> <UserList /> building v1
  27. 27. <EmojiPicker /> <Leaderboard /> <UserList /> missive/emoji-mart click POST /api/emoji/create INSERT emoji into DB Record a single vote
  28. 28. <EmojiPicker /> <Leaderboard /> <UserList /> 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>
  29. 29. <EmojiPicker /> <Leaderboard /> <UserList /> GET /api/users/list every 200ms
  30. 30. V1 (MVP) Takeaways Lessons & practiced skills.
  31. 31. UI Page layout / styling Data fetching tech skills practiced Frontend Backend Data modeling Database CRUD API development General Type modeling (TypeScript) Authentication Product development (!)
  32. 32. Library proficiency Shipping fast "Good enough" iteration other SkillS Improved
  33. 33. 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.
  34. 34. making it better Upgrades.
  35. 35. 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
  36. 36. v2.0! πŸŽ‰
  37. 37. Let's πŸ€ͺ play! https://emoji-battle.vercel.app (and maybe break the app)
  38. 38. Websockets / optimistic rendering 15-second rounds w/countdown End-of-round stats building v2 Rearchitected Design additions, animations
  39. 39. building v2 Animation
  40. 40. building v2 πŸ™Shout out to Adding Websockets πŸš€ Real-time!
  41. 41. πŸ™ Shout out to
  42. 42. Note: there are different ways to achieve this. building v2 Rounds architecture
  43. 43. building v2 How countdown works currentStep == 13
  44. 44. 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:
  45. 45. V2 Takeaways Lessons & practiced skills.
  46. 46. 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
  47. 47. What's next? Battling on
  48. 48. πŸ’₯ 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
  49. 49. ➑ Engineering requires lots of learning. ➑ Fun helps us learn. πŸ’‘ Therefore: have fun while learning and practicing. work on fun things. Recap:
  50. 50. mcavaliere/emoji-battle thank you for watching! mikecavaliere.com @mcavaliere πŸ§‘πŸΌβ€πŸ’» Feedback appreciated πŸ™

Γ—