Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Art of Ember App Deployment

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.

Luke Melia

March 03, 2015
Tweet

More Decks by Luke Melia

Other Decks in Technology

Transcript

  1. The Art of Ember App Deployment Luke Melia, Yapp &

    Yapp Labs EmberConf March 3rd, 2015 1
  2. Product + Ember Consulting 4 TODO: Half page Yapp,
 half

    page Yapp Labs Ember.js Consulting & Training
  3. How we deliver via the web has evolved… 13 Static

    HTML sent from server to browser
  4. How we deliver via the web has evolved… 14 Dynamic

    HTML sent from server to browser
  5. How we deliver via the web has evolved… 15 Apps

    running on the server,
 sending HTML representations to browser
  6. 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
  7. “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
  8. What is the server web app deployment approach? Simplified: Copy

    all the files to the servers Restart the server processes 20
  9. 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
  10. 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>
  11. 26 Page is parsed, and then a short time later…

    Request: /assets/app-abc123.js Response: text/javascript
  12. 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>
  13. 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
  14. 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
  15. 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
  16. 31 Long-lived sessions and API changes 5 min 10 min

    15 min API change deployed 500 Error
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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?
  28. 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.
  29. 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
  30. 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
  31. 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
  32. Dynamic HTML Rewriting As the HTML content passes through the

    controller, we have the opportunity to make adjustments. 50
  33. Dynamic HTML Rewriting:
 Other Use Cases Adding CSRF tokens Including

    dynamic analytics params Embedding dynamic configuration
 (e.g. feature flags) 52
  34. 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
  35. 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
  36. 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
  37. 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
  38. 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
  39. 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
  40. 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
  41. 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
  42. 63 So we had an international video call… ember- deploy

    front-end- builds ember-cli- deploy
  43. 64 So we had an international video call… ember- deploy

    front-end- builds ember-cli- deploy
  44. 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)
  45. 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
  46. 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
  47. 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
  48. 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
  49. 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
  50. USAGE (Proposed for 0.5.0) Lists most recently deployed releases for

    the “staging” deploy target, with preview URLs. 73 > ember deploy:list staging
  51. 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
  52. 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
  53. Roadmap: Beyond 0.5.0 Your use cases Your ideas Please tell

    us!
 http://github.com/ember-cli/ember-cli-deploy 77
  54. 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;
  55. 79

  56. 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.
  57. 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