Dan Kennedy

Apples falling from Bodhi Trees: Dave Hearnden at Frontend Engineering Sydney

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.

According to Hearnden, recent changes in JavaScript have helped bring these topics back into relevance:

“First off JavaScript was like a language from the 90s, even in ES6 we got classes and lambdas and that kind of brought it into the 2000s. But with ES7, ES8, promises, async await generators, Typescript, all these things, the pace of evolution is just unprecedented.”

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.

What do computer science students learn on a tour of Canva?

What advice does Canva give to computer science students? Continue reading

My First Month at Canva

Published on September 27, 2017

The turnaround of Canva’s iOS team

Published on August 22, 2017