{"id":40,"date":"2023-08-21T03:41:00","date_gmt":"2023-08-21T03:41:00","guid":{"rendered":"http:\/\/fem.flywheelsites.com\/?p=40"},"modified":"2024-07-30T08:15:10","modified_gmt":"2024-07-30T13:15:10","slug":"vanilla-javascript-reactivity","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/vanilla-javascript-reactivity\/","title":{"rendered":"Patterns for Reactivity with Modern Vanilla JavaScript"},"content":{"rendered":"\n

\u201cReactivity\u201d is how systems react to changes in data. There are many types of reactivity, but for this article, reactivity is when data changes, you do things<\/strong>.<\/p>\n\n\n

\n
\n

Article Series<\/h3>\n <\/header>\n
\n
    \n
  1. \n Writing a TodoMVC App with Modern Vanilla JavaScript<\/a>\n <\/li>\n
  2. \n Patterns for Reactivity with Modern Vanilla JavaScript<\/a>\n <\/li>\n
  3. \n Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript<\/a>\n <\/li>\n <\/ol>\n <\/div>\n<\/div>\n\n\n\n

    Reactivity Patterns are Core to Web Development<\/h2>\n\n\n\n

    We handle a lot with JavaScript in websites and web apps since the browser is an entirely asynchronous environment. We must respond to user inputs, communicate with servers, log, perform, etc. All these tasks involve updates to the UI, Ajax requests, browser URLs, and navigation changes, making cascading data changes a core aspect of web development.<\/p>\n\n\n\n

    As an industry, we associate reactivity with frameworks, but you can learn a lot by implementing reactivity in pure JavaScript. We can mix and match these patterns to wire behavior to data changes.<\/p>\n\n\n\n

    Learning core patterns with pure JavaScript will lead to less code and better performance in your web apps, no matter what tool or framework you use.<\/p>\n\n\n\n

    I love learning patterns because they apply to any language and system. Patterns can be combined to solve your app\u2019s exact requirements, often leading to more performant and maintainable code.<\/p>\n\n\n\n

    Hopefully, you\u2019ll learn new patterns to add to your toolbox, no matter what frameworks and libraries you use!<\/p>\n\n\n\n

    PubSub Pattern (Publish Subscriber)<\/h2>\n\n\n\n

    PubSub is one of the most foundational patterns for reactivity. Firing an event out with publish()<\/code> allows anyone to listen to that event subscribe()<\/code> and do whatever they want in a decoupled from whatever fires that event.<\/p>\n\n\n

    const<\/span> pubSub = {\n  events<\/span>: {},\n  subscribe(event, callback) {\n    if<\/span> (!this<\/span>.events[event]) this<\/span>.events[event] = [];\n    this<\/span>.events[event].push(callback);\n  },\n  publish(event, data) {\n    if<\/span> (this<\/span>.events[event]) this<\/span>.events[event].forEach(callback<\/span> =><\/span> callback(data));\n  }\n};\n\npubSub.subscribe('update'<\/span>, data => console<\/span>.log(data));\npubSub.publish('update'<\/span>, 'Some update'<\/span>); \/\/ Some update<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Note the publisher has no idea<\/em> of what is listening to it, so there is no way to unsubscribe or clean up after itself with this simple implementation.<\/p>\n\n\n\n
    Custom Events: Native Browser API for PubSub<\/h3>\n\n\n\n
    The browser has a JavaScript API for firing and subscribing to custom events. It allows you to send data along with the custom events using dispatchEvent<\/code>.<\/p>\n\n\n
    const<\/span> pizzaEvent = new<\/span> CustomEvent(\"pizzaDelivery\"<\/span>, {\n  detail<\/span>: {\n    name<\/span>: \"supreme\"<\/span>,\n  },\n});\n\nwindow<\/span>.addEventListener(\"pizzaDelivery\"<\/span>, (e) => console<\/span>.log(e.detail.name));\nwindow<\/span>.dispatchEvent(pizzaEvent);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    You can scope these custom events to any DOM node. In the code example, we use the global window<\/code> object, also known as a global event bus, so anything in our app can listen and do something with the event data.<\/p>\n\n\n
    <div<\/span> id<\/span>=\"pizza-store\"<\/span>><\/span><\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n
    const<\/span> pizzaEvent = new<\/span> CustomEvent(\"pizzaDelivery\"<\/span>, {\n  detail<\/span>: {\n    name<\/span>: \"supreme\"<\/span>,\n  },\n});\n\nconst<\/span> pizzaStore = document<\/span>.querySelector('#pizza-store'<\/span>);\npizzaStore.addEventListener(\"pizzaDelivery\"<\/span>, (e) => console<\/span>.log(e.detail.name));\npizzaStore.dispatchEvent(pizzaEvent);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Class Instance Custom Events: Subclassing EventTarget<\/h3>\n\n\n\n
    We can subclass EventTarget to send out events on a class instance for our app to bind to:<\/p>\n\n\n
    class<\/span> PizzaStore<\/span> extends<\/span> EventTarget<\/span> <\/span>{\n  constructor<\/span>() {\n    super<\/span>();\n  }\n  addPizza(flavor) {\n    \/\/ fire event directly on the class<\/span>\n    this<\/span>.dispatchEvent(new<\/span> CustomEvent(\"pizzaAdded\"<\/span>, {\n      detail<\/span>: {\n        pizza<\/span>: flavor,\n      },\n    }));\n  }\n}\n\nconst<\/span> Pizzas = new<\/span> PizzaStore();\nPizzas.addEventListener(\"pizzaAdded\"<\/span>, (e) => console<\/span>.log('Added Pizza:'<\/span>, e.detail.pizza));\nPizzas.addPizza(\"supreme\"<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    The cool thing about this is your events aren\u2019t firing globally on the window. You can fire an event directly on a class; anything in your app can wire up event listeners directly to that class.<\/p>\n\n\n\n
    Observer Pattern<\/h2>\n\n\n\n
    The observer pattern has the same basic premise as the PubSub pattern. It allows you to have behavior \u201csubscribed\u201d to a Subject. And when the Subject fires the notify<\/code> method, it notifies everything subscribed.<\/p>\n\n\n
    class<\/span> Subject<\/span> <\/span>{\n  constructor<\/span>() {\n    this<\/span>.observers = [];\n  }\n  addObserver(observer) {\n    this<\/span>.observers.push(observer);\n  }\n  removeObserver(observer) {\n    const<\/span> index = this<\/span>.observers.indexOf(observer);\n    if<\/span> (index > -1<\/span>) {\n      this<\/span>.observers.splice(index, 1<\/span>);\n    }\n  }\n  notify(data) {\n    this<\/span>.observers.forEach(observer<\/span> =><\/span> observer.update(data));\n  }\n}\n\nclass<\/span> Observer<\/span> <\/span>{\n  update(data) {\n    console<\/span>.log(data);\n  }\n}\n\nconst<\/span> subject = new<\/span> Subject();\nconst<\/span> observer = new<\/span> Observer();\n\nsubject.addObserver(observer);\nsubject.notify('Everyone gets pizzas!'<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    The main difference between this and PubSub is that the Subject knows about its observers and can remove them. They aren\u2019t completely<\/em> decoupled like in PubSub.<\/p>\n\n\n\n
    Reactive Object Properties with Proxies<\/h2>\n\n\n\n
    Proxies in JavaScript can be the foundation for performing reactivity after setting or getting properties on an object.<\/p>\n\n\n
    const<\/span> handler = {\n  get<\/span>: function<\/span>(target, property<\/span>) <\/span>{\n    console<\/span>.log(`Getting property ${property}<\/span>`<\/span>);\n    return<\/span> target[property];\n  },\n  set<\/span>: function<\/span>(target, property, value<\/span>) <\/span>{\n    console<\/span>.log(`Setting property ${property}<\/span> to ${value}<\/span>`<\/span>);\n    target[property] = value;\n    return<\/span> true<\/span>; \/\/ indicates that the setting has been done successfully<\/span>\n  }\n};\n\nconst<\/span> pizza = { name<\/span>: 'Margherita'<\/span>, toppings<\/span>: ['tomato sauce'<\/span>, 'mozzarella'<\/span>] };\nconst<\/span> proxiedPizza = new<\/span> Proxy<\/span>(pizza, handler);\n\nconsole<\/span>.log(proxiedPizza.name); \/\/ Outputs \"Getting property name\" and \"Margherita\"<\/span>\nproxiedPizza.name = 'Pepperoni'<\/span>; \/\/ Outputs \"Setting property name to Pepperoni\"<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    When you access or modify a property on the proxiedPizza<\/code>, it logs a message to the console. But you could imagine wiring any functionality to property access on an object.<\/p>\n\n\n\n
    Reactive Individual Properties: Object.defineProperty<\/h3>\n\n\n\n
    You can do an identical thing for a specific property using Object.defineProperty<\/code>. You can define getters and setters for properties and run code when a property is accessed or modified.<\/p>\n\n\n
    const<\/span> pizza = {\n  _name<\/span>: 'Margherita'<\/span>, \/\/ Internal property<\/span>\n};\n\nObject<\/span>.defineProperty(pizza, 'name'<\/span>, {\n  get<\/span>: function<\/span>(<\/span>) <\/span>{\n    console<\/span>.log(`Getting property name`<\/span>);\n    return<\/span> this<\/span>._name;\n  },\n  set<\/span>: function<\/span>(value<\/span>) <\/span>{\n    console<\/span>.log(`Setting property name to ${value}<\/span>`<\/span>);\n    this<\/span>._name = value;\n  }\n});\n\n\/\/ Example usage:<\/span>\nconsole<\/span>.log(pizza.name); \/\/ Outputs \"Getting property name\" and \"Margherita\"<\/span>\npizza.name = 'Pepperoni'<\/span>; \/\/ Outputs \"Setting property name to Pepperoni\"<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Here, we\u2019re using Object.defineProperty<\/code> to define a getter and setter for the name property of the pizza object. The actual value is stored in a private _name<\/code> property, and the getter and setter provide access to that value while logging messages to the console.<\/p>\n\n\n\n
    Object.defineProperty<\/code> is more verbose than using a Proxy<\/code>, especially if you want to apply the same behavior to many properties. But it\u2019s a powerful and flexible way to define custom behavior for individual properties.<\/p>\n\n\n\n
    Asynchronous Reactive Data with Promises<\/h3>\n\n\n\n
    Let\u2019s make using the observers asynchronous! This way we can update the data and have multiple observers run asynchronously.<\/p>\n\n\n
    class<\/span> AsyncData<\/span> <\/span>{\n  constructor<\/span>(initialData) {\n    this<\/span>.data = initialData;\n    this<\/span>.subscribers = [];\n  }\n\n  \/\/ Subscribe to changes in the data<\/span>\n  subscribe(callback) {\n    if<\/span> (typeof<\/span> callback !== 'function'<\/span>) {\n      throw<\/span> new<\/span> Error<\/span>('Callback must be a function'<\/span>);\n    }\n    this<\/span>.subscribers.push(callback);\n  }\n\n  \/\/ Update the data and wait for all updates to complete<\/span>\n  async<\/span> set<\/span>(key, value) {\n    this<\/span>.data[key] = value;\n\n    \/\/ Call the subscribed function and wait for it to resolve<\/span>\n    const<\/span> updates = this<\/span>.subscribers.map(async<\/span> (callback) => {\n      await<\/span> callback(key, value);\n    });\n\n    await<\/span> Promise<\/span>.allSettled(updates);\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Here\u2019s a class that wraps a data object and triggers an update when the data changes.<\/p>\n\n\n\n
    Awaiting Our Async Observers<\/h4>\n\n\n\n
    Let\u2019s say we want to wait until all subscriptions to our asynchronous reactive data are processed:<\/p>\n\n\n
    const<\/span> data = new<\/span> AsyncData({ pizza<\/span>: 'Pepperoni'<\/span> });\n\ndata.subscribe(async<\/span> (key, value) => {\n  await<\/span> new<\/span> Promise<\/span>(resolve<\/span> =><\/span> setTimeout(resolve, 500<\/span>));\n  console<\/span>.log(`Updated UI for ${key}<\/span>: ${value}<\/span>`<\/span>);\n});\n\ndata.subscribe(async<\/span> (key, value) => {\n  await<\/span> new<\/span> Promise<\/span>(resolve<\/span> =><\/span> setTimeout(resolve, 1000<\/span>));\n  console<\/span>.log(`Logged change for ${key}<\/span>: ${value}<\/span>`<\/span>);\n});\n\n\/\/ function to update data and wait for all updates to complete<\/span>\nasync<\/span> function<\/span> updateData<\/span>(<\/span>) <\/span>{\n  await<\/span> data.set('pizza'<\/span>, 'Supreme'<\/span>); \/\/ This will call the subscribed functions and wait for their promises to resolve<\/span>\n  console<\/span>.log('All updates complete.'<\/span>);\n}\n\nupdateData();\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Our updateData<\/code> function is now async, so we can await all the subscribed functions to resolve before continuing our program. This pattern allows juggling asynchronous reactivity a bit simpler.<\/p>\n\n\n\n
    Reactive Systems<\/h2>\n\n\n\n
    Many more complex reactive systems are at the foundations of popular libraries and frameworks: hooks in React, Signals in Solid, Observables in Rx.js, and more. They usually have the same basic premise of when data changes, re-render the components or associated DOM fragments.<\/p>\n\n\n\n
    Observables (Pattern of Rx.js)<\/h3>\n\n\n\n
    Observables and Observer Pattern are not the same despite being nearly the same word, lol.<\/p>\n\n\n\n
    Observables allow you to define a way to produce a sequence of values over time. Here is a simple Observable primitive that provides a way to emit a sequence of values to subscribers, allowing them to react as those values are produced.<\/p>\n\n\n
    class<\/span> Observable<\/span> <\/span>{\n  constructor<\/span>(producer) {\n    this<\/span>.producer = producer;\n  }\n\n  \/\/ Method to allow a subscriber to subscribe to the observable<\/span>\n  subscribe(observer) {\n    \/\/ Ensure the observer has the necessary functions<\/span>\n    if<\/span> (typeof<\/span> observer !== 'object'<\/span> || observer === null<\/span>) {\n      throw<\/span> new<\/span> Error<\/span>('Observer must be an object with next, error, and complete methods'<\/span>);\n    }\n\n    if<\/span> (typeof<\/span> observer.next !== 'function'<\/span>) {\n      throw<\/span> new<\/span> Error<\/span>('Observer must have a next method'<\/span>);\n    }\n\n    if<\/span> (typeof<\/span> observer.error !== 'function'<\/span>) {\n      throw<\/span> new<\/span> Error<\/span>('Observer must have an error method'<\/span>);\n    }\n\n    if<\/span> (typeof<\/span> observer.complete !== 'function'<\/span>) {\n      throw<\/span> new<\/span> Error<\/span>('Observer must have a complete method'<\/span>);\n    }\n\n    const<\/span> unsubscribe = this<\/span>.producer(observer);\n\n    \/\/ Return an object with an unsubscribe method<\/span>\n    return<\/span> {\n      unsubscribe<\/span>: ()<\/span> =><\/span> {\n        if<\/span> (unsubscribe && typeof<\/span> unsubscribe === 'function'<\/span>) {\n          unsubscribe();\n        }\n      },\n    };\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Here\u2019s how you would use them:<\/p>\n\n\n
    \/\/ Create a new observable that emits three values and then completes<\/span>\nconst<\/span> observable = new<\/span> Observable(observer<\/span> =><\/span> {\n  observer.next(1<\/span>);\n  observer.next(2<\/span>);\n  observer.next(3<\/span>);\n  observer.complete();\n\n  \/\/ Optional: Return a function to handle any cleanup if the observer unsubscribes<\/span>\n  return<\/span> ()<\/span> =><\/span> {\n    console<\/span>.log('Observer unsubscribed'<\/span>);\n  };\n});\n\n\/\/ Define an observer with next, error, and complete methods<\/span>\nconst<\/span> observer = {\n  next<\/span>: value<\/span> =><\/span> console<\/span>.log('Received value:'<\/span>, value),\n  error<\/span>: err<\/span> =><\/span> console<\/span>.log('Error:'<\/span>, err),\n  complete<\/span>: ()<\/span> =><\/span> console<\/span>.log('Completed'<\/span>),\n};\n\n\/\/ Subscribe to the observable<\/span>\nconst<\/span> subscription = observable.subscribe(observer);\n\n\/\/ Optionally, you can later unsubscribe to stop receiving values<\/span>\nsubscription.unsubscribe();\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    The critical component of an Observable is the next()<\/code> method, which sends data to the observers. A complete()<\/code> method for when the Observable stream closes. And an error()<\/code> method when something goes wrong. Also, there has to be a way to subscribe()<\/code> to listen for changes and unsubscribe()<\/code> to stop receiving data from the stream.<\/p>\n\n\n\n
    The most popular libraries that use this pattern are Rx.js<\/a> and MobX<\/a>.<\/p>\n\n\n\n
    \u201cSignals\u201d (Pattern of SolidJS)<\/h3>\n\n\n\n
    Hat tip Ryan Carniato\u2019s Reactivity with SolidJS course<\/a>.<\/p>\n\n\n
    const<\/span> context = [];\n\nexport<\/span> function<\/span> createSignal<\/span>(value<\/span>) <\/span>{\n    const<\/span> subscriptions = new<\/span> Set<\/span>();\n\n    const<\/span> read = ()<\/span> =><\/span> {\n        const<\/span> observer = context[context.length - 1<\/span>]\n        if<\/span> (observer) subscriptions.add(observer);\n        return<\/span> value;\n    }\n    const<\/span> write = (newValue<\/span>) =><\/span> {\n        value = newValue;\n        for<\/span> (const<\/span> observer of<\/span> subscriptions) {\n            observer.execute()\n        }\n    }\n\n    return<\/span> [read, write];\n}\n\nexport<\/span> function<\/span> createEffect<\/span>(fn<\/span>) <\/span>{\n    const<\/span> effect = {\n        execute() {\n            context.push(effect);\n            fn();\n            context.pop();\n        }\n    }\n\n    effect.execute();\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Using the reactive system:<\/p>\n\n\n
    import<\/span> { createSignal, createEffect } from<\/span> \".\/reactive\"<\/span>;\n\nconst<\/span> [count, setCount] = createSignal(0<\/span>);\n\ncreateEffect(()<\/span> =><\/span> {\n  console<\/span>.log(count());\n}); \/\/ 0<\/span>\n\nsetCount(10<\/span>); \/\/ 10<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    \u201cObservable-ish\u201d Values (Frontend Masters)<\/h3>\n\n\n\n
    Our Frontend Masters video player has many configurations that could change anytime to modify video playback. Kai on our team created \u201cObservable-ish\u201d Values<\/a> (many years ago now, but we just published it for this article\u2019s sake), which is another take on a reactive system in vanilla JavaScript.<\/p>\n\n\n\n
    It\u2019s less than 100 lines of code and has stood the test of time! For 7+ years, this tiny bit of code has underpinned delivering millions of hours of video. It\u2019s a mix of PubSub with the ability to have computed values by adding the results of multiple publishers together.<\/p>\n\n\n\n
    Here\u2019s how you use the \u201cObservable-ish\u201d values. Publish changes to subscriber functions when values change:<\/p>\n\n\n
    const<\/span> fn = function<\/span>(current, previous<\/span>) <\/span>{}\n\nconst<\/span> obsValue = ov('initial'<\/span>);\nobsValue.subscribe(fn);      \/\/ subscribe to changes<\/span>\nobsValue();                  \/\/ 'initial'<\/span>\nobsValue('initial'<\/span>);         \/\/ identical value, no change<\/span>\nobsValue('new'<\/span>);             \/\/ fn('new', 'initial')<\/span>\nobsValue.value = 'silent'<\/span>;   \/\/ silent update<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Modifying arrays and objects will not publish, but replacing them will.<\/p>\n\n\n
    const<\/span> obsArray = ov([1<\/span>, 2<\/span>, 3<\/span>]);\nobsArray.subscribe(fn);\nobsArray().push(4<\/span>);          \/\/ silent update<\/span>\nobsArray.publish();          \/\/ fn([1, 2, 3, 4]);<\/span>\nobsArray([4<\/span>, 5<\/span>]);            \/\/ fn([4, 5], [1, 2, 3]);<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Passing a function caches the result as the value. Any extra arguments will be passed to the function. Any observables called within the function will be subscribed to, and updates to those observables will recompute the value.<\/p>\n\n\n\n
    Child observables must be called; mere references are ignored. If the function returns a Promise, the value is assigned async after resolution.<\/p>\n\n\n
    const<\/span> a = ov(1<\/span>);\nconst<\/span> b = ov(2<\/span>);\nconst<\/span> computed = ov(arg<\/span> =><\/span> { a() + b() + arg }, 3<\/span>);\ncomputed.subscribe(fn);\ncomputed();                  \/\/ fn(6)<\/span>\na(2<\/span>);                        \/\/ fn(7, 6)<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Reactive Rendering of UI<\/h2>\n\n\n\n
    Here are some patterns for writing and reading from the DOM and CSS.<\/p>\n\n\n\n
    Render Data to HTML String Literals<\/h3>\n\n\n\n
    Here\u2019s a simple example of rendering some pizza UI based on data.<\/p>\n\n\n
    function<\/span> PizzaRecipe<\/span>(pizza<\/span>) <\/span>{\n  return<\/span> `<div class=\"pizza-recipe\">\n    <h1>${pizza.name}<\/span><\/h1>\n    <h3>Toppings: ${pizza.toppings.join(', '<\/span>)}<\/span><\/h3>\n    <p>${pizza.description}<\/span><\/p>\n  <\/div>`<\/span>;\n}\n\nfunction<\/span> PizzaRecipeList<\/span>(pizzas<\/span>) <\/span>{\n  return<\/span> `<div class=\"pizza-recipe-list\">\n    ${pizzas.map(PizzaRecipe).join(''<\/span>)}<\/span>\n  <\/div>`<\/span>;\n}\n\nvar<\/span> allPizzas = [\n  {\n    name<\/span>: 'Margherita'<\/span>,\n    toppings<\/span>: ['tomato sauce'<\/span>, 'mozzarella'<\/span>],\n    description<\/span>: 'A classic pizza with fresh ingredients.'<\/span>\n  },\n  {\n    name<\/span>: 'Pepperoni'<\/span>,\n    toppings<\/span>: ['tomato sauce'<\/span>, 'mozzarella'<\/span>, 'pepperoni'<\/span>],\n    description<\/span>: 'A favorite among many, topped with delicious pepperoni.'<\/span>\n  },\n  {\n    name<\/span>: 'Veggie Supreme'<\/span>,\n    toppings<\/span>: ['tomato sauce'<\/span>, 'mozzarella'<\/span>, 'bell peppers'<\/span>, 'onions'<\/span>, 'mushrooms'<\/span>],\n    description<\/span>: 'A delightful vegetable-packed pizza.'<\/span>\n  }\n];\n\n\/\/ Render the list of pizzas<\/span>\nfunction<\/span> renderPizzas<\/span>(<\/span>) <\/span>{\n  document<\/span>.querySelector('body'<\/span>).innerHTML = PizzaRecipeList(allPizzas);\n}\n\nrenderPizzas(); \/\/ Initial render<\/span>\n\n\/\/ Example of changing data and re-rendering<\/span>\nfunction<\/span> addPizza<\/span>(<\/span>) <\/span>{\n  allPizzas.push({\n    name<\/span>: 'Hawaiian'<\/span>,\n    toppings<\/span>: ['tomato sauce'<\/span>, 'mozzarella'<\/span>, 'ham'<\/span>, 'pineapple'<\/span>],\n    description<\/span>: 'A tropical twist with ham and pineapple.'<\/span>\n  });\n\n  renderPizzas(); \/\/ Re-render the updated list<\/span>\n}\n\n\/\/ Call this function to add a new pizza and re-render the list<\/span>\naddPizza();\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    addPizza<\/code> demonstrates how to change the data by adding a new pizza recipe to the list and then re-rendering the list to reflect the changes.<\/p>\n\n\n\n
    See examples of other approaches in the Vanilla TodoMVC repo<\/a> and associated Vanilla TodoMVC article<\/a>.<\/p>\n\n\n\n
    Reactive DOM Attributes: MutationObserver<\/h3>\n\n\n\n
    One way to make DOM reactive is to add and remove attributes. We can listen to changes in attributes using the MutationObserver<\/code> API.<\/p>\n\n\n
    const<\/span> mutationCallback = (mutationsList<\/span>) =><\/span> {\n  for<\/span> (const<\/span> mutation of<\/span> mutationsList) {\n    if<\/span> (\n      mutation.type !== \"attributes\"<\/span> ||\n      mutation.attributeName !== \"pizza-type\"<\/span>\n    ) return<\/span>;\n\n    console<\/span>.log('old:'<\/span>, mutation.oldValue)\n    console<\/span>.log('new:'<\/span>, mutation.target.getAttribute(\"pizza-type\"<\/span>))\n  }\n}\nconst<\/span> observer = new<\/span> MutationObserver(mutationCallback);\nobserver.observe(document<\/span>.getElementById('pizza-store'<\/span>), { attributes<\/span>: true<\/span> });\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Now we can update the pizza-type attribute from anywhere in our program, and the element itself can have behavior attached to updating that attribute!<\/p>\n\n\n\n
    Reactive Attributes in Web Components<\/h3>\n\n\n\n
    With Web Components, there is a native way to listen and react to attribute updates.<\/p>\n\n\n
    class<\/span> PizzaStoreComponent<\/span> extends<\/span> HTMLElement<\/span> <\/span>{\n  static<\/span> get<\/span> observedAttributes() {\n    return<\/span> ['pizza-type'<\/span>];\n  }\n\n  constructor<\/span>() {\n    super<\/span>();\n    const<\/span> shadowRoot = this<\/span>.attachShadow({ mode<\/span>: 'open'<\/span> });\n    shadowRoot.innerHTML = `<p>${this<\/span>.getAttribute('pizza-type'<\/span>) || 'Default Content'<\/span>}<\/span><\/p>`<\/span>;\n  }\n\n  attributeChangedCallback(name, oldValue, newValue) {\n    if<\/span> (name === 'my-attribute'<\/span>) {\n      this<\/span>.shadowRoot.querySelector('div'<\/span>).textContent = newValue;\n      console<\/span>.log(`Attribute ${name}<\/span> changed from ${oldValue}<\/span> to ${newValue}<\/span>`<\/span>);\n    }\n  }\n}\n\ncustomElements.define('pizza-store'<\/span>, PizzaStoreComponent);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
    <pizza-store<\/span> pizza-type<\/span>=\"Supreme\"<\/span>><\/span><\/pizza-store<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n
    document<\/span>.querySelector('pizza-store'<\/span>).setAttribute('pizza-type'<\/span>, 'BBQ Chicken!'<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    This is a bit simpler, but we have to use Web Components to use this API.<\/p>\n\n\n\n
    Reactive Scrolling: IntersectionObserver<\/h3>\n\n\n\n
    We can wire reactivity to DOM elements scrolling into view. I\u2019ve used this for slick animations on our marketing pages.<\/p>\n\n\n
    var<\/span> pizzaStoreElement = document<\/span>.getElementById('pizza-store'<\/span>);\n\nvar<\/span> observer = new<\/span> IntersectionObserver(function<\/span>(entries, observer<\/span>) <\/span>{\n  entries.forEach(function<\/span>(entry<\/span>) <\/span>{\n    if<\/span> (entry.isIntersecting) {\n      entry.target.classList.add('animate-in'<\/span>);\n    } else<\/span> {\n      entry.target.classList.remove('animate-in'<\/span>);\n    }\n  });\n});\n\nobserver.observe(pizzaStoreElement);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Animation & Game Loop: requestAnimationFrame<\/h3>\n\n\n\n
    When working with game development, Canvas, WebGL, or those wild marketing sites, animations often require writing to a buffer and then writing the results on a given loop when the rendering thread becomes available. We do this with requestAnimationFrame<\/code>.<\/p>\n\n\n
    function<\/span> drawStuff<\/span>(<\/span>) <\/span>{\n  \/\/ This is where you'd do game or animation rendering logic<\/span>\n}\n\n\/\/ function to handle the animation<\/span>\nfunction<\/span> animate<\/span>(<\/span>) <\/span>{\n  drawStuff();\n  requestAnimationFrame(animate); \/\/ Continually calls animate when the next render frame is available<\/span>\n}\n\n\/\/ Start the animation<\/span>\nanimate();\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    This is the method games and anything that involves real-time rendering use to render the scene when frames become available.<\/p>\n\n\n\n
    Reactive Animations: Web Animations API<\/h3>\n\n\n\n
    You can also create reactive animations with the Web Animations API. Here we will animate an element\u2019s scale, position, and color using the animation API.<\/p>\n\n\n
    const<\/span> el = document<\/span>.getElementById('animatedElement'<\/span>);\n\n\/\/ Define the animation properties<\/span>\nconst<\/span> animation = el.animate([\n  \/\/ Keyframes<\/span>\n  { transform<\/span>: 'scale(1)'<\/span>, backgroundColor<\/span>: 'blue'<\/span>, left<\/span>: '50px'<\/span>, top<\/span>: '50px'<\/span> },\n  { transform<\/span>: 'scale(1.5)'<\/span>, backgroundColor<\/span>: 'red'<\/span>, left<\/span>: '200px'<\/span>, top<\/span>: '200px'<\/span> }\n], {\n  \/\/ Timing options<\/span>\n  duration<\/span>: 1000<\/span>,\n  fill<\/span>: 'forwards'<\/span>\n});\n\n\/\/ Set the animation's playback rate to 0 to pause it<\/span>\nanimation.playbackRate = 0<\/span>;\n\n\/\/ Add a click event listener to the element<\/span>\nel.addEventListener('click'<\/span>, () => {\n  \/\/ If the animation is paused, play it<\/span>\n  if<\/span> (animation.playbackRate === 0<\/span>) {\n    animation.playbackRate = 1<\/span>;\n  } else<\/span> {\n    \/\/ If the animation is playing, reverse it<\/span>\n    animation.reverse();\n  }\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    What\u2019s reactive about this is that the animation can play relative to where it is located when an interaction occurs (in this case, reversing its direction). Standard CSS animations and transitions aren\u2019t relative to their current position.<\/p>\n\n\n\n
    Reactive CSS: Custom Properties and calc<\/code><\/h3>\n\n\n\n
    Lastly, we can write CSS that\u2019s reactive by combining custom properties and calc<\/code>.<\/p>\n\n\n
    barElement.style.setProperty('--percentage'<\/span>, newPercentage);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    In JavaScript, you can set a custom property value.<\/p>\n\n\n
    .bar<\/span> {\n  width<\/span>: calc<\/span>(100%<\/span> \/ 4<\/span> - 10px<\/span>);\n  height<\/span>: calc<\/span>(var(--percentage) * 1%<\/span>);\n  background-color<\/span>: blue;\n  margin-right<\/span>: 10px<\/span>;\n  position<\/span>: relative;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    And in the CSS, we can now do calculations based on that percentage. It\u2019s pretty cool that we can add calculations right into the CSS and let CSS do its job of styling without having to keep all that rendering logic in JavaScript.<\/p>\n\n\n\n
    FYI: You can also read these properties if you want to create changes relative to the current value.<\/p>\n\n\n
    getComputedStyle(barElement).getPropertyValue('--percentage'<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    The Many Ways to Achieve Reactivity<\/h2>\n\n\n\n
    It\u2019s incredible how many ways we can achieve reactivity using very little code in modern vanilla JavaScript. We can combine these patterns in any way we see fit for our apps to reactively render, log, animate, handle user events, and all the things that can happen in the browser. <\/p>\n\n\n\n
    \n
    Next, check out the JavaScript Learning Path<\/a> and learn JavaScript deeply from awesome instructors like Anjana Vakil, Will Sentance and Kyle Simpson! Or dive right into the most loved course on the platform, JavaScript: The Hard Parts<\/a>!<\/p>\n\n\n\n
    ~ Frontend Masters Team<\/p>\n<\/div><\/div>\n\n\n
    \n  
    \n    
    Article Series<\/h3>\n  <\/header>\n  
    \n            
      \n                      
    1. \n              Writing a TodoMVC App with Modern Vanilla JavaScript<\/a>\n            <\/li>\n                      
    2. \n              Patterns for Reactivity with Modern Vanilla JavaScript<\/a>\n            <\/li>\n                      
    3. \n              Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript<\/a>\n            <\/li>\n                  <\/ol>\n        <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
      \u201cReactivity\u201d is how systems react to changes in data. There are many types of reactivity, but for this article, reactivity is\u00a0when data changes, you do things.<\/p>\n","protected":false},"author":2,"featured_media":43,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3,28,4],"class_list":["post-40","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-javascript","tag-reactivity","tag-vanilla"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2023\/10\/reactivity-featured.png?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=40"}],"version-history":[{"count":8,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/40\/revisions"}],"predecessor-version":[{"id":3289,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/40\/revisions\/3289"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/43"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=40"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=40"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
    Here\u2019s an example scrolling animation CodePen<\/a> in very few lines of code using IntersectionObserver<\/code>.<\/p>\n\n\n\n
    The main drawback of this approach is you blow away the entire DOM on every render. You can more intelligently update only the bits of DOM that change using a library like lit-html<\/a> (lit-html usage guide<\/a>). We do this with several highly dynamic components on Frontend Masters, like our data grid component.<\/p>\n\n\n\n
    Here\u2019s the complete code for his vanilla reactivity system<\/a> with a code sample that Ryan writes in his course.<\/p>\n\n\n\n