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

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

Svelte Reactivity 

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

GreetUser.svelte Svelte Reactivity 

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

Svelte is soo KOOL! 

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

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 

Exploring Reactivity 

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 

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

Diagnostic Logging Probes GreetUser.svelte Monitor Setup 

Diagnostic Logging Probes GreetUser.svelte 

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

ReflectiveCounter Advanced Diagnostics 

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

Advanced Diagnostic Probes Monitor Report Setup GreetUser.svelte 

Advanced Diagnostic Probes GreetUser.svelte 

Re-Render Analysis Unexpected Results! 

Re-Render Analysis 

Svelte Dependency Monitoring 

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) 

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

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

App-Based Reactivity Tweaks 

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

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 

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 

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

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

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

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

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

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 

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 

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 

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 

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 

No content

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

No content

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) 

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