Continuous Delivery Practices for Front-End Engineers by Sergey N. Bolshchikov

Continuous Delivery Practices for Front-End Engineers by Sergey N. Bolshchikov

Front-End Engineering Before and After joining Wixby Sergey N. Bolshchikov

Sergey N.BolshchikovDeveloper Advocate @ Wix

7 years agoI wrote code inWaterfall

Development Integration Testing Deployment Release

3 years agoI wrote code inScrum

Sprint 1 Sprint N Testing Deployment Release

Long ReleaseCycle

Inability ToChange

Lost Time toMarket

Now I write code inContinuous Delivery

DevelopmentTesting

IntegrationDeployment

ReleaseDevelopmentTesting

IntegrationDeployment

DevelopmentTesting

IntegrationDeployment

DevelopmentTesting

IntegrationDeployment

We deployEvery day!

50-100 deploys/day

In our DevelopersWe trust

Continuous Delivery isA mindset

A journeyFrom developmentTo production

The journey Is betterWith automation

Stage 1Reuse efficiently & Bootstrap fast

Stage 1Reuse efficiently & Bootstrap fast

NPM & Bower

● Node dependencies

● Browser dependencies

● Private registries

Stage 1Reuse efficiently & Bootstrap fast

Yeoman

● Project skeleton generator

● Project entities generator

● wix-angular-generator

Stage 2Test Driven Development

We can’t check everything manually.It is expensive.

Stage 2Test Driven Development

Better quality code.

Stage 2Test Driven Development

Develop faster.

Stage 2Test Driven Development

Run tests first, see them fail.Write code.Run tests, see them passed.And again.

Stage 2Test Driven Development

All production code is covered with tests.

Stage 2Test Driven Development

No QA person for the server side.

Stage 2Test Driven Development

Tests give you confidence.

Karma

● Automatic Test Runner

● Unit tests with Jasmine/Mocha

● Browser integration

Stage 2Test Driven Development

Stage 2Test Driven Development

Angular

● Build with tests in mind

● Dependency Injection

● Great ecosystem

Stage 2Test Driven Development

Protractor

● Integration and e2e tests

● Wrapper over selenium & webdriver

● Angular-friendly

Stage 3Integrate Continuously

Stage 3Integrate Continuously

Stage 3Integrate Continuously

Stage 3Integrate Continuously

Stage 3Integrate Continuously

Stage 4Deploy

Deploy often.

Risk = # of deployments × Pgoes wrong × $$wrong

Stage 4Risk management

Risk = × ×

Deploys % $

Stage 4Waterfall Risk

Risk = × ×

Deploys % $

Stage 4Waterfall Risk

1280 = 20 × 0.8 × 80

Risk = × ×

Deploys % $

Stage 4Continuous Delivery Risk

Risk = × ×

Deploys % $

Stage 4Continuous Delivery Risk

320 = 80 × 0.2 × 20

Risk = × ×

Deploys % $

Stage 4Continuous Delivery Risk

320 = 80 × 0.2 × 20

4 timesless risk

Stage 4Deploy

Conscious decision to click a button to deploy.

Projects Versions

Monitoring

Stage 5Monitor Everything

Stage 5Monitor Everything

Business Intelligence

● Analytics tools (user)

● Report every action

● Alerts

Stage 5Monitor Everything

New Relic

● Analytics tools (server & browser)

● Tracing errors

● Alerts

Browser loading performance

Pages view per minute

JavaScript Errors

Stage 6Feature Toggles

Developing feature might take time.

Stage 6Feature Toggles

If else statement in your code.

Stage 6Feature Toggles

Commit unfinished code into production.

Stage 6Feature Toggles

Allows code rewrites and refactoring.

Stage 6Feature Toggles

Feature Toggle override.

Stage 6Feature Toggles

Test features internally.

Stage 7A/B Tests

Test features internally.

Stage 7A/B Tests

A/B tests are almost like Feature Toggles.

Stage 7A/B Tests

Divide and conquer measure

Stage 7A/B Tests

Gradual release

Language

Internally → Country → 50/50 → All

New users

Stage 7A/B Tests

Must provide consistent user behavior

Stage 7A/B Tests

http://github.com/wix/petri

1. Scaffolding2. TDD3. Deploy4. Monitor5. Experiment

Deploy From 4 times/yearTo 50 times/day

Culture ofContinuous Delivery

Thanks!

http://bolshchikov.nethttp://blog.bolshchikov.nethttp://il.linkedin.com/in/bolshchikovhttp://github.com/bolshchikov