JSFoo: round the year submissions

JSFoo: round the year submissions

Submit talks on JavaScript and full stack engineering round the year

George Mandis


Going the Distance with SVG, Headless & Serverless

Submitted Mar 3, 2018

Running apps without servers and browsers without screens sounds a little absurd, but it can be a surprisingly efficient way to solve certain problems. In this talk George will discuss a real-world solution—A service that creates mementos for marathoners based on their recorded activities—built on top of serverless technologies and Puppeteer—the Headless Chrome Node API—to work with the SVG DOM on-the-fly and create print-ready documents from GPS routes. The audience will get a firsthand look at how cutting-edge JavaScript technologies and language features were integrated with a preexisting legacy PHP backend and minimal casualties.


  • General introduction
  • What Puppeteer is and how to get started with it
  • Challenges in using serverless architecture and Puppeteer together
  • Overview of specific task (Strava API -> GPS routes -> print-ready maps on the fly)
  • Challenges in implementation with existing PHP legacy system
  • Additional design and workflow challenges (Working with provided pre-existing SVG templates)
  • High-Level view of how the final solution was implemented
  • How this approach compares to the legacy version
  • Why DOM manipulation on the server was chosen over client-side in this scenario
  • Future improvements and thoughts on using this stack for other applications

Speaker bio

George Mandis is a freelance web developer, consultant, frequent traveler and occasional educator based primarily out of Portland, Oregon. He’s worked with startups, professional sports teams, small businesses and individuals but excels at helping people find elegant solutions for their projects. He spent a year living as a digital nomad, inadvertently cheated running a marathon in North Korea and writes frequently on technology and travel on his website.


{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more