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

Responsive Svelte ... exploring Svelte's reactivity

Responsive Svelte ... exploring Svelte's reactivity

This talk is focused on a better understanding of Svelte's reactivity. We will do this from an "observer perspective" - by visualizing it first-hand (right in your application)!

There's a bit of a mystery behind some of these concepts. We will delve into some lesser-known detail (that you may have not considered)! The hope is you will come away with more insight, and be better informed on how to use this awesome product!

The session will delve into:

- Visualizing Svelte's reactivity right in your application, through diagnostic probes. This provides a very clear insight on what Svelte is doing (seeing the dynamics all around you "on the fly")!

- Svelte's management of your JavaScript snippets
* both code-snippets (Reactive Statements/Declarations)
* and html-snippets (Interpolation)

- Svelte's Reactive Triggers
* both Dependency Monitoring
* and Staleness Detection (highlighting the difference between primitive and object types)

- Svelte's Re-Render Optimization
* showing the difference between interpolation (executing JS snippets)
* and re-rendering DOM fragments (a heavyweight operation)

This talk is an adaptation of my article on the same topic (found here: https://bit.ly/ResponsiveSvelte)

RESOURCE LINKS:

- Presentation Screencast: https://bit.ly/r-svelte-pres
- Presentation Resources: https://bit.ly/r-svelte
- Article: https://bit.ly/ResponsiveSvelte

4745c10de93b07ff06f69648749b673f?s=128

Kevin Bridges

September 22, 2020
Tweet

Transcript

  1. Kevin Bridges Applied Software Technologies kevin@wiiBridges.com @kevinast https://bit.ly/r-svelte slides, syllabus,

    REPL, and article!
  2. https://bit.ly/r-svelte slides, syllabus, REPL, and article! Deep Dive Observer Perspective

    Mystery Improved Insight
  3. Svelte Reactivity

  4. user: { name: 'Jenny', phone: '867-5309', } Svelte Store Svelte

    Interpolation GreetUser.svelte Svelte Reactivity
  5. GreetUser.svelte Svelte Reactivity

  6. Svelte Reactivity snippet: any JavaScript expression that Svelte reactively manages

    and invokes when it's dependent state changes SideBar (Terminology) … 1. code-snippet found in <script> tag, demarked with $: label 2. html-snippet found in html markup, delineated with curly braces: {…} … svelte refers to this as: “Reactive Statements” … svelte refers to this as: “Interpolation”
  7. Svelte is soo KOOL!

  8. Svelte is soo KOOL! 1975 1969 1995 2006 2010 2019

    is Svelte soo KOOL?
  9. Primarily it's unique approach to reactivity it's "baked right in"

    rather like "magic“! The Svelte compiler: 1) Isolates JS snippets … that provides our dynamics 2) Identifies dependencies 3) Monitors staleness 4) Re-executes as needed … updating DOM fragments GreetUser.svelte Svelte is soo KOOL! Dependents Is Stale? Re-executes updating
  10. Exploring Reactivity

  11. I want to see Svelte’s Reactivity IN ACTION ! In

    so doing: • become more grounded in Svelte philosophy • give insight on Svelte Heuristics … dependency monitoring … reactive triggers … DOM updates • better appreciate “all the reactivity around us” May just discover some detail we hadn’t considered! Exploring Reactivity
  12. Diagnostic Logging Probes Original: With Logging Probes: Phone section fired

    Ex: When phone changes, logs: Exploring Reactivity
  13. Diagnostic Logging Probes GreetUser.svelte Monitor Setup

  14. Diagnostic Logging Probes GreetUser.svelte

  15. Advanced Diagnostics logs are great, but … is there a

    way to Visualize Svelte's Reactivity "right in our app"?
  16. ReflectiveCounter Advanced Diagnostics

  17. ReflectiveCounter Usage: 1. Monitor a) html-snippet: b) code-snippet: 2. Report

    (common to both): Advanced Diagnostics
  18. Advanced Diagnostic Probes Monitor Report Setup GreetUser.svelte

  19. Advanced Diagnostic Probes GreetUser.svelte

  20. Re-Render Analysis Unexpected Results!

  21. Re-Render Analysis

  22. Svelte Dependency Monitoring

  23. Svelte Dependency Monitoring Object vs. Primitive Object: “Staleness Granularity” is

    the object (not individual content) Primitive: To be considered “Stale”, the value must change (Identity Semantics)
  24. Is Svelte producing redundant and unnecessary re-renders of our DOM

    fragments? Re-Render Analysis
  25. Svelte optimizes this! … discussed later Is Svelte producing redundant

    and unnecessary re-renders of our DOM fragments? Re-Render Analysis
  26. App-Based Reactivity Tweaks

  27. Basic Thrust: move reflexivity … • FROM: html-snippets • TO:

    code-snippets App-Based Reactivity Tweaks
  28. Fine Tune Svelte's Dependency Management by Normalizing referenced state into

    primitive types App-Based Reactivity Tweaks 1. Finer Grained Dependency Management Before … GreetUser.svelte
  29. Fine Tune Svelte's Dependency Management by Normalizing referenced state into

    primitive types App-Based Reactivity Tweaks 1. Finer Grained Dependency Management After … GreetUser.svelte
  30. App-Based Reactivity Tweaks 1. Finer Grained Dependency Management GreetUser.svelte

  31. Normalize conditional logic into primitive types App-Based Reactivity Tweaks 2.

    Preresolve Variations GreetUser.svelte Before …
  32. Normalize conditional logic into primitive types App-Based Reactivity Tweaks 2.

    Preresolve Variations GreetUser.svelte After …
  33. App-Based Reactivity Tweaks 2. Preresolve Variations GreetUser.svelte

  34. Svelte's Re-Render Optimization Is Svelte producing redundant and unnecessary re-renders

    of our DOM fragments?
  35. Is Svelte producing redundant and unnecessary re-renders of our DOM

    fragments? Could Svelte be optimizing this? it would make sense for two reasons: 1. Svelte's overly broad dependency granularity 2. App classification grouping - generating same result from multiple dependent values Svelte's Re-Render Optimization
  36. Is Svelte producing redundant and unnecessary re-renders of our DOM

    fragments? Svelte's Re-Render Optimization Could Svelte be optimizing this? it would make sense for two reasons: 1. Svelte's overly broad dependency granularity 2. App classification grouping - generating same result from multiple dependent values
  37. Svelte's reflexivity is very efficient! 1. The component's DOM representation

    is highly optimized 2. Dynamic content is gleaned from executing html-snippets 3. Reflection is triggered by dependent state changes 4. DOM updates occur only when the content has actually changed! Svelte's Re-Render Optimization
  38. Svelte's reflexivity is very efficient! knowing what we know now

    Are App-Based Reactivity Tweaks Necessary? Seriously … was this really Necessary? Svelte's Re-Render Optimization
  39. Svelte's reflexivity is very efficient! knowing what we know now

    Are App-Based Reactivity Tweaks Necessary? most likely only in rare cases consider this: 1. Large reflection/re-render count variance 2. High overhead in html-snippet execution 3. Same html-snippet needed in multiple places Better understand the finer characteristics of Svelte's reactivity! Seriously … was this really Necessary? Svelte's Re-Render Optimization
  40. None
  41. Enhance ReflectiveCounter to provide BOTH: • reflexive counts -and- •

    re-render counts HINT … the invocation will change • FROM: • TO:
  42. None
  43. 1.We can visualize Svelte's Reactivity (right in our app) •

    Diagnostic Logs: logically-ORed expressions • ReflectiveCounter: new utility belt 2.Dependent State and Reactivity • Primitives: trigger reactivity only when the value changes (based on identity semantics) • Objects: trigger reactivity per the entire object, not individual content 3.Svelte's reflexivity is very efficient! • The component's DOM representation is highly optimized • Dynamic content is gleaned from executing html-snippets • Reflection is triggered by dependent state changes • DOM updates occur only when the content has actually changed! 4.App can "fine tune" reactivity (as needed)
  44. Kevin Bridges Applied Software Technologies kevin@wiiBridges.com @kevinast https://bit.ly/r-svelte slides, syllabus,

    REPL, and article!