Electron, React, and Haskell—Oh My!

A look under the hood at Wagon

Transcript

1. Electron,  React,  and  Haskell—Oh  My! A  look  under  the  hood  at  Wagon Mike  Craig   @mkscrg Co-­‐Founder  and  CTO  at  Wagon
2. A  better  way  for  analysts  and  engineers  to   write  queries,  visualize  results,  and  share  data  &  charts. Wagon  is  a  modern  SQL  editor
3. Desktop  Application Web  Application
4. Architecture Electron Wagon  AWS Backend JS  SPA JS  SPA DB  Connector User’s Database Web  application Desktop  application
5. 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!
6. We’re  building  a  desktop  app! Electron Wagon  AWS Backend JS  SPA JS  SPA DB  Connector User’s Database Web  application Desktop  application
7. 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
8. DB  Connector:  Haskell  +  Electron Electron Wagon  AWS Backend JS  SPA JS  SPA User’s Database Web  application Desktop  application DB  Connector
9. 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
10. 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
11. Wagon  is  a  web  app,  too! • Serve  JS  and  assets  live,  even  for  Electron • Use  <webview>, swap  with  static  content:
12. Wagon  is  a  web  app,  too! • Avoid  mixing  Electron  and  browser  APIs • Sandbox  Electron  calls  in  their  own  module:
13. Fun  setup,  tricky  deployment • Sometimes  we  break  the  API between  JS  and  Haskell Electron Desktop  application DB  Connector JS  SPA
14. Fun  setup,  tricky  deployment • Pin  versions  between  desktop  and  JS  apps Electron DB  Connector JS  SPA 420 408 2611 ⋮ 2600 ⋮ Version  Map ⋮ ⋮ 2585
15. Fun  setup,  tricky  deployment • Desktop  version  in  index.html requests
16. Fun  setup,  tricky  deployment • Compute  correct  version  on  AWS  server • Get  versioned  JS  through  CloudFront
17. ⛵️ Ship  it!   • Check  out  our  blog:    wagonhq.com/blog • Need  a  better SQL  editor? • We’re  hiring! • Thanks  for  coming!
18. Mike  Craig   @mkscrg Co-­‐Founder  and  CTO  at  Wagon hello@wagonhq.com Questions?