The Art of Ember App Deployment

My team and I decided to invest in making our deployments awesome. When I told people about our approach, the community responded with excitement and new OSS implementations.

This talk will show you how to make your team’s deployments delightful and empowering instead of slow, clumsy and frustrating. I'll take you through the key concepts and show you the open source tools that are now available and what's happening next with ember-cli-deploy.

Transcript

1. The Art of Ember App Deployment Luke Melia, Yapp & Yapp Labs EmberConf March 3rd, 2015 1
2. About this Embereño 2
3. Organizer of Ember.js NYC 3
4. Product + Ember Consulting 4 TODO: Half page Yapp,
 half page Yapp Labs Ember.js Consulting & Training
5. How we deliver software has evolved… 5
6. How we deliver software has evolved… 6
7. How we deliver software has evolved… 7
8. How we deliver software has evolved… 8
9. How we deliver software has evolved… 9
10. How we deliver software has evolved… 10
11. …then came our beloved Internet… 11
12. …and the browser, which became the most ubiquitous app runtime in the world. 12
13. How we deliver via the web has evolved… 13 Static HTML sent from server to browser
14. How we deliver via the web has evolved… 14 Dynamic HTML sent from server to browser
15. How we deliver via the web has evolved… 15 Apps running on the server,
 sending HTML representations to browser
16. How we deliver via the web has evolved… 16 Server sends JS to the the browser,
 where the app is run, and interacts with a an API on the server
17. “The future is already here — it’s just not very evenly distributed” - William Gibson Many in our industry haven’t yet arrived at the browser app paradigm. Many in our Ember community haven’t adjusted their deployment techniques since the “server app” days. 17
18. We no longer use CD-ROM duplicators to deploy web software… 18
19. We no longer FTP individual files to production servers… 19
20. What is the server web app deployment approach? Simplified: Copy all the files to the servers Restart the server processes 20
21. What is the server web app deployment approach? For bonus points: “Copy files” more elegantly. e.g. git push, bit torrent, docker containers… Do a rolling restart to avoid downtime. 21
22. Is the “server app” deployment approach the right approach for Ember apps? 22
23. No. Here’s why… 23
24. 24 Initial request Request: /index.html Response: text/html
25. 25 Initial request Request: /index.html Response: text/html Asset files are typically “fingerprinted” and served with fingerprint-based filenames and far future expires headers.
 So this HTML response might contain:
 <script src="/assets/app-abc123.js"></src>
26. 26 Page is parsed, and then a short time later… Request: /assets/app-abc123.js Response: text/javascript
27. 27 But during deployments, this can break down index.html /assets/app-abc123.js index.html /assets/app-def456.js Request: /index.html Response: text/html HTML response contains:
 <script src="/assets/app-abc123.js"></src>
28. 28 …when traffic starts routing to the new app index.html /assets/app-abc123.js index.html /assets/app-def456.js Request: /assets/app-abc123.js Response: 404 Not Found
29. Lesson: To keep static assets working during rolling restarts… …both old and new versions of assets need to be available for at least a few minutes during a deploy. 29
30. Lesson: To keep static assets working during rolling restarts… …deploy assets to a CDN and don’t remove the old ones for a while. 30
31. 31 Long-lived sessions and API changes 5 min 10 min 15 min API change deployed 500 Error
32. Lesson: We have multiple versions of our Ember app in use at once… …so our API needs to remain backward compatible for at least a the length of a user session. 32
33. Versioning your Ember App and Server API App together is a lie. Choose honesty. Give your Ember app a separate repository, version, and release process. 33
34. Similar to Native Mobile Apps Many different phones running several different versions of our app. Need to keep the API working for older clients through API versioning and backwards compatibility. 34
35. Learning from Native Mobile Apps This requirement buys you a dimension of decoupling and freedom. Multiple titles consuming same API. Beta builds that run against our production API. 35
36. Learning from Native Mobile Apps API server app and native mobile app are versioned and deployed independently from one another. We can and should apply this to our Ember apps. 36
37. Key Difference from Native Mobile Apps The big workflow difference between Ember apps and native mobile apps is in how they get updated and launched. 37
38. Key Difference from Native Mobile Apps HTML! HTML is how we bootstrap an Ember app HTML lets us control which version of the app to launch 38
39. Deployment & serving strategy:
 factors to consider about HTML page Points to fingerprinted JS/CSS but is not fingerprinted itself Contains JS URLs and code to boot JS app and load CSS in the right order Good place to provide environment-specific configuration to Javascript 39
