SitePen participates in a number of conferences around the world presenting new technology and ideas to engineers and designers. Recently Dylan Schiemann and Tom Dye spoke at the HalfStack Conference in London and Paul Shannon spoke at Phoenix TypeScript meetup. We demonstrated what Dojo and the Web could do by using Web Audio, Web Animations, and a number of other technologies to create a fun application.

The "Problem"

As we all know, developers are plagued by a number of critical decisions while writing code.

  • Should I use tabs or spaces?
  • Should I use object oriented or functional patterns?
  • Should I use strong type definitions?
  • Which framework should I use, or should I create my own?

These are all great questions, but we wanted to answer the ultimate of all development questions. “Should I use cat or dog pictures in my comments and memes?” To answer this question, we did what most great engineers would do: we built an app that let the audience choose their favorite!

About the App

Cats vs Dogs is more than just a creative way to fill a room with woofs and meows. It is also a great example of a simple, full-stack TypeScript application.

  • Dojo‘s reactive architecture and modern standards help us take advantage of Web Audio and Web Animations in the client
  • NestJS help us provide a simple server-side for tracking votes
  • Now provides an open-source friendly serverless infrastructure for deployment of the application

These technologies allowed us to quickly create and deploy a simple open-source application for our presentation.

Web Audio and Web Animations: Emerging Standards

Web Animations and Web Audio are interesting new standards because of their ability to allow an app to really differentiate itself from the crowd.

Web Animations define an interface that describes how elements on a page change over time. It does this by bringing together common elements from a number of already existing technologies: CSS Transitions, CSS Animations, and SVG Animations. Individually, all of these technologies have different interfaces, require different expertise to use, and have various pitfalls. But Web Animations unify animations under a single interface and make it easier to use and access via JavaScript. This is particularly beneficial for interfaces that use Material Design or other approaches that rely on motion to reflect change and state in an application.

Web Audio allows for low-level access to audio sources allowing engineers to programmatically create and shape sound. It opens up audio to web developers similar to the way canvas and SVG have opened up images and drawing. The Cats vs. Dogs app uses this ability in a very simple manner to change the pitch of the sound. But we are excited about Web Audio for its ability to combine with a number of emerging technologies, like creating 360 spatial sound in WebXR or for analyzing and working with speech.

And the Winner is…

We had a lot of fun at HalfStack and Phoenix TypeScript and we couldn’t have a vote without announcing a winner! While the vote was close at both events, dogs won out over cats. Well, until the cats voters realized that they could stuff the ballot box, which says a lot.

If you’re interested in how we made the application, you can watch the Cats vs Dogs presentation at HalfStack and take a look at Cats vs Dogs on GitHub. If you would like to talk more about how we can help in the context of your application, let’s connect!