Signals Through Time and JavaScript - Lara Newsom, Cisco

Signals Through Time and JavaScript - Lara Newsom, Cisco 🔗 **Source:** [Signals Through Time and JavaScript - Lara Newsom, Cisco](https://www.youtube.com/watch?v=IElIkifSJ6Y) > [!note]+ Document Notes > tags: [JavaScript, Signals, TC39, jsconf25] > author: [MISSING] > source: YouTube > reference: [https://www.youtube.com/watch?v=IElIkifSJ6Y] > date created: > > # 🏷️ Title: Signals Through Time and JavaScript — Cisco talk >  ## 🧰 Action Inbox - [H1] Draft Angular 16 signals primer — context/https://www.youtube.com/watch?v=IElIkifSJ6Y&t=260 #articleseed - [H3] Add fine-grained reactivity explainer to docs — context/https://www.youtube.com/watch?v=IElIkifSJ6Y&t=397 #xref - [H7] Clarify “signals vs observables” in training — context/https://www.youtube.com/watch?v=IElIkifSJ6Y&t=1186 #share - [H9] Note that effects schedule callbacks — context/https://www.youtube.com/watch?v=IElIkifSJ6Y&t=1513 #addendum - [H10] Track TC39 signals for tooling impact — context/https://www.youtube.com/watch?v=IElIkifSJ6Y&t=1630 #articleseed - [H11] Encourage polyfill experiments and feedback — context/https://www.youtube.com/watch?v=IElIkifSJ6Y&t=1856 #share - [H8] Reduce mental load section in onboarding — context/https://www.youtube.com/watch?v=IElIkifSJ6Y&t=1292 #xref - [H12] Document React stance for Gutenberg teams — context/https://www.youtube.com/watch?v=IElIkifSJ6Y&t=1958 #xref ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - TC39 Signals proposal: https://github.com/tc39/proposal-signals *(GitHub access required; status may change)* - Angular Signals guide: https://angular.dev/guide/signals *(If unreachable, use https://angular.io/guide/signals)* - MobX reactivity docs: https://mobx.js.org/README.html - SolidJS docs (reactivity): https://www.solidjs.com/docs/latest - Vue reactivity deep dive: https://vuejs.org/guide/extras/reactivity-in-depth.html - Svelte reactivity reference: https://svelte.dev/docs/svelte-components#script-3-$-marks-a-statement-as-reactive - Talk video: https://www.youtube.com/watch?v=IElIkifSJ6Y ## 📝 Summary - The speaker surveys signals across JavaScript history. Angular 16 adds signals. See [H1]. - Fine-grained reactivity updates only changed nodes. This improves performance. See [H3]. - Signals complement async streams. They hold current state synchronously. See [H7]. - Effects schedule callbacks, which can drop intermediate values. See [H9]. - Standardization aims to unify APIs and tooling. The TC39 effort continues. See [H10], [H11]. - Bottom line: learn signals concepts now. Expect ecosystem benefits if standardization lands. ## 📖 Main Content - Signals represent state with automatic dependency tracking. They notify consumers on change. See [H5]. - Fine-grained models reduce work by targeting specific nodes. Coarse models scan widely. See [H3]. - Dependency graphs formalize relationships using DAGs. This avoids cycles and glitches. See [H6]. - Signals differ from observables. Signals store the latest value synchronously. See [H7]. - Effects run on schedule, not immediately. Batching can skip transient states. See [H9]. - Diverse frameworks built similar mechanisms independently. This hinders interoperability. See [H10]. - TC39 proposes a common API. Polyfills exist for experiments and feedback. See references. ### 🗒️ Notes #### ⏱️ [00:04:20](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=260) Angular signals arrive ### [H1] Angular 16 introduces signals to framework > [!quote] [Signals Through Time and JavaScript](https://www.youtube.com/watch?v=IElIkifSJ6Y) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “in version 16 of Angular… they introduced signals to Angular.” Signals reach mainstream Angular use. [view highlight](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=260) #xref #articleseed ID:rw_s1 #### ⏱️ [00:03:45](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=225) From postbacks to dynamic UIs ### [H2] JavaScript improves interactivity and perceived performance > [!quote] [Signals Through Time and JavaScript](https://www.youtube.com/watch?v=IElIkifSJ6Y) > “the early internet was mostly just read only and user interactions caused postbacks” Asynchronicity reduced waits and improved feel. [view highlight](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=225) #xref ID:rw_s2 #### ⏱️ [00:06:37](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=397) Fine-grained vs coarse ### [H3] Fine-grained reactivity targets only changed nodes > [!quote] [Signals Through Time and JavaScript](https://www.youtube.com/watch?v=IElIkifSJ6Y) > “fine grain reactivity automatically updates the UI but it targets the updates to DOM nodes with changes” Selective updates reduce work and glitches. [view highlight](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=397) #xref ID:rw_s3 #### ⏱️ [00:08:53](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=533) SJS contributions ### [H4] SJS pioneers modern signal features > [!quote] [Signals Through Time and JavaScript](https://www.youtube.com/watch?v=IElIkifSJ6Y) > “SJS implemented several key features of modern signals.” Automatic graphs and cleanup foreshadow today’s designs. [view highlight](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=533) #xref ID:rw_s4 #### ⏱️ [00:12:58](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=778) What signals are ### [H5] Signals hold state and notify consumers > [!quote] [Signals Through Time and JavaScript](https://www.youtube.com/watch?v=IElIkifSJ6Y) > “signals hold state and notify consumers when the state changes.” This defines the core abstraction. [view highlight](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=778) #articleseed ID:rw_s5 #### ⏱️ [00:15:11](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=911) Graph structure ### [H6] Dependency graph uses directed acyclic structure > [!quote] [Signals Through Time and JavaScript](https://www.youtube.com/watch?v=IElIkifSJ6Y) > “the dependency graph is a directed as cyclic graph or a DAG.” DAGs prevent cycles and undefined recomputations. [view highlight](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=911) #xref ID:rw_s6 #### ⏱️ [00:19:57](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=1197) Signals vs streams ### [H7] Signals manage current state synchronously > [!quote] [Signals Through Time and JavaScript](https://www.youtube.com/watch?v=IElIkifSJ6Y) > “signals are synchronous. They retain only the most recent value” Prefer signals for present state snapshots. [view highlight](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=1197) #share ID:rw_s7 #### ⏱️ [00:21:32](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=1292) Developer experience ### [H8] Signals reduce developer mental load > [!quote] [Signals Through Time and JavaScript](https://www.youtube.com/watch?v=IElIkifSJ6Y) > “signals provide automatic dependency tracking and synchronous operations” Less boilerplate means fewer mistakes. [view highlight](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=1292) #xref ID:rw_s8 #### ⏱️ [00:25:20](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=1520) Scheduling effects ### [H9] Effects schedule callbacks and may drop values > [!quote] [Signals Through Time and JavaScript](https://www.youtube.com/watch?v=IElIkifSJ6Y) > “it schedules it to be invoked.” Batched updates may skip intermediate emissions. [view highlight](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=1520) #addendum ID:rw_s9 #### ⏱️ [00:27:10](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=1630) Interop costs ### [H10] Diverse implementations hinder interoperability > [!quote] [Signals Through Time and JavaScript](https://www.youtube.com/watch?v=IElIkifSJ6Y) > “it makes it really difficult to do interoperability.” Standard APIs can unlock shared tooling. [view highlight](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=1630) #articleseed ID:rw_s10 #### ⏱️ [00:30:56](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=1856) Standardization status ### [H11] TC39 signals remain Stage One with support > [!quote] [Signals Through Time and JavaScript](https://www.youtube.com/watch?v=IElIkifSJ6Y) > “we're still in stage one, but there is significant enthusiasm.” Expect slow progress with community input. [view highlight](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=1856) #share ID:rw_s11 #### ⏱️ [00:32:38](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=1958) React perspective ### [H12] React architecture reduces need for signals > [!quote] [Signals Through Time and JavaScript](https://www.youtube.com/watch?v=IElIkifSJ6Y) > “It really doesn't. It's not a thing that exists in React.” Gutenberg teams should note React’s approach. [view highlight](https://www.youtube.com/watch?v=IElIkifSJ6Y&t=1958) #xref ID:rw_s12 ## 📚 References - TC39 Signals proposal (spec draft): https://github.com/tc39/proposal-signals - Angular Signals official docs: https://angular.dev/guide/signals - SolidJS reactivity docs: https://www.solidjs.com/docs/latest - Vue reactivity deep dive: https://vuejs.org/guide/extras/reactivity-in-depth.html - MobX docs: https://mobx.js.org/README.html - Svelte reactivity: https://svelte.dev/docs/svelte-components#script-3-$-marks-a-statement-as-reactive - Talk video: https://www.youtube.com/watch?v=IElIkifSJ6Y ## 🗣️ Paraphrase - Signals model state with dependencies and synchronous reads. Frameworks converge on similar primitives. - Standardization could improve tooling and interop. Effects schedule callbacks, which changes semantics. ## 📰 Newsletter - Signals keep popping up across frameworks. Angular 16 formalized them. - Fine-grained updates can boost perceived performance. Consider signals where state churns. - TC39’s proposal sits at Stage One. You can test the polyfill and report issues. - For WordPress, note React’s stance. Document boundaries for Gutenberg code now. - Links: TC39 proposal, Angular signals guide, SolidJS docs. ## ✅ Action Items #### DevRel - Publish a signals primer with Angular and Solid examples. - Run a “signals vs observables” workshop with code labs. - Add examples-first snippets for effects and computed values. - Track talk questions to update FAQs monthly. #### OSPO - Document where signals fit within supported stacks. - Evaluate interop risks from competing signal APIs. - Add guidance on scheduling semantics and lost updates. - Monitor TC39 signals and summarize changes quarterly. #### Community - Host a panel on fine-grained reactivity tradeoffs. - Share starter templates using signals in Angular apps. - Collect feedback on debugging and profiling needs. - Compare performance before and after adopting signals. #### WordPress - Core: clarify React change detection in contributor docs. - Core AI: test UI state with signals-like patterns in labs. - **Core Program Team:** record decisions on reactivity patterns. - Playground: add a browser lab showing fine-grained updates. - Documentation: add a glossary entry for “signal” and “effect.” - Meta: assess devtools needs for reactive state inspection. #### The WPOCC - Fund microgrants for learning materials on reactivity. - Sponsor a study benchmarking fine-grained patterns in WP UIs. - Support maintainers writing migration guides and examples. ### FAIR - Provide operator agreements covering reactive-state guarantees. - Ship scorecards for UI state correctness and update latency. - Publish covenants on standard APIs to reduce tool lock-in. ## 🧪 Hypotheses - Fine-grained updates reduce re-render time by 20% on average. - Signals-based state reduces bug reports about stale UI by 30%. - Scheduled effects reduce unnecessary recomputes by 25%. ### 📊 Methodology - Benchmark identical views with coarse and fine-grained approaches. - Capture RUM metrics: TTI, interactions, and CPU time. - Instrument effect execution counts and dropped updates. - Survey developers on mental load and debugging time. ### ❓ Questions - Where do signals outperform memoized selectors in React? - How often do scheduled effects drop meaningful intermediate states? - What devtools best visualize DAG dependencies for large apps? ### 🔮 Future Research - Compare scheduler strategies across frameworks using the polyfill. - Study memory behavior from long-lived computed chains. - Explore cross-framework state modules on standardized signals. ### 💡 Implications - Teams should document reactive patterns with clear boundaries. - Tooling can standardize profiling and inspection across stacks. - Education should stress scheduling semantics and lost updates. ### 🧠 Learning Styles Assessment - Reading level estimate: Flesch–Kincaid Grade ≈ 10. #### 👀 Visual learners - Present: slides, DAG diagrams, code snippets. - Improve: flowcharts for scheduling and batching behavior. #### 🔊 Aural learners - Present: recorded talk with captions. - Improve: short audio summaries per section. #### 🗣️ Verbal learners - Present: definitions and comparisons. - Improve: pattern catalogs with plain-language notes. #### 🧩 Kinesthetic learners - Present: code examples. - Improve: hands-on labs swapping coarse and fine-grained updates. #### 🧠 Logical learners - Present: DAG and scheduling models. - Improve: decision trees for choosing patterns. #### 🧑‍🤝‍🧑 Social learners - Present: Q&A prompts. - Improve: pair labs and review rubrics. #### 🧘‍♀️ Solitary learners - Present: transcript. - Improve: self-check quizzes on effects and computed semantics. #### 🌿 Naturalistic learners - Present: none. - Improve: energy and performance analogies carefully used. ### 📊 Accessibility Assessment #### Screen reader semantics - Present: clear headings in notes. - Improve: alt text for diagrams and code annotations. #### Keyboard navigation - Present: standard controls. - Improve: skip links and clear focus indicators in demos. #### Contrast and readability - Present: mixed slide contrast. - Improve: enforce 4.5:1 and adequate spacing in shared docs. #### Text resizing and reflow - Present: responsive players. - Improve: verify 200% zoom behavior in examples. #### Media and captions - Present: captions on YouTube. - Improve: downloadable transcript and audio description. #### Forms and interactions - Present: N/A. - Improve: accessible feedback forms for workshop materials. #### Standards reference - Map improvements to WCAG 2.2 AA criteria. ### 🌍 DEIB Assessment #### Cultural breadth - Present: US-centric examples. - Improve: multi-region case studies and translations. #### Inclusive language - Present: neutral technical terms. - Improve: more plain-language summaries. #### Neurodiversity support - Present: chunked sections. - Improve: consistent icon+text labels and scaffolding. #### Representation - Present: single-speaker perspective. - Improve: link to diverse authors and frameworks. #### Psychological safety - Present: respectful, welcoming tone. - Improve: clear community guidelines and escalation paths. ### ✅ Logical Validity #### Strong reasoning - [H3] contrasts coarse and fine-grained updates clearly. This supports causal claims on performance. - [H7] distinguishes signals from streams succinctly. This avoids category errors in tooling. - [H10] links diversity of APIs to tool fragmentation. This supports interop motivation. #### Fallacies - Possible overgeneralization: “[H12] React doesn’t need signals.” Narrow to current architecture. - Risk of ambiguity: “[H9] may drop values.” Specify when batching hides intermediate states. #### Safer phrasings - “[H12] React architecture currently reduces signals’ necessity.” - “[H9] Effects can skip intermediate states under batching conditions.” ### 🛡️ DARVO Analysis - Deny: none evident. - Attack: none evident. - Reverse victim/offender: none evident. - The rhetoric stays instructional and collaborative. ## 🏷️ Tag Coverage #articleseed: 2 • #xref: 4 • #share: 2 • #bmf: 0 • #addendum: 1 ## 🎯 Conclusion - Signals offer precise, synchronous state with automatic dependencies. - Fine-grained updates can improve performance and clarity. - Standardization could unlock better tools and interop. - Start learning the patterns and measure benefits in your stacks. ## 🧱 Refactor Appendix (append after 🎯 Conclusion) ### 📚 Literature Split Pad - Purpose: Stage Konik CEE units that become per-source Literature notes. - Split level: **H3**. - Include verbatim quotes under 25 words and a [view highlight] link. ### [H1] Angular 16 introduces signals to framework > [!quote] [Signals Through Time and JavaScript](https://www.youtube.com/watch?v=IElIkifSJ6Y) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “in version 16 of Angular… they introduced signals to Angular.” Two lines: scope and adoption paths for Angular teams. [view highlight](https://www.youtube.com/watch?v=IElIkifSJ6Y#H1) #xref #articleseed ID:rw_s1 ### [H3] Fine-grained reactivity targets only changed nodes > [!quote] [Signals Through Time and JavaScript](https://www.youtube.com/watch?v=IElIkifSJ6Y) > “fine grain reactivity automatically updates the UI but it targets the updates to DOM nodes with changes” Two lines: performance benefits and profiling strategy. [view highlight](https://www.youtube.com/watch?v=IElIkifSJ6Y#H3) #xref ID:rw_s3 --- ### 🔖 Atomic Split Pad (Zettel Candidates) - Purpose: Promote reusable claims into Atomic notes. - Split level: **H4**. - Each item: one idea, present tense, specific, testable. #### [Z1] Fine-grained updates reduce redundant work - Applies when state changes localize to few nodes. - Pointer: talk t=397; benchmarks needed. - Links: [[Reactivity]] [[Performance]] #### [Z2] Effects may skip intermediate values - Applies when schedulers batch updates. - Pointer: talk t=1520; add reproduction. - Links: [[Schedulers]] [[State-Consistency]] --- ### ✏️ Fleeting Queue (Extract by Selection) - Purpose: Capture quick actions or sparks for Fleeting notes. - Extraction: **Select one line** → “Refactor: Extract selection to new note (content only).” - Keep each line short and self-contained. - [F1] Draft “signals vs observables” decision guide — context/https://www.youtube.com/watch?v=IElIkifSJ6Y #fleeting #inbox - [F2] Build profiler demo for fine-grained updates — context/https://www.youtube.com/watch?v=IElIkifSJ6Y #fleeting #inbox - [F3] Create TC39 tracking dashboard — context/https://www.youtube.com/watch?v=IElIkifSJ6Y #fleeting #inbox ---