$30 off During Our Annual Pro Sale. View Details »

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

    View Slide

  2. About this Embereño
    2

    View Slide

  3. Organizer of
    Ember.js NYC
    3

    View Slide

  4. Product + Ember Consulting
    4
    TODO: Half page Yapp,

    half page Yapp Labs
    Ember.js
    Consulting
    & Training

    View Slide

  5. How we deliver software has evolved…
    5

    View Slide

  6. How we deliver software has evolved…
    6

    View Slide

  7. How we deliver software has evolved…
    7

    View Slide

  8. How we deliver software has evolved…
    8

    View Slide

  9. How we deliver software has evolved…
    9

    View Slide

  10. How we deliver software has evolved…
    10

    View Slide

  11. …then came our beloved Internet…
    11

    View Slide

  12. …and the browser, which became the most
    ubiquitous app runtime in the world.
    12

    View Slide

  13. How we deliver via the web has evolved… 13
    Static HTML sent from server to browser

    View Slide

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

    View Slide

  15. How we deliver via the web has evolved… 15
    Apps running on the server,

    sending HTML representations to browser

    View Slide

  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

    View Slide

  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

    View Slide

  18. We no longer use CD-ROM duplicators to
    deploy web software…
    18

    View Slide

  19. We no longer FTP individual files to
    production servers…
    19

    View Slide

  20. What is the server web app deployment
    approach?
    Simplified:
    Copy all the files to the servers
    Restart the server processes
    20

    View Slide

  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

    View Slide

  22. Is the “server app” deployment approach the
    right approach for Ember apps?
    22

    View Slide

  23. No. Here’s why…
    23

    View Slide

  24. 24
    Initial request
    Request: /index.html
    Response: text/html

    View Slide

  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:

    <br/>

    View Slide

  26. 26
    Page is parsed, and then a short time later…
    Request: /assets/app-abc123.js
    Response: text/javascript

    View Slide

  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:

    <br/>

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  31. 31
    Long-lived sessions and API changes
    5 min 10 min 15 min
    API change deployed
    500 Error

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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?

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  47. Possibilities
    Emerge
    47

    View Slide

  48. 48
    Preview

    Before Activating

    View Slide

  49. 49
    Dynamic

    HTML Rewriting

    View Slide

  50. Dynamic HTML Rewriting
    As the HTML content passes through
    the controller, we have the opportunity
    to make adjustments.
    50

    View Slide

  51. 51
    Dynamic HTML Rewriting: e.g. Rails controller

    View Slide

  52. Dynamic HTML Rewriting:

    Other Use Cases
    Adding CSRF tokens
    Including dynamic analytics params
    Embedding dynamic configuration

    (e.g. feature flags)
    52

    View Slide

  53. 53
    A/B Testing

    View Slide

  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

    View Slide

  55. 55
    Notifying

    Connected Clients

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  65. 65
    And decided to merge.
    ember-
    deploy
    front-end-
    builds
    ember-cli-
    deploy

    View Slide

  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)

    View Slide

  67. Paving the Cowpaths!
    67

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  75. Roadmap: Beyond 0.5.0
    Deployment to named buckets, to support A/B
    tests, beta testing, etc.
    75

    View Slide

  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

    View Slide

  77. Roadmap: Beyond 0.5.0
    Your use cases
    Your ideas
    Please tell us!

    http://github.com/ember-cli/ember-cli-deploy
    77

    View Slide

  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;

    View Slide

  79. 79

    View Slide

  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.

    View Slide

  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

    View Slide