Continuous Delivery for the Web Platform
-
Upload
jarrod-overson -
Category
Technology
-
view
5.205 -
download
0
description
Transcript of Continuous Delivery for the Web Platform
![Page 1: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/1.jpg)
Continuous Deliveryfor the Web Platform
Jarrod Oversonjarrodoverson.comConsultant @ gossamer.io
1Wednesday, October 23, 13
![Page 2: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/2.jpg)
1. What is Continuous Delivery ?2. Why Continuously Deliver ?3. How do you deliver JS ?
2Wednesday, October 23, 13
![Page 3: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/3.jpg)
Continuous Delivery is the automated path from development to production.
3Wednesday, October 23, 13
![Page 4: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/4.jpg)
The Main Goal
Deliver working softwareas early as possible
and as quickly as possible.
4Wednesday, October 23, 13
![Page 5: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/5.jpg)
Monitoring
Tests
5 keys of Continuous Delivery
Automation
Automation
Automation
Automation
Automation
5Wednesday, October 23, 13
![Page 6: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/6.jpg)
AUTOMATE����������� ������������������ ALL����������� ������������������ THE����������� ������������������ ����������� ������������������ ����������� ������������������ THINGS
6Wednesday, October 23, 13
![Page 7: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/7.jpg)
Traditional Delivery
Feature QA Deploy
7Wednesday, October 23, 13
![Page 8: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/8.jpg)
Feature
Feature
Traditional Delivery
Feature QA... Deploy
8Wednesday, October 23, 13
![Page 9: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/9.jpg)
Feature
Feature
Feature
Feature
Feature
Traditional Delivery
Feature QA Deploy
9Wednesday, October 23, 13
![Page 10: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/10.jpg)
Feature
Feature
Feature
Feature
Feature
Traditional Delivery
Feature QA Deploy
10Wednesday, October 23, 13
![Page 11: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/11.jpg)
11Wednesday, October 23, 13
![Page 12: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/12.jpg)
12Wednesday, October 23, 13
![Page 13: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/13.jpg)
“Sporadic” DeliveryC
ode
Time
13Wednesday, October 23, 13
![Page 14: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/14.jpg)
“Sporadic” DeliveryC
ode
Time
Ris
k
Cost
14Wednesday, October 23, 13
![Page 15: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/15.jpg)
Continuous DeliveryC
ode
Time
Ris
k
Cost
15Wednesday, October 23, 13
![Page 16: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/16.jpg)
Get value to the user quickly and with little risk
16Wednesday, October 23, 13
![Page 17: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/17.jpg)
But no really...Why Continuous Delivery?
17Wednesday, October 23, 13
![Page 18: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/18.jpg)
It makes your life better
18Wednesday, October 23, 13
![Page 19: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/19.jpg)
Continuous Delivery
Reduces processIncreases accountabilityExposes wasteImproves fertilityCures baldness
19Wednesday, October 23, 13
![Page 20: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/20.jpg)
“Agile” without Continuous Deliveryisn’t very agile.
20Wednesday, October 23, 13
![Page 21: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/21.jpg)
Let’s do this.
Ok.Awesome.
“
”
You ➙21Wednesday, October 23, 13
![Page 22: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/22.jpg)
Schedule a Meeting
Go over continuous delivery in a perfect world scenario
Then come back to reality
22Wednesday, October 23, 13
![Page 23: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/23.jpg)
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
![Page 24: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/24.jpg)
FUCKTHAT
24Wednesday, October 23, 13
![Page 25: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/25.jpg)
Start deploying every day.Even if there are no changes.
Especially if there are no changes.( just at the start )
25Wednesday, October 23, 13
![Page 26: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/26.jpg)
Fear and Riskare the enemies
of continuous delivery
26Wednesday, October 23, 13
![Page 27: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/27.jpg)
Fear and RiskReplace
withBoredom
andAnnoyance
27Wednesday, October 23, 13
![Page 28: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/28.jpg)
“Annoyanceis the mother of automation”
- Moses
28Wednesday, October 23, 13
![Page 29: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/29.jpg)
Automate your current flow.Get it down to a button press.
This is the start of your pipeline.
29Wednesday, October 23, 13
![Page 30: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/30.jpg)
Dev Complete
Continuous Delivery Live!
30Wednesday, October 23, 13
![Page 31: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/31.jpg)
Dev Complete
Continuous Delivery Live!
Push UnitTest
Build & Artifact
IntegrationTest Deploy
31Wednesday, October 23, 13
![Page 32: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/32.jpg)
Dev Complete
Continuous Delivery Live!
Push UnitTest
Build & Artifact
IntegrationTest Deploy
Preprocess Compile Minify SASS Tar
32Wednesday, October 23, 13
![Page 33: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/33.jpg)
Always move forward.Mature past local automation quickly.
33Wednesday, October 23, 13
![Page 34: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/34.jpg)
Pros ConsOpen SourceLarge communityVery configurableLoads of plugins
Cumbersome UIPlugin interaction flakyYou still need to solve a lot
34Wednesday, October 23, 13
![Page 35: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/35.jpg)
Easy git integrationincluding parametrized branches
At a glance overviewof job status, historical health
Configurable pipelinescascading tasks started from an origin
35Wednesday, October 23, 13
![Page 36: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/36.jpg)
Visualize Everything
Always move towards visualizing your pipeline in as public a place as
possible
36Wednesday, October 23, 13
![Page 37: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/37.jpg)
You know, if you’re hereadd a few VCS hooks and you’re delivering.
37Wednesday, October 23, 13
![Page 38: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/38.jpg)
Bundle what won’t changeYour artifact is gospel
38Wednesday, October 23, 13
![Page 39: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/39.jpg)
Dev CI Stage Prod
Artifact Same Artifact
Same Artifact
Environments
39Wednesday, October 23, 13
![Page 40: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/40.jpg)
How is CD differentfor JavaScript Applications?
40Wednesday, October 23, 13
![Page 41: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/41.jpg)
It’s easier!Except where it’s harder.
41Wednesday, October 23, 13
![Page 42: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/42.jpg)
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
![Page 43: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/43.jpg)
43Wednesday, October 23, 13
![Page 44: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/44.jpg)
Grunt is a task runner and task composer
44Wednesday, October 23, 13
![Page 45: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/45.jpg)
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
![Page 46: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/46.jpg)
Dev Complete CD Live!
Push UnitTest
Build & Artifact
IntegrationTest Deploy
Preprocess Compile Minify SASS Tar
46Wednesday, October 23, 13
![Page 47: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/47.jpg)
Sample grunt task chainstestbuildartifactdev ➛ [ test, build, watch ]dist-build ➛ [ test, build, artifact ]
47Wednesday, October 23, 13
![Page 48: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/48.jpg)
Testing is cake
grunt-contrib-jasminegrunt-contrib-qunitgrunt-mochagrunt-karma
48Wednesday, October 23, 13
![Page 49: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/49.jpg)
49Wednesday, October 23, 13
![Page 50: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/50.jpg)
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
![Page 51: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/51.jpg)
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
![Page 52: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/52.jpg)
preprocess directives
@if VAR = 'value’ / @endif
@ifdef VAR / @endif
@ifndef VAR / @endif
@include FILE
@exclude / @endexclude
@echo VAR
52Wednesday, October 23, 13
![Page 53: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/53.jpg)
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
![Page 54: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/54.jpg)
grunt.registerTask('dev', [ 'env:dev', 'build']);
grunt.registerTask('dist-build', [ 'env:dist', 'build', 'preprocess', 'artifact']);
54Wednesday, October 23, 13
![Page 55: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/55.jpg)
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
![Page 56: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/56.jpg)
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
![Page 57: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/57.jpg)
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
![Page 58: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/58.jpg)
Continuous Deliveryisn’t a quick change
It requires motivation, persistence,and a different mindset.
But it’s worth it.
58Wednesday, October 23, 13
![Page 59: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/59.jpg)
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
![Page 60: Continuous Delivery for the Web Platform](https://reader036.fdocuments.us/reader036/viewer/2022081400/554bc7ceb4c90530298b56af/html5/thumbnails/60.jpg)
Jarrod Overson
jsoverson.com/githubjsoverson.com/linkedin
jsoverson.comjsoverson.com/google+
jsoverson.com/twitter
@jsoverson
60Wednesday, October 23, 13