Zero-downtime Javascript App Deployment

This talk is inspired by @lukemelia's talk at RailsConf. It expands on his idea and uses native Javascript tooling. It also explores deploying multiple JS apps with a single backend as well as A/B testing and feature toggling.

Transcript

1. Zero-downtime Javascript App Deployment
2. Feifan Wang me @feifanw 4thethrillofit.com
3. Originally inspired by @lukemelia
4. Why?
5. Deploying backend sucks
6. Using native tools to develop JS apps
7. Develop frontend independent of backend
8. index.html as the app container
9. index.html
11. Deploy key: 1408839342887
12. Dev or CI Rails Server Static Assets Server
 (S3) CDN
 (CloudFront) Redis Deploy index.html Deploy Rails app Serve HTML Deploy JS, CSS, Static Assets Browser index.html,
 API Requests JS app,
 assets
13. Each deploy has a unique deploy key, optionally synced with backend
14. config/frontend_deploy.yml
15. Canary release preview
 
 example.com?deploy=canary
17. concerns/front_end.rb
18. Deploy Key • frontend_deploy.yml • Passed in via query params
 example.com?deploy=88667 • Semantic flags
 example.com?deploy=canary
19. Ember CLI + Grunt
20. grunt -prod
21. Deploying to production • Get deploy key - current timestamp • Build the project
 ember build --environment=production • Insert deploy key into CDN url • Upload to S3 • Upload index.html to Redis
23. Multi-app Architecture
24. Multiple index.html containers with a single backend
25. = JS App = API Server
26. GET / 1234:index.html Main JS App Main JS App
27. GET / 1234:index.html Main JS App Main JS App admin:1255:index.html Admin JS App GET /Admin Admin JS App
28. concerns/front_end.rb
29. = Rails Engine
30. Encapsulates… • Security • Serialization • Routing • Migrations
31. admin:1255:index.html Admin JS App GET /Admin Admin JS App Admin Engine
32. GET / 1234:index.html Main JS App Main JS App
33. GET / 1234:index.html Main JS App Main JS App admin:1255:index.html Admin JS App GET /Admin Admin JS App Access Parent App Admin Engine
34. 1234:index.html Main JS App admin:1255:index.html Admin JS App Access Parent App Admin Engine API Server Developer(s) Developer(s) Developer(s) JS App
35. Develop sub-services independently
36. Demo
37. A/B Testing & 
 Feature Toggling
41. GET / GET / Main JS App Main JS App Inject variables into the app
 (A/B, Feature Toggle)
44. Backend: 
 injection & randomization Frontend: 
 decide what to do with the data given
45. FeatureManager
46. Translate data into semantic information the app can understand
48. Logic can live in the controller
49. or in the template
50. Independently track each variation
51. Demo
52. Sample App on GitHub 
 4thethrillofit/js_app_deploy_sample_app
53. Thank you
54. Feifan Wang me @feifanw 4thethrillofit.com