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.

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
6. Why JAMstack? More performant More secure Less expensive Better developer experience Easily scalable
7. Now what?
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. ⏳
13. The vibrant JAMstack ecosystem (and how to make sense of it)
15. What characteristics do you value in a cake?
16. What characteristics do you value in a cake? What characteristics do you value in a website or web app ?
18. Core concerns Performance Accessibility Managing content + data Developer experience Community
19. Performance Payload optimization Delivery optimization
20. Route-based code splitting
21. Use HTTP/2 to serve assets
22. HTTP/1.1 (view animated gif)
23. HTTP/2 (view animated gif)
24. HTTP/2 with server push (view animated gif)
26. Set up background prefetching
27. Intersection Observer
28. (view demo)
32. Lazy-load non-critical assets
34. Use a service worker
36. 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.
37. Only ship live code
38. Serve static les Static assets !== Static app
39. 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
40. 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
41. We don't have to re-engineer setup or optimizations for a highly performant baseline.
42. Accessibility Bake in what you can
43. Focus management
45. Leverage linting tools
50. Managing content + data
51. Monolithic CMS applications are being replaced by modular, specialized content systems Pull data from anywhere
54. The content mesh The infrastructure layer for a decoupled website
55. Uni ed data layer...
56. ... or not.
57. 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
58. Developer experience ⚡ Get productive, fast ⚡
59. Use a modern stack without the setup overhead
60. Optimized builds out of the box
61. Leverage the collective work of the community
62. 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
63. Community
64. You belong here
65. 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
69. 1,841 contributors
70. 782 plugins
71. Core concerns Performance Accessibility Managing content + data Developer experience Community
73. Thanks! Find me on Twitter: @amber1ey Check out the slides: whats-your-jamstack.amberley.io
74. 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.