$30 off During Our Annual Pro Sale. View Details »

Responsive Svelte ... exploring Svelte's reactivity

Kevin Bridges
September 22, 2020

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

Kevin Bridges

September 22, 2020
Tweet

More Decks by Kevin Bridges

Other Decks in Programming

Transcript

  1. Kevin Bridges
    Applied Software Technologies
    [email protected]
    @kevinast
    https://bit.ly/r-svelte
    slides, syllabus, REPL, and article!

    View Slide

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

    View Slide

  3. Svelte Reactivity

    View Slide

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

    View Slide

  5. GreetUser.svelte
    Svelte Reactivity

    View Slide

  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 tag, demarked with $: label<br/>2. html-snippet<br/>found in html markup, delineated with curly braces: {…}<br/>… svelte refers to this as: “Reactive Statements”<br/>… svelte refers to this as: “Interpolation”<br/>

    View Slide

  7. Svelte is soo KOOL!

    View Slide

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

    View Slide

  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

    View Slide

  10. Exploring Reactivity

    View Slide

  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

    View Slide

  12. Diagnostic Logging Probes
    Original:
    With Logging Probes:
    Phone section fired
    Ex: When phone changes, logs:
    Exploring Reactivity

    View Slide

  13. Diagnostic Logging Probes
    GreetUser.svelte
    Monitor
    Setup

    View Slide

  14. Diagnostic Logging Probes
    GreetUser.svelte

    View Slide

  15. Advanced Diagnostics
    logs are great, but …
    is there a way to Visualize Svelte's Reactivity "right in our app"?

    View Slide

  16. ReflectiveCounter
    Advanced Diagnostics

    View Slide

  17. ReflectiveCounter
    Usage:
    1. Monitor
    a) html-snippet:
    b) code-snippet:
    2. Report (common to both):
    Advanced Diagnostics

    View Slide

  18. Advanced Diagnostic Probes
    Monitor
    Report
    Setup
    GreetUser.svelte

    View Slide

  19. Advanced Diagnostic Probes
    GreetUser.svelte

    View Slide

  20. Re-Render Analysis
    Unexpected Results!

    View Slide

  21. Re-Render Analysis

    View Slide

  22. Svelte Dependency Monitoring

    View Slide

  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)

    View Slide

  24. Is Svelte producing redundant and unnecessary
    re-renders of our DOM fragments?
    Re-Render Analysis

    View Slide

  25. Svelte optimizes this!
    … discussed later
    Is Svelte producing redundant and unnecessary
    re-renders of our DOM fragments?
    Re-Render Analysis

    View Slide

  26. App-Based Reactivity Tweaks

    View Slide

  27. Basic Thrust:
    move reflexivity …
    • FROM: html-snippets
    • TO: code-snippets
    App-Based Reactivity Tweaks

    View Slide

  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

    View Slide

  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

    View Slide

  30. App-Based Reactivity Tweaks
    1. Finer Grained Dependency Management
    GreetUser.svelte

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  34. Svelte's Re-Render Optimization
    Is Svelte producing redundant and unnecessary
    re-renders of our DOM fragments?

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  40. View Slide

  41. Enhance ReflectiveCounter to provide
    BOTH:
    • reflexive counts
    -and-
    • re-render counts
    HINT … the invocation will change
    • FROM:
    • TO:

    View Slide

  42. View Slide

  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)

    View Slide

  44. Kevin Bridges
    Applied Software Technologies
    [email protected]
    @kevinast
    https://bit.ly/r-svelte
    slides, syllabus, REPL, and article!

    View Slide