40. Deployment & serving strategy:
 factors to consider about HTML page When on the same domain as API, avoids CORS complexity Caching should be minimal to none in order to allow for updates that take effect quickly 40
41. Conclusion about deploying and serving HTML page HTML page should be managed and deployed as part of static asset deployment process HTML page should be served by the API server, but updates should not require
 re-deploying the server app or restarting
 server processes 41
42. Ember Dev/CI 42 A Sketch of the Idea Static assets server API server Deploy server
 app code Server Dev/CI Deploy
 JS, CSS, images API requests dynamic pages HTML for JS App JS for JS App CSS, Images for JS App Deploy HTML?
43. 43 A Sketch of the Idea App servers Ember Dev/CI Deploy HTML Deploy HTML to filesystem of each server? No, because disk is ephemeral in many deployment environments.
44. 44 A Sketch of the Idea API servers Ember Dev/CI Deploy HTML Deploy HTML to S3 and read from API servers? Better, but S3 reads can be slow and we want this page fast. Read
45. 45 A Sketch of the Idea API servers Ember Dev/CI Deploy HTML Deploy HTML to Redis and read from API servers? Persistent, fast, and already in my environment. Yes! Read
46. 46 Yapp’s implementation, using Rails Static assets server (AWS S3) Rails server Deploy
 JS, CSS, images (additive) API requests dynamic Rails pages HTML for JS App JS for JS App CSS, Images for JS App Deploy HTML AWS Cloudfront Deploy Rails
 app code Ember Dev/CI Server Dev/CI
47. Possibilities Emerge 47
48. 48 Preview
 Before Activating
49. 49 Dynamic
 HTML Rewriting
50. Dynamic HTML Rewriting As the HTML content passes through the controller, we have the opportunity to make adjustments. 50
51. 51 Dynamic HTML Rewriting: e.g. Rails controller
52. Dynamic HTML Rewriting:
 Other Use Cases Adding CSRF tokens Including dynamic analytics params Embedding dynamic configuration
 (e.g. feature flags) 52
53. 53 A/B Testing
54. A/B Testing I’ve experimented with two types of
 A/B testing Setting global flags based on A/B bucket Serving up wholly different HTML based on A/B bucket 54
55. 55 Notifying
 Connected Clients
56. 56 ember- deploy front-end- builds ember-cli- deploy ember- cli-azure- deploy ember-s3- sync ember-rails heroku- buildpack- ember-cli ember-cli- s3 embarista Open source implementations
57. 57 ember- s3-sync ember- rails embarista These are ember-cli-based ember- deploy front-end- builds ember-cli- deploy ember- cli-azure- deploy heroku- buildpack- ember-cli ember-cli- s3
58. 58 ember- s3-sync ember- rails embarista These embrace the assets/HTML distinction ember- deploy front-end- builds ember-cli- deploy ember- cli-azure- deploy heroku- buildpack- ember-cli ember- cli-s3
59. 59 ember- s3-sync ember- rails embarista Compare and contrast ember- deploy front-end- builds ember-cli- deploy ember- cli-azure- deploy heroku- buildpack- ember-cli ember- cli-s3 Same
 core-plus-plugins
 architecture
60. 60 ember- s3-sync ember- rails embarista Compare and contrast ember- deploy front-end- builds ember-cli- deploy ember- cli-azure- deploy heroku- buildpack- ember-cli ember- cli-s3 Same
 core-plus-plugins
 architecture front-end-builds’
 ember-cli addon started as a fork
 of ember-deploy
61. 61 ember- s3-sync ember- rails embarista Compare and contrast ember- deploy front-end- builds ember-cli- deploy ember- cli-azure- deploy heroku- buildpack- ember-cli ember- cli-s3 Same
 core-plus-plugins
 architecture front-end-builds’
 ember-cli addon started as a fork
 of ember-deploy Best name
62. ember- deploy-redis ember- deploy-s3 ember- deploy-s3- index ember- deploy- azure 62 ember- s3-sync ember- rails embarista Compare and contrast ember- deploy front-end- builds ember-cli- deploy ember- cli-azure- deploy heroku- buildpack- ember-cli ember- cli-s3 Same
 core-plus-plugins
 architecture front-end-builds’
 ember-cli addon started as a fork
 of ember-deploy Best name Biggest
 ecosystem
