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
   

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