Presented at Web Unleashed on September 16-17, 2015 in Toronto, Canada More info at www.fitc.ca/webu Continuous Delivery of HTML5 Applications with Yuri Takhteyev OVERVIEW Continuous delivery is an approach to building software in which value is added in short cycles and in such a manner that the application can be deployed at any moment. Continuous delivery aligns naturally with Agile methodologies such as Scrum. Achieving true continuous delivery can be challenging, however. I will talk about our experience with moving to continuous delivery at Rangle.io, describing the different technical and organizational solutions that we had to put in place. OBJECTIVE Explain the value of continuous delivery and the concrete steps needed to achieve it. TARGET AUDIENCE Developers, testers, scrum masters / project managers. ASSUMED AUDIENCE KNOWLEDGE Basic understanding of git. FIVE THINGS AUDIENCE MEMBERS WILL LEARN The benefits of continuous delivery How continuous delivery aligns with Scrum The role of continuous integration How to do testing to optimize for continuous delivery How to do continuous deployment

1. CONTINUOUS DELIVERY
CTO, Rangle.io
Yuri Takhteyev
Some rights reserved - Creative Commons 2.0 by-sa
OF HTML 5 APPLICATIONS

2. What’s
“Continous Delivery”?

3. • Continuous integration.
• Continuous delivery.
• Continuous deployment.
Continuous What?
Image by xoque

4. • “Build” multiple days times per day / after every
merge.
• Add unit tests, linting, beautification, etc.
• Linked together with a tools such as Gulp.
• Many solutions. We like CircleCI.
• Why? To keep master “clean” and “working”.
Continuous Integration
Image by xoque

5. • Producing something of value* at frequent intervals.
• Keeping master deployable.
• We’ll talk more about this.
Continuous Delivery
Image by xoque

6. • Actually deploying “deployable” code.
• Can be tricky on the backend, easy for the front end.
Continuous Deployment
Image by xoque

7. Image by xoque
Continuous
Integration
Continuous
Delivery
Continuous
Deployment

8. Image by xoque
Scrum
CD

9. Why Should You Do
Continous Delivery?

10. • Build what is actually needed.
• Avoid work in progress.
High Level Objectives
Image by xoque

11. Deliver Early for Value and/or Learning
Image by xoque
Lean towards
learning
(lean startup)
Lean towards
tangible value
(classic scrum)

12. How: Good User Stories

13. • “As a user I want… so that…”
• Never say “user”.
• Don’t skip the “so that”.
• Defer the “I want”.
• “As a parent traveling with a child I want … so that
my child can travel with me.”
User Stories
Image by xoque

14. • You can’t really do forecast.
• You can make sure your stories can be delivered
with an iteration.
Sizing Stories
Image by xoque

15. • What’s the smallest solution that would bring value?
• Narrow down by user: “as a parent with a child
under 1 year old” vs “as a parent with a child 2-5
years old”.
• Think of incremental refinement.
Downsizing Stories
Image by xoque

16. • If you do a backend story and a front end story,
often neither delivers value by itself.
• Instead, we prefer “full-stack” or “vertical” stories.
Avoid Horizontal Slicing
Image by xoque

17. • Avoid feature-creep during the iteration.
• Have some confidence over what you are building.
Clear Acceptance Criteria
Image by xoque

18. How: Not Getting Stuck
on Bugs

19. • You don’t want to have unfinished work.
• The ultimate test is whether you can ship it this way.
• Bugs in development are a fact of life. Bugs at the
end of the iteration are a problem.
• Debug the process.
Buggy Software = Work in Progress
Image by xoque

20. • Ergo, leaving testing to testers is often problematic.
• Effectively, you end up with a mini-waterfall inside
the iteration.
• We aim for truly continuous delivery, where every
merge is deployable.
• So, how do you approach testing?
• Short answer: testing is everyone’s job.
Deferred Bug-Fixing Costs More
Image by xoque

21. Image by xoque
“Rangle Flow”

22. • Currently using Heroku’s PR builds.
Build Environments
Image by xoque
• Moving to a Docker-based setup, “the Clusternator”: https://github.com/
the-clusternator
• You want the same environment in staging and production.

23. • Cordwood: https://github.com/rangle/
cordwood
Cordova Apps

24. Image by xoque
“Rangle Flow”

25. • Help write better stories!
• Coach developers.
• Debug the process.
What Do the Testers Do All Day Then?
Image by xoque

26. • Can save time doing regression testing and increase
your confidence.
• Can be very expensive to maintain.
• False positives are very common.
• Consider unit tests and REST API tests.
• When we do write E2E tests, we prefer webdriver.io.
• We lean on having developers write those test.
Automated E2E Tests
Image by xoque

27. Continuous Deployment

28. • It’s hard to practice continuous delivery without
good staging support.
• Ideally, you should be deploying to production the
same way.
• The difference is that you need support for rollbacks
and data migration.
PR Environments vs Production
Image by xoque

29. THANK YOU!
Yuri Takhteyev
@qaramazov
yuri
CTO, Rangle.io
Slides at http://yto.io/xcd