63. 63 So we had an international video call… ember- deploy front-end- builds ember-cli- deploy
64. 64 So we had an international video call… ember- deploy front-end- builds ember-cli- deploy
65. 65 And decided to merge. ember- deploy front-end- builds ember-cli- deploy
66. 66 ember-cli-deploy ember- deploy front-end- builds ember-cli- deploy One project,
 with a team of five six (and growing!) github.com/ember-cli/ember-cli-deploy Michael Klein (LevelBossMike) Sam Selikoff (samselikoff) Ryan Toronto (ryanto) Aaron Chambers (achambers) Me (lukemelia) Dan Shultz (danshultz)
67. Paving the Cowpaths! 67
68. Roadmap: Release 0.4.0 Repository move to ember-cli/ember-cli-deploy, and get existing plugins updated Migration instructions for users of
 achambers/ember-cli-deploy Deprecate JSON-based config in favor of JS Timing: this week 68
69. Roadmap: Release 0.5.0 New pipeline, hooks & plugins architecture Includes post-deploy hook (think posting deploy details to IRC or Slack) Documentation for plugin developers ember-cli-front-end-builds becomes a plugin 69
70. ARCHITECTURE (Proposed for 0.5.0) ember-cli-deploy plugins are ember-cli addons with the “ember-cli-deploy-plugin” keyword; auto-discovered Plugins implement one or more ember-cli-deploy- specific hooks: willDeploy, build, updateAssets, updateIndex, activate, didDeploy, list 70
71. USAGE (Proposed for 0.5.0) Builds, deploys assets and HTML to configured “staging” deploy target, activates the release, and notifies your group chat. 71 > ember deploy staging
72. USAGE (Proposed for 0.5.0) Activates the “staging” deploy target’s previous active release and notifies your group chat. 72 > ember deploy:rollback staging
73. USAGE (Proposed for 0.5.0) Lists most recently deployed releases for the “staging” deploy target, with preview URLs. 73 > ember deploy:list staging
74. USAGE (Proposed for 0.5.0) Activates the previously deployed staging release identified by b23f662, and notifies your group chat. 74 > ember deploy:activate staging b23f662
75. Roadmap: Beyond 0.5.0 Deployment to named buckets, to support A/B tests, beta testing, etc. 75
76. Roadmap: Beyond 0.5.0 Option to deploy config in lieu of HTML, for situations where you prefer to render index.html from server templates. 76
77. Roadmap: Beyond 0.5.0 Your use cases Your ideas Please tell us!
 http://github.com/ember-cli/ember-cli-deploy 77
78. 78 How might this work with Fastboot? Static assets server (AWS S3) API server Dev or CI Deploy
 JS, CSS, images (additive) API requests dynamic pages HTML for JS App JS for JS App CSS, Images for JS App Deploy HTML AWS Cloudfront Deploy server
 app code Fastboot server Proxy API calls Read HTM L;
80. Thanks to my @YappLabs colleagues
 who helped create this approach:
 
 Kris Selden, Ray Cohen, Stefan Penner
 And to the ember-cli-deploy contributors: 
 Michael Klein, Aaron Chambers, Sam Selikoff,
 Ryan Toronto, Dan Shultz and more 80 The germ of the idea came from rumors we heard about Square using a similar approach. So thank you, nameless Square engineers.
81. Creative Commons photo credits: https://www.flickr.com/photos/pfsullivan_1056/6009151814, https://www.flickr.com/photos/ avaragado/6960433672, https://www.flickr.com/photos/clunkyrobot/82060751, https://www.flickr.com/photos/dhaun/ 14064199636, https://www.flickr.com/photos/dehub/2570417338, https://www.flickr.com/photos/joestump/5193676861, https:// www.flickr.com/photos/splorp/8544662113, https://www.flickr.com/photos/believekevin/2903279839, https://www.flickr.com/ photos/queso/26039691, https://www.flickr.com/photos/niznoz/4233333, https://www.flickr.com/photos/cristiano_betta/ 2909483129, https://www.flickr.com/photos/nurianadal/5715822239 81 @lukemelia @yapplabs @embernyc