Continuous Deliveryfor the Web Platform

Jarrod Oversonjarrodoverson.comConsultant @ gossamer.io

1Wednesday, October 23, 13

1. What is Continuous Delivery ?2. Why Continuously Deliver ?3. How do you deliver JS ?

2Wednesday, October 23, 13

Continuous Delivery is the automated path from development to production.

3Wednesday, October 23, 13

The Main Goal

Deliver working softwareas early as possible

and as quickly as possible.

4Wednesday, October 23, 13

Monitoring

Tests

5 keys of Continuous Delivery

Automation

Automation

Automation

Automation

Automation

5Wednesday, October 23, 13

AUTOMATE����������� ������������������  ALL����������� ������������������  THE����������� ������������������  ����������� ������������������  ����������� ������������������  THINGS

6Wednesday, October 23, 13

Traditional Delivery

Feature QA Deploy

7Wednesday, October 23, 13

Feature

Feature

Traditional Delivery

Feature QA... Deploy

8Wednesday, October 23, 13

Feature

Feature

Feature

Feature

Feature

Traditional Delivery

Feature QA Deploy

9Wednesday, October 23, 13

Feature

Feature

Feature

Feature

Feature

Traditional Delivery

Feature QA Deploy

10Wednesday, October 23, 13

11Wednesday, October 23, 13

12Wednesday, October 23, 13

“Sporadic” DeliveryC

ode

Time

13Wednesday, October 23, 13

“Sporadic” DeliveryC

ode

Time

Ris

k

Cost

14Wednesday, October 23, 13

Continuous DeliveryC

ode

Time

Ris

k

Cost

15Wednesday, October 23, 13

Get value to the user quickly and with little risk

16Wednesday, October 23, 13

But no really...Why Continuous Delivery?

17Wednesday, October 23, 13

It makes your life better

18Wednesday, October 23, 13

Continuous Delivery

Reduces processIncreases accountabilityExposes wasteImproves fertilityCures baldness

19Wednesday, October 23, 13

“Agile” without Continuous Deliveryisn’t very agile.

20Wednesday, October 23, 13

Let’s do this.

Ok.Awesome.

“

”

You ➙21Wednesday, October 23, 13

Schedule a Meeting

Go over continuous delivery in a perfect world scenario

Then come back to reality

22Wednesday, October 23, 13

You don’t have unit testsYou can’t do CD without unit tests...

You don’t have monitoring in placeYou need more monitoring first...

You’re not Etsy, you’re not NetflixThis is really for someone else...

23Wednesday, October 23, 13

FUCKTHAT

24Wednesday, October 23, 13

Start deploying every day.Even if there are no changes.

Especially if there are no changes.( just at the start )

25Wednesday, October 23, 13

Fear and Riskare the enemies

of continuous delivery

26Wednesday, October 23, 13

Fear and RiskReplace

withBoredom

andAnnoyance

27Wednesday, October 23, 13

“Annoyanceis the mother of automation”

- Moses

28Wednesday, October 23, 13

Automate your current flow.Get it down to a button press.

This is the start of your pipeline.

29Wednesday, October 23, 13

Dev Complete

Continuous Delivery Live!

30Wednesday, October 23, 13

Dev Complete

Continuous Delivery Live!

Push UnitTest

Build & Artifact

IntegrationTest Deploy

31Wednesday, October 23, 13

Dev Complete

Continuous Delivery Live!

Push UnitTest

Build & Artifact

IntegrationTest Deploy

Preprocess Compile Minify SASS Tar

32Wednesday, October 23, 13

Always move forward.Mature past local automation quickly.

33Wednesday, October 23, 13

Pros ConsOpen SourceLarge communityVery configurableLoads of plugins

Cumbersome UIPlugin interaction flakyYou still need to solve a lot

34Wednesday, October 23, 13

Easy git integrationincluding parametrized branches

At a glance overviewof job status, historical health

Configurable pipelinescascading tasks started from an origin

35Wednesday, October 23, 13

Visualize Everything

Always move towards visualizing your pipeline in as public a place as

possible

36Wednesday, October 23, 13

You know, if you’re hereadd a few VCS hooks and you’re delivering.

37Wednesday, October 23, 13

Bundle what won’t changeYour artifact is gospel

38Wednesday, October 23, 13

Dev CI Stage Prod

Artifact Same Artifact

Same Artifact

Environments

39Wednesday, October 23, 13

How is CD differentfor JavaScript Applications?

40Wednesday, October 23, 13

It’s easier!Except where it’s harder.

41Wednesday, October 23, 13

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.

First, formalize your JS development

42Wednesday, October 23, 13

43Wednesday, October 23, 13

Grunt is a task runner and task composer

44Wednesday, October 23, 13

1500+community tasks

requirejs - sass - compress - mocha - lessstylus - jshint - imagemin - connect cssmin - jst - qunit - uglify - jasmine

phantomjs - concat - copy - coffee - jade

45Wednesday, October 23, 13

Dev Complete CD Live!

Push UnitTest

Build & Artifact

IntegrationTest Deploy

Preprocess Compile Minify SASS Tar

46Wednesday, October 23, 13

Sample grunt task chainstestbuildartifactdev ➛ [ test, build, watch ]dist-build ➛ [ test, build, artifact ]

47Wednesday, October 23, 13

Testing is cake

grunt-contrib-jasminegrunt-contrib-qunitgrunt-mochagrunt-karma

48Wednesday, October 23, 13

49Wednesday, October 23, 13

grunt-preprocessvariables 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>

50Wednesday, October 23, 13

grunt-preprocess<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>

conditional comments

51Wednesday, October 23, 13

preprocess directives

@if VAR = 'value’ / @endif

@ifdef VAR / @endif

@ifndef VAR / @endif

@include FILE

@exclude / @endexclude

@echo VAR

52Wednesday, October 23, 13

grunt-envenvironment 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' }}

53Wednesday, October 23, 13

grunt.registerTask('dev', [ 'env:dev', 'build']);

grunt.registerTask('dist-build', [ 'env:dist', 'build', 'preprocess', 'artifact']);

54Wednesday, October 23, 13

grunt.registerTask('test', [ 'jshint', 'nodeunit']);

grunt.registerTask('build', [ 'sass', 'montage', 'browserify']);

grunt.registerTask('artifact', [ 'compress']);

Example task chains

https://github.com/Gruntfiles/gruntfiles.github.io/tree/master/gruntfiles/jsoverson/browserify-application

55Wednesday, October 23, 13

grunt.registerTask('dev', [ 'env:dev', 'clean:dist', 'test', 'build', 'watch']);

Example task chains

https://github.com/Gruntfiles/gruntfiles.github.io/tree/master/gruntfiles/jsoverson/browserify-application

56Wednesday, October 23, 13

grunt.registerTask('dist-build', [ 'env:build', 'test', 'build', 'copy', 'uglify', 'preprocess', 'artifact']);

Example task chains

https://github.com/Gruntfiles/gruntfiles.github.io/tree/master/gruntfiles/jsoverson/browserify-application

57Wednesday, October 23, 13

Continuous Deliveryisn’t a quick change

It requires motivation, persistence,and a different mindset.

But it’s worth it.

58Wednesday, October 23, 13

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-reloading-with-grunt-and-compass

59Wednesday, October 23, 13

Jarrod Overson

jsoverson.com/githubjsoverson.com/linkedin

jsoverson.comjsoverson.com/google+

jarrod@jsoverson.com

jsoverson.com/twitter

@jsoverson

60Wednesday, October 23, 13