The Art of Ember App Deployment

Slide 1

Slide 1 text

The Art of Ember App Deployment Luke Melia, Yapp & Yapp Labs EmberConf March 3rd, 2015 1

Slide 2

Slide 2 text

About this Embereño 2

Slide 3

Slide 3 text

Organizer of Ember.js NYC 3

Slide 4

Slide 4 text

Product + Ember Consulting 4 TODO: Half page Yapp,  half page Yapp Labs Ember.js Consulting & Training

Slide 5

Slide 5 text

How we deliver software has evolved… 5

Slide 6

Slide 6 text

How we deliver software has evolved… 6

Slide 7

Slide 7 text

How we deliver software has evolved… 7

Slide 8

Slide 8 text

How we deliver software has evolved… 8

Slide 9

Slide 9 text

How we deliver software has evolved… 9

Slide 10

Slide 10 text

How we deliver software has evolved… 10

Slide 11

Slide 11 text

…then came our beloved Internet… 11

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

How we deliver via the web has evolved… 15 Apps running on the server,  sending HTML representations to browser

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

“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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

We no longer FTP individual ﬁles to production servers… 19

Slide 20

Slide 20 text

What is the server web app deployment approach? Simpliﬁed: Copy all the ﬁles to the servers Restart the server processes 20

Slide 21

Slide 21 text

What is the server web app deployment approach? For bonus points: “Copy ﬁles” more elegantly. e.g. git push, bit torrent, docker containers… Do a rolling restart to avoid downtime. 21

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

No. Here’s why… 23

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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: 

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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: 

Slide 28

Slide 28 text

28 …when traﬃc 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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Similar to Native Mobile Apps Many diﬀerent phones running several diﬀerent versions of our app. Need to keep the API working for older clients through API versioning and backwards compatibility. 34

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Key Diﬀerence 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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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 eﬀect quickly 40

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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?

Slide 43

Slide 43 text

43 A Sketch of the Idea App servers Ember Dev/CI Deploy HTML Deploy HTML to ﬁlesystem of each server? No, because disk is ephemeral in many deployment environments.

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Possibilities Emerge 47

Slide 48

Slide 48 text

48 Preview  Before Activating

Slide 49

Slide 49 text

49 Dynamic  HTML Rewriting

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

51 Dynamic HTML Rewriting: e.g. Rails controller

Slide 52

Slide 52 text

Dynamic HTML Rewriting:  Other Use Cases Adding CSRF tokens Including dynamic analytics params Embedding dynamic conﬁguration  (e.g. feature ﬂags) 52

Slide 53

Slide 53 text

53 A/B Testing

Slide 54

Slide 54 text

A/B Testing I’ve experimented with two types of  A/B testing Setting global ﬂags based on A/B bucket Serving up wholly diﬀerent HTML based on A/B bucket 54

Slide 55

Slide 55 text

55 Notifying  Connected Clients

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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)

Slide 67

Slide 67 text

Paving the Cowpaths! 67

Slide 68

Slide 68 text

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 conﬁg in favor of JS Timing: this week 68

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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- speciﬁc hooks: willDeploy, build, updateAssets, updateIndex, activate, didDeploy, list 70

Slide 71

Slide 71 text

USAGE (Proposed for 0.5.0) Builds, deploys assets and HTML to conﬁgured “staging” deploy target, activates the release, and notiﬁes your group chat. 71 > ember deploy staging

Slide 72

Slide 72 text

USAGE (Proposed for 0.5.0) Activates the “staging” deploy target’s previous active release and notiﬁes your group chat. 72 > ember deploy:rollback staging

Slide 73

Slide 73 text

USAGE (Proposed for 0.5.0) Lists most recently deployed releases for the “staging” deploy target, with preview URLs. 73 > ember deploy:list staging

Slide 74

Slide 74 text

USAGE (Proposed for 0.5.0) Activates the previously deployed staging release identiﬁed by b23f662, and notiﬁes your group chat. 74 > ember deploy:activate staging b23f662

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

Roadmap: Beyond 0.5.0 Option to deploy conﬁg in lieu of HTML, for situations where you prefer to render index.html from server templates. 76

Slide 77

Slide 77 text

Roadmap: Beyond 0.5.0 Your use cases Your ideas Please tell us!  http://github.com/ember-cli/ember-cli-deploy 77

Slide 78

Slide 78 text

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;

Slide 79

Slide 79 text

Slide 80

Slide 80 text

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 Selikoﬀ,  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.

Slide 81

Slide 81 text

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