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.

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

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