Continuous Delivery for the Web Platform

  • 5,011 views
Uploaded on

This talk was given on Oct 23 at HTML5DevConf in San Francisco. The topic was Continuous Delivery as it relates to JavaScript applications, using tools like grunt and jenkins.

This talk was given on Oct 23 at HTML5DevConf in San Francisco. The topic was Continuous Delivery as it relates to JavaScript applications, using tools like grunt and jenkins.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,011
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
23
Comments
0
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Continuous Delivery for the Web Platform Jarrod Overson jarrodoverson.com Consultant @ gossamer.io Wednesday, October 23, 13 1
  • 2. 1. What is Continuous Delivery ? 2. Why Continuously Deliver ? 3. How do you deliver JS ? Wednesday, October 23, 13 2
  • 3. Continuous Delivery is the automated path from development to production. Wednesday, October 23, 13 3
  • 4. The Main Goal Deliver working software as early as possible and as quickly as possible. Wednesday, October 23, 13 4
  • 5. 5 keys of Continuous Delivery Automation Tests Automation Automation Monitoring Automation Automation Wednesday, October 23, 13 5
  • 6. AUTOMATE
  • 7.   ALL
  • 8.   THE 
  • 9.   
  • 10.   
  • 11.   THINGS Wednesday, October 23, 13 6
  • 12. Traditional Delivery Feature Wednesday, October 23, 13 QA Deploy 7
  • 13. Traditional Delivery Feature Feature QA... Deploy Feature Wednesday, October 23, 13 8
  • 14. Traditional Delivery eature Feature atureFeature QA Deploy Feature eature Wednesday, October 23, 13 9
  • 15. Traditional Delivery eature Feature atureFeature QA Deploy Feature eature Wednesday, October 23, 13 10
  • 16. Wednesday, October 23, 13 11
  • 17. Wednesday, October 23, 13 12
  • 18. Code “Sporadic” Delivery Time Wednesday, October 23, 13 13
  • 19. Code Risk “Sporadic” Delivery Time Wednesday, October 23, 13 Cost 14
  • 20. Code Risk Continuous Delivery Time Wednesday, October 23, 13 Cost 15
  • 21. Get value to the user quickly and with little risk Wednesday, October 23, 13 16
  • 22. But no really... Why Continuous Delivery? Wednesday, October 23, 13 17
  • 23. It makes your life better Wednesday, October 23, 13 18
  • 24. Continuous Delivery Reduces process Increases accountability Exposes waste Improves fertility Cures baldness Wednesday, October 23, 13 19
  • 25. “Agile” without Continuous Delivery isn’t very agile. Wednesday, October 23, 13 20
  • 26. “ Ok. Awesome. Let’s do this.” You ➙ Wednesday, October 23, 13 21
  • 27. Schedule a Meeting Go over continuous delivery in a perfect world scenario Then come back to reality Wednesday, October 23, 13 22
  • 28. You don’t have unit tests You can’t do CD without unit tests... You don’t have monitoring in place You need more monitoring first... You’re not Etsy, you’re not Netflix This is really for someone else... Wednesday, October 23, 13 23
  • 29. FUCK THAT Wednesday, October 23, 13 24
  • 30. Start deploying every day. Even if there are no changes. Especially if there are no changes. ( just at the start ) Wednesday, October 23, 13 25
  • 31. Fear and Risk are the enemies of continuous delivery Wednesday, October 23, 13 26
  • 32. Replace Fear and Risk with Boredom and Annoyance Wednesday, October 23, 13 27
  • 33. “Annoyance is the mother of automation” - Moses Wednesday, October 23, 13 28
  • 34. Automate your current flow. Get it down to a button press. This is the start of your pipeline. Wednesday, October 23, 13 29
  • 35. Dev Complete Wednesday, October 23, 13 Continuous Delivery Live! 30
  • 36. Dev Complete Push Wednesday, October 23, 13 Unit Test Continuous Delivery Build & Artifact Live! Integration Test Deploy 31
  • 37. Dev Complete Continuous Delivery Live! Push Unit Test Build & Artifact Integration Test Deploy Preprocess Compile Minify SASS Tar Wednesday, October 23, 13 32
  • 38. Always move forward. Mature past local automation quickly. Wednesday, October 23, 13 33
  • 39. Pros Open Source Large community Very configurable Loads of plugins Wednesday, October 23, 13 Cons Cumbersome UI Plugin interaction flaky You still need to solve a lot 34
  • 40. Easy git integration including parametrized branches At a glance overview of job status, historical health Configurable pipelines cascading tasks started from an origin Wednesday, October 23, 13 35
  • 41. Visualize Everything Always move towards visualizing your pipeline in as public a place as possible Wednesday, October 23, 13 36
  • 42. You know, if you’re here add a few VCS hooks and you’re delivering. Wednesday, October 23, 13 37
  • 43. Bundle what won’t change Your artifact is gospel Wednesday, October 23, 13 38
  • 44. Environments Dev Artifact Wednesday, October 23, 13 CI Stage Same Artifact Prod Same Artifact 39
  • 45. How is CD different for JavaScript Applications? Wednesday, October 23, 13 40
  • 46. It’s easier! Except where it’s harder. Wednesday, October 23, 13 41
  • 47. First, formalize your JS development Do you minify and bundle your JS? You have the start of a build pipeline. Do you use SASS or CoffeeScript? You already require a developer flow. You need a task manager. Wednesday, October 23, 13 42
  • 48. Wednesday, October 23, 13 43
  • 49. Grunt is a task runner and task composer Wednesday, October 23, 13 44
  • 50. 1500+ community tasks requirejs - sass - compress - mocha - less stylus - jshint - imagemin - connect cssmin - jst - qunit - uglify - jasmine phantomjs - concat - copy - coffee - jade Wednesday, October 23, 13 45
  • 51. Dev Complete CD Live! Push Unit Test Build & Artifact Integration Test Deploy Preprocess Compile Minify SASS Tar Wednesday, October 23, 13 46
  • 52. Sample grunt task chains test build artifact dev ➛ [ test, build, watch ] dist-build ➛ [ test, build, artifact ] Wednesday, October 23, 13 47
  • 53. Testing is cake grunt-contrib-jasmine grunt-contrib-qunit grunt-mocha grunt-karma Wednesday, October 23, 13 48
  • 54. Wednesday, October 23, 13 49
  • 55. grunt-preprocess variables in HTML <html> <head> <script src="./conf/<!-- @echo ENV -->/.js"></script> <script src="<!-- @echo CDN_URL -->/library.js"></script> </head> <body> <header> <img src="<!-- @echo ASSET_URL -->/header.png"> </header> </body> </html> Wednesday, October 23, 13 50
  • 56. grunt-preprocess conditional comments <html> <head> <!-- @if ENV=='dev' --> <script src="js/main.js"></script> <!-- @endif --> <!-- @if ENV=='dist' !> <script src="js/main.build.js"></script> <!-- @endif --> </head> </html> Wednesday, October 23, 13 51
  • 57. preprocess directives @if VAR = 'value’ / @endif @ifdef VAR / @endif @ifndef VAR / @endif @include FILE @exclude / @endexclude @echo VAR Wednesday, October 23, 13 52
  • 58. grunt-env environment setup env : { dev : { ENV : 'dev', CDN_URL : 'http://127.0.0.1:8000/cdn', ASSET_URL : 'http://127.0.0.1:8000/assets' }, dist : { ENV : 'dist', CDN_URL : 'http://yourcdn.com/', ASSET_URL : 'http://yoursite.com/assets' } } Wednesday, October 23, 13 53
  • 59. grunt.registerTask('dev', [ 'env:dev', 'build' ]); grunt.registerTask('dist-build', [ 'env:dist', 'build', 'preprocess', 'artifact' ]); Wednesday, October 23, 13 54
  • 60. Example task chains grunt.registerTask('test', [ 'jshint', 'nodeunit' ]); grunt.registerTask('build', [ 'sass', 'montage', 'browserify' ]); grunt.registerTask('artifact', [ 'compress' ]); https://github.com/Gruntfiles/gruntfiles.github.io/tree/master/gruntfiles/jsoverson/browserify-application Wednesday, October 23, 13 55
  • 61. Example task chains grunt.registerTask('dev', [ 'env:dev', 'clean:dist', 'test', 'build', 'watch' ]); https://github.com/Gruntfiles/gruntfiles.github.io/tree/master/gruntfiles/jsoverson/browserify-application Wednesday, October 23, 13 56
  • 62. Example task chains grunt.registerTask('dist-build', [ 'env:build', 'test', 'build', 'copy', 'uglify', 'preprocess', 'artifact' ]); https://github.com/Gruntfiles/gruntfiles.github.io/tree/master/gruntfiles/jsoverson/browserify-application Wednesday, October 23, 13 57
  • 63. Continuous Delivery isn’t a quick change It requires motivation, persistence, and a different mindset. But it’s worth it. Wednesday, October 23, 13 58
  • 64. Resources http://gruntjs.com https://github.com/gruntjs https://github.com/gruntfiles http://integralist.co.uk/Grunt-Boilerplate.html http://draftingcode.com/2013/06/subtle-live-reloadingwith-grunt-and-compass Wednesday, October 23, 13 59
  • 65. Jarrod Overson @jsoverson jarrod@jsoverson.com jsoverson.com jsoverson.com/google+ jsoverson.com/linkedin jsoverson.com/github jsoverson.com/twitter Wednesday, October 23, 13 60