Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What's your JAM(stack)?

What's your JAM(stack)?

Shifting from a monolithic CMS approach to a JAMstack setup comes with an abundance of choice. On the other hand, all that choice can come with indecision paralysis. Where’s a dev to start? Thankfully, there’s a thriving ecosystem of frameworks offering varying flexibility and structure, different approaches to performance and delivery, etc. We’ll talk about some ways to evaluate available tools, using Gatsby as an example.

7f063ceeef1e3bab1b4cd76b10bd8b7c?s=128

Amberley Romo

April 09, 2019
Tweet

Transcript

  1. What's your JAM(stack)?

  2. #sorrynotsorry

  3. My name is Amberley

  4. Dev + things @ Gatsby Live in Austin, TX @amber1ey

    on Twitter
  5. None
  6. Why JAMstack? More performant More secure Less expensive Better developer

    experience Easily scalable
  7. Now what?

  8. None
  9. Make a cake.

  10. I know there's our. And sugar. And butter, right?

  11. I know there's our. And sugar. And butter, right? I

    know there's JS . And APIs . And Markup , right?
  12. The vibrant JAMstack ecosystem (and how to make sense of

    it)
  13. None
  14. What characteristics do you value in a cake?

  15. What characteristics do you value in a cake? What characteristics

    do you value in a website or web app ?
  16. None
  17. Core concerns Performance Accessibility Managing content + data Developer experience

    Community
  18. Performance Payload optimization Delivery optimization

  19. Route-based code splitting

  20. Use HTTP/2 to serve assets

  21. HTTP/1.1 (view animated gif)

  22. HTTP/2 (view animated gif)

  23. HTTP/2 with server push (view animated gif)

  24. None
  25. Set up background prefetching

  26. Intersection Observer

  27. (view demo)

  28. None
  29. None
  30. None
  31. Lazy-load non-critical assets

  32. None
  33. Use a service worker

  34. None
  35. PRPL pattern • ( P ush) critical resources for the

    initial URL route. • ( R ender) initial route. • ( P re-cache) remaining routes. • ( L azy load) and create remaining routes on demand.
  36. Only ship live code

  37. Serve static les Static assets !== Static app

  38. Kyle Mathews @kylemathews PSA: @gatsbyjs is not just for "sites".

    It produces static HTML and then rehydrates into a React app. Think of it as an opinionated CRA with built-in SSR and nice integrations w/ CMSs. Please use Gatsby to build apps. Thanks for listening. Happy Friday and happy developing. 856 2:51 PM - Sep 21, 2018 191 people are talking about this
  39. Performance Route-based code splitting Use HTTP/2 to serve assets Set

    up background prefetching Lazy-load non-critical assets Use a service worker PRPL pattern Only ship live code Serve static les
  40. We don't have to re-engineer setup or optimizations for a

    highly performant baseline.
  41. Accessibility Bake in what you can

  42. Focus management

  43. None
  44. Leverage linting tools

  45. None
  46. None
  47. None
  48. None
  49. Managing content + data

  50. Monolithic CMS applications are being replaced by modular, specialized content

    systems Pull data from anywhere
  51. None
  52. None
  53. The content mesh The infrastructure layer for a decoupled website

  54. Uni ed data layer...

  55. ... or not.

  56. Jason Lengstorf @ JS Heroes @jlengstorf Did you know you

    can create pages in @gatsbyjs w/unstructured data? This code will: Load data from the @PokeAPI Create a page with links to all Pokémon Create individual Pokémon pages Create pages for abilities of each Pokémon Repo: github.com/jlengstorf/gat… 257 4:07 PM - Oct 12, 2018 · Portland, OR 56 people are talking about this
  57. Developer experience ⚡ Get productive, fast ⚡

  58. Use a modern stack without the setup overhead

  59. Optimized builds out of the box

  60. Leverage the collective work of the community

  61. Brandon Dail @aweary Replying to @peggyrayzis @ReactAmsterdam A great developer

    experience is one that you never have to think about, it just gets totally out of the way and lets you focus on building your product 22 11:43 AM - Apr 3, 2019 See Brandon Dail's other Tweets
  62. Community

  63. You belong here

  64. Gatsby @gatsbyjs Every week we have a video call for

    the Gatsby community. Share Gatsby content or PRs you've been working on Give feedback on new features Learn what’s planned and what’s being worked on Wednesdays @ 8:45am Pacific Sign up at: gatsby.dev/oss-maintainers 73 2:37 PM - Mar 12, 2019 18 people are talking about this
  65. None
  66. None
  67. None
  68. 1,841 contributors

  69. 782 plugins

  70. Core concerns Performance Accessibility Managing content + data Developer experience

    Community
  71. None
  72. Thanks! Find me on Twitter: @amber1ey Check out the slides:

    whats-your-jamstack.amberley.io
  73. Further reading Gatsby performance deep dive by Dustin Schau. Using

    Gatsby without GraphQL by Amberley Romo. The Journey to a Content Mesh (series) by Sam Bhagwhat. Progressive Disclosure of Complexity by Jason Lengstorf. Gatsby's mission and values by Jason Lengstorf.