Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CI/CD and Asset Serving for Single Page Apps

1,563 views

Published on

A journey through best practices and technology for the modern build/deploy pipeline that your modern web app deserves! Also, an introduction to the concept and architecture of a new open source turnkey asset serving layer "Banker".

Published in: Technology
  • Be the first to comment

  • Be the first to like this

CI/CD and Asset Serving for Single Page Apps

  1. 1. @MichaelLNorth Modern CI/CD and Asset Serving Mike North 10/20/2015
  2. 2. @MichaelLNorth About.me • Job.new = CTO • Job.old = UI Architect for Yahoo Ads & Data • Organizer, Modern Web UI • Ember.js, Ember-cli, Ember-data contributor • OSS Enthusiast
  3. 3. Agenda Manual Integration Continuous Integration Manual Releases Continuous Deployment Modern Asset Serving
  4. 4. Integration (working together)
  5. 5. @MichaelLNorth Integration MASTER FEATURE BRANCHES
  6. 6. @MichaelLNorth Integration Hell • Merge Conflicts • Duplicate Work • Difficult to automate • Detect problems late • Lack of visibility
  7. 7. @MichaelLNorth Continuous Integration (CI) • Stay close to master • Tests are automatically run on each small change • Alert team when tests fail! • Team keeps the pipeline healthy Technology + People
  8. 8. @MichaelLNorth Continuous Integration (CI) • Hide (and merge) incomplete features • It’s ok to stub things out in the beginning • Modular design practices • Bottom up • Top down and stub Staying close to master
  9. 9. @MichaelLNorth Continuous Integration (CI) Test each change - Push vs PR build MASTER FEATURE BRANCH HEAD PULL REQUEST “PUSH” BUILD “PR” BUILD
  10. 10. @MichaelLNorth Continuous Integration (CI) Test each change - Green Light? ✓ ✓ ? …later… Never Tested
  11. 11. @MichaelLNorth Continuous Integration (CI) • Pipeline breaks? Treat like a critical bug • Don’t pile on top of a break • Assume things will fail • Write tests that give you release confidence Good team practices
  12. 12. @MichaelLNorth Continuous Integration (CI) Keep the pipeline fast Trunk Staging Production 60m 10m ✘ 60m to fix
  13. 13. @MichaelLNorth Continuous Integration (CI) Keep the pipeline fast Trunk Staging Production 10m 60m ✘ 10m to fix
  14. 14. @MichaelLNorth Continuous Integration (CI) Keep the pipeline fast • Selenium is slow • JS tests (QUnit, Mocha) — are fast • Useless tests === tech debt • Hitting a real API in your UI’s CI pipeline should be kept at a minimum
  15. 15. @MichaelLNorth Mocking an API • Hijacks the XMLHttpRequest object • Responds to requests with pre-defined fixtures • Allows for passthrough on defined URLs • Throws errors whenever unexpected requests are sent Pretender.js
  16. 16. Pretender DefineJSONFixtureSetup“Server” XHR github.com/ pretenderjs/ pretender
  17. 17. Deployment (the “shipping it” part)
  18. 18. @MichaelLNorth Releases • Manual releases are painful, expensive demoralizing and risky • Human testing scales terribly
  19. 19. @MichaelLNorth Continuous Deployment (CD) • Code goes from master to production, w/o human intervention required • Heavy emphasis on automated testing • Release early and often!
  20. 20. @MichaelLNorth Continuous Deployment (CD) Good team practices • Flow to production only when you want • Report released changes back to the team • Master === Production • App versioning (SHA?)
  21. 21. @MichaelLNorth Continuous Deployment (CD) Canary Environment Trunk Staging Production (Canary) Production (GA) 24h Wait 90%10% Prod Verification Tests Unit, Functional, Integration Tests
  22. 22. @MichaelLNorth Continuous Deployment (CD) • Increased reliability, visibility, velocity, flexibility, focus, agility • Reduced pressure to prematurely ship • Deliver incremental value to users, early • Consistency Benefits
  23. 23. @MichaelLNorth Continuous Deployment (CD) …for single-page apps… index.html mystyle.css app.js vendor.js CDN REDIS
  24. 24. Asset Serving (the “delivering it” part)
  25. 25. @MichaelLNorth Asset Serving • Often overlooked, but important part of SPA development • What do we want? • Fast initial page load • Maintenance page, API is down page, etc… • Notify users of new version available • Canary environment
  26. 26. @MichaelLNorth Asset Serving • S3 is not a CDN - Latency matters! • CSS, JS, Images should be cached, index.html should not Fast initial page load index.html mystyle-b41cd1a832.css app-1ab41cd781.js vendor-ab818d2175.js
  27. 27. @MichaelLNorth Asset Serving …for single-page apps… Server index.html *.{js, css, png, etc…} REDIS
  28. 28. @MichaelLNorth Asset Serving • Canary and “GA” environment are separate versions Canary Environment - Multi tenancy index.html mystyle-b41cd1a832.css app-1ab41cd781.js vendor-ab818d2175.js index.html mystyle-b41cd1a832.css app-cbab412.js vendor-abcd1d12.js
  29. 29. @MichaelLNorth Asset Serving • There’s a version for each git SHA • Via query param, you can ask for a version Canary Environment - Multi tenancy myapp:a1b231c <html><head>… myapp:d1241b <html><head>… myapp:abc11db <html><head>… http://myapp.com?key=bc147ba
  30. 30. @MichaelLNorth Asset Serving • There’s a version for each git SHA • Via query param, you can ask for a version • There are also some named versions, that refer to other versions Canary Environment - Multi tenancy myapp:current myapp:a1b231c myapp:a1b231c <html><head>… myapp:d1241b <html><head>… myapp:canary myapp:d1241b myapp:abc11db <html><head>…
  31. 31. @MichaelLNorth Asset Serving Canary Environment - Multi tenancy myapp:current myapp:a1b231c myapp:a1b231c <html><head>… myapp:d1241b <html><head>… myapp:canary myapp:d1241b myapp:abc11db <html><head>… host & paths app localhost:3000/* myapp:current lvh.me/* myapp:current canary.lvh.me/* myapp:canary Add a URL-to-App table to the mix
  32. 32. @MichaelLNorth Asset Serving Maintenance Mode myapp:current maintenance:current myapp:a1b231c <html><head>… myapp:d1241b <html><head>… myapp:canary myapp:d1241b myapp:abc11db <html><head>… maintenance:1dbabc1 <html><head>… maintenance:current maintenance:1dbabc1 host & paths app localhost:3000/* myapp:current lvh.me myapp:current canary.lvh.me myapp:canary
  33. 33. @MichaelLNorth Asset Serving Making a “PR Build” available myapp:current maintenance:current myapp:a1b231c <html><head>… myapp:d1241b <html><head>… myapp:canary myapp:d1241b myapp:abc11db <html><head>… maintenance:1dbabc1 <html><head>… maintenance:current maintenance:1dbabc1 MASTER FEATURE BRANCH HEAD PULL REQUEST “PUSH” BUILD “PR” BUILD myapp:bc147ba <html><head>… http://myapp.com?key=bc147ba
  34. 34. @MichaelLNorth Asset Serving Notifying existing clients about deploys myapp:current maintenance:current myapp:a1b231c <html><head>… myapp:d1241b <html><head>… myapp:canary myapp:d1241b myapp:abc11db <html><head>… maintenance:1dbabc1 <html><head>… maintenance:current maintenance:1dbabc1 myapp:bc147ba <html><head>… A new version is here! Click below to start using it! http://myapp.com?key=bc147ba W ebSocket Pub/Sub Slack, Github, etc…
  35. 35. …It’s coming… https://github.com/mike-north/banker
  36. 36. • Manual testing and releasing can be awful at scale • CI/CD is an investment worth making • Don’t treat your SPA like an API • Your asset serving layer can boost productivity! • Check out mike-north/Banker soon for a turnkey implementation! TL;DR

×