runemadsen
commented
2 years ago This is really lovely! I only have two small comments:
- Are we sure that the
mechanicPreloadfunction isn't resettting its memoed objects whenever the design function is run, since the design function is re-run in a completely newly generatediframe? - I'm sold on the function syntax, but I'm wondering about the name. Since it's used in the context of the design function and not before, how about something like just
memo? People can always rename in the import if they want.
Once these are taken care of, let's get it in :)
lucasdinonolte
netlify[bot]
Context
Some functions need to run slow code (like loading a bigger static file) upfront. This code is currently re-run on every preview, which can make things feel slow and less snappy in the UI.
To solve this the concept of function memoization could be used. Essentially a memoized function creates a cache based on it's input and immediately returns the cache, if its inputs didn't change – for example the
useMemohook in React.This PR explores the possibilities of adding memoization as a utility to Mechanic. It should serve as a starting point for debate how we want to implement this.
The actual implementation of memoization is fairly simple. The hard part is really: How do we want to expose this function to the users?
Prototypical Solution
mechanicPreloadfunction that is exported from mechanic coremechanicPreloadcan be imported into a design functionmechanicPreloadto control what they want to be cached. It is an opt-in performance optimization.mechanicPreloadis modelled afteruseMemo. It takes a function without arguments and an array of depedencies from the parent scope. Whenever the value of one of the dependencies changes the provided function is run.Other approaches to memoization
"Default" memoization in functional programming
The above implementation was chosen for the prototype based on the assumption that if people know about memoization they probably know about the way React does it
Traditionally memoization is realized by returning a memoizable function from another function (this sounds more confusing than the code looks):
While personally I find this approach more explicit I'm unsure if this is the right way to expose this functionality as this is deeply tied to functional programming, which probably not all of mechanic's users are super familiar with.
Ideal solution
The ideal solution from a user's perspective would be to not needing to worry about memoization and dependencies at all. Just wrap the things you want to cache inside a preload function and Mechanic will figure out how to cache it.
However this is also the hardest to implement. For the above example I can't think of a way for Mechanic to know about the function's dependencies (which it needs to build the cache key) that wouldn't involve some sort of parsing and AST magic. But maybe I'm missing an obvious solution.
TL;DR – I just want to see this in action
Logo CanvasonDSI Logo Makerhas been updated to use memoization on the font loading. You can compare this to another design function to see the difference in rendering this makes.