Can we grasp the latest concepts in frontend engineering by dusting off some computing ideas from the past? That’s what Canva CTO Dave Hearnden says.
At the very first Frontend Engineering Sydney event, Dave Hearnden spoke about two topics that we don’t hear about every day: Denotational Semantics and box functions.
To achieve the full apple-falling-on-head enlightenment experience, you should watch the whole video. But briefly summarised, the topics fall into two acts…
Act I: Denotational Semantics
Denotational Semantics originated in the late 1960s as a method for defining meaning precisely in computing languages. Starting from the most basic elements, the meaning of statements and programs are built up recursively from the meanings of their parts.
But according to Hearnden, these principles can provide “…a gear shift in how you might think about React components. You can change the notation a bit and kind of see through the standard JSX notation.”
He takes a card component in React, and shows how it too can be defined in terms of other components and the element tree that it produces.
Act II: Box Functions
What are box functions? Dave starts innocuously enough on this topic: “A box function is just anything which takes a value and returns something in a box.” A box within a box can be flattened, or flatmapped, back into a single box.
But from these humble beginnings, he explains how these basic units of composition from functional programming can be applied to modern frontend engineering. Because what are some examples of boxes? Things we use all the time: lists, promises and options, for example. “And the React render cycle… is essentially just flatmapping”.
So watch Dave’s talk, and perhaps you too will enlightened about something that you didn’t even know you didn’t know.