Download as PDF, PPTX
Uploaded byMike North
CI/CD and Asset Serving for Single Page Apps
This document discusses modern CI/CD and asset serving practices. It defines continuous integration as running automated tests on code changes to provide quick feedback. Continuous deployment automates releasing code to production without human intervention. The document recommends keeping the CI/CD pipeline fast through practices like modular code and fast tests. It also discusses asset serving techniques like versioning assets, maintaining canary environments, and notifying users of new releases. Overall, the document promotes CI/CD and advanced asset serving practices to increase velocity, reliability and user experience for modern web applications.
More Related Content
Similar to CI/CD and Asset Serving for Single Page Apps
CI/CD and Asset Serving for Single Page Apps
- 1. @MichaelLNorth Modern CI/CD and AssetServing Mike North 10/20/2015
- 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.
- 4.
- 5.
- 6. @MichaelLNorth Integration Hell • MergeConflicts • Duplicate Work • Difficult to automate • Detect problems late • Lack of visibility
- 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. @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. @MichaelLNorth Continuous Integration (CI) Testeach change - Push vs PR build MASTER FEATURE BRANCH HEAD PULL REQUEST “PUSH” BUILD “PR” BUILD
- 10. @MichaelLNorth Continuous Integration (CI) Testeach change - Green Light? ✓ ✓ ? …later… Never Tested
- 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. @MichaelLNorth Continuous Integration (CI) Keepthe pipeline fast Trunk Staging Production 60m 10m ✘ 60m to fix
- 13. @MichaelLNorth Continuous Integration (CI) Keepthe pipeline fast Trunk Staging Production 10m 60m ✘ 10m to fix
- 14. @MichaelLNorth Continuous Integration (CI) Keepthe 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. @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.
- 17.
- 18. @MichaelLNorth Releases • Manual releasesare painful, expensive demoralizing and risky • Human testing scales terribly
- 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. @MichaelLNorth Continuous Deployment (CD) Goodteam practices • Flow to production only when you want • Report released changes back to the team • Master === Production • App versioning (SHA?)
- 21. @MichaelLNorth Continuous Deployment (CD) CanaryEnvironment Trunk Staging Production (Canary) Production (GA) 24h Wait 90%10% Prod Verification Tests Unit, Functional, Integration Tests
- 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. @MichaelLNorth Continuous Deployment (CD) …forsingle-page apps… index.html mystyle.css app.js vendor.js CDN REDIS
- 24. Asset Serving (the “deliveringit” part)
- 25. @MichaelLNorth Asset Serving • Oftenoverlooked, 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. @MichaelLNorth Asset Serving • S3is 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. @MichaelLNorth Asset Serving …for single-pageapps… Server index.html *.{js, css, png, etc…} REDIS
- 28. @MichaelLNorth Asset Serving • Canaryand “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. @MichaelLNorth Asset Serving • There’sa 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. @MichaelLNorth Asset Serving • There’sa 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. @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. @MichaelLNorth Asset Serving Maintenance Mode myapp:currentmaintenance: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. @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. @MichaelLNorth Asset Serving Notifying existingclients 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.
- 36. • Manual testingand 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