Continuous Delivery Practices for Front-End Engineers by Sergey N. Bolshchikov
Jul 08, 2015
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