Continuous Delivery of HTML5 Applications

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

Transcript of Continuous Delivery of HTML5 Applications

Page 1: Continuous Delivery of HTML5 Applications

CONTINUOUS DELIVERY

CTO, Rangle.io

Yuri Takhteyev

Some rights reserved - Creative Commons 2.0 by-sa

OF HTML 5 APPLICATIONS

Page 2: Continuous Delivery of HTML5 Applications

What’s “Continous Delivery”?

Page 3: Continuous Delivery of HTML5 Applications

• Continuous integration.

• Continuous delivery.

• Continuous deployment.

Continuous What?

Image by xoque

Page 4: Continuous Delivery of HTML5 Applications

• “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

Page 5: Continuous Delivery of HTML5 Applications

• Producing something of value* at frequent intervals.

• Keeping master deployable.

• We’ll talk more about this.

Continuous Delivery

Image by xoque

Page 6: Continuous Delivery of HTML5 Applications

• Actually deploying “deployable” code.

• Can be tricky on the backend, easy for the front end.

Continuous Deployment

Image by xoque

Page 7: Continuous Delivery of HTML5 Applications

O

Image by xoque

ContinuousIntegration

ContinuousDelivery

ContinuousDeployment

Page 8: Continuous Delivery of HTML5 Applications

O

Image by xoque

Scrum

CD

Page 9: Continuous Delivery of HTML5 Applications

Why Should You DoContinous Delivery?

Page 10: Continuous Delivery of HTML5 Applications

• Build what is actually needed.

• Avoid work in progress.

High Level Objectives

Image by xoque

Page 11: Continuous Delivery of HTML5 Applications

Deliver Early for Value and/or Learning

Image by xoque

Lean towards learning

(lean startup)

Lean towards tangible value

(classic scrum)

Page 12: Continuous Delivery of HTML5 Applications

How: Good User Stories

Page 13: Continuous Delivery of HTML5 Applications

• “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

Page 14: Continuous Delivery of HTML5 Applications

• You can’t really do forecast.

• You can make sure your stories can be delivered with an iteration.

Sizing Stories

Image by xoque

Page 15: Continuous Delivery of HTML5 Applications

• 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

Page 16: Continuous Delivery of HTML5 Applications

• 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

Page 17: Continuous Delivery of HTML5 Applications

• Avoid feature-creep during the iteration.

• Have some confidence over what you are building.

Clear Acceptance Criteria

Image by xoque

Page 18: Continuous Delivery of HTML5 Applications

How: Not Getting Stuckon Bugs

Page 19: Continuous Delivery of HTML5 Applications

• 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

Page 20: Continuous Delivery of HTML5 Applications

• 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

Page 21: Continuous Delivery of HTML5 Applications

Image by xoque

“Rangle Flow”

Page 22: Continuous Delivery of HTML5 Applications

• Currently using Heroku’s PR builds.

Build Environments

Image by xoque

• Moving to a Docker-based setup, “the Clusternator”: https://github.com/rangle/the-clusternator

• You want the same environment in staging and production.

Page 23: Continuous Delivery of HTML5 Applications

• Cordwood: https://github.com/rangle/cordwood

Cordova Apps

Page 24: Continuous Delivery of HTML5 Applications

Image by xoque

“Rangle Flow”

Page 25: Continuous Delivery of HTML5 Applications

• Help write better stories!

• Coach developers.

• Debug the process.

What Do the Testers Do All Day Then?

Image by xoque

Page 26: Continuous Delivery of HTML5 Applications

• 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

Page 27: Continuous Delivery of HTML5 Applications

Continuous Deployment

Page 28: Continuous Delivery of HTML5 Applications

• 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

Page 29: Continuous Delivery of HTML5 Applications

THANK YOU!

Yuri Takhteyev

@qaramazov

yuri

CTO, Rangle.io

Slides at http://yto.io/xcd