Electron,  React,  and  Haskell—Oh  My! A  look  under  the  hood  at  Wagon Mike  Craig   @mkscrg Co-­‐Founder  and  CTO  at  Wagon 

A  better  way  for  analysts  and  engineers  to   write  queries,  visualize  results,  and  share  data  &  charts. Wagon  is  a  modern  SQL  editor 

Desktop  Application Web  Application 

Architecture Electron Wagon  AWS Backend JS  SPA JS  SPA DB  Connector User’s Database Web  application Desktop  application 

We’re  building  a  desktop  app? • Secure,  direct  connection  to  databases • Utilize  the  local  computing  environment • Native  experience:  dock,  ⌘ +  Tab,  alerts …  it  just  feels  right! • We   building  UX  with  web  technologies – React,  Bootstrap,  Chrome  Dev  Tools,  etc. Electron  makes  it  possible! 

We’re  building  a  desktop  app! Electron Wagon  AWS Backend JS  SPA JS  SPA DB  Connector User’s Database Web  application Desktop  application 

Utilizing  the  local  environment • Connect  directly  to  the  user’s  database • Parse  and  execute  DB  queries • Cache  query  results  on  disk • Compute  stats  and  aggregations  for  charts 

DB  Connector:  Haskell  +  Electron Electron Wagon  AWS Backend JS  SPA JS  SPA User’s Database Web  application Desktop  application DB  Connector 

DB  Connector:  Haskell  +  Electron • Statically  compiled  Haskell  executable • Shipped  in  Electron  app  bundle • main.js in  Electron  spawns  the  subprocess • Executable  creates  a  localhost  HTTP  server • JS  talks  to  Haskell  over  AJAX 

Wagon  is  a  web  app,  too! • Single  JS  codebase  for  desktop  and  web Electron Wagon  AWS Backend User’s Database Desktop  application DB  Connector JS  SPA JS  SPA Web  application 

Wagon  is  a  web  app,  too! • Serve  JS  and  assets  live,  even  for  Electron • Use  , swap  with  static  content: 

Wagon  is  a  web  app,  too! • Avoid  mixing  Electron  and  browser  APIs • Sandbox  Electron  calls  in  their  own  module: 

Fun  setup,  tricky  deployment • Sometimes  we  break  the  API between  JS  and  Haskell Electron Desktop  application DB  Connector JS  SPA 

Fun  setup,  tricky  deployment • Pin  versions  between  desktop  and  JS  apps Electron DB  Connector JS  SPA 420 408 2611 ⋮ 2600 ⋮ Version  Map ⋮ ⋮ 2585 

Fun  setup,  tricky  deployment • Desktop  version  in  index.html requests 

Fun  setup,  tricky  deployment • Compute  correct  version  on  AWS  server • Get  versioned  JS  through  CloudFront 

⛵️ Ship  it!   • Check  out  our  blog:    wagonhq.com/blog • Need  a  better SQL  editor? • We’re  hiring! • Thanks  for  coming! 

Mike  Craig   @mkscrg Co-­‐Founder  and  CTO  at  Wagon [email protected] Questions?