Talk Pinia Colada Quick start

Plan

• Introduction

  • Who I am
  • What are we talking about today?
    • What is Async State management
    • Why is it so important
  • The browser’s role SpaceJam
  • The browser still handles async state management for assets, anything static like images
  • The web has evolved a lot, we still do static sites, but we also do full-fledged applications

• What is a great website?

  • Think about a website that you used recently and enjoyed
  • Now think about what that experience enjoyable
  • Despite the vast nature of websites, they all share key factors that make them enjoyable
    • Beautifully designed: It’s been researched that a beautiful website is more likely to be trusted and to be considered intuitive. Similar to a beauty bias in humans.
    • They make the user feel efficient: the application assists the user in their task but lets them feel like they are in control
    • They provide a feedback loop for each interaction
      • Meaningful errors
      • Avoid too much noise (e.g. too many toasts)

• Demo

  • We have a search
  • we can visit each contact and edit them
    • It even updates the data after saving but just partially
  • Caching the search
    • useQuery() to define a normal query
    • key and query are required
    • key are arrays to allow hierarchical cache
    • Automatic refresh when the page is focused
  • Other useful options
    • placeholderData
    • staleTime
    • gcTime
  • Mutations
    • hooks to interact with the cache
    • Optimistic updates
      • What are they?
      • Why? Example of what can be improved on GitHub
      • Implement in app
        • low level API that gives you control over the cache
        • No opinionated convention that you have to wrap your head around
  • Plugins
    • Keep Pinia Colada light
    • Adapt to custom use cases and conventions
      • Custom storage/persistence
    • Plugin to delay the loading state and avoid flickering
  • Reusable queries with defineQuery
    • Move useQuery() to a separate file
  • Official support for data loaders
    • Nice integration with the router navigation to always have your data ready by the time your component is mounted